// ============================== // CONFIG // ============================== const CANVAS_W = 600; const CANVAS_H = 600*1.452; // Render control const TOTAL_LINES = 2000; const LINES_PER_FRAME = 1000; const BACKGROUND_COLOR = null; const RANDOM_SEED = null; // Geometry const LINE_WIDTH_MIN = 2; const LINE_WIDTH_MAX = 2; const PADDING_BETWEEN = 3.0; const START_MARGIN = 0; // Motion const LENGTH_MIN = 50; const LENGTH_MAX = 500; const MOVE_SPEED = 1.0; const CURLINESS = 15; // Worley noise const NUM_WORLEY_POINTS = 5; const WORLEY_DIST = 2; // <= NUM_WORLEY_POINTS // Coloring // Available COLOR_MODE: // "cycle" | "random" | "byX" | "byY" | "byAngle" | "byLength" // "radial" | "radialBands" // "byWorley" | "byWorleyBands" | "byCurlMag" const PALETTE = [ "#ff006e", // magenta "#8338ec", // bright purple "#3a86ff", // vivid blue "#fb5607", // hot orange "#ffbe0b", // bright yellow "#06d6a0", // aqua green "#118ab2", // teal blue "#ef476f", // pink-red "#ffd166", // soft gold "#073b4c" // near-black blue ]; const COLOR_COUNT = 4; const COLOR_MODE = "byWorleyBands"; // Radial color controls // Center is normalized (0..1). Example: center of canvas = {x:0.5,y:0.5} const COLOR_CENTER_NORM = { x: 0.5, y: 0.5 }; const RADIAL_REPEATS = 1; // number of rings across max radius. 1 = no repeat // Worley color controls const WORLEY_SAMPLES_PER_PATH = 8; // average color metric along path const WORLEY_BANDS = 5; // discrete bands when using *Bands modes // ============================== // STATE // ============================== let worley; let packer; let linesDrawn = 0; let activePalette = []; // ============================== // INIT // ============================== function setup() { createCanvas(CANVAS_W, CANVAS_H, SVG); pixelDensity(1); if (RANDOM_SEED !== null) { randomSeed(RANDOM_SEED); noiseSeed(RANDOM_SEED); } if (BACKGROUND_COLOR !== null) { background(BACKGROUND_COLOR); } worley = new WorleyNoise({ numPoints: NUM_WORLEY_POINTS }); packer = new CirclePacker(width, height, 15, PADDING_BETWEEN); activePalette = buildActivePalette(PALETTE, COLOR_COUNT); strokeCap(ROUND); noFill(); } // ============================== // FRAME LOOP // ============================== function draw() { for (let i = 0; i < LINES_PER_FRAME && linesDrawn < TOTAL_LINES; i++) { const path = generatePath(); if (!path || path.verts.length < 2) continue; const col = chooseColor(linesDrawn, TOTAL_LINES, path, activePalette, COLOR_MODE); stroke(col); strokeWeight(path.widthPx); beginShape(); for (const v of path.verts) vertex(v.x, v.y); endShape(); for (const c of path.metrics.addedCircles) packer.addCircle(c); linesDrawn++; } if (linesDrawn >= TOTAL_LINES) noLoop(); } // ============================== // PATH GENERATION // ============================== function generatePath() { const maxVerts = floor(random(LENGTH_MIN, LENGTH_MAX + 1)); const lineDiameter = random(LINE_WIDTH_MIN, LINE_WIDTH_MAX); const dir = random() < 0.5 ? 1 : -1; let cx = random(START_MARGIN, width - START_MARGIN); let cy = random(START_MARGIN, height - START_MARGIN); const verts = []; const addedCircles = []; let prev = { x: cx, y: cy }; let totalLen = 0; let c0 = packer.tryToAddCircle(cx, cy, lineDiameter * 0.5, lineDiameter * 0.5, false); if (!c0) return null; addedCircles.push(c0); verts.push({ x: cx, y: cy }); // color metrics accumulation for Worley-based modes let worleyAccum = 0; let worleySamples = 0; for (let j = 1; j < maxVerts; j++) { const d = computeCurl(width, cx, cy); cx += d[0] * dir * MOVE_SPEED; cy += d[1] * dir * MOVE_SPEED; if (cx < 0 || cx > width || cy < 0 || cy > height) break; const ok = packer.tryToAddCircle(cx, cy, lineDiameter * 0.5, lineDiameter * 0.5, false); if (!ok) break; addedCircles.push(ok); verts.push({ x: cx, y: cy }); totalLen += dist(prev.x, prev.y, cx, cy); prev = { x: cx, y: cy }; // sparse sampling for Worley color metrics if (j % max(1, floor(maxVerts / WORLEY_SAMPLES_PER_PATH)) === 0) { const xv = cx / width; const yv = cy / width; const wv = worley.getEuclidean({ x: xv, y: yv }, WORLEY_DIST); worleyAccum += wv; worleySamples++; } } if (verts.length < 2) return null; const first = verts[0]; const second = verts[1]; const theta = atan2(second.y - first.y, second.x - first.x); // precompute radial metrics const centerPx = { x: COLOR_CENTER_NORM.x * width, y: COLOR_CENTER_NORM.y * height }; const rStart = dist(first.x, first.y, centerPx.x, centerPx.y); const rMax = max( dist(0, 0, centerPx.x, centerPx.y), dist(width, 0, centerPx.x, centerPx.y), dist(0, height, centerPx.x, centerPx.y), dist(width, height, centerPx.x, centerPx.y) ); const rNorm = rMax > 0 ? constrain(rStart / rMax, 0, 1) : 0; // curl magnitude at start for byCurlMag const curlVec0 = computeCurl(width, first.x, first.y); const curlMag = sqrt(curlVec0[0] * curlVec0[0] + curlVec0[1] * curlVec0[1]); // worley metrics const xv0 = first.x / width; const yv0 = first.y / width; const worleyStart = worley.getEuclidean({ x: xv0, y: yv0 }, WORLEY_DIST); const worleyAvg = worleySamples > 0 ? worleyAccum / worleySamples : worleyStart; return { verts, widthPx: lineDiameter, metrics: { addedCircles, length: totalLen, startX: first.x, startY: first.y, angle: theta, rNorm, rNormWrapped: (rNorm * max(1, RADIAL_REPEATS)) % 1, curlMag, worleyStart, worleyAvg } }; } // ============================== // CURL FIELD (Worley-derived) // ============================== // https://al-ro.github.io/projects/curl/ function computeCurl(w, x, y) { const eps = 1 / CURLINESS; const xv = x / w; const yv = y / w; let n1 = worley.getEuclidean({ x: xv + eps, y: yv }, WORLEY_DIST); let n2 = worley.getEuclidean({ x: xv - eps, y: yv }, WORLEY_DIST); const a = (n1 - n2) / (2 * eps); n1 = worley.getEuclidean({ x: xv, y: yv + eps }, WORLEY_DIST); n2 = worley.getEuclidean({ x: xv, y: yv - eps }, WORLEY_DIST); const b = (n1 - n2) / (2 * eps); return [b, -a]; } // ============================== // COLORING // ============================== function buildActivePalette(base, count) { if (count <= base.length) return base.slice(0, count); const out = []; for (let i = 0; i < count; i++) out.push(base[i % base.length]); return out; } function chooseColor(idx, total, path, palette, mode) { const L = palette.length; if (L === 0) return "#ffffff"; const bin = t => palette[floor(constrain(t, 0, 0.9999) * L)]; switch (mode) { case "random": return palette[floor(random(L))]; case "byX": return bin(path.metrics.startX / width); case "byY": return bin(path.metrics.startY / height); case "byAngle": { const na = (path.metrics.angle + PI) / (2 * PI); return bin(na); } case "byLength": { const bound = max(LENGTH_MAX, 1); const nl = constrain(path.metrics.length / (bound * MOVE_SPEED), 0, 1); return bin(nl); } case "cycle": return palette[idx % L]; // ------ New radial modes ------ case "radial": // continuous radial gradient with optional repeats return bin(path.metrics.rNormWrapped); case "radialBands": { // discrete rings. bands = L * RADIAL_REPEATS const bands = max(1, L * max(1, RADIAL_REPEATS)); const k = floor(constrain(path.metrics.rNorm * bands, 0, bands - 1)); return palette[k % L]; } // ------ Worley-driven modes ------ case "byWorley": { // map average Worley distance to palette // normalize by a heuristic scale so values spread across 0..1 const scale = 1.5; // tweak if your Worley impl differs const t = (path.metrics.worleyAvg / scale) % 1; return bin(t); } case "byWorleyBands": { const scale = 1.5; const bands = max(1, WORLEY_BANDS); const t = (path.metrics.worleyAvg / scale) % 1; const k = floor(constrain(t * bands, 0, bands - 1)); return palette[k % L]; } case "byCurlMag": { // higher curl magnitude → later colors const t = constrain(path.metrics.curlMag * 4.0, 0, 1); return bin(t); } default: return palette[idx % L]; } }