/* ═══════════════════════════════════════════════════════════════ C U R L / I N K ─────────────────────────────────────────────────────────────── Thousands of particles ride a divergence-free curl-noise field. Instead of clearing, the canvas fades a whisper each frame, so the ink accumulates into silk-like streamlines that slowly dissolve and regrow. move mouse → stir the field click/drag → burst + ripple P palette · C clear · N new field · S save · H hide UI ═══════════════════════════════════════════════════════════════ */ const PALETTES = [ { name: 'Nocturne', bg: [7, 10, 18], colors: [ [64, 224, 208], [72, 145, 255], [168, 110, 255], [255, 94, 154], [255, 206, 120], [228, 238, 255]] }, { name: 'Ember', bg: [14, 8, 6], colors: [ [255, 87, 34], [255, 152, 0], [255, 213, 79], [244, 67, 54], [255, 236, 210], [150, 52, 36]] }, { name: 'Verdigris', bg: [6, 14, 12], colors: [ [46, 204, 150], [130, 230, 190], [22, 122, 112], [222, 202, 132], [198, 122, 72], [238, 250, 244]] }, { name: 'Sakura', bg: [14, 8, 15], colors: [ [255, 154, 180], [255, 206, 221], [188, 140, 255], [255, 240, 246], [255, 108, 132], [116, 74, 118]] }, { name: 'Blueprint', bg: [7, 13, 26], colors: [ [218, 234, 255], [128, 190, 255], [66, 118, 220], [255, 122, 110], [255, 255, 255], [42, 72, 132]] } ]; let art; // offscreen ink buffer let vig; // vignette (multiply) let grains = []; // film-grain frames (soft light) let parts = []; let rings = []; let sparks = []; let pi = 0, pal; let seedNum, seedLabel; let zoff = 0; let fieldScale = 0.0018; let baseFade = 15, fadeAmt = 15; let globalSpeed = 1; let pointerStrength = 0; let mvx = 0, mvy = 0, pmx = 0, pmy = 0; let hintA = 255, hintTimer = 420, showUI = true; let target = 900; let fv = { x: 0, y: 0 }; // scratch vector (avoids GC churn) const CYCLE = 6600; // frames between "dissolve & regrow" events const DISSOLVE_LEN = 260; /* ─────────────────────────── setup ─────────────────────────── */ function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(1); colorMode(RGB, 255, 255, 255, 255); noiseDetail(4, 0.52); reseed(true); pal = PALETTES[pi]; art = createGraphics(width, height); art.pixelDensity(1); buildBuffers(); paintFull(); target = countTarget(); for (let i = 0; i < target; i++) parts.push(new Particle(true)); pmx = mouseX; pmy = mouseY; textFont('monospace'); } function reseed(labelToo) { seedNum = floor(random(999999)); randomSeed(seedNum); noiseSeed(seedNum); seedLabel = nf(seedNum, 6); zoff = random(1000); if (labelToo) fieldScale = random(0.0013, 0.0026); } function countTarget() { return constrain(round((width * height) / 2000), 320, 1400); } function buildBuffers() { // --- vignette: radial falloff baked into a small buffer, upscaled vig = createGraphics(max(1, ceil(width / 3)), max(1, ceil(height / 3))); vig.pixelDensity(1); vig.loadPixels(); const gw = vig.width, gh = vig.height; const cx = gw * 0.5, cy = gh * 0.5; const maxD = Math.sqrt(cx * cx + cy * cy); for (let y = 0; y < gh; y++) { for (let x = 0; x < gw; x++) { const d = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / maxD; const v = 255 * (1 - 0.74 * Math.pow(constrain(d, 0, 1), 2.5)); const i = (y * gw + x) * 4; vig.pixels[i] = vig.pixels[i + 1] = vig.pixels[i + 2] = v; vig.pixels[i + 3] = 255; } } vig.updatePixels(); // --- three grain frames at half res, cycled for a living texture grains = []; const gwid = max(1, ceil(width / 2)), ghei = max(1, ceil(height / 2)); for (let k = 0; k < 3; k++) { const g = createGraphics(gwid, ghei); g.pixelDensity(1); g.loadPixels(); const p = g.pixels; for (let i = 0; i < p.length; i += 4) { const v = 128 + (Math.random() * 2 - 1) * 74; p[i] = p[i + 1] = p[i + 2] = v; p[i + 3] = 255; } g.updatePixels(); grains.push(g); } } function paintFull() { art.noStroke(); art.fill(pal.bg[0], pal.bg[1], pal.bg[2], 255); art.rect(0, 0, width, height); } /* ─────────────────────── the flow field ─────────────────────── */ /* curl of a scalar noise potential → incompressible, swirl-only */ function field(x, y) { const s = fieldScale, e = 1.6, z = zoff; const n1 = noise(x * s, (y + e) * s, z); const n2 = noise(x * s, (y - e) * s, z); const n3 = noise((x + e) * s, y * s, z); const n4 = noise((x - e) * s, y * s, z); let vx = (n1 - n2); let vy = -(n3 - n4); const m = Math.sqrt(vx * vx + vy * vy); if (m > 1e-7) { vx /= m; vy /= m; } else { vx = 1; vy = 0; } // per-region energy so some zones rush and others crawl const q = noise(x * s * 0.6 + 13.7, y * s * 0.6 - 7.3, z * 0.7); const mag = 0.42 + q * 1.55; vx *= mag; vy *= mag; // a very low-frequency counter-current keeps the composition alive const a = noise(x * s * 0.22 + 91.1, y * s * 0.22 + 31.7, z * 0.4) * TAU * 2; vx += Math.cos(a) * 0.34; vy += Math.sin(a) * 0.34; fv.x = vx; fv.y = vy; return fv; } /* ───────────────────────── particle ───────────────────────── */ class Particle { constructor(staggered) { this.reset(staggered); } reset(staggered) { this.x = random(width); this.y = random(height); this.px = this.x; this.py = this.y; this.vx = 0; this.vy = 0; this.maxLife = random(150, 640); this.age = staggered ? random(this.maxLife) : 0; this.w = pow(random(), 2.3) * 2.1 + 0.45; this.spd = random(0.75, 2.35); this.ci = pickColor(); this.ci2 = (this.ci + 1 + floor(random(pal.colors.length - 1))) % pal.colors.length; this.spark = random() < 0.035; } update() { const v = field(this.x, this.y); const s = this.spd * globalSpeed; this.vx = lerp(this.vx, v.x * s, 0.13); this.vy = lerp(this.vy, v.y * s, 0.13); if (pointerStrength > 0.01) { const dx = this.x - mouseX, dy = this.y - mouseY; const d2 = dx * dx + dy * dy; const R = 210; if (d2 < R * R) { const d = Math.sqrt(d2) + 0.001; const f = 1 - d / R; const swirl = pointerStrength * f * f * 11; this.vx += (-dy / d) * swirl + (dx / d) * swirl * 0.22 + mvx * f * 0.55; this.vy += (dx / d) * swirl + (dy / d) * swirl * 0.22 + mvy * f * 0.55; } } this.px = this.x; this.py = this.y; this.x += this.vx; this.y += this.vy; this.age++; if (this.age > this.maxLife || this.x < -50 || this.x > width + 50 || this.y < -50 || this.y > height + 50) this.reset(false); } display() { const t = constrain(this.age / this.maxLife, 0, 1); const env = Math.sin(PI * t); // fade in / fade out const sp = Math.sqrt(this.vx * this.vx + this.vy * this.vy); const c1 = pal.colors[this.ci], c2 = pal.colors[this.ci2]; const r = c1[0] + (c2[0] - c1[0]) * t; const g = c1[1] + (c2[1] - c1[1]) * t; const b = c1[2] + (c2[2] - c1[2]) * t; const a = env * (this.spark ? 130 : 44) * (0.5 + 0.5 * constrain(sp / 2.4, 0, 1)); art.stroke(r, g, b, a); art.strokeWeight(this.w * (0.55 + 0.7 * env)); art.line(this.px, this.py, this.x, this.y); if (this.spark && env > 0.55 && random() < 0.09) { sparks.push(this.x, this.y, r, g, b, this.w * 1.7 * env); } } } function pickColor() { // bias toward the palette's leading hues for coherence const r = random(); if (r < 0.30) return 0; if (r < 0.55) return 1; if (r < 0.72) return 2; if (r < 0.84) return 3; if (r < 0.94) return 4; return 5 % pal.colors.length; } /* ───────────────────────── ripples ───────────────────────── */ class Ring { constructor(x, y, c) { this.x = x; this.y = y; this.r = 3; this.max = random(130, 330); this.c = c; this.life = 1; } update() { this.r += (this.max - this.r) * 0.055 + 1.1; this.life *= 0.957; } display() { art.noFill(); art.stroke(this.c[0], this.c[1], this.c[2], 95 * this.life); art.strokeWeight(1.3 * this.life + 0.2); art.ellipse(this.x, this.y, this.r * 2, this.r * 2); } dead() { return this.life < 0.02; } } function burst(x, y, n) { const c = random(pal.colors); rings.push(new Ring(x, y, c)); if (random() < 0.5) rings.push(new Ring(x, y, random(pal.colors))); for (let i = 0; i < n; i++) { const p = parts.length < target + 400 ? new Particle(false) : parts[floor(random(parts.length))]; if (parts.indexOf(p) === -1) parts.push(p); const a = random(TAU), d = pow(random(), 0.6) * 70; p.x = x + Math.cos(a) * d; p.y = y + Math.sin(a) * d; p.px = p.x; p.py = p.y; p.vx = Math.cos(a) * random(1.5, 6); p.vy = Math.sin(a) * random(1.5, 6); p.age = 0; p.maxLife = random(120, 420); p.ci = pickColor(); p.ci2 = (p.ci + 1 + floor(random(pal.colors.length - 1))) % pal.colors.length; } } /* ─────────────────────────── draw ─────────────────────────── */ function draw() { // pointer velocity + decaying influence mvx = mouseX - pmx; mvy = mouseY - pmy; const ms = Math.sqrt(mvx * mvx + mvy * mvy); pointerStrength = Math.min(1, pointerStrength * 0.90 + constrain(ms / 26, 0, 1) * 0.35); if (mouseIsPressed) pointerStrength = Math.min(1.4, pointerStrength + 0.12); pmx = mouseX; pmy = mouseY; // breathing tempo globalSpeed = 1 + 0.28 * Math.sin(frameCount * 0.0031) + 0.12 * Math.sin(frameCount * 0.00077); zoff += 0.00115; // long-form structure: slowly dissolve the page, then let it regrow const cyc = frameCount % CYCLE; if (cyc > CYCLE - DISSOLVE_LEN) { const k = (cyc - (CYCLE - DISSOLVE_LEN)) / DISSOLVE_LEN; fadeAmt = lerp(baseFade, 34, Math.sin(k * PI * 0.5)); } else { fadeAmt = baseFade; } if (cyc === 0 && frameCount > 1) { reseed(false); for (let i = 0; i < parts.length * 0.45; i++) parts[floor(random(parts.length))].reset(true); } /* --- ink layer --- */ art.blendMode(BLEND); art.noStroke(); art.fill(pal.bg[0], pal.bg[1], pal.bg[2], fadeAmt); art.rect(0, 0, width, height); for (let i = 0; i < parts.length; i++) { parts[i].update(); parts[i].display(); } for (let i = rings.length - 1; i >= 0; i--) { rings[i].update(); rings[i].display(); if (rings[i].dead()) rings.splice(i, 1); } // additive sparkle pass if (sparks.length) { art.blendMode(ADD); art.noStroke(); for (let i = 0; i < sparks.length; i += 6) { art.fill(sparks[i + 2], sparks[i + 3], sparks[i + 4], 150); art.circle(sparks[i], sparks[i + 1], sparks[i + 5]); } art.blendMode(BLEND); sparks.length = 0; } /* --- composite: ink → vignette → grain --- */ blendMode(BLEND); image(art, 0, 0); blendMode(MULTIPLY); image(vig, 0, 0, width, height); blendMode(SOFT_LIGHT); tint(255, 42); image(grains[frameCount % grains.length], 0, 0, width, height); noTint(); blendMode(BLEND); drawUI(); } function drawUI() { if (!showUI) return; if (hintTimer > 0) { hintTimer--; hintA = min(255, hintA + 14); } else hintA = max(0, hintA - 6); if (hintA <= 0) return; const a = hintA * 0.62; noStroke(); textLeading(15); textSize(11); textAlign(LEFT, BOTTOM); fill(255, 255, 255, a * 0.9); text('CURL / INK', 22, height - 62); fill(255, 255, 255, a * 0.5); text('seed ' + seedLabel + ' · ' + pal.name.toUpperCase(), 22, height - 46); text('move: stir click: burst [P]alette [C]lear [N]ew [S]ave [H]ide', 22, height - 30); textAlign(RIGHT, BOTTOM); fill(255, 255, 255, a * 0.35); text(nf(parts.length, 4) + ' strokes · ' + nf(frameRate(), 2, 0) + ' fps', width - 22, height - 30); } /* ───────────────────────── interaction ───────────────────────── */ function mousePressed() { burst(mouseX, mouseY, 70); hintTimer = 200; } function mouseDragged() { if (frameCount % 3 === 0) burst(mouseX, mouseY, 6); } function touchStarted() { burst(mouseX, mouseY, 70); hintTimer = 200; return false; } function keyPressed() { hintTimer = 260; const k = key.toLowerCase(); if (k === 'p') { pi = (pi + 1) % PALETTES.length; pal = PALETTES[pi]; } else if (k === 'c') { paintFull(); } else if (k === 'n') { reseed(true); for (const p of parts) p.reset(true); rings.length = 0; } else if (k === 's') { saveCanvas('curl-ink-' + seedLabel, 'png'); } else if (k === 'h') { showUI = !showUI; } else if (k === ' ') { for (const p of parts) p.reset(true); } } function windowResized() { const nw = windowWidth, nh = windowHeight; const sx = nw / width, sy = nh / height; resizeCanvas(nw, nh); art.resizeCanvas(nw, nh); for (const p of parts) { p.x *= sx; p.y *= sy; p.px = p.x; p.py = p.y; } for (const r of rings) { r.x *= sx; r.y *= sy; } buildBuffers(); paintFull(); target = countTarget(); while (parts.length < target) parts.push(new Particle(true)); while (parts.length > target) parts.pop(); }

Qwen3.8 2.4T A95B

Curl / Ink