const PARAMS = { palette: [{ id: 0, colors: ["#000000", "#ffffff"] }], shared: { lineStrokeRatio: 0.03, markerDotRatio: 0.015, markerDotLargeRatio: 0.04, circleArcLengthTarget: 4, circleSamplesMin: 24, circleSamplesMax: 360, sphereDetailMin: 16, sphereDetailMax: 96, circleOutlineLiftRatio: 0.002, markerRevealStaggerRatio: 0.35, beat: { duration: 0.3, stagger: 0.05, unitStagger: 0.025, attack: 0.18, attackEase: "outExpo", decayEase: "outExpo", spinEase: "inOutCubic", }, }, config: { canvasMode: "window", fixedSize: { w: 8950, h: 1080 }, paletteId: 0, backgroundIndex: 0, layoutWidthFill: 0.97, cameraRotX: 0, cameraRotY: 0, handoffDuration: 0.6, handoffFlyEnd: 0.72, handoffEase: "outExpo", riseEase: "outExpo", handoffFlyEase: "outExpo", handoffBendEase: "outExpo", markerRevealDuration: 0.25, markerRevealEase: "outExpo", }, hourTens: { period: 36000, beatDurationScale: 2.5, zOffset: 0, colorIndices: [1, 0], viewRotX: 0, viewRotY: 0.15, max: 2, spanRatio: 0.8, radiusRatio: 0.22, tubeRatio: 0.07, strokeRatio: 0.016, vanishStagger: 0.06, vanishEase: "inOutCubic", vanishRetract: 0.7, vanishDelay: 0, exitTravelRatio: 1.1, formDuration: 0.3, meridianLift: 1.1, beatPMorph: 0.33, beatPPass: 0.7, beatPShift: 0.85, beatCylLenRatio: 0.6, beatEase: "inOutCubic", beatMorphTurns: 1.4, }, hourOnes: { period: 3600, zOffset: 0, colorIndices: [1, 0], viewRotX: 0, viewRotY: 0.08, max: 9, cols: 3, rows: 3, colSpanRatio: 0.5, rowSpanRatio: 0.45, cylRadiusRatio: 0.072, heightRatio: 0.14, strokeRatio: 0.016, outlineLift: 1.05, vcollapseEnd: 0.3, gatherEnd: 0.55, absorbReach: 0.6, absorbShrinkStart: 0.2, extrudeDuration: 0.3, beatShrinkHeight: 0.8, }, minTens: { period: 600, zOffset: 0, colorIndices: [1, 0], viewRotX: 0, viewRotY: 0, max: 5, spanRatio: 0.425, discRadiusRatio: 1.0, discStrokeRatio: 0.85, pConverge: 0.3, pShrink: 0.5, pStretch: 0.75, stretchRatio: 0.2, beatScale: 0.08, discZRatio: -0.015, discZStepRatio: 0.005, markerZRatio: 0.015, }, minOnes: { period: 60, zOffset: 0, colorIndices: [1, 0], viewRotX: 0, viewRotY: 0, max: 9, arcLengthRatio: 0.9, arcGapRatio: 0.18, flyEnd: 0.5, beatTurns: 1, flyShrinkRatio: 0.04, arriveShrinkPortion: 0.25, }, secTens: { period: 10, zOffset: 0, colorIndices: [1, 0], viewRotX: 0, viewRotY: 0, max: 5, spacingRatio: 0.072, handoffSamples: 24, riseDuration: 0.3, beatScale: 0.12, condenseEnd: 0.35, flyEnd: 0.675, }, secOnes: { period: 1, zOffset: 0, colorIndices: [1, 0], viewRotX: 0, viewRotY: 0, count: 9, spanRatio: 0.9, phaseConverge: 0.35, phaseHold: 0.15, pushDuration: 0.25, }, }; const colorArray = PARAMS.palette; const CONFIG = PARAMS.config; function buildElementEntry(name, drawFn) { let p = PARAMS[name]; let entry = { name: name, draw: drawFn, period: p.period, zOffset: p.zOffset, colorIndices: p.colorIndices, viewRotX: p.viewRotX, viewRotY: p.viewRotY, }; if (p.beatDurationScale !== undefined) { entry.beatDurationScale = p.beatDurationScale; } return entry; } function getHourTensSphereExitProgress(ctx) { let t = getHourTensSecondsSinceMidnight(ctx) - CONFIG.handoffDuration; let d = getMarkerRevealDuration(); if (t <= 0) { return 0; } if (t >= d) { return 1; } return t / d; } function getHourTensFormProgress(ctx) { let elapsed = getClockElapsed(ctx.virtualMs, ELEMENTS[0].period); let start = CONFIG.handoffDuration; let end = start + PARAMS.hourTens.formDuration; if (elapsed < start) { return 0; } if (elapsed >= end) { return 1; } return (elapsed - start) / PARAMS.hourTens.formDuration; } function getHourTensSecondsSinceMidnight(ctx) { let c = ctx.clock; return c.hour * 3600 + c.min * 60 + c.sec + c.ms / 1000; } function getHourOnesShrinkWindow() { let start = CONFIG.handoffDuration * (PARAMS.hourOnes.gatherEnd + (1 - PARAMS.hourOnes.gatherEnd) * PARAMS.hourOnes.absorbShrinkStart); return { start: start, duration: CONFIG.handoffDuration - start }; } function getHourTensRetractDuration() { return getHourOnesShrinkWindow().duration; } function getHourTensVanishDuration() { return getHourTensRetractDuration() / PARAMS.hourTens.vanishRetract; } function getHourTensVanishStart() { let start = getHourOnesShrinkWindow().start - getHourTensRetractDuration() + PARAMS.hourTens.vanishDelay; if (start < 0) { start = 0; } return start; } function getHourTensVanishTotal() { return ( (PARAMS.hourTens.max - 1) * PARAMS.hourTens.vanishStagger + getHourTensVanishDuration() ); } function getHourTensVanishProgress(ctx, i) { let t = getHourTensSecondsSinceMidnight(ctx) - getHourTensVanishStart(); let duration = getHourTensVanishDuration(); let order = PARAMS.hourTens.max - 1 - i; let start = order * PARAMS.hourTens.vanishStagger; let end = start + duration; if (t < start) { return 0; } if (t >= end) { return 1; } return (t - start) / duration; } function drawHourTensVanish(ctx, ringR, tube, spacing, i, vp) { let e = getEaseProgress(vp, PARAMS.hourTens.vanishEase); push(); translate(getHourTensSlotX(spacing, i), 0, 0); let retract = min(e / PARAMS.hourTens.vanishRetract, 1); if (retract < 1) { drawHourTensTorusArc(ctx, ringR, tube, (1 - retract) * TWO_PI, 0); } if (i === 0) { let s = getEaseProgress( getHourTensSphereExitProgress(ctx), CONFIG.handoffEase, ); if (s < 1) { push(); translate(ringR - ctx.size * PARAMS.hourTens.exitTravelRatio * s, 0, 0); noStroke(); fill(ctx.colors[0]); drawSmoothSphere(tube); pop(); } } pop(); } function getHourTensMeridianCount() { return PARAMS.hourOnes.max; } function getHourTensRingRadius(ctx) { return ctx.size * PARAMS.hourTens.radiusRatio; } function getHourTensTube(ctx) { return ctx.size * PARAMS.hourTens.tubeRatio; } function getHourTensSpacing(ctx) { if (PARAMS.hourTens.max <= 1) { return 0; } return (ctx.size * PARAMS.hourTens.spanRatio) / (PARAMS.hourTens.max - 1); } function getHourTensSlotX(spacing, i) { return -(spacing * (PARAMS.hourTens.max - 1)) / 2 + i * spacing; } function drawHourTensMeridian(ringR, tube, theta) { let ct = cos(theta); let st = sin(theta); let lift = tube * PARAMS.hourTens.meridianLift; let n = getCircleSampleCount(lift); beginShape(); for (let i = 0; i <= n; i += 1) { let phi = (i / n) * TWO_PI; let rr = ringR + lift * cos(phi); vertex(rr * ct, rr * st, lift * sin(phi)); } endShape(CLOSE); } function drawHourTensTorusArc(ctx, ringR, tube, sweep, startAngle) { if (sweep <= 0) { return; } let ringSteps = max(2, ceil((getCircleSampleCount(ringR) * sweep) / TWO_PI)); let tubeSteps = 16; noStroke(); fill(ctx.colors[0]); for (let a = 0; a < ringSteps; a += 1) { let t0 = startAngle + (a / ringSteps) * sweep; let t1 = startAngle + ((a + 1) / ringSteps) * sweep; beginShape(TRIANGLE_STRIP); for (let b = 0; b <= tubeSteps; b += 1) { let phi = (b / tubeSteps) * TWO_PI; let rr = ringR + tube * cos(phi); let z = tube * sin(phi); vertex(rr * cos(t0), rr * sin(t0), z); vertex(rr * cos(t1), rr * sin(t1), z); } endShape(); } stroke(ctx.colors[1]); strokeWeight(ctx.size * PARAMS.hourTens.strokeRatio); noFill(); let meridians = getHourTensMeridianCount(); for (let k = 0; k < meridians; k += 1) { let theta = (k / meridians) * TWO_PI; let rel = (theta - startAngle) % TWO_PI; if (rel < 0) { rel += TWO_PI; } if (rel <= sweep) { drawHourTensMeridian(ringR, tube, theta); } } if (sweep < TWO_PI - 0.001) { drawHourTensMeridian(ringR, tube, startAngle); drawHourTensMeridian(ringR, tube, startAngle + sweep); } } function getHourTensBeatPassZ(ctx, spacing) { let t = tan((ELEMENTS[0].viewRotY || 0) * TWO_PI); if (abs(t) < 0.001) { return spacing; } return spacing / t; } function getHourTensBeatDelay(ctx) { return (ELEMENTS.length - 1 - ctx.elementIndex) * S.beat.stagger; } function getHourTensMorphBeatDelay(ctx) { return getHourTensBeatDelay(ctx) - S.beat.stagger; } function getHourTensMorphBeatLocal(ctx) { let w = getClockParts(ctx.virtualMs).ms / 1000; return (w - getHourTensMorphBeatDelay(ctx)) / S.beat.duration; } function isHourTensBeatActive(ctx) { if (isBeatSuppressed(ctx.virtualMs, ctx.elementIndex)) { return false; } if (getHourTensMorphBeatLocal(ctx) <= 0) { return false; } let hourTensLocal = getBeatLocal(ctx.virtualMs, ctx.elementIndex); if (hourTensLocal <= 0 || hourTensLocal >= 1) { return false; } return true; } function getHourTensProgressAtMorphBeatEnd(ctx) { let morphEndW = getHourTensMorphBeatDelay(ctx) + S.beat.duration; let p = (morphEndW - getHourTensBeatDelay(ctx)) / getBeatDuration(ctx.elementIndex); if (p < 0) { p = 0; } return p; } function getHourTensBeatTailProgress(ctx) { if (isBeatSuppressed(ctx.virtualMs, ctx.elementIndex)) { return 0; } if (getHourTensMorphBeatLocal(ctx) < 1) { return 0; } let p = getDigitBeatProgress(ctx.virtualMs, ctx.elementIndex); let start = getHourTensProgressAtMorphBeatEnd(ctx); if (p < start) { return 0; } if (p >= 1) { return 1; } let tailP = (p - start) / (1 - start); if (tailP <= 0) { return 0; } if (tailP >= 1) { return 1; } return tailP; } function getHourTensBeatMorph(ctx) { if (isBeatSuppressed(ctx.virtualMs, ctx.elementIndex)) { return 0; } let local = getHourTensMorphBeatLocal(ctx); if (local <= 0) { return 0; } if (local >= 1) { return 1; } return getEaseProgress(local, S.beat.spinEase); } function getHourTensBeatTailPhases(tailP, includeShift) { let tailPassEnd = (PARAMS.hourTens.beatPPass - PARAMS.hourTens.beatPMorph) / (1 - PARAMS.hourTens.beatPMorph); let tailShiftEnd = (PARAMS.hourTens.beatPShift - PARAMS.hourTens.beatPMorph) / (1 - PARAMS.hourTens.beatPMorph); let pass = 0; if (tailP > 0) { pass = min(tailP / tailPassEnd, 1); } let shift = 0; let back = 0; if (includeShift) { if (tailP > tailPassEnd) { shift = min((tailP - tailPassEnd) / (tailShiftEnd - tailPassEnd), 1); } if (tailP > tailShiftEnd) { back = (tailP - tailShiftEnd) / (1 - tailShiftEnd); } } else if (tailP > tailPassEnd) { back = (tailP - tailPassEnd) / (1 - tailPassEnd); } return { pass: pass, shift: shift, back: back }; } function getHourTensBeatUnitMorph(morph, tailP, back) { if (tailP <= 0) { return morph; } if (back > 0) { return 1 - getEaseProgress(back, PARAMS.hourTens.beatEase); } return 1; } function getHourTensBeatSingleUnitMorph(morph, tailP, back) { if (tailP <= 0) { if (morph >= 1) { return 1; } return morph; } return getHourTensBeatUnitMorph(morph, tailP, back); } function getHourTensBeatPassOffsetZ(ctx, spacing, pass) { let passZ = getHourTensBeatPassZ(ctx, spacing); return passZ - getEaseProgress(pass, PARAMS.hourTens.beatEase) * passZ * 2; } function hourTensSlotHasTorus(i, drawCount, isForming, formProgress) { if (i < drawCount) { return true; } if (isForming && formProgress > 0 && i === drawCount) { return true; } return false; } function drawHourTensBeatUnit(ctx, ringR, tube, morphAmount) { let curRing = ringR * (1 - morphAmount); let sphereMaxR = getMarkerDotLargeRadius(ctx.size); let sphereR = sphereMaxR * morphAmount; push(); rotateZ(morphAmount * PARAMS.hourTens.beatMorphTurns * TWO_PI); if (curRing > tube * 0.05) { drawHourTensTorus(ctx, curRing, tube); } else if (sphereR > 0.5) { noStroke(); fill(ctx.colors[0]); drawSmoothSphere(sphereR); } pop(); } function drawHourTensBeatSingle(ctx, ringR, tube, spacing, morph, tailP) { let slotX = getHourTensSlotX(spacing, 0); let phases = getHourTensBeatTailPhases(tailP, false); let unitMorph = getHourTensBeatSingleUnitMorph(morph, tailP, phases.back); let xOffset = 0; if (tailP > 0 && phases.back <= 0) { let passE = getEaseProgress(phases.pass, PARAMS.hourTens.beatEase); let travel = ctx.size * PARAMS.hourTens.exitTravelRatio; xOffset = -travel * passE; } push(); translate(slotX + xOffset, 0, 0); drawHourTensBeatUnit(ctx, ringR, tube, unitMorph); pop(); } function drawHourTensBeatCycle(ctx, ringR, tube, spacing, morph, tailP) { let leftX = getHourTensSlotX(spacing, 0); let rightX = getHourTensSlotX(spacing, 1); let phases = getHourTensBeatTailPhases(tailP, true); let groupShift = spacing * getEaseProgress(phases.shift, PARAMS.hourTens.beatEase); let unitMorph = getHourTensBeatUnitMorph(morph, tailP, phases.back); push(); translate(leftX + groupShift, 0, 0); drawHourTensTorus(ctx, ringR, tube); pop(); let x = rightX; let z = 0; if (tailP > 0) { x = leftX; z = getHourTensBeatPassOffsetZ(ctx, spacing, phases.pass); } push(); translate(x + groupShift, 0, z); drawHourTensBeatUnit(ctx, ringR, tube, unitMorph); pop(); } function drawHourTensTorus(ctx, ringR, tube) { let detail = getCircleSampleCount(ringR + tube); noStroke(); fill(ctx.colors[0]); torus(ringR, tube, detail, 16); if (ringR > tube) { stroke(ctx.colors[1]); strokeWeight(ctx.size * PARAMS.hourTens.strokeRatio); noFill(); let meridians = getHourTensMeridianCount(); for (let k = 0; k < meridians; k += 1) { let theta = (k / meridians) * TWO_PI; drawHourTensMeridian(ringR, tube, theta); } } } function drawHourTensMarkers( ctx, spacing, digit, drawCount, isReceiving, isForming, formProgress, ) { let dotR = getMarkerDotRadius(ctx.size); let undoneStart = (isReceiving || isForming) && digit > 0 ? drawCount + 1 : drawCount; let originIndex = PARAMS.hourTens.max - 1; if (digit <= 0) { let t = getHourTensSecondsSinceMidnight(ctx); let vanishEnd = getHourTensVanishStart() + getHourTensVanishTotal(); let sphereEnd = CONFIG.handoffDuration + getMarkerRevealDuration(); let vanishActive = t < max(vanishEnd, sphereEnd); let revealElapsed = getMarkerRevealElapsed(ctx.virtualMs, ctx.elementIndex); let ox = getHourTensSlotX(spacing, originIndex); for (let i = 0; i < PARAMS.hourTens.max; i += 1) { if (vanishActive && getHourTensVanishProgress(ctx, i) < 1) { continue; } let progress = getMarkerSlotRevealProgress( revealElapsed, i, originIndex, PARAMS.hourTens.max, ); let tx = getHourTensSlotX(spacing, i); drawSpreadMarker(ctx, ox, 0, 0, tx, 0, 0, dotR, progress); } return; } noStroke(); fill(ctx.colors[0]); for (let i = undoneStart; i < PARAMS.hourTens.max; i += 1) { if (hourTensSlotHasTorus(i, drawCount, isForming, formProgress)) { continue; } push(); translate(getHourTensSlotX(spacing, i), 0, 0); drawSmoothSphere(dotR); pop(); } } function getHourTensDrawState(ctx) { let digit = ctx.digits[0]; let ringR = getHourTensRingRadius(ctx); let tube = getHourTensTube(ctx); let spacing = getHourTensSpacing(ctx); let hourOnesHandoff = getHandoff(ctx.virtualMs, 1); let isReceiving = hourOnesHandoff >= 0; let form = getHourTensFormProgress(ctx); let isForming = !isReceiving && form > 0 && form < 1; let drawCount = digit; if (isReceiving || isForming) { drawCount = digit - 1; if (drawCount < 0) { drawCount = 0; } } return { digit: digit, ringR: ringR, tube: tube, spacing: spacing, drawCount: drawCount, isReceiving: isReceiving, isForming: isForming, form: form, morph: getHourTensBeatMorph(ctx), tailP: getHourTensBeatTailProgress(ctx), inBeat: isHourTensBeatActive(ctx), }; } function drawHourTens(ctx) { let s = getHourTensDrawState(ctx); if (s.drawCount === 1 && s.inBeat) { drawHourTensBeatSingle(ctx, s.ringR, s.tube, s.spacing, s.morph, s.tailP); } else if (s.drawCount === PARAMS.hourTens.max && s.inBeat) { drawHourTensBeatCycle(ctx, s.ringR, s.tube, s.spacing, s.morph, s.tailP); } else { for (let i = 0; i < s.drawCount; i += 1) { push(); translate(getHourTensSlotX(s.spacing, i), 0, 0); drawHourTensTorus(ctx, s.ringR, s.tube); pop(); } } if (s.isForming && s.digit > 0) { let e = getEaseProgress(s.form, CONFIG.handoffEase); push(); translate(getHourTensSlotX(s.spacing, s.drawCount), 0, 0); drawHourTensTorusArc(ctx, s.ringR, s.tube, e * TWO_PI, 0); pop(); } if (s.digit <= 0) { let t = getHourTensSecondsSinceMidnight(ctx); let vanishEnd = getHourTensVanishStart() + getHourTensVanishTotal(); let sphereEnd = CONFIG.handoffDuration + getMarkerRevealDuration(); if (t < max(vanishEnd, sphereEnd)) { for (let i = 0; i < PARAMS.hourTens.max; i += 1) { let vp = getHourTensVanishProgress(ctx, i); drawHourTensVanish(ctx, s.ringR, s.tube, s.spacing, i, vp); } } } drawHourTensMarkers( ctx, s.spacing, s.digit, s.drawCount, s.isReceiving, s.isForming, s.form, ); } function getHourOnesExtrudeProgress(ctx) { let elapsed = getClockElapsed(ctx.virtualMs, ELEMENTS[1].period); let start = CONFIG.handoffDuration; let end = start + PARAMS.hourOnes.extrudeDuration; if (elapsed < start) { return 0; } if (elapsed >= end) { return 1; } return (elapsed - start) / PARAMS.hourOnes.extrudeDuration; } function getHourOnesCylRadius(ctx) { return ctx.size * PARAMS.hourOnes.cylRadiusRatio; } function getHourOnesCylHeight(ctx) { return ctx.size * PARAMS.hourOnes.heightRatio; } function getHourOnesColSpacing(ctx) { return (ctx.size * PARAMS.hourOnes.colSpanRatio) / (PARAMS.hourOnes.cols - 1); } function getHourOnesRowSpacing(ctx) { return (ctx.size * PARAMS.hourOnes.rowSpanRatio) / (PARAMS.hourOnes.rows - 1); } function getHourOnesSlotCount(ctx) { if (ctx.digits[0] >= 2) { return 3; } return PARAMS.hourOnes.max; } function getHourOnesHandoffCount(ctx) { let prevTens = (ctx.digits[0] + 2) % 3; if (prevTens >= 2) { return 3; } return PARAMS.hourOnes.max; } function getHourOnesSlotPos(ctx, i, count) { let rows = ceil(count / PARAMS.hourOnes.cols); let col = i % PARAMS.hourOnes.cols; let row = floor(i / PARAMS.hourOnes.cols); let colSpacing = getHourOnesColSpacing(ctx); let rowSpacing = getHourOnesRowSpacing(ctx); return { x: (col - (PARAMS.hourOnes.cols - 1) / 2) * colSpacing, y: (row - (rows - 1) / 2) * rowSpacing, }; } function getHourOnesBeatHeight(h, beat) { let curH = h * (1 - PARAMS.hourOnes.beatShrinkHeight * beat); if (curH < 0.5) { curH = 0.5; } return curH; } function drawHourOnesCylinder(ctx, r, h, rotZ) { let detail = getCircleSampleCount(r); push(); let rz = rotZ === undefined ? HALF_PI : rotZ; rotateZ(rz); noStroke(); fill(ctx.colors[0]); cylinder(r, h, detail, 1, true, true); let outlineR = r * PARAMS.hourOnes.outlineLift; stroke(ctx.colors[1]); strokeWeight(ctx.size * PARAMS.hourOnes.strokeRatio); noFill(); push(); translate(0, -h / 2, 0); rotateX(HALF_PI); drawSmoothCircleOutline(outlineR * 2); pop(); push(); translate(0, h / 2, 0); rotateX(HALF_PI); drawSmoothCircleOutline(outlineR * 2); pop(); pop(); } function getHourOnesGridReveal(ctx, revealElapsed, i, originIndex, count) { if (revealElapsed <= 0) { return 0; } let a = getHourOnesSlotPos(ctx, i, count); let o = getHourOnesSlotPos(ctx, originIndex, count); let d = dist(a.x, a.y, o.x, o.y); let maxDist = 0; for (let k = 0; k < count; k += 1) { let p = getHourOnesSlotPos(ctx, k, count); let dk = dist(p.x, p.y, o.x, o.y); if (dk > maxDist) { maxDist = dk; } } let duration = getMarkerRevealDuration(); let stagger = 0; if (maxDist > 0) { stagger = (d / maxDist) * duration * S.markerRevealStaggerRatio; } let local = (revealElapsed - stagger) / duration; if (local <= 0) { return 0; } if (local >= 1) { return 1; } return getEaseProgress(local, getMarkerRevealEaseName()); } function drawHourOnes(ctx) { if (ctx.handoff >= 0) { drawHourOnesHandoff(ctx); return; } let digit = ctx.digits[1]; let r = getHourOnesCylRadius(ctx); let h = getHourOnesCylHeight(ctx); let slotCount = getHourOnesSlotCount(ctx); let minTensHandoff = getHandoff(ctx.virtualMs, 2); let isReceiving = minTensHandoff >= 0; let extrude = getHourOnesExtrudeProgress(ctx); let isExtruding = !isReceiving && extrude > 0 && extrude < 1; let drawCount = digit; if (isReceiving || isExtruding) { drawCount = digit - 1; if (drawCount < 0) { drawCount = 0; } } for (let i = 0; i < drawCount; i += 1) { let pos = getHourOnesSlotPos(ctx, i, slotCount); let unitIndex = drawCount - 1 - i; let beat = getDigitBeat(ctx.virtualMs, ctx.elementIndex, unitIndex); let curH = getHourOnesBeatHeight(h, beat); push(); translate(pos.x, pos.y, 0); drawHourOnesCylinder(ctx, r, curH); pop(); } if (isExtruding && digit > 0) { let easedGrow = getEaseProgress(extrude, CONFIG.handoffEase); let curH = h * easedGrow; if (curH < 0.5) { curH = 0.5; } let pos = getHourOnesSlotPos(ctx, drawCount, slotCount); push(); translate(pos.x, pos.y, 0); drawHourOnesCylinder(ctx, r, curH); pop(); } let dotR = getMarkerDotRadius(ctx.size); let undoneStart = (isReceiving || isExtruding) && digit > 0 ? drawCount + 1 : drawCount; let originIndex = slotCount - 1; if (digit <= 0) { let revealElapsed = getMarkerRevealElapsed(ctx.virtualMs, ctx.elementIndex); let o = getHourOnesSlotPos(ctx, originIndex, slotCount); for (let i = 0; i < slotCount; i += 1) { let pos = getHourOnesSlotPos(ctx, i, slotCount); let progress = getHourOnesGridReveal( ctx, revealElapsed, i, originIndex, slotCount, ); drawSpreadMarker(ctx, o.x, o.y, 0, pos.x, pos.y, 0, dotR, progress); } } else { noStroke(); fill(ctx.colors[0]); for (let i = undoneStart; i < slotCount; i += 1) { let pos = getHourOnesSlotPos(ctx, i, slotCount); push(); translate(pos.x, pos.y, 0); drawSmoothSphere(dotR); pop(); } } } function drawHourOnesHandoff(ctx) { let r = getHourOnesCylRadius(ctx); let h = getHourOnesCylHeight(ctx); let hf = ctx.handoff; let count = getHourOnesHandoffCount(ctx); let leftX = getHourOnesSlotPos(ctx, 0, count).x; let vP = getEaseProgress( min(hf / PARAMS.hourOnes.vcollapseEnd, 1), CONFIG.handoffEase, ); let gP = 0; if (hf > PARAMS.hourOnes.vcollapseEnd) { gP = getEaseProgress( min( (hf - PARAMS.hourOnes.vcollapseEnd) / (PARAMS.hourOnes.gatherEnd - PARAMS.hourOnes.vcollapseEnd), 1, ), CONFIG.handoffEase, ); } let rawS = 0; if (hf > PARAMS.hourOnes.gatherEnd) { rawS = (hf - PARAMS.hourOnes.gatherEnd) / (1 - PARAMS.hourOnes.gatherEnd); if (rawS > 1) { rawS = 1; } } let isAbsorb = ctx.digits[0] <= 0; let sP = 0; let shrink = 0; if (rawS > 0) { if (isAbsorb) { let reach = rawS / PARAMS.hourOnes.absorbReach; if (reach > 1) { reach = 1; } sP = getEaseProgress(reach, CONFIG.handoffEase); if (rawS > PARAMS.hourOnes.absorbShrinkStart) { shrink = getEaseProgress( (rawS - PARAMS.hourOnes.absorbShrinkStart) / (1 - PARAMS.hourOnes.absorbShrinkStart), CONFIG.handoffEase, ); } } else { sP = getEaseProgress(rawS, CONFIG.handoffEase); } } if (rawS > 0) { let tilt = HALF_PI * (1 - sP); let targetSlot = ctx.digits[0] - 1; if (targetSlot < 0) { targetSlot = PARAMS.hourTens.max - 1; } let slotX = getHourTensSlotX(getHourTensSpacing(ctx), targetSlot); let targetX = slotX + getHourTensRingRadius(ctx); let targetY = 0; let el1 = ELEMENTS[1]; let el0 = ELEMENTS[0]; let rx1 = (el1.viewRotX || 0) * TWO_PI; let ry1 = (el1.viewRotY || 0) * TWO_PI; let rx0 = (el0.viewRotX || 0) * TWO_PI; let ry0 = (el0.viewRotY || 0) * TWO_PI; let curH = h * (1 - shrink); if (curH <= 0.5) { return; } push(); rotateY(-ry1 * sP); rotateX(-rx1 * sP); translate(ctx.cellOffsetLeft * sP, 0, 0); rotateX(rx0 * sP); rotateY(ry0 * sP); translate(leftX + (targetX - leftX) * sP, targetY * sP, 0); drawHourOnesCylinder(ctx, r, curH, tilt); pop(); return; } for (let i = 0; i < count; i += 1) { let pos = getHourOnesSlotPos(ctx, i, count); let gx = pos.x + (leftX - pos.x) * gP; let gy = pos.y * (1 - vP); push(); translate(gx, gy, 0); drawHourOnesCylinder(ctx, r, h); pop(); } } function getMinTensDiscRadius(ctx) { return getMinOnesRadius(ctx) * PARAMS.minTens.discRadiusRatio; } function getMinTensDiscStrokeWeight(ctx) { return getLineStrokeWeight(ctx.size) * PARAMS.minTens.discStrokeRatio; } function getMinTensSpacing(ctx) { return (ctx.size * PARAMS.minTens.spanRatio) / (PARAMS.minTens.max - 1); } function getMinTensDiscX(spacing, i) { return -(spacing * (PARAMS.minTens.max - 1)) / 2 + i * spacing; } function getMinTensDiscCenterY(discR) { return 0; } function getMinTensMarkerY(discR) { return discR; } function getMinTensDiscZ(ctx, i) { let step = 0; if (i !== undefined) { step = ctx.size * PARAMS.minTens.discZStepRatio * i; } return ctx.size * PARAMS.minTens.discZRatio + step; } function getMinTensMarkerZ(ctx) { return ctx.size * PARAMS.minTens.markerZRatio; } function drawMinTensDisc(ctx, discR) { stroke(ctx.colors[1]); strokeWeight(getMinTensDiscStrokeWeight(ctx)); fill(ctx.colors[0]); drawSmoothCircle(discR * 2); } function getMinTensSectorSweep(ctx) { let h = getHandoff(ctx.virtualMs, 3); return getMinOnesHandoffSweepP(h); } function drawMinTensSector(ctx, discR, sweepP) { let amount = sweepP * TWO_PI; if (amount <= 0) { return; } let from = -HALF_PI - (1 - sweepP) * TWO_PI; let fullSamples = getCircleSampleCount(discR); let n = ceil((fullSamples * amount) / TWO_PI); if (n < 16) { n = 16; } noStroke(); fill(ctx.colors[0]); drawFilledFan(discR, from, amount, 0); let strokeW = getMinTensDiscStrokeWeight(ctx); let lift = discR * 2 * S.circleOutlineLiftRatio; push(); translate(0, 0, lift); stroke(ctx.colors[1]); strokeWeight(strokeW); strokeCap(ROUND); noFill(); beginShape(); for (let i = 0; i <= n; i += 1) { let a = from - (i / n) * amount; vertex(cos(a) * discR, sin(a) * discR, 0); } endShape(); pop(); } function drawMinTens(ctx) { if (ctx.handoff >= 0) { drawMinTensHandoff(ctx); return; } let digit = ctx.digits[2]; let discR = getMinTensDiscRadius(ctx); let spacing = getMinTensSpacing(ctx); let isReceiving = getHandoff(ctx.virtualMs, 3) >= 0; let drawCount = digit; if (isReceiving) { drawCount = digit - 1; if (drawCount < 0) { drawCount = 0; } } let discCenterY = getMinTensDiscCenterY(discR); for (let i = 0; i < drawCount; i += 1) { let beat = getDigitBeatWave( ctx.virtualMs, ctx.elementIndex, drawCount - 1 - i, ); push(); translate( getMinTensDiscX(spacing, i), discCenterY, getMinTensDiscZ(ctx, i), ); scale(1 + PARAMS.minTens.beatScale * beat); drawMinTensDisc(ctx, discR); pop(); } } function drawMinTensMarkers(ctx) { if (ctx.handoff >= 0) { return; } let digit = ctx.digits[2]; let discR = getMinTensDiscRadius(ctx); let spacing = getMinTensSpacing(ctx); let isReceiving = getHandoff(ctx.virtualMs, 3) >= 0; let drawCount = digit; if (isReceiving) { drawCount = digit - 1; if (drawCount < 0) { drawCount = 0; } } let isSectorFilling = isReceiving && digit > 0 && getMinTensSectorSweep(ctx) > 0 && getHandoff(ctx.virtualMs, 2) < 0; let dotR = getMarkerDotRadius(ctx.size); let undoneStart = isSectorFilling ? drawCount + 1 : drawCount; let markerY = getMinTensMarkerY(discR); let markerZ = getMinTensMarkerZ(ctx); if (digit <= 0 && !isReceiving) { let revealElapsed = getMarkerRevealElapsed(ctx.virtualMs, ctx.elementIndex); let originIndex = PARAMS.minTens.max - 1; for (let i = 0; i < PARAMS.minTens.max; i += 1) { let tx = getMinTensDiscX(spacing, i); let ox = getMinTensDiscX(spacing, originIndex); let progress = getMarkerSlotRevealProgress( revealElapsed, i, originIndex, PARAMS.minTens.max, ); drawSpreadMarker( ctx, ox, markerY, markerZ, tx, markerY, markerZ, dotR, progress, ); } return; } noStroke(); fill(ctx.colors[0]); for (let i = undoneStart; i < PARAMS.minTens.max; i += 1) { push(); translate(getMinTensDiscX(spacing, i), markerY, markerZ); drawSmoothSphere(dotR); pop(); } } function getMinTensConvergeX(spacing) { return getMinTensDiscX(spacing, 0); } function getMinTensPhaseProgress(handoff, start, end) { if (handoff <= start) { return 0; } let p = (handoff - start) / (end - start); if (p > 1) { p = 1; } return getEaseProgress(p, CONFIG.handoffEase); } function drawMinTensHandoffDisc(ctx, discR, x, y, z) { push(); translate(x, y, z); stroke(ctx.colors[1]); strokeWeight(getMinTensDiscStrokeWeight(ctx)); fill(ctx.colors[0]); drawSmoothCircle(discR * 2); pop(); } function drawMinTensStadium(ctx, xLeft, xRight, r, z) { if (xRight - xLeft < ctx.size * 0.005) { drawMinTensHandoffDisc(ctx, r, xLeft, 0, z); return; } let border = getMinTensDiscStrokeWeight(ctx); strokeCap(ROUND); stroke(ctx.colors[1]); strokeWeight(r * 2 + border * 2); line(xLeft, 0, z, xRight, 0, z); stroke(ctx.colors[0]); strokeWeight(r * 2); let zf = z + ctx.size * 0.002; line(xLeft, 0, zf, xRight, 0, zf); } function drawMinTensHandoff(ctx) { let discR = getMinTensDiscRadius(ctx); let spacing = getMinTensSpacing(ctx); let convergeX = getMinTensConvergeX(spacing); let discZ = getMinTensDiscZ(ctx); let discCenterY = getMinTensDiscCenterY(discR); let cylR = getHourOnesCylRadius(ctx); let h = ctx.handoff; if (h < PARAMS.minTens.pConverge) { let converge = getEaseProgress( h / PARAMS.minTens.pConverge, CONFIG.handoffEase, ); drawMinTensHandoffDisc( ctx, discR, convergeX, discCenterY, getMinTensDiscZ(ctx, 0), ); for (let i = 1; i < PARAMS.minTens.max; i += 1) { let startX = getMinTensDiscX(spacing, i); let x = startX + (convergeX - startX) * converge; drawMinTensHandoffDisc( ctx, discR, x, discCenterY, getMinTensDiscZ(ctx, i), ); } return; } if (h < PARAMS.minTens.pShrink) { let s = getMinTensPhaseProgress( h, PARAMS.minTens.pConverge, PARAMS.minTens.pShrink, ); let curR = discR + (cylR - discR) * s; drawMinTensHandoffDisc(ctx, curR, convergeX, discCenterY, discZ); return; } let stretchLen = ctx.size * PARAMS.minTens.stretchRatio; let leftEnd = convergeX - stretchLen; if (h < PARAMS.minTens.pStretch) { let st = getMinTensPhaseProgress( h, PARAMS.minTens.pShrink, PARAMS.minTens.pStretch, ); let curLeft = convergeX + (leftEnd - convergeX) * st; drawMinTensStadium(ctx, curLeft, convergeX, cylR, discZ); return; } let rt = getMinTensPhaseProgress(h, PARAMS.minTens.pStretch, 1); let curRight = convergeX + (leftEnd - convergeX) * rt; drawMinTensStadium(ctx, leftEnd, curRight, cylR, discZ); } function getMinOnesRadius(ctx) { let spacing = ctx.size * PARAMS.secTens.spacingRatio; let topY = getSecTensLineY(0, PARAMS.secTens.max, spacing); return abs(topY); } function getMinOnesPointInSecTens(ctx, angle, rot) { let r = getMinOnesRadius(ctx); let attachX = ctx.cellOffsetLeft; let lx = cos(angle) * r; let ly = sin(angle) * r; return { x: attachX + lx * cos(rot) - ly * sin(rot), y: lx * sin(rot) + ly * cos(rot), }; } function getMinOnesReceivingDrawCount(ctx) { let secTensHandoff = getHandoff(ctx.virtualMs, 4); let isReceiving = secTensHandoff >= 0; return getFilledDrawCount(ctx.digits[3], isReceiving); } function getMinOnesSlotSpan() { return TWO_PI / PARAMS.minOnes.max; } function getMinOnesArcGap() { return getMinOnesSlotSpan() * PARAMS.minOnes.arcGapRatio; } function getMinOnesArcSpan() { return getMinOnesSlotSpan() - getMinOnesArcGap(); } function getMinOnesArcStartAngle(arcIndex) { return -HALF_PI - arcIndex * getMinOnesSlotSpan(); } function drawMinOnesSingleArc(r, arcIndex, arcProgress) { let arcSpan = getMinOnesArcSpan(); let samples = getArcSampleCount(r, arcSpan * arcProgress); beginShape(); for (let s = 0; s <= samples; s += 1) { let t = (s / samples) * arcProgress; let angle = getMinOnesArcStartAngle(arcIndex) - t * arcSpan; vertex(cos(angle) * r, sin(angle) * r, 0); } endShape(); } function getMinOnesReceiveRotation(ctx) { let secTensHandoff = getHandoff(ctx.virtualMs, 4); if (secTensHandoff < 0) { return 0; } let phases = getSecTensHandoffPhases(secTensHandoff); if (phases.fly < 1) { return 0; } return -phases.bend * getMinOnesSlotSpan(); } function drawMinOnesRotateMarker(ctx, r, startAngle, endAngle, dotR, progress) { if (progress <= 0) { return; } let p = progress; if (p > 1) { p = 1; } let angle = startAngle + (endAngle - startAngle) * p; noStroke(); fill(ctx.colors[0]); push(); translate(cos(angle) * r, sin(angle) * r, 0); drawSmoothSphere(dotR); pop(); } function drawMinOnesArcChain(ctx, spanCount) { if (spanCount <= 0) { return; } let r = getMinOnesRadius(ctx); let fullArcs = floor(spanCount); let partial = spanCount - fullArcs; for (let a = 0; a < fullArcs; a += 1) { drawMinOnesSingleArc(r, a, 1); } if (partial > 0.001) { drawMinOnesSingleArc(r, fullArcs, partial); } } function drawMinOnesArcChainBeat(ctx, count) { if (count <= 0) { return; } let spin = getDigitBeatSpin(ctx.virtualMs, ctx.elementIndex); push(); rotateZ(-spin * PARAMS.minOnes.beatTurns * TWO_PI); drawMinOnesArcChain(ctx, count); pop(); } function drawMinOnesArcChainInSecTensCell(ctx, spanCount) { if (spanCount <= 0) { return; } push(); translate(ctx.cellOffsetLeft, 0, 0); stroke(ctx.colors[0]); strokeWeight(getLineStrokeWeight(ctx.size)); noFill(); drawMinOnesArcChain(ctx, spanCount); pop(); } function drawMinOnes(ctx) { if (ctx.handoff >= 0) { drawMinOnesHandoff(ctx); return; } let r = getMinOnesRadius(ctx); let slotSpan = getMinOnesSlotSpan(); let drawCount = getMinOnesReceivingDrawCount(ctx); let secTensHandoff = getHandoff(ctx.virtualMs, 4); let isReceiving = secTensHandoff >= 0; let receiveRot = getMinOnesReceiveRotation(ctx); stroke(ctx.colors[0]); strokeWeight(getLineStrokeWeight(ctx.size)); noFill(); if (!isReceiving) { drawMinOnesArcChainBeat(ctx, drawCount); } let dotR = getMarkerDotRadius(ctx.size); let vertexAngle = -HALF_PI; let revealElapsed = 0; if (ctx.digits[3] <= 0) { revealElapsed = getMarkerRevealElapsed(ctx.virtualMs, ctx.elementIndex); } for (let a = drawCount; a < PARAMS.minOnes.max; a += 1) { let targetAngle = -HALF_PI - (a + 1) * slotSpan; if (isReceiving && a === drawCount) { targetAngle = targetAngle + receiveRot; } let progress = 1; if (ctx.digits[3] <= 0) { progress = getMarkerSlotRevealProgress( revealElapsed, a, 0, PARAMS.minOnes.max, ); } drawMinOnesRotateMarker(ctx, r, vertexAngle, targetAngle, dotR, progress); } } function getMinOnesHandoffFlyP(h) { if (h >= PARAMS.minOnes.flyEnd) { return 1; } return getEaseProgress(h / PARAMS.minOnes.flyEnd, CONFIG.handoffEase); } function getMinOnesHandoffSweepP(h) { if (h <= PARAMS.minOnes.flyEnd) { return 0; } return getEaseProgress( (h - PARAMS.minOnes.flyEnd) / (1 - PARAMS.minOnes.flyEnd), CONFIG.handoffEase, ); } function getMinOnesHandoffArcRadius(ctx, h) { let r = getMinTensDiscRadius(ctx); if (h >= PARAMS.minOnes.flyEnd) { return r; } let flyP = getMinOnesHandoffFlyP(h); let flyScale = 1 - PARAMS.minOnes.flyShrinkRatio * flyP; return r * flyScale; } function isMinOnesHandoffOutlineOnly(ctx) { return getHandoff(ctx.virtualMs, 2) >= 0; } function getMinOnesHandoffOutlineFlyRadius(ctx, h) { let r = getMinOnesRadius(ctx); if (h >= PARAMS.minOnes.flyEnd) { return r; } let flyP = getMinOnesHandoffFlyP(h); let flyScale = 1 - PARAMS.minOnes.flyShrinkRatio * flyP; return r * flyScale; } function getMinOnesHandoffOutlineSweepRadius(ctx, sweepP) { let r = getMinOnesRadius(ctx); let shrinkP = getEaseProgress( min(sweepP / PARAMS.minOnes.arriveShrinkPortion, 1), CONFIG.handoffEase, ); return r - getLineStrokeWeight(ctx.size) * shrinkP; } function drawMinOnesHandoffBlackWhiteDisc(ctx, arcR) { noStroke(); fill(ctx.colors[1]); drawFilledFan(arcR, 0, TWO_PI, 0); stroke(ctx.colors[0]); strokeWeight(getLineStrokeWeight(ctx.size)); noFill(); push(); translate(0, 0, arcR * 2 * S.circleOutlineLiftRatio); drawSmoothCircleOutline(arcR * 2); pop(); } function getMinOnesHandoffSectorZ(arcR) { return arcR * 2 * S.circleOutlineLiftRatio * 3; } function drawMinOnesHandoff(ctx) { let spacing = getMinTensSpacing(ctx); let targetSlot = ctx.digits[2] - 1; if (targetSlot < 0) { targetSlot = 0; } let targetX = ctx.cellOffsetLeft + getMinTensDiscX(spacing, targetSlot); let targetY = getMinTensDiscCenterY(getMinOnesRadius(ctx)); let h = ctx.handoff; let outlineOnly = isMinOnesHandoffOutlineOnly(ctx); if (h < PARAMS.minOnes.flyEnd) { let flyP = getMinOnesHandoffFlyP(h); let arcR = getMinOnesHandoffArcRadius(ctx, h); if (outlineOnly) { arcR = getMinOnesHandoffOutlineFlyRadius(ctx, h); } push(); translate(targetX * flyP, targetY * flyP, 0); if (outlineOnly) { stroke(ctx.colors[0]); strokeWeight(getLineStrokeWeight(ctx.size)); noFill(); drawSmoothCircleOutline(arcR * 2); } else { drawMinOnesHandoffBlackWhiteDisc(ctx, arcR); } pop(); return; } let sweepP = getMinOnesHandoffSweepP(h); if (outlineOnly) { let remaining = (1 - sweepP) * TWO_PI; if (remaining <= 0) { return; } let arcR = getMinOnesHandoffOutlineSweepRadius(ctx, sweepP); push(); translate(targetX, targetY, 0); stroke(ctx.colors[0]); strokeWeight(getLineStrokeWeight(ctx.size)); noFill(); let startAngle = -HALF_PI; let n = getArcSampleCount(arcR, remaining); beginShape(); for (let s = 0; s <= n; s += 1) { let a = startAngle - (s / n) * remaining; vertex(cos(a) * arcR, sin(a) * arcR, 0); } endShape(); pop(); return; } let arcR = getMinOnesHandoffArcRadius(ctx, h); push(); translate(targetX, targetY, 0); drawMinOnesHandoffBlackWhiteDisc(ctx, arcR); if (sweepP > 0) { push(); translate(0, 0, getMinOnesHandoffSectorZ(arcR)); drawMinTensSector(ctx, arcR, sweepP); pop(); } pop(); } function getSecOnesPushProgress(ctx) { let elapsed = getClockParts(ctx.virtualMs).ms / 1000; if (elapsed >= PARAMS.secOnes.pushDuration) { return 1; } return getEaseProgress( elapsed / PARAMS.secOnes.pushDuration, CONFIG.handoffEase, ); } function drawSecOnes(ctx) { if (ctx.handoff >= 0) { drawSecOnesHandoff(ctx); return; } let dotR = getMarkerDotRadius(ctx.size); let largeR = getMarkerDotLargeRadius(ctx.size); let spacing = getSecOnesSpacing(ctx); if (ctx.digit <= 0) { drawSecOnesSlotMarkers(ctx, spacing, dotR); return; } let undone = PARAMS.secOnes.count - ctx.digit; let offset = (1 - getSecOnesPushProgress(ctx)) * spacing; noStroke(); fill(ctx.colors[0]); for (let k = 0; k < ctx.digit; k += 1) { push(); translate(getSecOnesDotX(spacing, undone + k) + offset, 0, 0); drawSmoothSphere(largeR); pop(); } for (let i = 0; i < undone; i += 1) { push(); translate(getSecOnesDotX(spacing, i), 0, 0); drawSmoothSphere(dotR); pop(); } } function getSecOnesHandoffPhases(handoff) { let converge = handoff / PARAMS.secOnes.phaseConverge; if (converge > 1) { converge = 1; } converge = getEaseProgress(converge, CONFIG.handoffEase); let stretch = 0; if (handoff > PARAMS.secOnes.phaseConverge + PARAMS.secOnes.phaseHold) { stretch = (handoff - PARAMS.secOnes.phaseConverge + PARAMS.secOnes.phaseHold) / (CONFIG.handoffFlyEnd - PARAMS.secOnes.phaseConverge + PARAMS.secOnes.phaseHold); } if (stretch > 1) { stretch = 1; } stretch = getEaseProgress(stretch, CONFIG.handoffEase); return { converge: converge, stretch: stretch, }; } function getSecOnesStretchLineEndpoints(ctx, stretch) { let spacing = getSecOnesSpacing(ctx); let targetHalfLen = (ctx.size * PARAMS.secOnes.spanRatio) / 2; let convergeX = getSecOnesConvergeX(spacing); let contactX = ctx.cellOffsetLeft; let finalLeft = contactX - targetHalfLen; let finalRight = contactX + targetHalfLen; if (ctx.digits[4] > 0) { let curLeft = convergeX + (finalLeft - convergeX) * stretch; let curRight = convergeX + (finalRight - convergeX) * stretch; return { left: curLeft, right: curRight }; } let reachDelta = finalLeft - convergeX; let reachAt = 1; if (abs(reachDelta) > 0.0001) { reachAt = (contactX - convergeX) / reachDelta; } if (reachAt > 1) { reachAt = 1; } if (reachAt < 0) { reachAt = 0; } let split = getReachShortenProgress(stretch, reachAt); let reachRight = convergeX + (finalRight - convergeX) * reachAt; if (split.shorten <= 0) { let curLeft = convergeX + (contactX - convergeX) * split.reach; let curRight = convergeX + (reachRight - convergeX) * split.reach; return { left: curLeft, right: curRight }; } let shortP = getEaseProgress(split.shorten, CONFIG.handoffEase); return { left: contactX, right: contactX + (reachRight - contactX) * (1 - shortP), }; } function drawSecOnesHandoff(ctx) { let largeR = getMarkerDotLargeRadius(ctx.size); let spacing = getSecOnesSpacing(ctx); let convergeX = getSecOnesConvergeX(spacing); let phases = getSecOnesHandoffPhases(ctx.handoff); if (phases.converge < 1) { noStroke(); fill(ctx.colors[0]); for (let i = 0; i < PARAMS.secOnes.count; i += 1) { let startX = getSecOnesDotX(spacing, i); let x = startX + (convergeX - startX) * phases.converge; push(); translate(x, 0, 0); drawSmoothSphere(largeR); pop(); } return; } if (phases.stretch <= 0) { noStroke(); fill(ctx.colors[0]); push(); translate(convergeX, 0, 0); drawSmoothSphere(largeR); pop(); return; } let endpoints = getSecOnesStretchLineEndpoints(ctx, phases.stretch); stroke(ctx.colors[0]); strokeWeight(getLineStrokeWeight(ctx.size)); line(endpoints.left, 0, 0, endpoints.right, 0, 0); } function drawSecOnesSlotMarkers(ctx, spacing, radius) { let revealElapsed = getMarkerRevealElapsed(ctx.virtualMs, ctx.elementIndex); let originIndex = PARAMS.secOnes.count - 1; let ox = getSecOnesDotX(spacing, originIndex); for (let i = 0; i < PARAMS.secOnes.count; i += 1) { let progress = getMarkerSlotRevealProgress( revealElapsed, i, originIndex, PARAMS.secOnes.count, ); let tx = getSecOnesDotX(spacing, i); drawSpreadMarker(ctx, ox, 0, 0, tx, 0, 0, radius, progress); } } function getSecOnesConvergeX(spacing) { return getSecOnesDotX(spacing, 0); } function getSecOnesSpacing(ctx) { return (ctx.size * PARAMS.secOnes.spanRatio) / (PARAMS.secOnes.count - 1); } function getSecOnesDotX(spacing, i) { return -(spacing * (PARAMS.secOnes.count - 1)) / 2 + i * spacing; } function drawSecTens(ctx) { if (ctx.handoff >= 0) { drawSecTensHandoff(ctx); return; } let digit = ctx.digits[4]; let lineLen = ctx.size * PARAMS.minOnes.arcLengthRatio; let spacing = ctx.size * PARAMS.secTens.spacingRatio; let halfLen = lineLen / 2; let secOnesHandoff = getHandoff(ctx.virtualMs, 5); let isReceiving = secOnesHandoff >= 0; let drawCount = getFilledDrawCount(digit, isReceiving); let riseOffset = isReceiving ? getSecTensRiseOffset(ctx, spacing) : 0; stroke(ctx.colors[0]); strokeWeight(getLineStrokeWeight(ctx.size)); noFill(); for (let i = 0; i < drawCount; i += 1) { let slot = PARAMS.secTens.max - drawCount + i; let y = getSecTensLineY(slot, PARAMS.secTens.max, spacing) + riseOffset; let beat = getDigitBeat(ctx.virtualMs, ctx.elementIndex, drawCount - 1 - i); let beatHalfLen = halfLen * (1 + PARAMS.secTens.beatScale * beat); push(); translate(0, y, 0); line(-beatHalfLen, 0, 0, beatHalfLen, 0, 0); pop(); } let undone = PARAMS.secTens.max - drawCount; let dotR = getMarkerDotRadius(ctx.size); let originIndex = PARAMS.secTens.max - 1; let originY = getSecTensLineY(originIndex, PARAMS.secTens.max, spacing); let revealElapsed = 0; if (digit <= 0) { revealElapsed = getMarkerRevealElapsed(ctx.virtualMs, ctx.elementIndex); } for (let i = 0; i < undone; i += 1) { let ty = getSecTensLineY(i, PARAMS.secTens.max, spacing); let progress = 1; if (digit <= 0) { progress = getMarkerSlotRevealProgress( revealElapsed, i, originIndex, PARAMS.secTens.max, ); } drawSpreadMarker(ctx, 0, originY, 0, 0, ty, 0, dotR, progress); } } function getSecTensLineY(i, total, spacing) { return -(total - 1 - i) * spacing; } function getSecTensRiseOffset(ctx, spacing) { let elapsed = getClockElapsed(ctx.virtualMs, 10); if (elapsed >= PARAMS.secTens.riseDuration) { return -spacing; } let p = elapsed / PARAMS.secTens.riseDuration; p = getEaseProgress(p, CONFIG.riseEase); return -spacing * p; } function getSecTensCircleAttach(ctx) { return getMinOnesPointInSecTens(ctx, -HALF_PI, 0); } function getSecTensHandoffPhases(handoff) { let condense = handoff / PARAMS.secTens.condenseEnd; if (condense > 1) { condense = 1; } condense = getEaseProgress(condense, CONFIG.handoffEase); let fly = 0; if (handoff > PARAMS.secTens.condenseEnd) { fly = (handoff - PARAMS.secTens.condenseEnd) / (PARAMS.secTens.flyEnd - PARAMS.secTens.condenseEnd); } if (fly > 1) { fly = 1; } fly = getEaseProgress(fly, CONFIG.handoffFlyEase); let bend = 0; if (handoff > PARAMS.secTens.flyEnd) { bend = (handoff - PARAMS.secTens.flyEnd) / (1 - PARAMS.secTens.flyEnd); } if (bend > 1) { bend = 1; } bend = getEaseProgress(bend, CONFIG.handoffBendEase); return { condense: condense, fly: fly, bend: bend, }; } function getSecTensHandoffLeftTip(fly, halfLen, vertexX) { let startLeft = -halfLen; return startLeft + (vertexX - startLeft) * fly; } function getSecTensHandoffRibbonHoriz(fly, bend, halfLen, lineLen, vertexX) { let left = getSecTensHandoffLeftTip(fly, halfLen, vertexX); if (fly < 1) { return { left: left, right: left + lineLen }; } return { left: vertexX, right: vertexX + (1 - bend) * lineLen, }; } function drawSecTensHandoffArcVertices( ctx, spanCount, arcSpan, includeArcStart, ) { let fullArcs = floor(spanCount); let partial = spanCount - fullArcs; let arcCount = fullArcs; if (partial > 0.001) { arcCount = fullArcs + 1; } for (let a = 0; a < arcCount; a += 1) { let arcProgress = 1; if (a === fullArcs) { arcProgress = partial; } let samples = max(2, floor(PARAMS.secTens.handoffSamples * arcProgress)); if (a > 0) { endShape(); beginShape(); } let startS = 0; if (a === 0 && !includeArcStart) { startS = 1; } for (let s = startS; s <= samples; s += 1) { let t = (s / samples) * arcProgress; let angle = getMinOnesArcStartAngle(a) - t * arcSpan; let pt = getMinOnesPointInSecTens(ctx, angle, 0); vertex(pt.x, pt.y, 0); } } } function drawSecTensHandoffRibbon( ctx, phases, halfLen, lineLen, topY, attachTarget, ) { let fly = phases.fly; let bend = phases.bend; let drawCount = getMinOnesReceivingDrawCount(ctx); let spanCount = drawCount + bend; let vertexX = attachTarget.x; let arcSpan = getMinOnesArcSpan(); let horiz = getSecTensHandoffRibbonHoriz( fly, bend, halfLen, lineLen, vertexX, ); let includeArcStart = fly >= 1 && bend > 0 && bend < 1; beginShape(); if (fly < 1 || bend < 1) { vertex(horiz.right, topY, 0); vertex(horiz.left, topY, 0); } if (bend > 0 && fly >= 1) { drawSecTensHandoffArcVertices(ctx, spanCount, arcSpan, includeArcStart); } endShape(); } function drawSecTensHandoffExistingArcs(ctx) { let drawCount = getMinOnesReceivingDrawCount(ctx); drawMinOnesArcChainInSecTensCell(ctx, drawCount); } function drawSecTensHandoff(ctx) { let lineLen = ctx.size * PARAMS.minOnes.arcLengthRatio; let spacing = ctx.size * PARAMS.secTens.spacingRatio; let halfLen = lineLen / 2; let topY = getSecTensLineY(0, PARAMS.secTens.max, spacing); let attachTarget = getSecTensCircleAttach(ctx); let phases = getSecTensHandoffPhases(ctx.handoff); stroke(ctx.colors[0]); strokeWeight(getLineStrokeWeight(ctx.size)); noFill(); if (phases.condense < 1) { for (let i = 0; i < PARAMS.secTens.max; i += 1) { let normalY = getSecTensLineY(i, PARAMS.secTens.max, spacing); let y = normalY + (topY - normalY) * phases.condense; push(); translate(0, y, 0); line(-halfLen, 0, 0, halfLen, 0, 0); pop(); } drawSecTensHandoffExistingArcs(ctx); return; } drawSecTensHandoffRibbon(ctx, phases, halfLen, lineLen, topY, attachTarget); drawSecTensHandoffExistingArcs(ctx); } const S = PARAMS.shared; function getLineStrokeWeight(size) { return size * S.lineStrokeRatio; } function getMarkerDotRadius(size) { return size * S.markerDotRatio; } function getMarkerDotLargeRadius(size) { return size * S.markerDotLargeRatio; } function getCircleSampleCount(radius) { if (radius <= 0) { return S.circleSamplesMin; } let samples = ceil((TWO_PI * radius) / S.circleArcLengthTarget); if (samples < S.circleSamplesMin) { samples = S.circleSamplesMin; } if (samples > S.circleSamplesMax) { samples = S.circleSamplesMax; } return samples; } function getArcSampleCount(radius, arcSpan) { if (radius <= 0 || arcSpan <= 0) { return 2; } let samples = ceil((abs(arcSpan) * radius) / S.circleArcLengthTarget); if (samples < 2) { samples = 2; } if (samples > S.circleSamplesMax) { samples = S.circleSamplesMax; } return samples; } function getSphereDetail(radius) { if (radius <= 0) { return S.sphereDetailMin; } let detail = ceil(radius / 4); if (detail < S.sphereDetailMin) { detail = S.sphereDetailMin; } if (detail > S.sphereDetailMax) { detail = S.sphereDetailMax; } return detail; } function drawFilledFan(r, startAngle, span, z) { if (r <= 0 || span <= 0) { return; } let fullSamples = getCircleSampleCount(r); let n = ceil((fullSamples * span) / TWO_PI); if (n < 16) { n = 16; } beginShape(TRIANGLES); for (let i = 0; i < n; i += 1) { let a0 = startAngle - (i / n) * span; let a1 = startAngle - ((i + 1) / n) * span; vertex(0, 0, z); vertex(cos(a0) * r, sin(a0) * r, z); vertex(cos(a1) * r, sin(a1) * r, z); } endShape(); } const ELEMENTS = [ buildElementEntry("hourTens", drawHourTens), buildElementEntry("hourOnes", drawHourOnes), buildElementEntry("minTens", drawMinTens), buildElementEntry("minOnes", drawMinOnes), buildElementEntry("secTens", drawSecTens), buildElementEntry("secOnes", drawSecOnes), ]; let palette = []; let isPaused = false; let speedMultiplier = 1; let rebaseMs = 0; let rebaseRealMs = 0; function setup() { pixelDensity(1); palette = colorArray[CONFIG.paletteId].colors; applyCanvasSize(); applyLineStrokeStyle(); rebaseMs = Date.now(); rebaseRealMs = Date.now(); } function getClockParts(virtualMs) { let date = new Date(virtualMs); return { date: date, ms: date.getMilliseconds(), sec: date.getSeconds(), min: date.getMinutes(), hour: date.getHours(), }; } function getTimeDigits(clock) { return [ floor(clock.hour / 10), clock.hour % 10, floor(clock.min / 10), clock.min % 10, floor(clock.sec / 10), clock.sec % 10, ]; } function getSecFrac(clock) { return clock.sec + clock.ms / 1000; } function getClockElapsed(virtualMs, period) { let clock = getClockParts(virtualMs); let secFrac = getSecFrac(clock); if (period <= 1) { return clock.ms / 1000; } if (period < 60) { return secFrac % period; } if (period <= 3600) { let secInHour = clock.min * 60 + secFrac; return secInHour % period; } if (period <= 43200) { let secInDay = clock.hour * 3600 + clock.min * 60 + secFrac; return secInDay % period; } return (virtualMs / 1000) % period; } function getHandoff(virtualMs, elementIndex) { if (elementIndex <= 0) { return -1; } let elapsed = getClockElapsed(virtualMs, ELEMENTS[elementIndex - 1].period); let duration = CONFIG.handoffDuration; if (elapsed >= duration) { return -1; } return elapsed / duration; } function getBeatShape(local) { if (local < S.beat.attack) { return getEaseProgress(local / S.beat.attack, S.beat.attackEase); } let d = (local - S.beat.attack) / (1 - S.beat.attack); return 1 - getEaseProgress(d, S.beat.decayEase); } function getBeatDuration(elementIndex) { let el = ELEMENTS[elementIndex]; if (el !== undefined && el.beatDurationScale !== undefined) { return S.beat.duration * el.beatDurationScale; } return S.beat.duration; } function getBeatLocal(virtualMs, elementIndex, unitIndex) { let w = getClockParts(virtualMs).ms / 1000; let delay = (ELEMENTS.length - 1 - elementIndex) * S.beat.stagger; if (unitIndex !== undefined) { delay = delay + unitIndex * S.beat.unitStagger; } return (w - delay) / getBeatDuration(elementIndex); } function getBeat(virtualMs, elementIndex, unitIndex) { let local = getBeatLocal(virtualMs, elementIndex, unitIndex); if (local <= 0 || local >= 1) { return 0; } return getBeatShape(local); } function getBeatWave(virtualMs, elementIndex, unitIndex) { let local = getBeatLocal(virtualMs, elementIndex, unitIndex); if (local <= 0 || local >= 1) { return 0; } return sin(TWO_PI * local); } function getBeatSpin(virtualMs, elementIndex, unitIndex) { let local = getBeatLocal(virtualMs, elementIndex, unitIndex); if (local <= 0) { return 0; } if (local >= 1) { return 1; } return getEaseProgress(local, S.beat.spinEase); } function isBeatSuppressed(virtualMs, elementIndex) { if (elementIndex >= ELEMENTS.length - 1) { return true; } if (getHandoff(virtualMs, elementIndex) >= 0) { return true; } if ( elementIndex + 1 < ELEMENTS.length && getHandoff(virtualMs, elementIndex + 1) >= 0 ) { return true; } return false; } function getDigitBeatSpin(virtualMs, elementIndex, unitIndex) { if (isBeatSuppressed(virtualMs, elementIndex)) { return 0; } return getBeatSpin(virtualMs, elementIndex, unitIndex); } function getDigitBeatWave(virtualMs, elementIndex, unitIndex) { if (isBeatSuppressed(virtualMs, elementIndex)) { return 0; } return getBeatWave(virtualMs, elementIndex, unitIndex); } function getDigitBeatProgress(virtualMs, elementIndex, unitIndex) { if (isBeatSuppressed(virtualMs, elementIndex)) { return 0; } let local = getBeatLocal(virtualMs, elementIndex, unitIndex); if (local <= 0) { return 0; } if (local >= 1) { return 1; } return local; } function getDigitBeat(virtualMs, elementIndex, unitIndex) { if (isBeatSuppressed(virtualMs, elementIndex)) { return 0; } return getBeat(virtualMs, elementIndex, unitIndex); } function getFilledDrawCount(digit, isReceiving) { if (digit <= 0) { return 0; } if (isReceiving) { return digit - 1; } return digit; } function getReachShortenProgress(progress, reachAt) { if (reachAt <= 0) { return { reach: 1, shorten: progress }; } if (reachAt >= 1) { return { reach: progress, shorten: 0 }; } if (progress <= reachAt) { return { reach: progress / reachAt, shorten: 0 }; } return { reach: 1, shorten: (progress - reachAt) / (1 - reachAt) }; } function getMarkerRevealElapsed(virtualMs, elementIndex) { let triggerPeriod; if (elementIndex >= ELEMENTS.length - 1) { triggerPeriod = ELEMENTS[elementIndex - 1].period; } else { triggerPeriod = ELEMENTS[elementIndex].period; } let elapsed = getClockElapsed(virtualMs, triggerPeriod); if (elapsed <= CONFIG.handoffDuration) { return 0; } return elapsed - CONFIG.handoffDuration; } function getMarkerRevealDuration() { if (CONFIG.markerRevealDuration !== undefined) { return CONFIG.markerRevealDuration; } return 0.4; } function getMarkerRevealEaseName() { if (CONFIG.markerRevealEase !== undefined) { return CONFIG.markerRevealEase; } return CONFIG.handoffEase; } function getMarkerSlotRevealProgress( revealElapsed, slotIndex, originIndex, totalSlots, ) { if (revealElapsed <= 0) { return 0; } let dist = abs(slotIndex - originIndex); let maxDist = 0; for (let i = 0; i < totalSlots; i += 1) { let d = abs(i - originIndex); if (d > maxDist) { maxDist = d; } } let duration = getMarkerRevealDuration(); let stagger = 0; if (maxDist > 0) { stagger = (dist / maxDist) * duration * S.markerRevealStaggerRatio; } let local = (revealElapsed - stagger) / duration; if (local <= 0) { return 0; } if (local >= 1) { return 1; } return getEaseProgress(local, getMarkerRevealEaseName()); } function drawSmoothCircle(diameter) { let r = diameter / 2; if (r <= 0) { return; } push(); noStroke(); drawFilledFan(r, 0, TWO_PI, 0); pop(); push(); noFill(); translate(0, 0, diameter * S.circleOutlineLiftRatio); drawSmoothCircleOutline(diameter); pop(); } function drawSmoothCircleOutline(diameter) { let r = diameter / 2; if (r <= 0) { return; } let n = getCircleSampleCount(r); beginShape(); for (let i = 0; i <= n; i += 1) { let a = (i / n) * TWO_PI; vertex(cos(a) * r, sin(a) * r, 0); } endShape(CLOSE); } function drawSmoothSphere(radius) { if (radius <= 0) { return; } let detail = getSphereDetail(radius); sphere(radius, detail, detail); } function drawSpreadMarker( ctx, ox, oy, oz, tx, ty, tz, radius, progress, fillColor, ) { if (progress <= 0) { return; } let p = progress; if (p > 1) { p = 1; } let x = ox + (tx - ox) * p; let y = oy + (ty - oy) * p; let z = oz + (tz - oz) * p; noStroke(); if (fillColor !== undefined) { fill(fillColor); } else { fill(ctx.colors[0]); } push(); translate(x, y, z); drawSmoothSphere(radius * p); pop(); } let animeEaseCache = {}; function resolveAnimeEase(easeName) { if (typeof anime === "undefined" || !anime.eases) { return function (p) { return p; }; } if (easeName === undefined) { return anime.eases.inOutCubic; } if (animeEaseCache[easeName] !== undefined) { return animeEaseCache[easeName]; } let parenIndex = easeName.indexOf("("); let easeFn; if (parenIndex <= -1) { easeFn = anime.eases[easeName]; if (typeof easeFn !== "function") { easeFn = anime.eases.inOutCubic; } else if ( easeName.indexOf("Back") !== -1 || easeName.indexOf("Elastic") !== -1 ) { easeFn = easeFn(); } } else { let name = easeName.slice(0, parenIndex); let argsStr = easeName.slice(parenIndex + 1, easeName.length - 1); let factory = anime.eases[name]; if (typeof factory !== "function") { easeFn = anime.eases.inOutCubic; } else { let argParts = argsStr.split(","); if (argParts.length === 1) { easeFn = factory(Number(argParts[0])); } else if (argParts.length === 2) { easeFn = factory(Number(argParts[0]), Number(argParts[1])); } else { easeFn = factory( Number(argParts[0]), Number(argParts[1]), Number(argParts[2]), ); } } } animeEaseCache[easeName] = easeFn; return easeFn; } function getEaseProgress(p, easeName, el, elEaseKey) { if (p <= 0) { return 0; } if (p >= 1) { return 1; } let name = easeName; if (name === undefined) { name = CONFIG.handoffEase; } if ( el !== undefined && elEaseKey !== undefined && el[elEaseKey] !== undefined ) { name = el[elEaseKey]; } if (name === "linear") { return p; } return resolveAnimeEase(name)(p); } function buildElementCtx(i, virtualMs, splitLayout) { let el = ELEMENTS[i]; let clock = getClockParts(virtualMs); let colors = resolveElementColors(el.colorIndices); let digits = getTimeDigits(clock); let cellOffsetLeft = 0; if (i > 0) { cellOffsetLeft = splitLayout.centers[i - 1] - splitLayout.centers[i]; } return { elementIndex: i, clock: clock, digits: digits, digit: digits[i], handoff: getHandoff(virtualMs, i), cellOffsetLeft: cellOffsetLeft, virtualMs: virtualMs, size: splitLayout.boxSize, colors: colors, }; } function drawElementAtIndex(i, virtualMs, splitLayout, drawFn) { let el = ELEMENTS[i]; if (el.hidden) { return; } let ctx = buildElementCtx(i, virtualMs, splitLayout); let zOff = 0; if (el.zOffset !== undefined) { zOff = splitLayout.boxSize * el.zOffset; } push(); translate(splitLayout.centers[i], 0, zOff); applyElementView(el.viewRotX || 0, el.viewRotY || 0); drawFn(ctx); pop(); } function beginFrontMarkers() { drawingContext.disable(drawingContext.DEPTH_TEST); } function endFrontMarkers() { drawingContext.enable(drawingContext.DEPTH_TEST); } function draw() { let virtualMs = getVirtualMs(); let W = width; background(palette[CONFIG.backgroundIndex]); applyLineStrokeStyle(); ortho(); if (CONFIG.cameraRotX) { rotateX(CONFIG.cameraRotX * TWO_PI); } if (CONFIG.cameraRotY) { rotateY(CONFIG.cameraRotY * TWO_PI); } let splitLayout = getSixSplitLayout(W); for (let i = 0; i < ELEMENTS.length; i += 1) { if (ELEMENTS[i].hidden) { continue; } drawElementAtIndex(i, virtualMs, splitLayout, ELEMENTS[i].draw); } beginFrontMarkers(); for (let i = 0; i < ELEMENTS.length; i += 1) { if (ELEMENTS[i].name !== "minTens") { continue; } drawElementAtIndex(i, virtualMs, splitLayout, drawMinTensMarkers); } endFrontMarkers(); } function getLayoutWidthFill() { if (CONFIG.layoutWidthFill === undefined) { return 0.92; } return CONFIG.layoutWidthFill; } function getVirtualMs() { if (isPaused) { return rebaseMs; } return rebaseMs + (Date.now() - rebaseRealMs) * speedMultiplier; } function syncVirtualAnchor() { rebaseMs = getVirtualMs(); rebaseRealMs = Date.now(); } function resolveElementColors(colorIndices) { let colors = []; for (let i = 0; i < colorIndices.length; i += 1) { colors.push(palette[colorIndices[i]]); } return colors; } function applyElementView(viewRotX, viewRotY) { if (viewRotX !== 0) { rotateX(viewRotX * TWO_PI); } if (viewRotY !== 0) { rotateY(viewRotY * TWO_PI); } } function applyCanvasSize() { if (CONFIG.canvasMode === "fixed") { createCanvas(CONFIG.fixedSize.w, CONFIG.fixedSize.h, WEBGL); return; } createCanvas(windowWidth, windowHeight, WEBGL); } function applyLineStrokeStyle() { strokeCap(ROUND); strokeJoin(ROUND); } function windowResized() { if (CONFIG.canvasMode === "fixed") { return; } resizeCanvas(windowWidth, windowHeight, true); } function getSixSplitLayout(W) { let splitCount = 6; let available = W * getLayoutWidthFill(); let gap = available * 0.01; let boxSize = (available - gap * (splitCount - 1)) / splitCount; let totalWidth = boxSize * splitCount + gap * (splitCount - 1); let centers = []; let cursorX = -totalWidth / 2; for (let i = 0; i < splitCount; i += 1) { centers.push(cursorX + boxSize / 2); cursorX += boxSize + gap; } return { boxSize: boxSize, centers: centers, available: available, }; }

Sorting Clock