56 lines, 24 of them comments · 2,759 tokens, written in 140 seconds for $0.0060

 1  // Interactive Circular Grid with Mouse Interaction
 2  // Move the mouse to see the colors and sizes change
 3  // Press any mouse button to switch color scheme
 4  
 5  function setup() {
 6    createCanvas(600, 600); // Fixed canvas size
 7    frameRate(30); // Limit frame updates
 8    colorMode(HSB, 360, 100, 100); // Use HSB color mode
 9    noStroke(); // Remove stroke from circles
10  }
11  
12  function draw() {
13    // Clear background based on mouse state
14    if (mouseIsPressed) {
15      background(10, 80, 20); // Dark red background when pressed
16    } else {
17      background(220, 80, 10); // Dark blue background when released
18    }
19  
20    const gridSpacing = 30;
21    const baseRadius = 8;
22    const maxInteractiveRadius = 150; // Max distance for radius scaling
23    const maxDist = dist(0, 0, width, height); // Diagonal distance
24  
25    // Iterate through grid points
26    for (let x = gridSpacing / 2; x < width; x += gridSpacing) {
27      for (let y = gridSpacing / 2; y < height; y += gridSpacing) {
28        
29        // Calculate distance from mouse to current grid point
30        const d = dist(mouseX, mouseY, x, y);
31        
32        /* Calculate radius scaling factor:
33            - Clamps d to maxInteractiveRadius so distant circles aren't too small
34            - Maps d in range [0, maxInteractiveRadius] to scale [2, 1]
35            - Circles close to mouse will scale up to 200%, distant circles stay at 100%
36        */
37        const constrainedD = constrain(d, 0, maxInteractiveRadius);
38        const scaleFactor = map(constrainedD, 0, maxInteractiveRadius, 2, 1);
39        const radius = baseRadius * scaleFactor;
40  
41        // Set color based on interaction
42        if (mouseIsPressed) {
43          // Pressed mode: Red (0°) to Yellow (60°) gradient based on distance
44          const hue = map(d, 0, maxDist, 0, 60);
45          fill(hue, 80, 80);
46        } else {
47          // Default mode: Cyan (180°) to Blue (240°) gradient based on distance
48          const hue = map(d, 0, maxDist, 180, 240);
49          fill(hue, 80, 80);
50        }
51  
52        // Draw circle with calculated properties
53        circle(x, y, radius * 2); // p5 circle uses diameter, so multiply radius by 2
54      }
55    }
56  }