const N = 25; const SIZE = 260; const DURATION = 300; const LOOP_DELAY = 8; const STAGGER = 20; const FIRST_LAYER_CURVE = [ [0, 0, 3], [0.2, 0.488, 1.92], [0.4, 0.784, 1.08], [0.6, 0.936, 0.48], [0.8, 0.992, 0.12], [1, 1, 0], ]; const LAST_LAYER_CURVE = [ [0, 0, 0], [0.2, 0.005, 0.077], [0.4, 0.164, 2.048], [0.6, 0.836, 2.048], [0.8, 0.995, 0.077], [1, 1, 0], ]; let palette = []; let layers = []; function metrics() { const scale = min(width, height) / 800; const size = SIZE * scale; const digitW = size * 0.95; return { scale: scale, size: size, digitW: digitW, digitH: size * 2, band: size / 3, gridOriginX: -size / 2 - digitW / 2, }; } function setup() { createCanvas(windowWidth, windowHeight, WEBGL); palette = colorArray[1].colors; for (let i = 0; i < N; i++) { layers.push(blendCurves(FIRST_LAYER_CURVE, LAST_LAYER_CURVE, i / (N - 1))); } } function draw() { const m = metrics(); const depth = 8000 * m.scale; background(palette[6]); ortho(-width / 2, width / 2, -height / 2, height / 2, -depth, depth); const twoPath = digitTwoPath(m); const digits = [ { path: twoPath, x: m.gridOriginX + m.digitW / 2 }, { path: mirrorX(twoPath), x: m.gridOriginX + m.size * 2 - m.digitW / 2 }, ]; const layerGap = m.size / (N - 1); const travel = entryDistance(m); push(); applyViewAngle(); drawingContext.disable(drawingContext.DEPTH_TEST); drawGuideGrid(m); drawingContext.enable(drawingContext.DEPTH_TEST); stroke(palette[6]); strokeWeight(1); fill(palette[4]); drawingContext.enable(drawingContext.POLYGON_OFFSET_FILL); drawingContext.polygonOffset(1, 1); for (let i = 0; i < N; i++) { const amount = layerAmount(layers[i], frameCount - i * STAGGER); push(); translate(0, 0, (i - (N - 1) / 2) * layerGap); for (let j = 0; j < digits.length; j++) { const dir = entryDirection(i * digits.length + j); drawDigit(digits[j].path, digits[j].x, amount, dir, travel, m); } pop(); } drawingContext.disable(drawingContext.POLYGON_OFFSET_FILL); pop(); } function windowResized() { resizeCanvas(windowWidth, windowHeight); } function blendCurves(curveA, curveB, amount) { const out = []; for (let i = 0; i < curveA.length; i++) { out.push([ lerp(curveA[i][0], curveB[i][0], amount), lerp(curveA[i][1], curveB[i][1], amount), lerp(curveA[i][2], curveB[i][2], amount), ]); } return out; } function evaluateCurve(curve, x) { let i = 0; while (i < curve.length - 2 && x > curve[i + 1][0]) i++; const a = curve[i]; const b = curve[i + 1]; const h = b[0] - a[0]; const t = (x - a[0]) / h; const t2 = t * t; const t3 = t2 * t; return ( (2 * t3 - 3 * t2 + 1) * a[1] + (t3 - 2 * t2 + t) * h * a[2] + (-2 * t3 + 3 * t2) * b[1] + (t3 - t2) * h * b[2] ); } function layerAmount(curve, frame) { if (frame < 0) return 0; const t = frame % (2 * (DURATION + LOOP_DELAY)); if (t < DURATION) return evaluateCurve(curve, t / DURATION); if (t < DURATION + LOOP_DELAY) return 1; if (t < 2 * DURATION + LOOP_DELAY) { return 1 - evaluateCurve(curve, (t - DURATION - LOOP_DELAY) / DURATION); } return 0; } function entryDirection(index) { const angle = index * PI * (3 - sqrt(5)); return { x: cos(angle), y: sin(angle) }; } function viewAngle() { return { yaw: PI / 8, pitch: PI / 4 }; } function applyViewAngle() { const view = viewAngle(); rotateZ(-atan2(sin(view.yaw), 1)); rotateY(view.yaw); rotateX(view.pitch); } function entryDistance(m) { const view = viewAngle(); const cosYaw = cos(view.yaw); const sinYaw = sin(view.yaw); const cosPitch = cos(view.pitch); const sinPitch = sin(view.pitch); const frobenius = cosYaw * cosYaw + sinPitch * sinPitch * sinYaw * sinYaw + cosPitch * cosPitch; const det = cosYaw * cosPitch; const minScale = sqrt( (frobenius - sqrt(frobenius * frobenius - 4 * det * det)) / 2, ); const screenRadius = dist(0, 0, width, height) / 2; const digitRadius = dist( 0, 0, 0, max(abs(m.gridOriginX), abs(m.gridOriginX + m.size * 2)), m.size, m.size / 2, ); return (screenRadius + digitRadius) / minScale; } function drawGuideGrid(m) { const extent = max(width, height) * 4; const lineCount = ceil(extent / m.size); const zMin = -m.size / 2; const zMax = m.size / 2; const guide = color(palette[4]); guide.setAlpha(100); stroke(guide); strokeWeight(1); for (let i = -lineCount; i <= lineCount; i++) { const x = m.gridOriginX + i * m.size; const y = i * m.size; line(x, -extent, zMin, x, extent, zMin); line(-extent, y, zMin, extent, y, zMin); for (let j = -lineCount; j <= lineCount; j++) { line(x, j * m.size, zMin, x, j * m.size, zMax); } } } function drawDigit(path, offsetX, amount, dir, travel, m) { if (amount <= 0) return; const progress = min(amount, 1) * 2; const enter = min(progress, 1); const extend = max(progress - 1, 0); const back = (1 - enter) * travel; const length = m.band + extend * (pathLength(path) - m.band); const half = m.band / 2; const centerline = trimPath(path, length, half); const sideA = offsetPath(centerline, half); const sideB = offsetPath(centerline, -half); push(); translate(offsetX + dir.x * back, dir.y * back, 0); beginShape(); for (let i = 0; i < sideA.length; i++) { vertex(sideA[i].x, sideA[i].y); } for (let i = sideB.length - 1; i >= 0; i--) { vertex(sideB[i].x, sideB[i].y); } endShape(CLOSE); pop(); } function pathLength(path) { let total = 0; for (let i = 1; i < path.length; i++) { total += dist(path[i - 1].x, path[i - 1].y, path[i].x, path[i].y); } return total; } function trimPath(path, length, half) { const out = [path[0]]; let remain = length - half; for (let i = 1; i < path.length; i++) { const from = path[i - 1]; const to = path[i]; const len = dist(from.x, from.y, to.x, to.y); if (remain < len) { const t = (remain + half) / len; out.push({ x: lerp(from.x, to.x, t), y: lerp(from.y, to.y, t) }); return out; } out.push(to); remain -= len; } return out; } function offsetPath(path, lateral) { const out = []; for (let i = 0; i < path.length; i++) { let ox = 0; let oy = 0; if (i > 0) { const n = segmentNormal(path[i - 1], path[i]); ox += n.x; oy += n.y; } if (i < path.length - 1) { const n = segmentNormal(path[i], path[i + 1]); ox += n.x; oy += n.y; } out.push({ x: path[i].x + ox * lateral, y: path[i].y + oy * lateral }); } return out; } function segmentNormal(from, to) { const len = dist(from.x, from.y, to.x, to.y); return { x: -(to.y - from.y) / len, y: (to.x - from.x) / len }; } function digitTwoPath(m) { const half = m.band / 2; const edgeX = m.digitW / 2; const innerX = edgeX - half; const innerY = m.digitH / 2 - half; return [ { x: -edgeX, y: -innerY }, { x: innerX, y: -innerY }, { x: innerX, y: 0 }, { x: -innerX, y: 0 }, { x: -innerX, y: innerY }, { x: edgeX, y: innerY }, ]; } function mirrorX(path) { return path.map(function (p) { return { x: -p.x, y: p.y }; }); } const colorArray = [ { id: 0, colors: ["#253276", "#dfdad3", "#ffffff", "#000000"], }, { id: 1, colors: [ "#9dbdba", "#f8b042", "#e47763", "#253276", "#dfdad3", "#FFFFFF", "#000000", ], }, ];

One Path, 25 Figures