Source of: Colorful Flowing Particles, by Claude Opus 4.1
75 lines, 8 of them comments ยท 744 tokens, written in 40 seconds for $0.063
1 let particles = [];
2 let numParticles = 100;
3
4 function setup() {
5 createCanvas(windowWidth, windowHeight);
6 colorMode(HSB, 360, 100, 100, 100);
7
8 // Initialize particles
9 for (let i = 0; i < numParticles; i++) {
10 particles.push(new Particle());
11 }
12 }
13
14 function draw() {
15 // Semi-transparent background for trail effect
16 background(0, 0, 5, 10);
17
18 // Update and display particles
19 for (let particle of particles) {
20 particle.update();
21 particle.display();
22 }
23 }
24
25 class Particle {
26 constructor() {
27 this.x = random(width);
28 this.y = random(height);
29 this.size = random(2, 8);
30 this.hue = random(360);
31 this.noiseOffsetX = random(1000);
32 this.noiseOffsetY = random(1000);
33 this.speed = random(0.001, 0.003);
34 }
35
36 update() {
37 // Use Perlin noise for smooth movement
38 let angle = noise(this.noiseOffsetX, this.noiseOffsetY) * TWO_PI * 2;
39 this.x += cos(angle) * 2;
40 this.y += sin(angle) * 2;
41
42 // Update noise offsets
43 this.noiseOffsetX += this.speed;
44 this.noiseOffsetY += this.speed;
45
46 // Wrap around edges
47 if (this.x < 0) this.x = width;
48 if (this.x > width) this.x = 0;
49 if (this.y < 0) this.y = height;
50 if (this.y > height) this.y = 0;
51
52 // Slowly shift hue
53 this.hue = (this.hue + 0.5) % 360;
54 }
55
56 display() {
57 noStroke();
58 fill(this.hue, 80, 100, 50);
59 ellipse(this.x, this.y, this.size);
60 }
61 }
62
63 function windowResized() {
64 resizeCanvas(windowWidth, windowHeight);
65 }
66
67 // Add particles on mouse click
68 function mousePressed() {
69 for (let i = 0; i < 5; i++) {
70 let p = new Particle();
71 p.x = mouseX + random(-20, 20);
72 p.y = mouseY + random(-20, 20);
73 particles.push(p);
74 }
75 }