This page lists files in the current directory. You can view content, get download/execute commands for Wget, Curl, or PowerShell, or filter the list using wildcards (e.g., `*.sh`).
wget 'https://sme10.lists2.roe3.org/mdrone/kaleidoscope/index.html'<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Kaleidoscope</title>
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
wget 'https://sme10.lists2.roe3.org/mdrone/kaleidoscope/script.js'var doc = document,
win = window,
body = doc.body;
var ww = win.innerWidth,
wh = win.innerHeight;
var c = doc.createElement('canvas'),
ctx = c.getContext('2d');
var half_PI = Math.PI / 2,
two_PI = Math.PI * 2,
ease = 0.01;
var k = {
offsetRotation: 0,
offsetScale: 0.8,
offsetX: 0,
offsetY: 0,
radius: 1100,
slices: 24,
zoom: 1.5
};
body.appendChild(c);
c.width = k.radius * 2;
c.height = k.radius * 2;
var img = new Image();
img.crossOrigin = "Anonymous"; // This allows the image to be used with canvas (necessary for some external images)
img.onload = function() {
var fill = ctx.createPattern(img, 'repeat');
var scale, step, cx;
scale = k.zoom * (k.radius / Math.min(img.width, img.height));
step = two_PI / k.slices;
cx = img.width / 2;
function draw() {
ctx.clearRect(0, 0, c.width, c.height); // Clear canvas before drawing each frame
ctx.fillStyle = fill;
for (var i = 0; i <= k.slices; i++) {
ctx.save();
ctx.translate(k.radius, k.radius);
ctx.rotate(i * step);
ctx.beginPath();
ctx.moveTo(-0.5, -0.5);
ctx.arc(0, 0, k.radius, step * -0.51, step * 0.51);
ctx.rotate(half_PI);
ctx.scale(scale, scale);
ctx.scale([-1, 1][i % 2], 1);
ctx.translate(k.offsetX - cx, k.offsetY);
ctx.rotate(k.offsetRotation);
ctx.scale(k.offsetScale, k.offsetScale);
ctx.fill();
ctx.restore();
}
}
var tx = k.offsetX;
var ty = k.offsetY;
var tr = k.offsetRotation;
win.addEventListener('mousemove', mousemove, false);
function mousemove(e) {
var cx, cy, dx, dy, hx, hy;
cx = ww / 2;
cy = wh / 2;
dx = e.pageX / ww;
dy = e.pageY / wh;
hx = dx - 0.1;
hy = dy - 0.1;
tx = hx * k.radius * -0.8;
ty = hy * k.radius * 0.8;
}
c.style.position = 'fixed';
c.style.marginLeft = -k.radius + 'px';
c.style.marginTop = -k.radius + 'px';
c.style.left = '50%';
c.style.top = '50%';
function update() {
tr -= 0.002;
k.offsetX += (tx - k.offsetX) * ease;
k.offsetY += (ty - k.offsetY) * ease;
k.offsetRotation += (tr - k.offsetRotation) * ease;
draw();
requestAnimationFrame(update);
}
update();
};
//Paste your image here:
img.src = 'https://images.unsplash.com/photo-1473951574080-01fe45ec8643';
// Create the button element
var button = doc.createElement('button');
button.className = 'btn';
button.textContent = 'Back';
// Style the button
button.style.position = 'fixed';
button.style.bottom = '20px'; // Adjust as needed
button.style.right = '20px'; // Adjust as needed
// Append button to the body
body.appendChild(button);
// CSS for the button
var buttonStyle = `
.btn {
width: 100px; /* Adjust width as needed */
height: 40px;
background: linear-gradient(to right, #1E2022, #52616B);
box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
font-size: 16px;
color: #F0F5F9;
font-weight: 500;
cursor: pointer;
border-radius: 5px;
border: none;
outline: none;
}
`;
// Append the style to the head of the document
var styleElement = doc.createElement('style');
styleElement.innerHTML = buttonStyle;
doc.head.appendChild(styleElement);
// Event listener for the button
button.addEventListener('click', function() {
// Handle button click action here, for example, go back in history
window.history.back();
});
// Create a container for the menu
var menuContainer = doc.createElement('div');
menuContainer.style.position = 'fixed';
menuContainer.style.top = '20px'; // Adjust top position as needed
menuContainer.style.left = '20px';
menuContainer.style.width = '200px'; // Adjust width as needed
menuContainer.style.height = '300px';
menuContainer.style.background = '#f0f0f0';
menuContainer.style.padding = '20px';
menuContainer.style.border = 'none';
menuContainer.style.borderRadius = '5px';
menuContainer.style.boxShadow = '0 2px 10px rgba(0, 0, 0, .4)';
menuContainer.style.zIndex = '1000'; // Ensure menu is above other content
menuContainer.style.display = 'flex'; // Use flexbox for layout
menuContainer.style.flexDirection = 'column'; // Stack items vertically
body.appendChild(menuContainer);
// Function to update the kaleidoscope based on current parameters
function updateKaleidoscope() {
// Update image URL
img.src = imageUrlInput.value;
// Update number of slices
k.slices = parseInt(slicesInput.value);
// Update speed of change (tr)
k.offsetRotationSpeed = parseFloat(speedInput.value);
// Recalculate scale based on new image dimensions
scale = k.zoom * (k.radius / Math.min(img.width, img.height));
cx = img.width / 2;
}
// Image URL input
var imageUrlLabel = doc.createElement('label');
imageUrlLabel.textContent = 'Image URL:';
menuContainer.appendChild(imageUrlLabel);
var imageUrlInput = doc.createElement('input');
imageUrlInput.type = 'text';
imageUrlInput.value = img.src; // Initial value from the loaded image
imageUrlInput.style.width = '100%';
menuContainer.appendChild(imageUrlInput);
// Number of slices input
var slicesLabel = doc.createElement('label');
slicesLabel.textContent = 'Number of Slices:';
menuContainer.appendChild(slicesLabel);
var slicesInput = doc.createElement('input');
slicesInput.type = 'number';
slicesInput.value = k.slices;
slicesInput.style.width = '100px';
menuContainer.appendChild(slicesInput);
// Speed of change input
var speedLabel = doc.createElement('label');
speedLabel.textContent = 'Speed:';
menuContainer.appendChild(speedLabel);
var speedInput = doc.createElement('input');
speedInput.type = 'number';
speedInput.value = 0.002; // Initial value for speed
speedInput.step = 0.001; // Adjust step as needed
speedInput.style.width = '100px';
menuContainer.appendChild(speedInput);
// Submit button to apply changes
var submitButton = doc.createElement('button');
submitButton.textContent = 'Apply Changes';
submitButton.style.marginTop = '10px';
submitButton.style.width = '100%';
submitButton.style.height = '40px';
submitButton.style.background = 'linear-gradient(to right, #1E2022, #52616B)';
submitButton.style.color = '#F0F5F9';
submitButton.style.fontWeight = '500';
submitButton.style.cursor = 'pointer';
submitButton.style.border = 'none';
submitButton.style.borderRadius = '5px';
submitButton.style.outline = 'none';
menuContainer.appendChild(submitButton);
// CSS for the menu container
var menuContainerStyle = `
.menu-container {
position: fixed;
top: 20px;
left: 20px;
width: 200px;
height: 300px;
background: #f0f0f0;
padding: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
z-index: 1000;
display: flex;
flex-direction: column;
border: 2px solid transparent; /* Transparent border initially */
}
.menu-container:hover {
border-color: #52616B; /* Border color on hover */
}
`;
// Append the style to the head of the document
var styleElement = doc.createElement('style');
styleElement.innerHTML = menuContainerStyle;
doc.head.appendChild(styleElement);
// Event listener for submit button
submitButton.addEventListener('click', function() {
updateKaleidoscope();
});