/* ============================================================ CURL BLOOM A flow-field ink study. ~1300 motes drift through a two-octave Perlin field, painting additive light into a persistent buffer that slowly decays toward the palette's ground colour. Composited with a bloom pass, grain, vignette. ============================================================ */ const PALETTES = [ { name: 'bioluminescence', bg: '#060812', stops: ['#00e5ff', '#3dffb0', '#b06cff', '#ff5ec8'] }, { name: 'ember tide', bg: '#120608', stops: ['#ff3b1f', '#ff9c1a', '#ffe14d', '#ff2f6e'] }, { name: 'verdigris', bg: '#04100f', stops: ['#38e0a8', '#2fd8e8', '#a9e86b', '#3aa8ff'] }, { name: 'ultraviolet', bg: '#08061a', stops: ['#6a3cff', '#c43cff', '#2f7dff', '#ff4fd8'] }, { name: 'bone & gold', bg: '#0d0b09', stops: ['#ffd27a', '#ffb15c', '#fff6e8', '#ff7a45'] } ]; const NUM_MOTES = 1300; const LUT_SIZE = 96; let trail, glow, grainBuf, vignetteBuf; let motes = []; let waves = []; let sparkles = []; let LUT = []; let BG = [0, 0, 0]; let palIndex = 0; let t = 0; let flash = 0; let uiAlpha = 255; let uiTimer = 0; let pointer = { x: -999, y: -999, px: -999, py: -999, vx: 0, vy: 0, inside: false }; /* ---------------------------------------------------------- */ function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(1); colorMode(RGB, 255, 255, 255, 255); noiseSeed(floor(random(999999))); buildBuffers(); loadPalette(0); for (let i = 0; i < NUM_MOTES; i++) motes.push(new Mote()); for (let i = 0; i < 70; i++) { sparkles.push({ x: random(width), y: random(height), r: random(0.6, 1.7), ph: random(TAU), sp: random(0.01, 0.035) }); } trail.background(BG[0], BG[1], BG[2]); background(BG[0], BG[1], BG[2]); } function buildBuffers() { trail = createGraphics(width, height); trail.pixelDensity(1); trail.colorMode(RGB, 255, 255, 255, 255); glow = createGraphics(max(1, ceil(width / 2)), max(1, ceil(height / 2))); glow.pixelDensity(1); // Static film grain, drawn jittered each frame. grainBuf = createGraphics(width + 24, height + 24); grainBuf.pixelDensity(1); grainBuf.loadPixels(); for (let i = 0; i < grainBuf.pixels.length; i += 4) { const v = random(84, 172); grainBuf.pixels[i] = v; grainBuf.pixels[i + 1] = v; grainBuf.pixels[i + 2] = v; grainBuf.pixels[i + 3] = 255; } grainBuf.updatePixels(); // Radial vignette. vignetteBuf = createGraphics(width, height); vignetteBuf.pixelDensity(1); const c = vignetteBuf.drawingContext; const g = c.createRadialGradient( width / 2, height / 2, min(width, height) * 0.18, width / 2, height / 2, max(width, height) * 0.78 ); g.addColorStop(0, 'rgba(0,0,0,0)'); g.addColorStop(0.65, 'rgba(0,0,0,0.30)'); g.addColorStop(1, 'rgba(0,0,0,0.82)'); c.fillStyle = g; c.fillRect(0, 0, width, height); } function loadPalette(i) { palIndex = ((i % PALETTES.length) + PALETTES.length) % PALETTES.length; const p = PALETTES[palIndex]; const bc = color(p.bg); BG = [red(bc), green(bc), blue(bc)]; const cs = p.stops.map(s => color(s)); LUT = []; for (let k = 0; k < LUT_SIZE; k++) { const u = (k / (LUT_SIZE - 1)) * (cs.length - 1); const i0 = floor(u); const i1 = min(i0 + 1, cs.length - 1); const c2 = lerpColor(cs[i0], cs[i1], u - i0); LUT.push([red(c2), green(c2), blue(c2)]); } } /* ---------------------------------------------------------- */ function draw() { t += 0.0032; updatePointer(); // --- decay the trail buffer toward the ground colour --- trail.blendMode(BLEND); trail.noStroke(); trail.fill(BG[0], BG[1], BG[2], 10); trail.rect(0, 0, width, height); // --- shockwaves --- trail.blendMode(ADD); for (let i = waves.length - 1; i >= 0; i--) { const w = waves[i]; w.r += w.speed; w.strength *= 0.945; if (w.r > max(width, height) * 1.25 || w.strength < 0.015) { waves.splice(i, 1); continue; } const c = LUT[LUT_SIZE - 1]; trail.noFill(); trail.strokeWeight(1.2); trail.stroke(c[0], c[1], c[2], w.strength * 70); trail.ellipse(w.x, w.y, w.r * 2, w.r * 2); } // --- motes --- for (let i = 0; i < motes.length; i++) { motes[i].update(); motes[i].render(); } // --- composite --- blendMode(BLEND); background(BG[0], BG[1], BG[2]); glow.image(trail, 0, 0, glow.width, glow.height); drawingContext.filter = 'blur(9px)'; drawingContext.globalAlpha = 0.72; image(glow, 0, 0, width, height); drawingContext.filter = 'none'; drawingContext.globalAlpha = 1; image(trail, 0, 0); // --- pointer aura --- if (pointer.inside) { blendMode(ADD); const R = min(width, height) * 0.16; const c = LUT[floor(LUT_SIZE * 0.55)]; const g2 = drawingContext.createRadialGradient(pointer.x, pointer.y, 0, pointer.x, pointer.y, R); g2.addColorStop(0, `rgba(${c[0]},${c[1]},${c[2]},0.16)`); g2.addColorStop(1, `rgba(${c[0]},${c[1]},${c[2]},0)`); drawingContext.fillStyle = g2; drawingContext.beginPath(); drawingContext.arc(pointer.x, pointer.y, R, 0, TAU); drawingContext.fill(); blendMode(BLEND); } // --- click flash --- if (flash > 0.01) { blendMode(ADD); noStroke(); fill(255, 255, 255, flash * 26); rect(0, 0, width, height); blendMode(BLEND); flash *= 0.86; } // --- twinkling dust (crisp, above the bloom) --- blendMode(ADD); noStroke(); for (const s of sparkles) { s.ph += s.sp; const a = (sin(s.ph) * 0.5 + 0.5); const c = LUT[floor(map(a, 0, 1, LUT_SIZE * 0.3, LUT_SIZE - 1))]; fill(c[0], c[1], c[2], 18 + a * 90); ellipse(s.x, s.y, s.r * (1 + a * 0.8), s.r * (1 + a * 0.8)); } blendMode(BLEND); // --- grain + vignette --- drawingContext.globalCompositeOperation = 'overlay'; drawingContext.globalAlpha = 0.10; image(grainBuf, random(-12, 0), random(-12, 0)); drawingContext.globalAlpha = 1; drawingContext.globalCompositeOperation = 'source-over'; image(vignetteBuf, 0, 0); drawUI(); } /* ---------------------------------------------------------- */ class Mote { constructor() { this.respawn(); } respawn() { this.pos = createVector(random(width), random(height)); this.prev = this.pos.copy(); this.vel = createVector(random(-0.4, 0.4), random(-0.4, 0.4)); this.acc = createVector(0, 0); this.life = random(110, 420); this.age = 0; this.maxSpeed = random(1.1, 3.5); this.w = random(0.45, 1.85); this.tint = random(1); } update() { const x = this.pos.x, y = this.pos.y; // Two-octave flow field: a broad swell plus fine turbulence. const a1 = noise(x * 0.0016, y * 0.0016, t) * TAU * 2.2; const a2 = noise(x * 0.0052 + 91.7, y * 0.0052 + 13.3, t * 1.9) * TAU * 2.2; const ang = a1 + a2 * 0.32; this.acc.set(cos(ang) * 0.16, sin(ang) * 0.16); // Stir: swirl + drag transfer around the cursor. if (pointer.inside) { const dx = x - pointer.x, dy = y - pointer.y; const R = min(width, height) * 0.18; const d2 = dx * dx + dy * dy; if (d2 < R * R) { const d = sqrt(d2) + 0.001; const f = 1 - d / R; this.acc.x += (-dy / d) * f * 0.55 + pointer.vx * f * 0.28; this.acc.y += ( dx / d) * f * 0.55 + pointer.vy * f * 0.28; } } // Shockwave impulses. for (const w of waves) { const dx = x - w.x, dy = y - w.y; const d = sqrt(dx * dx + dy * dy) + 0.001; const diff = abs(d - w.r); if (diff < w.thickness) { const f = (1 - diff / w.thickness) * w.strength; this.acc.x += (dx / d) * f; this.acc.y += (dy / d) * f; } } this.vel.add(this.acc); this.vel.mult(0.985); this.vel.limit(this.maxSpeed); this.prev.set(this.pos.x, this.pos.y); this.pos.add(this.vel); this.age++; if (this.age > this.life || this.pos.x < -30 || this.pos.x > width + 30 || this.pos.y < -30 || this.pos.y > height + 30) { this.respawn(); } } render() { const lifeK = sin(map(this.age, 0, this.life, 0, PI)); // fade in / out const sp = this.vel.mag(); const u = constrain(sp / 3.5 * 0.62 + this.tint * 0.38, 0, 0.999); const c = LUT[floor(u * (LUT_SIZE - 1))]; const a = constrain(lifeK * (16 + sp * 11), 0, 74); trail.stroke(c[0], c[1], c[2], a); trail.strokeWeight(this.w); trail.line(this.prev.x, this.prev.y, this.pos.x, this.pos.y); } } /* ---------------------------------------------------------- */ function updatePointer() { pointer.vx = lerp(pointer.vx, mouseX - pointer.px, 0.35); pointer.vy = lerp(pointer.vy, mouseY - pointer.py, 0.35); pointer.px = mouseX; pointer.py = mouseY; pointer.x = mouseX; pointer.y = mouseY; pointer.inside = mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height; } function emitWave(x, y, strength) { waves.push({ x, y, r: 6, speed: random(7, 11), thickness: random(70, 130), strength }); } function mousePressed() { emitWave(mouseX, mouseY, 0.95); flash = 1; // Seed a plume of fresh motes at the impact point. for (let i = 0; i < 90; i++) { const m = motes[floor(random(motes.length))]; const a = random(TAU), r = random(4, 26); m.pos.set(mouseX + cos(a) * r, mouseY + sin(a) * r); m.prev.set(m.pos.x, m.pos.y); m.vel.set(cos(a) * random(1.5, 4), sin(a) * random(1.5, 4)); m.age = 0; m.life = random(140, 300); } uiAlpha = 255; uiTimer = 0; return false; } function mouseMoved() { uiAlpha = 255; uiTimer = 0; } function mouseDragged() { uiAlpha = 255; uiTimer = 0; } function keyPressed() { if (key === ' ') { noiseSeed(floor(random(999999))); trail.blendMode(BLEND); trail.background(BG[0], BG[1], BG[2]); for (const m of motes) m.respawn(); waves = []; } else if (key === 'p' || key === 'P') { loadPalette(palIndex + 1); trail.blendMode(BLEND); trail.fill(BG[0], BG[1], BG[2], 120); trail.rect(0, 0, width, height); } else if (key >= '1' && key <= '5') { loadPalette(int(key) - 1); } else if (key === 's' || key === 'S') { saveCanvas('curl-bloom-' + PALETTES[palIndex].name, 'png'); } uiAlpha = 255; uiTimer = 0; } function touchMoved() { uiAlpha = 255; uiTimer = 0; return false; } function windowResized() { const oldW = width, oldH = height; resizeCanvas(windowWidth, windowHeight); buildBuffers(); trail.background(BG[0], BG[1], BG[2]); for (const m of motes) { m.pos.x = (m.pos.x / oldW) * width; m.pos.y = (m.pos.y / oldH) * height; m.prev.set(m.pos.x, m.pos.y); } for (const s of sparkles) { s.x = (s.x / oldW) * width; s.y = (s.y / oldH) * height; } } /* ---------------------------------------------------------- */ function drawUI() { uiTimer++; if (uiTimer > 220) uiAlpha = max(0, uiAlpha - 3.2); const a = uiAlpha; if (a <= 0.5) return; push(); blendMode(BLEND); noStroke(); textFont('monospace'); drawingContext.letterSpacing = '3px'; textSize(13); fill(255, 255, 255, a * 0.78); text('CURL BLOOM', 26, 38); drawingContext.letterSpacing = '1.5px'; textSize(10); fill(255, 255, 255, a * 0.38); text('palette — ' + PALETTES[palIndex].name, 26, 56); drawingContext.letterSpacing = '0.6px'; textSize(10); fill(255, 255, 255, a * 0.34); textAlign(RIGHT, BOTTOM); text('drag to stir · click to pulse · [p] palette · [space] reseed · [s] save', width - 26, height - 24); drawingContext.letterSpacing = '0px'; pop(); }

Qwen3.8 2.4T A95B

Curl Bloom