Source of: Flow Field Drift, by Claude Fable 5
78 lines, 1 of them comments ยท 1,037 tokens, written in 12 seconds for $0.055
1 let particles = [];
2 const NUM = 1200;
3 let zOff = 0;
4 let hueBase;
5
6 function setup() {
7 createCanvas(windowWidth, windowHeight);
8 colorMode(HSB, 360, 100, 100, 100);
9 background(10);
10 hueBase = random(360);
11 for (let i = 0; i < NUM; i++) {
12 particles.push(makeParticle());
13 }
14 }
15
16 function makeParticle() {
17 return {
18 pos: createVector(random(width), random(height)),
19 prev: null,
20 speed: random(0.5, 2.5),
21 hueShift: random(-30, 30),
22 life: random(100, 400)
23 };
24 }
25
26 function draw() {
27 // translucent fade for trails
28 noStroke();
29 fill(10, 10, 4, 4);
30 rect(0, 0, width, height);
31
32 const scale = 0.0022;
33 for (let p of particles) {
34 const n = noise(p.pos.x * scale, p.pos.y * scale, zOff);
35 const angle = n * TWO_PI * 4;
36 const vx = cos(angle) * p.speed;
37 const vy = sin(angle) * p.speed;
38
39 p.prev = p.pos.copy();
40 p.pos.x += vx;
41 p.pos.y += vy;
42 p.life--;
43
44 const h = (hueBase + n * 120 + p.hueShift + 360) % 360;
45 stroke(h, 70, 95, 25);
46 strokeWeight(1.2);
47 line(p.prev.x, p.prev.y, p.pos.x, p.pos.y);
48
49 if (
50 p.life <= 0 ||
51 p.pos.x < -10 || p.pos.x > width + 10 ||
52 p.pos.y < -10 || p.pos.y > height + 10
53 ) {
54 const np = makeParticle();
55 p.pos = np.pos;
56 p.speed = np.speed;
57 p.hueShift = np.hueShift;
58 p.life = np.life;
59 }
60 }
61
62 zOff += 0.0015;
63 }
64
65 function mousePressed() {
66 noiseSeed(floor(random(100000)));
67 hueBase = random(360);
68 background(10);
69 particles = [];
70 for (let i = 0; i < NUM; i++) {
71 particles.push(makeParticle());
72 }
73 }
74
75 function windowResized() {
76 resizeCanvas(windowWidth, windowHeight);
77 background(10);
78 }