Spaces:
Sleeping
Sleeping
File size: 6,316 Bytes
ce68975 d7081cd ce68975 cc49c95 ce68975 55cdcd7 ce68975 55cdcd7 cc49c95 ce68975 55cdcd7 ce68975 55cdcd7 ce68975 55cdcd7 ce68975 cc49c95 ce68975 55cdcd7 1813729 55cdcd7 ce68975 55cdcd7 ce68975 55cdcd7 cc49c95 b04fe02 55cdcd7 d7081cd 55cdcd7 6701385 8dd2299 b04fe02 6701385 ce68975 55cdcd7 5a82009 cc49c95 55cdcd7 8dd2299 3e79ae9 8dd2299 55cdcd7 ce68975 55cdcd7 fc4d829 3e79ae9 55cdcd7 b04fe02 ce68975 55cdcd7 ce68975 cc49c95 ce68975 cc49c95 55cdcd7 ce68975 55cdcd7 cc49c95 b04fe02 cc49c95 ce68975 cc49c95 ce68975 cc49c95 b04fe02 ce68975 cc49c95 ce68975 cc49c95 ce68975 03bc257 b04fe02 cc49c95 fc4d829 b04fe02 ce68975 55cdcd7 fc4d829 03bc257 b04fe02 ce68975 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Randomizer</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #add8e6; /* Light blue background */
}
#canvas-container {
position: relative;
width: 100%;
height: 100%;
}
#drawing-canvas {
width: 100%;
height: 100%;
z-index: 10;
}
#text-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
pointer-events: none;
z-index: 20; /* Ensure text is above the canvas */
}
</style>
</head>
<body>
<div id="canvas-container">
<canvas id="drawing-canvas"></canvas>
<div id="text-container">
<h1>Randomizer</h1>
<p id="status-text">put your finger to decide</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById('drawing-canvas');
const ctx = canvas.getContext('2d');
let circles = [];
let timer = null;
let animationId = null;
let winnerDecided = false;
let pulseScale = 1.0;
let pulseDirection = 0.05;
// Set canvas dimensions to full window size
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
draw(); // Redraw the canvas after resizing
}
function resetTimer(touches) {
clearTimeout(timer);
if (touches >= 1) {
timer = setTimeout(decideWinner, 4000);
}
}
function decideWinner() {
if (circles.length === 0) return;
const winnerIndex = Math.floor(Math.random() * circles.length);
const winnerCircle = circles[winnerIndex];
// Clear all circles
circles = [winnerCircle];
winnerCircle.color = '#228B22';
winnerDecided = true;
}
function draw() {
// Clear the canvas and fill with background color
ctx.fillStyle = '#add8e6';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw all circles
circles.forEach(circle => {
ctx.beginPath();
ctx.arc(circle.x, circle.y, 60, 0, Math.PI * 2); // Radius of 60
ctx.fillStyle = circle.color || '#fff';
ctx.fill();
ctx.closePath();
// Draw pulsing glow effect around the winning circle
if (winnerDecided && circle.color === '#228B22') {
ctx.beginPath();
ctx.arc(circle.x, circle.y, 60 * pulseScale, 0, Math.PI * 2);
const gradient = ctx.createRadialGradient(circle.x, circle.y, 60, circle.x, circle.y, 60 * pulseScale);
gradient.addColorStop(0, 'rgba(34, 139, 34, 0.5)');
gradient.addColorStop(1, 'rgba(34, 139, 34, 0)');
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
// Update pulse scale for animation
pulseScale += pulseDirection;
if (pulseScale > 1.5 || pulseScale < 1.0) {
pulseDirection *= -1;
}
}
});
animationId = requestAnimationFrame(draw);
}
function updateCircles(touches) {
if (winnerDecided) return;
// Clear existing circles
circles = [];
// Add circles for current touches
for (let i = 0; i < touches.length; i++) {
const touch = touches[i];
circles.push({ id: touch.identifier, x: touch.clientX, y: touch.clientY, color: '#fff' });
}
}
function removeCircle(id) {
circles = circles.filter(c => c.id !== id);
if (circles.length === 0 && winnerDecided) {
winnerDecided = false;
pulseScale = 1.0; // Reset pulse scale
}
}
canvas.addEventListener('touchstart', (event) => {
if (winnerDecided) {
event.preventDefault();
return;
}
const touches = event.touches;
updateCircles(touches);
resetTimer(touches.length);
});
canvas.addEventListener('touchmove', (event) => {
if (winnerDecided) {
event.preventDefault();
return;
}
const touches = event.touches;
updateCircles(touches);
});
canvas.addEventListener('touchend', (event) => {
const touches = event.touches;
if (touches.length == 0) {
winnerDecided = false;
pulseScale = 1.0; // Reset pulse scale
}
if (winnerDecided) {
event.preventDefault();
return;
}
updateCircles(touches);
resetTimer(touches.length);
});
window.addEventListener('resize', resizeCanvas);
setTimeout(() => {
resizeCanvas();
}, 100);
});
</script>
</body>
</html>
|