/* ============================================================ SILK CURRENTS A curl-noise light loom. - particles are advected by a divergence-free (curl) field - sampled from a bilinear grid for speed - luminous "cores" orbit on lissajous paths and knot the flow - pointer = vortex, click = bloom, R = reseed, S = save ============================================================ */ let parts = []; let sparks = []; let rings = []; let cores = []; let time = 0; // field evolution clock let orbit = 0; // core motion clock let hueNow = 205; let hueTarget = 205; let swirlDir = 1; let paused = false; let pointer = null; let pointerHeat = 0; const NOISE_SCALE = 0.0015; const EPS = 0.40; // flow grid let CELL = 26; let gcols, grows, gvx, gvy, gm; const _s = [0, 0, 0]; /* ------------------------------ setup ------------------------------ */ function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(1); colorMode(HSB, 360, 100, 100, 100); noiseDetail(4, 0.5); strokeCap(ROUND); strokeJoin(ROUND); cursor(CROSS); seedField(); updateGrid(); paint(true); // a couple of opening blooms so the canvas starts alive for (let i = 0; i < 3; i++) { const c = random(cores); const p = c.pos(); bloom(p.x, p.y, 0.7, false); } } function seedField() { cores = []; const nc = 3 + floor(random(3)); for (let i = 0; i < nc; i++) cores.push(new Core()); parts = []; const target = constrain(floor((width * height) / 520), 900, 5200); for (let i = 0; i < target; i++) parts.push(new Particle(true)); sparks = []; rings = []; buildGrid(); } function buildGrid() { gcols = Math.ceil(width / CELL) + 3; grows = Math.ceil(height / CELL) + 3; gvx = new Float32Array(gcols * grows); gvy = new Float32Array(gcols * grows); gm = new Float32Array(gcols * grows); } /* --------------------------- flow field ---------------------------- */ function updateGrid() { let i = 0; for (let j = 0; j < grows; j++) { const ny = (j - 1) * CELL * NOISE_SCALE; for (let k = 0; k < gcols; k++) { const nx = (k - 1) * CELL * NOISE_SCALE; const n1 = noise(nx, ny + EPS, time); const n2 = noise(nx, ny - EPS, time); const n3 = noise(nx + EPS, ny, time); const n4 = noise(nx - EPS, ny, time); let vx = n1 - n2; let vy = -(n3 - n4); const m = Math.hypot(vx, vy); if (m > 1e-6) { const sp = constrain(map(m, 0, 0.34, 0.35, 2.5), 0.28, 2.7); gvx[i] = (vx / m) * sp; gvy[i] = (vy / m) * sp; gm[i] = sp; } else { gvx[i] = 0; gvy[i] = 0; gm[i] = 0; } i++; } } } function sampleGrid(x, y, out) { const gx = x / CELL + 1; const gy = y / CELL + 1; let x0 = Math.floor(gx), y0 = Math.floor(gy); const fx = gx - x0, fy = gy - y0; x0 = constrain(x0, 0, gcols - 2); y0 = constrain(y0, 0, grows - 2); const x1 = x0 + 1, y1 = y0 + 1; const i00 = y0 * gcols + x0; const i10 = y0 * gcols + x1; const i01 = y1 * gcols + x0; const i11 = y1 * gcols + x1; const w0 = 1 - fx, w1 = fx; const u0 = 1 - fy, u1 = fy; out[0] = (gvx[i00] * w0 + gvx[i10] * w1) * u0 + (gvx[i01] * w0 + gvx[i11] * w1) * u1; out[1] = (gvy[i00] * w0 + gvy[i10] * w1) * u0 + (gvy[i01] * w0 + gvy[i11] * w1) * u1; out[2] = (gm[i00] * w0 + gm[i10] * w1) * u0 + (gm[i01] * w0 + gm[i11] * w1) * u1; } /* ------------------------------ cores ------------------------------ */ class Core { constructor() { this.rx = random(0.16, 0.36); this.ry = random(0.14, 0.34); this.sx = random(0.22, 0.62) * (random() < 0.5 ? -1 : 1); this.sy = random(0.22, 0.62) * (random() < 0.5 ? -1 : 1); this.ph = random(TWO_PI); this.hueOff = random(-46, 70); this.r = random(90, 190); this.pulse = random(0.6, 1.5); this.dir = random() < 0.5 ? -1 : 1; } pos() { return { x: width * 0.5 + cos(orbit * this.sx + this.ph) * width * this.rx, y: height * 0.5 + sin(orbit * this.sy + this.ph * 1.7) * height * this.ry }; } radius() { return this.r * (1 + 0.22 * sin(orbit * this.pulse * 2 + this.ph)); } } /* ---------------------------- particles ---------------------------- */ class Particle { constructor(scatter) { this.depth = random(); this.w = map(this.depth, 0, 1, 0.45, 1.8); this.sp = map(this.depth, 0, 1, 0.42, 1.7); this.hueOff = random(-24, 24); this.mag = 1; this.reset(scatter); } reset(scatter) { if (scatter || cores.length === 0 || random() < 0.4) { this.x = random(width); this.y = random(height); } else { const c = random(cores); const p = c.pos(); const a = random(TWO_PI); const r = random(c.radius() * 0.15, c.radius()); this.x = p.x + cos(a) * r; this.y = p.y + sin(a) * r; } this.px = this.x; this.py = this.y; this.life = random(150, 480) * (0.55 + this.depth * 0.9); this.age = random(0, this.life * 0.3); } step(dt) { this.px = this.x; this.py = this.y; sampleGrid(this.x, this.y, _s); let vx = _s[0] * this.sp; let vy = _s[1] * this.sp; this.mag = _s[2]; // cores: tangential swirl + gentle inward draw for (let i = 0; i < cores.length; i++) { const c = cores[i]; const p = c.pos(); const ox = this.x - p.x; const oy = this.y - p.y; const d2 = ox * ox + oy * oy; const R = c.radius(); if (d2 < R * R) { const d = sqrt(d2) + 0.001; const f = 1 - d / R; const s = f * f * 2.5 * c.dir; vx += (-oy / d) * s + (-ox / d) * s * 0.32; vy += (ox / d) * s + (-oy / d) * s * 0.32; } } // pointer vortex if (pointer && pointerHeat > 0.01) { const ox = this.x - pointer.x; const oy = this.y - pointer.y; const d = Math.hypot(ox, oy) + 0.001; const R = 280; if (d < R) { const f = 1 - d / R; const s = f * f * 6.5 * pointerHeat; vx += (-oy / d) * s * swirlDir + (ox / d) * s * 0.22; vy += (ox / d) * s * swirlDir + (oy / d) * s * 0.22; } } this.x += vx * dt; this.y += vy * dt; this.age += dt; if (this.x < -40 || this.x > width + 40 || this.y < -40 || this.y > height + 40 || this.age > this.life) { this.reset(false); } } draw() { const t = this.age / this.life; const fade = sin(t * PI); if (fade <= 0.002) return; const ang = atan2(this.y - this.py, this.x - this.px); const h = (hueNow + degrees(ang) * 0.30 + this.mag * 26 + this.hueOff + 720) % 360; const a = fade * map(this.depth, 0, 1, 4.5, 17); stroke(h, constrain(90 - this.mag * 9, 38, 92), 100, a); strokeWeight(this.w); line(this.px, this.py, this.x, this.y); // rare sparkle at the head of a thread if (this.depth > 0.86 && fade > 0.5 && random() < 0.006) { noStroke(); fill((h + 30) % 360, 25, 100, fade * 35); circle(this.x, this.y, this.w * 2.6); } } } /* ------------------------- sparks & rings -------------------------- */ class Spark { constructor(x, y, vx, vy) { this.x = x; this.y = y; this.px = x; this.py = y; this.vx = vx; this.vy = vy; this.life = random(26, 78); this.age = 0; this.h = random(-32, 34); this.w = random(0.7, 2.4); } step(dt) { this.px = this.x; this.py = this.y; sampleGrid(this.x, this.y, _s); this.vx += _s[0] * 0.09 * dt; this.vy += _s[1] * 0.09 * dt; this.vx *= 0.962; this.vy *= 0.962; this.x += this.vx * dt; this.y += this.vy * dt; this.age += dt; } dead() { return this.age > this.life; } draw() { const f = 1 - this.age / this.life; stroke((hueNow + this.h + 360) % 360, 48, 100, f * f * 78); strokeWeight(this.w * f + 0.25); line(this.px, this.py, this.x, this.y); } } class Ring { constructor(x, y, r0, r1) { this.x = x; this.y = y; this.r0 = r0; this.r1 = r1; this.r = r0; this.life = random(55, 100); this.age = 0; this.h = random(-28, 30); } step(dt) { this.age += dt; const t = constrain(this.age / this.life, 0, 1); this.r = lerp(this.r0, this.r1, 1 - pow(1 - t, 3)); } dead() { return this.age > this.life; } draw() { const t = constrain(this.age / this.life, 0, 1); const a = pow(1 - t, 2.2) * 42; if (a < 0.4) return; noFill(); stroke((hueNow + this.h + 360) % 360, 62, 100, a); strokeWeight(map(t, 0, 1, 2.8, 0.25)); ellipse(this.x, this.y, this.r * 2, this.r * 2); } } /* ------------------------------ bloom ------------------------------ */ function bloom(x, y, power, shiftHue) { if (shiftHue !== false) { hueTarget = (hueTarget + 34 + random(-12, 12) + 360) % 360; swirlDir *= -1; } const n = floor(46 * power); for (let i = 0; i < n; i++) { const a = random(TWO_PI); const sp = random(0.5, 7.5) * power; sparks.push(new Spark( x + cos(a) * random(0, 16), y + sin(a) * random(0, 16), cos(a) * sp, sin(a) * sp )); } const nr = 2 + floor(random(2)); for (let i = 0; i < nr; i++) { rings.push(new Ring(x, y, random(8, 40), random(180, 380) * power)); } // re-seed a handful of threads right at the bloom so silk erupts const reseed = floor(50 * power); for (let i = 0; i < reseed && i < parts.length; i++) { const p = parts[floor(random(parts.length))]; const a = random(TWO_PI); const r = random(0, 34); p.x = x + cos(a) * r; p.y = y + sin(a) * r; p.px = p.x; p.py = p.y; p.age = 0; } if (sparks.length > 1400) sparks.splice(0, sparks.length - 1400); if (rings.length > 60) rings.splice(0, rings.length - 60); } /* --------------------------- background ---------------------------- */ function rgba(c) { return 'rgba(' + c.levels[0] + ',' + c.levels[1] + ',' + c.levels[2] + ',' + (c.levels[3] / 255).toFixed(3) + ')'; } function paint(hard) { blendMode(BLEND); noStroke(); const ctx = drawingContext; const cx = width * 0.5, cy = height * 0.52; const R = Math.hypot(width, height) * 0.66; const a = hard ? 255 : 14; const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, R); const inner = color((hueNow + 205) % 360, 58, hard ? 10 : 7, a); const outer = color((hueNow + 238) % 360, 68, hard ? 3 : 2, a); g.addColorStop(0, rgba(inner)); g.addColorStop(1, rgba(outer)); ctx.fillStyle = g; ctx.fillRect(0, 0, width, height); if (hard) vignette(1); } function vignette(a) { const ctx = drawingContext; const g = ctx.createRadialGradient( width * 0.5, height * 0.5, min(width, height) * 0.42, width * 0.5, height * 0.5, Math.hypot(width, height) * 0.66 ); g.addColorStop(0, 'rgba(0,0,0,0)'); g.addColorStop(1, 'rgba(0,0,0,' + a.toFixed(3) + ')'); ctx.fillStyle = g; ctx.fillRect(0, 0, width, height); } function drawCoreGlow() { const ctx = drawingContext; for (let i = 0; i < cores.length; i++) { const c = cores[i]; const p = c.pos(); const R = c.radius() * 1.7; const col = color((hueNow + c.hueOff + 360) % 360, 74, 100, 100); const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, R); g.addColorStop(0, 'rgba(' + col.levels[0] + ',' + col.levels[1] + ',' + col.levels[2] + ',0.085)'); g.addColorStop(0.4, 'rgba(' + col.levels[0] + ',' + col.levels[1] + ',' + col.levels[2] + ',0.028)'); g.addColorStop(1, 'rgba(' + col.levels[0] + ',' + col.levels[1] + ',' + col.levels[2] + ',0)'); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(p.x, p.y, R, 0, TWO_PI); ctx.fill(); // tiny molten heart noStroke(); fill((hueNow + c.hueOff + 360) % 360, 30, 100, 16); circle(p.x, p.y, 5 + 3 * sin(orbit * 3 + c.ph)); } } /* ------------------------------- draw ------------------------------ */ function draw() { const dt = constrain(deltaTime / 16.6667, 0.4, 2.6); if (!paused) { time += 0.0013 * dt; orbit += 0.0042 * dt; hueNow = lerpAngle(hueNow, hueTarget, 0.012 * dt); pointerHeat *= pow(0.955, dt); } paint(false); if (!paused) vignette(0.012 * dt); updateGrid(); blendMode(ADD); drawCoreGlow(); if (!paused) { for (let i = 0; i < parts.length; i++) parts[i].step(dt); for (let i = sparks.length - 1; i >= 0; i--) { sparks[i].step(dt); if (sparks[i].dead()) sparks.splice(i, 1); } for (let i = rings.length - 1; i >= 0; i--) { rings[i].step(dt); if (rings[i].dead()) rings.splice(i, 1); } } for (let i = 0; i < parts.length; i++) parts[i].draw(); for (let i = 0; i < sparks.length; i++) sparks[i].draw(); for (let i = 0; i < rings.length; i++) rings[i].draw(); // pointer halo if (pointer && pointerHeat > 0.02) { noStroke(); fill((hueNow + 40) % 360, 55, 100, 10 * pointerHeat); circle(pointer.x, pointer.y, 26 + 90 * pointerHeat); } blendMode(BLEND); drawCaption(); // ambient bloom from a random core if (!paused && frameCount % 220 === 0 && cores.length) { const c = random(cores); const p = c.pos(); bloom(p.x, p.y, 0.5, false); } } function lerpAngle(a, b, t) { let d = ((b - a + 540) % 360) - 180; return (a + d * t + 360) % 360; } function drawCaption() { const hint = constrain(map(frameCount, 90, 720, 70, 0), 0, 70); noStroke(); textAlign(LEFT, TOP); textFont('Georgia, serif'); textStyle(ITALIC); textSize(15); fill(45, 12, 100, 26); text('silk currents', 26, 24); if (hint > 0.5) { textStyle(NORMAL); textSize(11); fill(45, 8, 100, hint); text('move to stir the field · click to bloom · R reseed · SPACE pause · S save', 26, 48); } textStyle(NORMAL); } /* --------------------------- interaction --------------------------- */ function setPointer(x, y) { pointer = { x: x, y: y }; pointerHeat = min(1.35, pointerHeat + 0.45); } function mouseMoved() { setPointer(mouseX, mouseY); } function mouseDragged() { setPointer(mouseX, mouseY); pointerHeat = min(1.5, pointerHeat + 0.3); } function mousePressed() { bloom(mouseX, mouseY, 1.15, true); return false; } function touchMoved() { if (touches.length) setPointer(touches[0].x, touches[0].y); return false; } function touchStarted() { if (touches.length) bloom(touches[0].x, touches[0].y, 1.15, true); return false; } function keyPressed() { const k = key.toLowerCase(); if (k === 'r') { hueTarget = random(360); seedField(); updateGrid(); paint(true); for (let i = 0; i < 3; i++) { const c = random(cores); const p = c.pos(); bloom(p.x, p.y, 0.8, false); } } else if (k === 's') { saveCanvas('silk-currents', 'png'); } else if (k === ' ') { paused = !paused; } else if (k === 'c') { hueTarget = (hueTarget + 60) % 360; } } function windowResized() { resizeCanvas(windowWidth, windowHeight); buildGrid(); updateGrid(); paint(true); for (let i = 0; i < parts.length; i++) { parts[i].x = constrain(parts[i].x, 0, width); parts[i].y = constrain(parts[i].y, 0, height); parts[i].px = parts[i].x; parts[i].py = parts[i].y; } }

Qwen3.8 2.4T A95B

Silk Currents