63 lines, 17 of them comments · 588 tokens, written in 26 seconds for $0.0002

 1  let x, y; // Ball position
 2  let xSpeed, ySpeed; // Ball velocity
 3  let diameter = 40; // Ball size
 4  
 5  function setup() {
 6    // Create a canvas that fills the window
 7    createCanvas(windowWidth, windowHeight);
 8    
 9    // Start the ball in the center
10    x = width / 2;
11    y = height / 2;
12    
13    // Give it a random starting velocity
14    xSpeed = random(2, 5);
15    ySpeed = random(2, 5);
16  }
17  
18  function draw() {
19    // Semi-transparent background creates motion trail effect
20    background(20, 20, 35, 25);
21    
22    // Update ball position
23    x += xSpeed;
24    y += ySpeed;
25    
26    // Bounce off the edges
27    if (x < diameter/2 || x > width - diameter/2) {
28      xSpeed *= -1;
29    }
30    if (y < diameter/2 || y > height - diameter/2) {
31      ySpeed *= -1;
32    }
33    
34    // Draw the ball with gradient effect
35    drawBall(x, y, diameter);
36    
37    // Display instructions
38    fill(255);
39    noStroke();
40    textSize(16);
41    text('Bouncing Ball - Click to change color', 20, 30);
42  }
43  
44  function drawBall(xPos, yPos, size) {
45    // Create a radial gradient-like effect
46    for (let i = size; i > 0; i -= 2) {
47      let hue = map(i, 0, size, 200, 350); // Color shift
48      fill(hue % 255, 150, 255, 100);
49      ellipse(xPos, yPos, i);
50    }
51  }
52  
53  function mousePressed() {
54    // Change ball size and speed on click
55    diameter = random(20, 80);
56    xSpeed = random(2, 8) * Math.sign(xSpeed); // Keep direction
57    ySpeed = random(2, 8) * Math.sign(ySpeed); // Keep direction
58  }
59  
60  function windowResized() {
61    // Adjust canvas when window is resized
62    resizeCanvas(windowWidth, windowHeight);
63  }