Source of: p5.js Interactive Particle Flow Field, by Qwen3.7 Max
91 lines, 8 of them comments ยท 1,230 tokens, written in 16 seconds for $0.0055
1 let particles = [];
2 const NUM_PARTICLES = 800;
3 let noiseScale = 0.005;
4 let hueOffset = 0;
5
6 function setup() {
7 createCanvas(windowWidth, windowHeight);
8 colorMode(HSB, 360, 100, 100, 100);
9 background(0);
10
11 for (let i = 0; i < NUM_PARTICLES; i++) {
12 particles.push({
13 x: random(width),
14 y: random(height),
15 speed: random(0.5, 2.5),
16 life: random(100, 300),
17 maxLife: 300,
18 size: random(1, 3)
19 });
20 }
21 }
22
23 function draw() {
24 // Semi-transparent background for trail effect
25 noStroke();
26 fill(0, 0, 0, 3);
27 rect(0, 0, width, height);
28
29 hueOffset += 0.2;
30
31 for (let i = 0; i < particles.length; i++) {
32 let p = particles[i];
33
34 // Calculate angle from noise field
35 let angle = noise(p.x * noiseScale, p.y * noiseScale, frameCount * 0.003) * TWO_PI * 2;
36
37 // Mouse influence
38 let dx = mouseX - p.x;
39 let dy = mouseY - p.y;
40 let distToMouse = sqrt(dx * dx + dy * dy);
41 let mouseInfluence = map(distToMouse, 0, 300, 0.8, 0);
42 mouseInfluence = constrain(mouseInfluence, 0, 0.8);
43
44 let mouseAngle = atan2(dy, dx);
45 angle = lerp(angle, mouseAngle, mouseInfluence);
46
47 // Update position
48 p.x += cos(angle) * p.speed;
49 p.y += sin(angle) * p.speed;
50 p.life--;
51
52 // Calculate color
53 let hue = (hueOffset + noise(p.x * 0.003, p.y * 0.003) * 120) % 360;
54 let alpha = map(p.life, 0, 100, 0, 80);
55 alpha = constrain(alpha, 0, 80);
56
57 // Draw particle
58 noStroke();
59 fill(hue, 80, 95, alpha);
60 circle(p.x, p.y, p.size);
61
62 // Reset particle if out of bounds or life ended
63 if (p.x < 0 || p.x > width || p.y < 0 || p.y > height || p.life <= 0) {
64 p.x = random(width);
65 p.y = random(height);
66 p.life = p.maxLife;
67 p.speed = random(0.5, 2.5);
68 }
69 }
70
71 // Draw mouse glow
72 if (mouseIsPressed) {
73 for (let r = 80; r > 0; r -= 5) {
74 fill((hueOffset + 180) % 360, 60, 100, map(r, 0, 80, 15, 0));
75 circle(mouseX, mouseY, r);
76 }
77 }
78 }
79
80 function mousePressed() {
81 noiseScale = 0.01;
82 }
83
84 function mouseReleased() {
85 noiseScale = 0.005;
86 }
87
88 function windowResized() {
89 resizeCanvas(windowWidth, windowHeight);
90 background(0);
91 }