81 lines, 19 of them comments · 1,969 tokens, written in 12 seconds for $0.0018

 1  // ==========================================
 2  // p5.js Interactive Particle System
 3  // ==========================================
 4  
 5  let particles = [];
 6  
 7  function setup() {
 8    createCanvas(windowWidth, windowHeight);
 9    colorMode(HSB, 360, 100, 100, 100); // Hue, Saturation, Brightness, Alpha
10    background(0);
11    textFont('Courier');
12  }
13  
14  function draw() {
15    // Semi-transparent background creates a trail/fade effect
16    background(0, 0, 0, 15);
17  
18    // Update and draw all particles
19    for (let i = particles.length - 1; i >= 0; i--) {
20      particles[i].update();
21      particles[i].display();
22      if (particles[i].isDead()) {
23        particles.splice(i, 1); // Remove dead particles
24      }
25    }
26  
27    // Optional: show particle count
28    fill(255);
29    noStroke();
30    text(`Particles: ${particles.length}`, 15, 25);
31  }
32  
33  function mousePressed() {
34    // Spawn a burst of particles at mouse location
35    for (let i = 0; i < 15; i++) {
36      particles.push(new Particle(mouseX, mouseY));
37    }
38  }
39  
40  function windowResized() {
41    resizeCanvas(windowWidth, windowHeight);
42    background(0);
43  }
44  
45  // ==========================================
46  // Particle Class
47  // ==========================================
48  class Particle {
49    constructor(x, y) {
50      this.pos = createVector(x, y);
51      // Random direction and speed
52      this.vel = p5.Vector.random2D().mult(random(1, 4));
53      this.life = 255; // Alpha transparency
54      this.hue = random(360);
55      this.size = random(5, 12);
56    }
57  
58    update() {
59      // Move particle
60      this.pos.add(this.vel);
61      // Slowly reduce size and fade out
62      this.life -= random(2, 5);
63      this.size *= 0.98;
64    }
65  
66    display() {
67      noStroke();
68      fill(this.hue, 85, 100, constrain(this.life, 0, 255));
69      ellipse(this.pos.x, this.pos.y, this.size, this.size);
70    }
71  
72    isDead() {
73      return this.life <= 0 || this.size < 0.5;
74    }
75  }
76  
77  // ==========================================
78  // Instructions (shown once in console)
79  // ==========================================
80  console.log('🎨 Click anywhere to spawn particles! Move mouse to change position.');
81