(function boot() { if (typeof THREE !== 'undefined' && THREE.WebGLRenderer) { main(); return; } // Auto-load via script tag (not fetch — avoids CORS) var urls = [ 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js', 'https://unpkg.com/three@0.165.0/build/three.min.js' ]; function tryLoad(i) { if (i >= urls.length) { console.error('Failed to load Three.js'); return; } var s = document.createElement('script'); s.src = urls[i]; s.onload = function() { if (typeof THREE !== 'undefined') main(); else tryLoad(i + 1); }; s.onerror = function() { s.remove(); tryLoad(i + 1); }; document.head.appendChild(s); } tryLoad(0); })(); function main() { 'use strict'; /* ==================================================================== * CLEANUP (safe re-execution) * ==================================================================== */ var app = document.getElementById('app') || document.body; // Remove previous instance (function cleanup() { var old; old = document.getElementById('rok-canvas'); if (old) old.remove(); old = document.getElementById('rok-labels'); if (old) old.remove(); old = document.getElementById('rok-hint'); if (old) old.remove(); old = document.getElementById('rok-style'); if (old) old.remove(); if (window._rokAnimId) cancelAnimationFrame(window._rokAnimId); if (window._rokResize) window.removeEventListener('resize', window._rokResize); if (window._rokUnlock) window.removeEventListener('pointerdown', window._rokUnlock); })(); /* ==================================================================== * INJECT STYLES * ==================================================================== */ var styleEl = document.createElement('style'); styleEl.id = 'rok-style'; styleEl.textContent = [ 'html, body, #app { margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#020204; cursor:default; }', '#rok-canvas { display:block; position:absolute; top:0; left:0; width:100%; height:100%; }', '#rok-labels { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:10; }', '.rok-label { position:absolute; left:16px; transform:translateY(-50%);' + 'font-family:"SF Mono","Fira Code","Cascadia Code","Consolas",monospace;' + 'font-size:9px; font-weight:500; letter-spacing:0.18em;' + 'color:rgba(160,175,210,0.55); white-space:nowrap; pointer-events:none; user-select:none;' + 'text-shadow:0 0 8px rgba(80,100,180,0.3),0 0 16px rgba(0,0,0,0.8);' + 'text-transform:uppercase; transition:opacity 0.6s ease; }', '.rok-label .rok-sub { display:block; font-size:7px; font-weight:400;' + 'letter-spacing:0.08em; color:rgba(120,140,190,0.3); margin-top:2px; }', '#rok-hint { position:fixed; left:50%; bottom:28px; transform:translateX(-50%);' + 'font-family:"Helvetica Neue",Arial,sans-serif; font-size:11px;' + 'letter-spacing:0.35em; color:rgba(180,190,220,0.35); text-transform:uppercase;' + 'pointer-events:none; transition:opacity 2.5s ease; user-select:none; z-index:20; }', '#rok-hint.hidden { opacity:0; }' ].join('\n'); document.head.appendChild(styleEl); /* ==================================================================== * INJECT DOM * ==================================================================== */ var labelContainer = document.createElement('div'); labelContainer.id = 'rok-labels'; app.appendChild(labelContainer); var hintEl = document.createElement('div'); hintEl.id = 'rok-hint'; hintEl.textContent = 'touch to let it resonate'; app.appendChild(hintEl); /* ==================================================================== * CONSTANTS & DATA * ==================================================================== */ var LAYER_COUNT = 15; var LAYERS = [ { name:'Hummingbird', hue:0.93, tempo:20.0, baseline:0.45, amplitude:0.025, width:0.05, sharpness:0.8, pulseShape:0.95, branching:0.0 }, { name:'Mouse', hue:0.07, tempo:10.0, baseline:0.45, amplitude:0.025, width:0.06, sharpness:0.7, pulseShape:0.85, branching:0.0 }, { name:'Elephant', hue:0.58, tempo:0.5, baseline:0.50, amplitude:0.025, width:0.10, sharpness:0.5, pulseShape:0.7, branching:0.0 }, { name:'Dog', hue:0.14, tempo:0.5, baseline:0.40, amplitude:0.025, width:0.06, sharpness:0.2, pulseShape:0.1, branching:0.0 }, { name:'Whale', hue:0.62, tempo:0.07, baseline:0.45, amplitude:0.03, width:0.11, sharpness:0.05,pulseShape:0.0, branching:0.0 }, { name:'MorningGlory',hue:0.78, tempo:0.015,baseline:0.35, amplitude:0.025, width:0.08, sharpness:0.3, pulseShape:0.2, branching:0.0 }, { name:'Sunflower', hue:0.12, tempo:0.08, baseline:0.30, amplitude:0.03, width:0.07, sharpness:0.2, pulseShape:0.1, branching:0.0 }, { name:'KITTE', hue:0.02, tempo:0.3, baseline:0.50, amplitude:0.025, width:0.09, sharpness:0.35,pulseShape:0.4, branching:0.0 }, { name:'Hydrangea', hue:0.72, tempo:0.005,baseline:0.35, amplitude:0.025, width:0.08, sharpness:0.15,pulseShape:0.0, branching:0.0 }, { name:'Beech', hue:0.33, tempo:0.003,baseline:0.30, amplitude:0.025, width:0.09, sharpness:0.4, pulseShape:0.5, branching:0.2 }, { name:'Honeybee', hue:0.17, tempo:1.2, baseline:0.30, amplitude:0.025, width:0.08, sharpness:0.5, pulseShape:0.3, branching:1.0 }, { name:'Sun', hue:0.05, tempo:0.04, baseline:0.50, amplitude:0.025, width:0.09, sharpness:0.2, pulseShape:0.0, branching:0.0 }, { name:'Moon', hue:0.64, tempo:0.0014,baseline:0.40,amplitude:0.025, width:0.08, sharpness:0.1, pulseShape:0.0, branching:0.0 }, { name:'Earth', hue:0.48, tempo:0.0007,baseline:0.55,amplitude:0.02, width:0.09, sharpness:0.05,pulseShape:0.0, branching:0.0 }, { name:'Season', hue:0.27, tempo:0.0001,baseline:0.50,amplitude:0.02, width:0.10, sharpness:0.1, pulseShape:0.0, branching:0.0 } ]; var RHYTHM_PROFILES = LAYERS.map(function (l) { return { name: l.name, hue: l.hue, temporalScale: l.tempo, breathHz: Math.max(0.005, Math.min(l.tempo * 0.5, 0.3)) }; }); var COUPLINGS = [ { from:11, to:5, strength:0.5, mode:'bend' }, { from:11, to:6, strength:0.4, mode:'bend' }, { from:14, to:8, strength:0.35, mode:'modulate' }, { from:14, to:9, strength:0.4, mode:'modulate' }, { from:0, to:10, strength:0.2, mode:'modulate' }, { from:12, to:4, strength:0.3, mode:'bend' }, { from:13, to:11, strength:0.2, mode:'absorb' }, { from:11, to:7, strength:0.3, mode:'modulate' } ]; var BAND_Z = [3.5,3.0,1.0,2.5,0.5,-0.5,-1.0,-1.5,-2.0,-2.5,0.0,-3.0,-3.5,-4.0,-4.5]; var BAND_RENDER_ORDER = [14,13,12,11,9,8,7,6,5,10,4,2,3,1,0]; var BAND_LABELS = [ { name:'TRCH.00', sub:'1200bpm // colibri' }, { name:'TRCH.01', sub:'600bpm // mus' }, { name:'TRCH.02', sub:'30bpm // elephas' }, { name:'TRCH.03', sub:'100bpm // canis' }, { name:'TRCH.04', sub:'8bpm // balaena' }, { name:'PHYT.05', sub:'circadian // ipomoea' }, { name:'PHYT.06', sub:'helio // helianthus' }, { name:'ARCH.07', sub:'composite // KITTE' }, { name:'PHYT.08', sub:'pH-drift // hydrangea' }, { name:'PHYT.09', sub:'sap-flow // fagus' }, { name:'TRCH.10', sub:'150bpm // apis' }, { name:'CELST.11', sub:'diurnal-arc // sol' }, { name:'CELST.12', sub:'synodic-29.53d // luna' }, { name:'CELST.13', sub:'rotation // terra' }, { name:'CELST.14', sub:'24-sekki // season' } ]; /* ==================================================================== * GLSL CHUNKS * ==================================================================== */ var NOISE_GLSL = [ 'float hash11(float p) {', ' p = fract(p * 0.1031); p *= p + 33.33; p *= p + p; return fract(p);', '}', 'vec2 hash22(vec2 p) {', ' vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));', ' p3 += dot(p3, p3.yzx + 33.33);', ' return fract((p3.xx + p3.yz) * p3.zy);', '}', 'float vnoise(vec2 p) {', ' vec2 i = floor(p); vec2 f = fract(p);', ' vec2 u = f * f * (3.0 - 2.0 * f);', ' float a = hash22(i).x; float b = hash22(i + vec2(1.0, 0.0)).x;', ' float c = hash22(i + vec2(0.0, 1.0)).x; float d = hash22(i + vec2(1.0, 1.0)).x;', ' return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);', '}', 'float fbm(vec2 p) {', ' float v = 0.0; float a = 0.5; mat2 rot = mat2(0.80, 0.60, -0.60, 0.80);', ' for (int i = 0; i < 5; i++) { v += a * vnoise(p); p = rot * p * 2.07 + vec2(13.7, 7.1); a *= 0.5; }', ' return v;', '}', 'float fbm3(vec2 p) {', ' float v = 0.0; float a = 0.5; mat2 rot = mat2(0.80, 0.60, -0.60, 0.80);', ' for (int i = 0; i < 3; i++) { v += a * vnoise(p); p = rot * p * 2.07 + vec2(13.7, 7.1); a *= 0.5; }', ' return v;', '}', 'float warpFbm(vec2 p, float t, out vec2 q) {', ' q = vec2(fbm(p + vec2(0.0, 0.0) + t * 0.08), fbm(p + vec2(5.2, 1.3) - t * 0.06));', ' return fbm(p + 2.4 * q + vec2(t * 0.05, 0.0));', '}', 'float ridged(vec2 p) { float n = fbm(p); return 1.0 - abs(n * 2.0 - 1.0); }', 'float ridged3(vec2 p) { float n = fbm3(p); return 1.0 - abs(n * 2.0 - 1.0); }', 'vec3 hue2rgb(float h) {', ' vec3 k = mod(vec3(h * 6.0) + vec3(0.0, 4.0, 2.0), 6.0);', ' return 1.0 - clamp(min(k, 4.0 - k), 0.0, 1.0);', '}' ].join('\n'); var FLOW_GLSL = [ 'float getBandCy(int band, float fx, float t, float sc, float amplitude) {', ' float home = 0.46 - float(band) * 0.066;', ' float seed = float(band) * 23.17;', ' float meander = sin(fx * 0.3 + t * 0.025 + seed) * amplitude;', ' meander += (fbm3(vec2(fx * 0.2 + seed, t * 0.012 + seed * 0.7)) - 0.5) * amplitude * 1.2;', ' if (band == 6) { float slowZone = smoothstep(-0.2, 0.2, sin(fx * 0.2 + t * 0.02 + seed)); return home + meander * mix(0.6, 1.4, slowZone); }', ' if (band == 11) { float period = 6.2832; float localFx = mod(fx * 0.5 + seed, period) / period; float arc = sin(localFx * 3.14159) * amplitude * 1.5; return home + meander * 0.5 + arc; }', ' return home + meander;', '}', 'float hummingbirdDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = (py - cy) / max(w, 0.001);', ' float p1 = fract(fx * 0.6 - t * 6.0); float p2 = fract(fx * 0.6 - t * 6.0 + 0.35);', ' float pulse1 = exp(-p1 * 10.0) * smoothstep(0.0, 0.03, p1);', ' float pulse2 = exp(-p2 * 12.0) * smoothstep(0.0, 0.03, p2) * 0.5;', ' float pulse = pulse1 + pulse2; float widthMod = 1.0 + pulse * 0.7 * sig;', ' float d = dy / widthMod; float base = exp(-d * d * 5.0);', ' float shimmer = 0.8 + 0.2 * sin(fx * 20.0 + t * 12.0);', ' return base * shimmer * (0.6 + 0.4 * sig);', '}', 'float mouseDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = (py - cy) / max(w, 0.001);', ' float p1 = fract(fx * 0.5 - t * 3.5);', ' float systole = exp(-p1 * 8.0) * smoothstep(0.0, 0.04, p1);', ' float notch = 0.12 * exp(-pow((p1 - 0.22) * 14.0, 2.0));', ' float pulse = systole + notch; float widthMod = 1.0 + pulse * 0.6 * sig;', ' float d = dy / widthMod; float base = exp(-d * d * 4.0);', ' float jitter = 0.85 + 0.15 * sin(fx * 15.0 + t * 8.0 + dy * 20.0);', ' return base * jitter * (0.6 + 0.4 * sig);', '}', 'float elephantDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = (py - cy) / max(w, 0.001);', ' float p1 = fract(fx * 0.3 - t * 0.35);', ' float systole = exp(-p1 * 5.0) * smoothstep(0.0, 0.08, p1);', ' float notch = 0.2 * exp(-pow((p1 - 0.3) * 10.0, 2.0));', ' float pulse = systole + notch; float widthMod = 1.0 + pulse * 1.0 * sig;', ' float d = dy / widthMod; float base = exp(-d * d * 1.5);', ' return base * (0.55 + 0.45 * sig);', '}', 'float dogDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = (py - cy) / max(w, 0.001);', ' float breathCycle = sin(t * 3.14) * 0.5 + 0.5;', ' float widthMod = 0.7 + 0.6 * breathCycle * sig;', ' float d = dy / widthMod; float base = exp(-d * d * 3.5);', ' float pant = 0.7 + 0.3 * sin(dy * w * 40.0 + t * 10.0);', ' return base * pant * (0.6 + 0.4 * sig);', '}', 'float whaleDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = (py - cy) / max(w, 0.001);', ' float breathCycle = sin(t * 0.44) * 0.5 + 0.5;', ' float widthMod = 0.6 + 0.8 * breathCycle * sig;', ' float d = dy / widthMod; float base = exp(-d * d * 1.2);', ' float ocean = 0.8 + 0.2 * sin(fx * 1.5 + t * 0.15 + dy * 3.0);', ' return base * ocean * (0.6 + 0.4 * sig);', '}', 'float morningGloryDens(float py, float cy, float fx, float t, float sig, float w) {', ' float cellSize = 1.4; float cellFx = mod(fx + cellSize * 0.5, cellSize) - cellSize * 0.5;', ' float dy = py - cy; float r = length(vec2(cellFx, dy)) / max(w * 1.2, 0.001);', ' float angle = atan(dy, cellFx); float petals = 0.5 + 0.5 * cos(5.0 * angle);', ' float openAmt = 0.15 + 0.85 * sig; float petalR = openAmt * (0.5 + 0.5 * petals);', ' float interior = smoothstep(petalR, petalR * 0.15, r) * (0.6 + 0.4 * petals);', ' float veins = 0.8 + 0.2 * sin(angle * 10.0 + r * 8.0);', ' float stem = exp(-dy * dy / max(w * w * 0.04, 0.0001)) * 0.3;', ' return max(interior * veins, stem) * (0.55 + 0.45 * sig);', '}', 'float sunflowerDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = py - cy;', ' float cyA = getBandCy(6, fx + 0.02, t, 0.0, 0.03);', ' float cyB = getBandCy(6, fx - 0.02, t, 0.0, 0.03);', ' float speed = abs(cyA - cyB) * 25.0;', ' float dynWidth = w * (0.5 + 1.5 / (1.0 + speed * 5.0));', ' float d = dy / max(dynWidth, 0.001); float base = exp(-d * d * 1.8);', ' float discR = abs(d); float discAngle = atan(dy, fract(fx * 0.3) - 0.15);', ' float spiral = sin(discR * 12.0 + discAngle * 5.0 + t * 0.1);', ' float sunflowerTex = 0.75 + 0.25 * spiral * smoothstep(1.0, 0.3, discR);', ' return base * sunflowerTex * (0.55 + 0.45 * sig);', '}', 'float kitteDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = (py - cy) / max(w, 0.001); float base = exp(-dy * dy * 1.8);', ' float flowPhase = sin(fx * 2.5 - t * 0.4) * 0.5 + 0.5; float humanFlow = 0.7 + 0.3 * flowPhase;', ' float elevPulse = pow(max(0.0, sin(fx * 4.0 + t * 0.8)), 8.0);', ' float elevStripe = exp(-dy * dy * 6.0) * elevPulse * 0.4;', ' float hvac = 0.85 + 0.15 * sin(fx * 0.6 + t * 0.13 + dy * 4.0);', ' float floors = 0.8 + 0.2 * smoothstep(0.4, 0.6, fract(dy * 4.0 + 0.5));', ' float d = base * humanFlow * hvac * floors + elevStripe;', ' return d * (0.55 + 0.45 * sig);', '}', 'float hydrangeaDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = (py - cy) / max(w, 0.001);', ' float phase = t * 0.02 + fbm3(vec2(fx * 0.1, t * 0.005)) * 2.0;', ' float p4 = mod(phase, 4.0);', ' float gaussian = exp(-dy * dy * 2.0);', ' float superGauss = exp(-pow(dy * dy, 2.0) * 1.5);', ' float bimodal = (exp(-pow(dy - 0.5, 2.0) * 4.0) + exp(-pow(dy + 0.5, 2.0) * 4.0)) * 0.6;', ' float triangle = max(0.0, 1.0 - abs(dy) * 1.5);', ' float d;', ' if (p4 < 1.0) d = mix(gaussian, superGauss, p4);', ' else if (p4 < 2.0) d = mix(superGauss, bimodal, p4 - 1.0);', ' else if (p4 < 3.0) d = mix(bimodal, triangle, p4 - 2.0);', ' else d = mix(triangle, gaussian, p4 - 3.0);', ' d *= 0.85 + 0.15 * fbm3(vec2(fx * 0.6 + 44.0, dy * 3.0));', ' return d * (0.55 + 0.45 * sig);', '}', 'float beechDens(float py, float cy, float fx, float t, float sig, float w) {', ' vec2 p = vec2(fx * 1.2, (py - cy) / max(w, 0.001));', ' float trunk = exp(-p.y * p.y * 3.0); float branchD = 100.0;', ' vec2 bp = p * 1.5; float scale = 1.0; float extension = 0.3 + 0.7 * sig;', ' for (int iter = 0; iter < 3; iter++) {', ' bp.x = abs(bp.x) - extension * (1.2 - float(iter) * 0.25);', ' float a = 0.45 + float(iter) * 0.15; float ca = cos(a); float sa = sin(a);', ' bp = mat2(ca, sa, -sa, ca) * bp;', ' float segD = length(vec2(bp.y, max(0.0, abs(bp.x) - extension * 0.3)));', ' branchD = min(branchD, segD / scale); scale *= 0.7;', ' }', ' float branches = exp(-branchD * branchD * 8.0);', ' branches *= 0.8 + 0.2 * fbm3(vec2(fx * 2.0 + 77.0, py * 5.0));', ' return max(trunk * 0.35, branches) * (0.5 + 0.5 * sig);', '}', 'float honeybeeDens(float py, float cy, float fx, float t, float sig, float w) {', ' float total = 0.0; float meanY = 0.0; float agentY[5];', ' for (int s = 0; s < 5; s++) {', ' float agentSeed = float(s) * 17.3 + 139.7;', ' float baseOsc = sin(fx * 1.2 + t * (0.25 + float(s) * 0.12) + agentSeed) * w * 0.7;', ' baseOsc += sin(fx * 0.5 + t * 0.08 + agentSeed * 2.3) * w * 0.3;', ' agentY[s] = cy + baseOsc; meanY += agentY[s];', ' }', ' meanY /= 5.0;', ' for (int s = 0; s < 5; s++) {', ' float ay = agentY[s]; float cohesion = (meanY - ay) * 0.35 * sig; float sep = 0.0;', ' for (int o = 0; o < 5; o++) {', ' if (o == s) continue; float diff = ay - agentY[o];', ' sep += sign(diff) * exp(-abs(diff) / max(w * 0.3, 0.001)) * w * 0.15;', ' }', ' float finalY = ay + cohesion + sep;', ' float dy = (py - finalY) / max(w * 0.25, 0.001);', ' total += exp(-dy * dy * 3.0) * 0.28;', ' }', ' return min(total, 1.0) * (0.55 + 0.45 * sig);', '}', 'float sunDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = (py - cy) / max(w, 0.001); float base = exp(-dy * dy * 2.0);', ' float sunPhase = sin(fx * 1.0 - t * 0.15) * 0.5 + 0.5; float radiance = pow(sunPhase, 4.0);', ' float widthBoost = 1.0 + radiance * 0.6 * sig; float d2 = dy / widthBoost;', ' float boosted = exp(-d2 * d2 * 1.5);', ' float rays = 0.8 + 0.2 * sin(dy * w * 25.0 + fx * 5.0);', ' float d = mix(base * 0.5, boosted * rays, 0.3 + 0.7 * radiance);', ' return d * (0.5 + 0.5 * sig);', '}', 'float moonDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = (py - cy) / max(w, 0.001); float base = exp(-dy * dy * 2.5);', ' float phase = sin(fx * 0.3 + t * 0.05) * 0.5 + 0.5;', ' float crescentShift = mix(-0.6, 0.6, phase);', ' float crescent = exp(-(dy - crescentShift) * (dy - crescentShift) * 3.0);', ' float fullness = mix(0.2, 1.0, phase);', ' float d = mix(crescent * 0.7, base, fullness);', ' float craters = 0.85 + 0.15 * sin(fx * 8.0 + dy * w * 15.0);', ' return d * craters * (0.5 + 0.5 * sig);', '}', 'float earthDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = (py - cy) / max(w, 0.001); float base = exp(-dy * dy * 1.5);', ' float angle = t * 0.02 + sin(t * 0.008) * 0.4;', ' float ca = cos(angle); float sa = sin(angle);', ' float rotCoord = ca * (fx * 0.8) + sa * (dy * w * 3.0);', ' float stripes = sin(rotCoord * 8.0) * 0.5 + 0.5;', ' stripes = smoothstep(0.2, 0.8, stripes);', ' float turb = fbm3(vec2(fx * 0.6 + 31.0, dy * 2.5 + t * 0.015));', ' stripes = stripes * 0.6 + stripes * turb * 0.4;', ' return base * (0.35 + 0.65 * stripes) * (0.55 + 0.45 * sig);', '}', 'float seasonDens(float py, float cy, float fx, float t, float sig, float w) {', ' float dy = (py - cy) / max(w * 1.5, 0.001); float base = exp(-dy * dy * 0.8);', ' float wave = sin(fx * 0.25 + t * 0.01) * 0.5 + 0.5;', ' float termPhase = mod(fx * 0.4 + t * 0.005, 6.2832);', ' float terms = 0.8 + 0.2 * pow(abs(sin(termPhase * 12.0)), 0.5);', ' float cloud = fbm3(vec2(fx * 0.12 + t * 0.006, py * 0.3 + t * 0.004));', ' return base * (0.4 + 0.6 * wave) * terms * (0.7 + 0.3 * cloud) * (0.5 + 0.5 * sig);', '}', 'float couplingDisplace(float fx, float t, float coupling, float seed) {', ' if (coupling < 0.01) return 0.0;', ' float w = fbm3(vec2(fx * 0.5 + seed * 3.1, t * 0.04 + seed * 0.7));', ' return (w - 0.5) * coupling * 0.10;', '}' ].join('\n'); /* ==================================================================== * CLOCK SYSTEM * ==================================================================== */ function pulseShape(t) { if (t <= 0 || t >= 1) return 0; var attack = Math.min(t / 0.18, 1); var release = 1 - Math.pow(Math.max((t - 0.18) / 0.82, 0), 1.6); return Math.pow(attack, 2) * Math.max(release, 0); } var clock = { hours:0, minutes:0, seconds:0, secondFraction:0, minuteFraction:0, hourFraction:0, dayPhase:0, breath:0, minuteSync:0, hourCeremony:0, elapsed:0, _lastSec:-1, _lastMin:-1, _lastHr:-1, _bT:1e9, _mT:1e9, _hT:1e9, _onMinute:null, _onHour:null, update: function(dt) { this.elapsed += dt; var now = new Date(); this.hours = now.getHours(); this.minutes = now.getMinutes(); this.seconds = now.getSeconds(); var ms = now.getMilliseconds(); this.secondFraction = ms / 1000; this.minuteFraction = (this.seconds + this.secondFraction) / 60; this.hourFraction = (this.minutes + this.minuteFraction) / 60; this.dayPhase = (this.hours + this.minutes / 60 + this.seconds / 3600) / 24; if (this.seconds !== this._lastSec) { this._lastSec = this.seconds; this._bT = this.secondFraction; } else { this._bT += dt; } if (this.minutes !== this._lastMin) { var f = this._lastMin === -1; this._lastMin = this.minutes; if (!f) { this._mT = 0; if (this._onMinute) this._onMinute(); } } else { this._mT += dt; } if (this.hours !== this._lastHr) { var fh = this._lastHr === -1; this._lastHr = this.hours; if (!fh) { this._hT = 0; if (this._onHour) this._onHour(this.hours); } } else { this._hT += dt; } this.breath = pulseShape(this._bT / 0.64); this.minuteSync = pulseShape(this._mT / 2.6); this.hourCeremony = pulseShape(this._hT / 4.2); }, get timeDigits() { var p = function(n){ return n.toString().padStart(2,'0'); }; return p(this.hours) + p(this.minutes); }, get secondDigits() { return this.seconds.toString().padStart(2,'0'); } }; /* ==================================================================== * RHYTHM ENGINE * ==================================================================== */ function _h1(n) { var s = Math.sin(n * 127.1 + 311.7) * 43758.5453123; return s - Math.floor(s); } function _vn(x) { var i = Math.floor(x), f = x - i, u = f*f*(3-2*f); return _h1(i)*(1-u)+_h1(i+1)*u; } function _fm(x) { return _vn(x)*0.5+_vn(x*2.13+7.7)*0.3+_vn(x*4.7+19.1)*0.2; } function _bs(p) { var t = p - Math.floor(p); return Math.pow(Math.min(t/0.22,1),1.7)*Math.exp(-Math.max(t-0.22,0)*4.2); } function _c01(v) { return Math.min(Math.max(v,0),1); } var engine = { signals: new Float32Array(LAYER_COUNT), breaths: new Float32Array(LAYER_COUNT), weights: (function(){ var a=new Float32Array(LAYER_COUNT); a.fill(1); return a; })(), hues: new Float32Array(LAYER_COUNT), temporalScales: new Float32Array(LAYER_COUNT), couplings: new Float32Array(LAYER_COUNT), synchrony:0, hvacSignal:0.5, _hp0:0, _hp1:_h1(1.1)*10, _hp2:_h1(2.2)*10, _hp3:_h1(3.3)*10, _hp4:_h1(4.4)*10, _hp10:_h1(10.1)*10, _fv:0, _tp:_h1(7.7)*100, _lbp: new Float32Array(LAYER_COUNT), init: function() { for (var i=0;i=1){this.ci=this.ni;this.dwell=0;} } else { this.dwell+=dt; camera.lookAt(this.ct); if(this.dwell>=this.dd) this.go((this.ci+1)%CP.length,camera); } }, go: function(ni,camera) { this.fp.copy(camera.position); this.ft.copy(this.ct); this.ni=ni; this.tp=0; } }; /* ==================================================================== * GLYPH FIELD (time as density texture) * ==================================================================== */ var GW=1024, GH=512; var gCvs=document.createElement('canvas'); gCvs.width=GW; gCvs.height=GH; var gCtx=gCvs.getContext('2d'); var gSrc=document.createElement('canvas'); gSrc.width=GW; gSrc.height=GH; var gSCtx=gSrc.getContext('2d'); var gBlr=document.createElement('canvas'); gBlr.width=GW/8; gBlr.height=GH/8; var gBCtx=gBlr.getContext('2d'); var gTnt=document.createElement('canvas'); var glyphTex = new THREE.CanvasTexture(gCvs); glyphTex.minFilter=THREE.LinearFilter; glyphTex.magFilter=THREE.LinearFilter; glyphTex.wrapS=THREE.ClampToEdgeWrapping; glyphTex.wrapT=THREE.ClampToEdgeWrapping; function tintD(ctx,src,w,h,color) { gTnt.width=w; gTnt.height=h; var tc=gTnt.getContext('2d'); tc.clearRect(0,0,w,h); tc.drawImage(src,0,0,w,h); tc.globalCompositeOperation='source-in'; tc.fillStyle=color; tc.fillRect(0,0,w,h); ctx.drawImage(gTnt,0,0,w,h); } var gKey=''; function updateGlyph(hhmm,ss) { var key=hhmm+':'+ss; if(key===gKey)return; gKey=key; var g=gSCtx; g.clearRect(0,0,GW,GH); g.fillStyle='#ffffff'; g.textAlign='center'; g.textBaseline='middle'; g.font='200 300px "Helvetica Neue","Hiragino Sans",Arial,sans-serif'; g.fillText(hhmm.slice(0,2)+':'+hhmm.slice(2),GW/2,GH/2-20); g.font='200 64px "Helvetica Neue","Hiragino Sans",Arial,sans-serif'; g.fillText(ss,GW/2,GH/2+170); var b=gBCtx; b.clearRect(0,0,gBlr.width,gBlr.height); b.drawImage(gSrc,0,0,gBlr.width,gBlr.height); var bw2=gBlr.width/2,bh2=gBlr.height/2; b.drawImage(gBlr,0,0,gBlr.width,gBlr.height,0,0,bw2,bh2); b.drawImage(gBlr,0,0,bw2,bh2,0,0,gBlr.width,gBlr.height); var c=gCtx; c.clearRect(0,0,GW,GH); c.globalAlpha=1; c.fillStyle='#000000'; c.globalCompositeOperation='source-over'; c.fillRect(0,0,GW,GH); c.globalCompositeOperation='lighter'; c.save(); c.imageSmoothingEnabled=true; c.imageSmoothingQuality='high'; c.globalAlpha=0.65; tintD(c,gBlr,GW,GH,'#ff0000'); c.restore(); c.save(); c.imageSmoothingEnabled=true; c.imageSmoothingQuality='high'; c.globalAlpha=0.5; tintD(c,gBlr,GW,GH,'#00ff00'); c.restore(); c.save(); c.globalAlpha=0.45; tintD(c,gSrc,GW,GH,'#00ff00'); c.restore(); g.clearRect(0,0,GW,GH); g.font='200 64px "Helvetica Neue","Hiragino Sans",Arial,sans-serif'; g.fillStyle='#ffffff'; g.fillText(ss,GW/2,GH/2+170); c.save(); c.globalAlpha=1; tintD(c,gSrc,GW,GH,'#0000ff'); c.restore(); glyphTex.needsUpdate=true; } /* ==================================================================== * RESONANCE AUDIO * ==================================================================== */ var audio = { ctx:null, master:null, airGain:null, breathGain:null, start: function() { if(this.ctx) return; var ctx=new(window.AudioContext||window.webkitAudioContext)(); if(ctx.state==='suspended') ctx.resume(); this.ctx=ctx; this.master=ctx.createGain(); this.master.gain.value=0; this.master.connect(ctx.destination); this.master.gain.linearRampToValueAtTime(0.9,ctx.currentTime+6); var len=ctx.sampleRate*4, buf=ctx.createBuffer(1,len,ctx.sampleRate), data=buf.getChannelData(0); var lp=0; for(var i=0;i 0.0 && guv.x < 1.0 && guv.y > 0.0 && guv.y < 1.0) {\n' + ' vec3 gSample = texture2D(uGlyph, guv).rgb;\n' + ' halo = gSample.r; core = gSample.g; secs = gSample.b;\n }\n' + ' float gridScale = 60.0; vec2 gp = guv * gridScale;\n' + ' float gridX = abs(fract(gp.x) - 0.5) * 2.0;\n' + ' float gridY = abs(fract(gp.y) - 0.5) * 2.0;\n' + ' float gridLine = 1.0 - smoothstep(0.85, 0.93, max(gridX, gridY));\n' + ' float diagA = abs(fract((gp.x + gp.y) * 0.5) - 0.5) * 2.0;\n' + ' float diagLine = 1.0 - smoothstep(0.88, 0.95, diagA);\n' + ' float geoMask = smoothstep(0.05, 0.35, core) * 0.85 + halo * 0.25;\n' + ' float geoPattern = max(gridLine, diagLine * 0.6) * geoMask;\n' + ' float geoErode = fbm3(vec2(fx * 2.0 + 17.0, py * 5.0) + uTime * 0.02);\n' + ' geoPattern *= smoothstep(0.15, 0.45, geoErode);\n' + ' float coreFill = smoothstep(0.1, 0.5, core) * 0.35;\n' + ' float eps = 1.0 / ' + GW.toFixed(1) + ';\n' + ' float coreR = 0.0; float coreU = 0.0;\n' + ' vec2 guvR = guv + vec2(eps, 0.0); vec2 guvU = guv + vec2(0.0, eps);\n' + ' if (guvR.x > 0.0 && guvR.x < 1.0 && guvR.y > 0.0 && guvR.y < 1.0) coreR = texture2D(uGlyph, guvR).g;\n' + ' if (guvU.x > 0.0 && guvU.x < 1.0 && guvU.y > 0.0 && guvU.y < 1.0) coreU = texture2D(uGlyph, guvU).g;\n' + ' float edgeGlow = clamp(abs(coreR - core) + abs(coreU - core), 0.0, 1.0) * 16.0;\n' + ' edgeGlow = min(edgeGlow, 1.0);\n' + ' float haloErode = fbm3(vec2(fx * 1.8 + 17.0, py * 5.0) + uTime * 0.02);\n' + ' halo *= smoothstep(0.2, 0.5, haloErode);\n' + ' float geoTime = coreFill + geoPattern * 0.5 + edgeGlow * 0.4 + halo * 0.35;\n' + ' geoTime *= present;\n' + ' float secsDot = secs * smoothstep(0.3, 0.6, geoErode) * 0.25;\n' + ' col += col * (geoTime + secsDot * present);\n' + ' float decay = smoothstep(0.5 + past * 0.4, 1.0, fbm3(vec2(fx * 2.4 + 51.0, py * 6.0)) + past * 0.4);\n' + ' float dissolve = clamp(1.0 - decay * past * 0.8, 0.0, 1.0);\n' + ' float shard = smoothstep(0.3, 0.65, fbm3(vec2(fx * 5.0, py * 14.0) - uTime * 0.12));\n' + ' float existence = mix(1.0, shard, future * 0.5);\n' + ' d *= dissolve * existence; col *= dissolve * existence;\n' + ' float alpha = clamp(d * 0.7, 0.0, 0.85);\n' + ' alpha *= (1.0 - future * 0.15) * (1.0 - past * 0.15);\n' + ' col *= 1.0 + uHourCeremony * 0.8;\n' + ' float lum = dot(col, vec3(0.299, 0.587, 0.114));\n' + ' col = mix(vec3(lum), col, clamp(0.6 + present * 0.6 - past * 0.3, 0.0, 1.3));\n' + ' col *= 1.0 + future * 0.55;\n' + ' gl_FragColor = vec4(col * alpha, alpha);\n}' ); } var OVERLAY_FRAG = 'precision highp float;\nvarying vec2 vWorldXY;\nvarying float vScreenX;\nvarying vec2 vUv;\n' + 'uniform float uTime;\nuniform vec2 uResolution;\nuniform float uBreath;\n' + 'uniform float uMinuteSync;\nuniform float uSynchrony;\nuniform float uFlowSpeed;\n' + 'uniform float uReadability;\nuniform vec3 uColorB;\nuniform sampler2D uGlyph;\n' + NOISE_GLSL + '\n' + 'void main() {\n' + ' float aspect = uResolution.x / uResolution.y;\n' + ' float px = vWorldXY.x / ' + PW.toFixed(1) + ' * aspect;\n' + ' float py = vWorldXY.y / ' + PH.toFixed(1) + ';\n' + ' float sx = clamp(vScreenX, 0.0, 1.0);\n' + ' float present = exp(-pow((sx - 0.5) * 2.5, 2.0));\n' + ' float sync = clamp(uSynchrony + uMinuteSync * 0.6, 0.0, 1.0);\n' + ' float fx = px + uTime * uFlowSpeed;\n' + ' float gw = 0.58 * min(aspect, 2.4);\n' + ' vec2 guv = vec2(px / gw + 0.5, py / (gw * 0.5) + 0.5);\n' + ' vec3 glyph = vec3(0.0);\n' + ' if (guv.x > 0.0 && guv.x < 1.0 && guv.y > 0.0 && guv.y < 1.0) glyph = texture2D(uGlyph, guv).rgb;\n' + ' float legibility = uReadability * (0.15 + 0.85 * sync) * present;\n' + ' float erode1 = fbm3(vec2(fx * 3.0, py * 9.0) + uTime * 0.05);\n' + ' float erode2 = fbm3(vec2(fx * 7.0 + 31.0, py * 18.0) - uTime * 0.03);\n' + ' float erode = erode1 * 0.6 + erode2 * 0.4;\n' + ' float core = glyph.g * smoothstep(0.70 - legibility * 0.35, 0.85, erode + legibility * 0.30);\n' + ' float secondsTrace = glyph.b * 0.12 * (0.3 + 0.7 * uBreath);\n' + ' float timeGlow = core * legibility * 0.35 + secondsTrace * present * 0.8;\n' + ' vec3 col = uColorB * timeGlow;\n' + ' float alpha = clamp(timeGlow, 0.0, 1.0);\n' + ' gl_FragColor = vec4(col * alpha, alpha);\n}'; var ATMO_VERT = 'varying vec2 vUv;\nvoid main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }'; var ATMO_FRAG = 'precision highp float;\nvarying vec2 vUv;\n' + 'uniform float uTime;\nuniform float uBreath;\nuniform float uHourCeremony;\n' + 'uniform vec2 uResolution;\nuniform vec3 uColorA;\nuniform vec3 uColorC;\n' + NOISE_GLSL + '\n' + 'void main() {\n' + ' vec2 uv = vUv; float aspect = uResolution.x / uResolution.y;\n' + ' vec2 p = (uv - 0.5) * vec2(aspect, 1.0);\n' + ' vec3 col = vec3(0.006, 0.007, 0.012);\n' + ' float band = exp(-pow(p.y * (1.15 - uBreath * 0.12 - uHourCeremony * 0.4), 2.0));\n' + ' float drift = fbm(p * 1.4 + vec2(uTime * 0.015, 0.0));\n' + ' band *= 0.55 + 0.45 * drift;\n' + ' float presence = exp(-pow(p.x * 1.9, 2.0));\n' + ' vec3 glow = mix(uColorC, uColorA, presence) * 0.05;\n' + ' col += glow * band * (1.0 + uBreath * 0.35 + uHourCeremony * 2.2);\n' + ' col *= 1.0 - 0.35 * pow(abs(uv.y - 0.5) * 2.0, 2.0);\n' + ' float grain = hash22(uv * uResolution + fract(uTime) * 100.0).x;\n' + ' col += (grain - 0.5) * 0.012;\n' + ' gl_FragColor = vec4(col, 1.0);\n}'; var PARTICLE_VERT = '#define LC ' + LAYER_COUNT + '\nattribute vec4 aSeed;\n' + 'uniform float uTime;\nuniform vec2 uResolution;\nuniform float uBreath;\n' + 'uniform float uHourCeremony;\nuniform float uSynchrony;\nuniform float uMinuteSync;\n' + 'uniform float uFlowSpeed;\nuniform float uSignals[LC];\nuniform float uHues[LC];\n' + 'uniform float uScales[LC];\nuniform float uCouplings[LC];\n' + 'uniform vec4 uBandParams0[LC];\nuniform vec4 uBandParams1[LC];\n' + 'uniform sampler2D uGlyph;\nuniform float uPixelRatio;\nuniform float uBandZ[LC];\n' + 'varying float vAlpha;\nvarying vec3 vColor;\n' + NOISE_GLSL + '\n' + FLOW_GLSL + '\n' + 'void main() {\n' + ' float aspect = uResolution.x / uResolution.y;\n' + ' int ri = int(aSeed.w); float sc = uScales[ri]; float sig = uSignals[ri];\n' + ' float bAmplitude = uBandParams0[ri].x; float bWidth = uBandParams0[ri].z;\n' + ' float speed = uFlowSpeed * (0.75 + aSeed.z * 0.5);\n' + ' float sx = fract(aSeed.x - uTime * speed * 0.55);\n' + ' float px = (sx - 0.5) * aspect;\n float fx = px + uTime * uFlowSpeed;\n' + ' float sync = clamp(uSynchrony + uMinuteSync * 0.6, 0.0, 1.0);\n' + ' float seed = float(ri) * 23.17;\n' + ' float cy = getBandCy(ri, fx, uTime, sc, bAmplitude);\n' + ' cy += couplingDisplace(fx, uTime, uCouplings[ri], seed);\n' + ' cy = mix(cy, 0.0, sync * 0.45);\n' + ' float width = bWidth + 0.04 / (1.0 + sc * 0.6); width *= 0.65 + 0.7 * sig;\n' + ' float scatter = (fbm3(vec2(fx * 1.5 + aSeed.z * 91.0, uTime * 0.05)) - 0.5) * width * 2.2 * (0.25 + aSeed.y * 0.75);\n' + ' if (ri == 10) {\n' + ' int agentIdx = int(mod(aSeed.z * 5.0, 5.0)); float agentSeed = float(agentIdx) * 17.3 + 139.7;\n' + ' float agentOsc = sin(fx * 1.2 + uTime * (0.25 + float(agentIdx) * 0.12) + agentSeed) * width * 0.7;\n' + ' agentOsc += sin(fx * 0.5 + uTime * 0.08 + agentSeed * 2.3) * width * 0.3;\n' + ' scatter = agentOsc + (aSeed.y - 0.5) * width * 0.3;\n' + ' } else if (ri == 11) { scatter *= 0.4; }\n' + ' else if (ri == 9) { float ba = 0.45 + floor(aSeed.z * 3.0) * 0.15; scatter *= 0.6 + 0.8 * abs(sin(ba + aSeed.y * 3.14)); }\n' + ' float py = cy + scatter;\n' + ' float gw = 0.58 * min(aspect, 2.4);\n' + ' vec2 guv = vec2(px / gw + 0.5, py / (gw * 0.5) + 0.5);\n' + ' float halo = 0.0;\n' + ' if (guv.x > 0.0 && guv.x < 1.0 && guv.y > 0.0 && guv.y < 1.0) halo = texture2D(uGlyph, guv).r;\n' + ' float present = exp(-pow((sx - 0.5) * 2.5, 2.0));\n' + ' float future = smoothstep(0.65, 0.98, sx); float past = smoothstep(0.35, 0.02, sx);\n' + ' float flicker = 0.5 + 0.5 * sin(uTime * (3.0 + sc * 6.0) + aSeed.z * 40.0);\n' + ' float life = clamp(1.0 - future * (0.2 + 0.3 * flicker) - past * (0.3 + 0.2 * aSeed.z), 0.0, 1.0);\n' + ' float haloNoise = fbm3(vec2(fx * 2.0 + aSeed.z * 30.0, py * 6.0) + uTime * 0.03);\n' + ' float erodedHalo = halo * smoothstep(0.3, 0.6, haloNoise);\n' + ' float pulse = 0.45 + 0.55 * sig;\n' + ' vAlpha = life * pulse * (0.4 + erodedHalo * present * 0.9 + uBreath * 0.25 + uHourCeremony * 0.6);\n' + ' vColor = hue2rgb(uHues[ri]) * (0.55 + 0.45 * sig) + vec3(0.18);\n' + ' float worldX = px / aspect * 20.0; float worldY = py * 10.0; float worldZ = uBandZ[ri];\n' + ' gl_Position = projectionMatrix * modelViewMatrix * vec4(worldX, worldY, worldZ, 1.0);\n' + ' float basePt = 1.2 + aSeed.z * 2.2 + sig * 2.4 + erodedHalo * present * 1.5 + uBreath * 0.8;\n' + ' gl_PointSize = min(basePt * uPixelRatio * (uResolution.y * 0.5 / max(gl_Position.w, 0.1)), 32.0);\n}'; var PARTICLE_FRAG = 'precision highp float;\nvarying float vAlpha;\nvarying vec3 vColor;\n' + 'void main() {\n vec2 d = gl_PointCoord - 0.5; float r = dot(d, d) * 4.0;\n' + ' float m = exp(-r * 3.0) * (1.0 - smoothstep(0.8, 1.0, r));\n' + ' gl_FragColor = vec4(vColor * vAlpha * m, vAlpha * m);\n}'; /* ==================================================================== * THREE.JS SCENE * ==================================================================== */ var renderer = new THREE.WebGLRenderer({ antialias:false, powerPreference:'high-performance' }); renderer.domElement.id = 'rok-canvas'; renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); renderer.setClearColor(0x020204, 1); renderer.sortObjects = false; app.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(50, innerWidth/innerHeight, 0.1, 100); camera.position.copy(CP[0].p); cam.ct.copy(CP[0].t); camera.lookAt(cam.ct); // Shared uniforms var shared = { uTime:{value:0}, uResolution:{value:new THREE.Vector2(1,1)}, uBreath:{value:0}, uMinuteSync:{value:0}, uHourCeremony:{value:0}, uSynchrony:{value:0}, uFlowSpeed:{value:0.055}, uBreathIntensity:{value:1}, uTurbulence:{value:1}, uColorA:{value:new THREE.Color()}, uColorB:{value:new THREE.Color()}, uSignals:{value:new Float32Array(LAYER_COUNT)}, uHues:{value:new Float32Array(LAYER_COUNT)}, uScales:{value:new Float32Array(LAYER_COUNT)}, uCouplings:{value:new Float32Array(LAYER_COUNT)}, uBreaths:{value:new Float32Array(LAYER_COUNT)}, uBandParams0:{value:[]}, uBandParams1:{value:[]}, uGlyph:{value:glyphTex} }; var bp0=[], bp1=[]; for(var bi=0;bi'+BAND_LABELS[li].sub+''; labelContainer.appendChild(el); labelEls.push(el); } var _lp=new THREE.Vector3(); function updateLabels(){ for(var i=0;i1?'0':'1'; } } /* ---- Audio unlock (pointerdown) ---- */ function unlockAudio(){ audio.start(); hintEl.classList.add('hidden'); window.removeEventListener('pointerdown',unlockAudio); } window.addEventListener('pointerdown',unlockAudio); window._rokUnlock = unlockAudio; /* ---- Resize ---- */ function resize(){ var w=app.clientWidth||innerWidth, h=app.clientHeight||innerHeight; renderer.setSize(w,h); var pr=renderer.getPixelRatio(); var res=new THREE.Vector2(w*pr,h*pr); shared.uResolution.value.copy(res); atmoMat.uniforms.uResolution.value.copy(res); pMat.uniforms.uPixelRatio.value=pr; camera.aspect=w/h; camera.updateProjectionMatrix(); } window.addEventListener('resize',resize); window._rokResize = resize; resize(); /* ---- Frame loop ---- */ var renderClock=new THREE.Clock(); function frame(){ var dt=Math.min(renderClock.getDelta(),0.1); clock.update(dt); engine.update(dt,clock); cam.update(dt,camera); ts.update(clock.dayPhase); updateGlyph(clock.timeDigits,clock.secondDigits); var t=clock.elapsed; shared.uTime.value=t; shared.uBreath.value=clock.breath; shared.uMinuteSync.value=clock.minuteSync; shared.uHourCeremony.value=clock.hourCeremony; shared.uSynchrony.value=engine.synchrony; shared.uColorA.value.copy(ts.colorA); shared.uColorB.value.copy(ts.colorB); shared.uSignals.value.set(engine.signals); shared.uCouplings.value.set(engine.couplings); shared.uBreaths.value.set(engine.breaths); atmoMat.uniforms.uTime.value=t; atmoMat.uniforms.uBreath.value=clock.breath; atmoMat.uniforms.uHourCeremony.value=clock.hourCeremony; atmoMat.uniforms.uColorA.value.copy(ts.colorA); atmoMat.uniforms.uColorC.value.copy(ts.colorC); updateLabels(); audio.update(engine.hvacSignal,clock.hourCeremony); renderer.render(scene,camera); window._rokAnimId=requestAnimationFrame(frame); } renderer.compile(scene,camera); console.log('%cRhythms of KITTE','color:#7a6ad0;font-size:14px;letter-spacing:0.3em'); console.log('tracking '+LAYER_COUNT+' rhythm bands in 3D'); window._rokAnimId=requestAnimationFrame(frame); } // end main()