Source of: Interactive Grid Explosion, by DeepSeek R1 0528
66 lines, 18 of them comments ยท 1,033 tokens, written in 28 seconds for $0.0022
1 let gridSize = 30; // Spacing between circles
2 let circleBase = 15; // Base circle size
3 let exploding = false; // Explosion state
4 let explodeStartTime = 0; // When explosion started
5 const explodeDuration = 500; // Explosion duration in milliseconds
6
7 function setup() {
8 createCanvas(600, 400);
9 colorMode(HSB, 360, 100, 100, 1); // Use HSB color mode
10 noStroke();
11 }
12
13 function draw() {
14 // Animate background gradient
15 let hue = (frameCount * 0.5) % 360;
16 background(hue, 40, 100);
17
18 // Calculate explosion progress (0 to 1)
19 let explosionProgress = 0;
20 if (exploding) {
21 explosionProgress = min(1, (millis() - explodeStartTime) / explodeDuration);
22 if (explosionProgress === 1) {
23 exploding = false; // End explosion
24 }
25 }
26
27 // Draw grid of circles
28 for (let x = gridSize; x < width; x += gridSize) {
29 for (let y = gridSize; y < height; y += gridSize) {
30 // Calculate distance from mouse
31 let d = dist(x, y, mouseX, mouseY);
32
33 // Calculate explosion displacement
34 let displacement = 0;
35 if (exploding) {
36 // Calculate direction away from mouse
37 let angle = atan2(y - mouseY, x - mouseX);
38 // Scale displacement by explosion progress and inverse of distance
39 displacement = explosionProgress * 100 * (1 - min(1, d/200));
40 x += displacement * cos(angle);
41 y += displacement * sin(angle);
42 }
43
44 // Circle size changes with mouse distance
45 let size = circleBase * (0.5 + 100 / (d + 100));
46
47 // Circle color based on position and time
48 let hue = (x * 0.5 + y * 0.5 + frameCount) % 360;
49 fill(hue, 80, 90);
50
51 // Draw circle
52 ellipse(x, y, size);
53
54 // Reset position if explosion was applied
55 if (exploding) {
56 x -= displacement * cos(angle);
57 y -= displacement * sin(angle);
58 }
59 }
60 }
61 }
62
63 function mousePressed() {
64 exploding = true;
65 explodeStartTime = millis();
66 }