77 lines, 20 of them comments · 6,290 tokens, written in 339 seconds for $0.014

 1  // Interactive particle system with trails
 2  // Click to add more particles
 3  
 4  let particles = [];
 5  const numParticles = 50;
 6  
 7  // Initialize particle system
 8  function setup() {
 9    createCanvas(800, 600);
10    // Start with a dark purple background
11    background(25, 10, 35);
12    
13    // Create initial particles
14    for (let i = 0; i < numParticles; i++) {
15      particles.push(new Particle());
16    }
17  }
18  
19  function draw() {
20    // Semi-transparent overlay creates trail effect
21    fill(25, 10, 35, 10);
22    noStroke();
23    rect(0, 0, width, height);
24    
25    // Update and display all particles
26    for (let particle of particles) {
27      particle.update();
28      particle.display();
29    }
30  }
31  
32  // Add new particle at mouse position on click
33  function mousePressed() {
34    particles.push(new Particle(mouseX, mouseY));
35  }
36  
37  // Particle class implementation
38  class Particle {
39    constructor(x, y) {
40      // If no coordinates provided, place randomly
41      this.pos = createVector(x || random(width), y || random(height));
42      
43      // Initial velocity
44      this.vel = createVector(random(-2, 2), random(-2, 2));
45      // Random size
46      this.size = random(5, 15);
47      // Random color using HSB for vibrant colors
48      colorMode(HSB, 360, 100, 100, 100);
49      this.color = color(random(360), 80, 90, 80);
50      colorMode(RGB);  // Revert to RGB for other drawing
51    }
52  
53    update() {
54      // Add velocity to position
55      this.pos.add(this.vel);
56      
57      // Bounce off edges
58      if (this.pos.x < 0 || this.pos.x > width) this.vel.x *= -1;
59      if (this.pos.y < 0 || this.pos.y > height) this.vel.y *= -1;
60      
61      // Add small random acceleration for natural movement
62      this.vel.add(p5.Vector.random2D().mult(0.1));
63      // Limit maximum velocity
64      this.vel.limit(3);
65    }
66  
67    display() {
68      fill(this.color);
69      noStroke();
70      // Draw particle with slight glow
71      drawingContext.shadowBlur = 15;
72      drawingContext.shadowColor = this.color;
73      ellipse(this.pos.x, this.pos.y, this.size);
74      // Reset shadow properties after drawing
75      drawingContext.shadowBlur = 0;
76    }
77  }