/* ============================================================ NEON DISTRICT — isometric cyberpunk city Sections: 0. config + palette + helpers 1. iso projection 2. canvas + camera + input 3. city generation 4. traffic (lanes, signals, car-following) 5. pedestrians 6. ambient (manhole steam, rain) 7. render (iso 3D buildings, ground, props) 8. main loop with depth sorting ============================================================ */ (() => { 'use strict'; /* ====== 0. CONFIG / PALETTE / HELPERS =================== */ const GRID = 6; const CELL = 400; const ROAD_W = 64; const SIDEWALK_W = 20; const PAD = ROAD_W / 2 + SIDEWALK_W; const W = GRID * CELL; const H = GRID * CELL; const TAU = Math.PI * 2; // iso 2:1 (classic 30°) const IX = 0.866; const IY = 0.5; const C = { sky : '#04050c', ground : '#0a0d18', road : '#13161e', roadLine : '#3a3f55', sidewalk : '#1c2030', sidewalkHi : '#2a3045', curb : '#373d52', crosswalk : '#52576b', manhole : '#171b28', manholeRim : '#2a2f44', grateBar : '#2a2f44', bTop : ['#1d2540', '#222a44', '#1a213a', '#262e4c', '#1f2742'], bFront : ['#0e1228', '#10142c', '#0b0f24', '#121730'], bRight : ['#070a17', '#080c1c', '#060814', '#0a0e22'], wallSeam : 'rgba(255,255,255,0.04)', windowOff : 'rgba(40, 46, 64, 0.7)', }; // Neon hue set const NEON = [ { h: 320 }, { h: 195 }, { h: 280 }, { h: 100 }, { h: 50 }, { h: 8 }, { h: 215 }, ]; const rand = (a, b) => a + Math.random() * (b - a); const irand = (a, b) => Math.floor(rand(a, b + 1)); const pick = a => a[Math.floor(Math.random() * a.length)]; const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); const hsl = (n, l = 60, s = 100, a = 1) => `hsla(${n.h},${s}%,${l}%,${a})`; const SIGN_TEXTS = [ 'PULSE', 'SYNTH', 'RAMEN', 'ARCADE', 'LOUNGE', 'NOVA', 'MARKET', 'VOID', 'CLUB', 'NEON' ]; const PED_BODY_TONES = ['#141925', '#181d2a', '#1d2231', '#212838', '#11161f']; const PED_HEAD_TONES = ['#d9d2c8', '#b89474', '#9b7356', '#f0dcc6', '#8b644a']; function pickWeightedIndex(weights) { const total = weights.reduce((a, b) => a + b, 0); let r = Math.random() * total; for (let i = 0; i < weights.length; i++) { r -= weights[i]; if (r <= 0) return i; } return weights.length - 1; } function trafficLaneIndex() { const center = GRID / 2; const weights = []; for (let i = 0; i <= GRID; i++) { const dist = Math.abs(i - center); weights.push(1.1 + Math.max(0, 2.8 - dist) * 0.9); } return pickWeightedIndex(weights); } function createPedStyle(preferredHue = null) { return { accent: preferredHue || (Math.random() < 0.30 ? pick(NEON) : null), body: pick(PED_BODY_TONES), head: pick(PED_HEAD_TONES), scale: rand(0.92, 1.14), hair: pick(['short', 'short', 'hood', 'crest', 'bob']), accessory: pick(['none', 'none', 'visor', 'bag', 'umbrella']), longCoat: Math.random() < 0.38, punk: Math.random() < 0.18, accentStrength: rand(0.12, 0.20), }; } function softGlow(x, y, rx, ry, stops, rotation = 0) { const r = Math.max(rx, 0.001); ctx.save(); ctx.translate(x, y); if (rotation) ctx.rotate(rotation); ctx.scale(1, ry / r); const g = ctx.createRadialGradient(0, 0, 0, 0, 0, r); for (const s of stops) g.addColorStop(s[0], s[1]); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(0, 0, r, 0, TAU); ctx.fill(); ctx.restore(); } /* ====== 1. ISO PROJECTION =============================== */ function toIso(x, y, z = 0) { return { sx: (x - y) * IX, sy: (x + y) * IY - z }; } function fromIso(sx, sy) { const a = sx / IX, b = sy / IY; return { x: (a + b) / 2, y: (b - a) / 2 }; } /* ====== 2. CANVAS / CAMERA / INPUT ====================== */ const canvas = document.getElementById('scene'); const ctx = canvas.getContext('2d'); let DPR = Math.min(window.devicePixelRatio || 1, 2); function resize() { DPR = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.floor(window.innerWidth * DPR); canvas.height = Math.floor(window.innerHeight * DPR); canvas.style.width = window.innerWidth + 'px'; canvas.style.height = window.innerHeight + 'px'; } resize(); window.addEventListener('resize', resize); const cam = { x: W / 2, y: H / 2, zoom: 0.75, min: 0.35, max: 1.9, }; function clampCam() { cam.x = clamp(cam.x, 60, W - 60); cam.y = clamp(cam.y, 60, H - 60); } function applyCamera() { ctx.setTransform(DPR, 0, 0, DPR, 0, 0); ctx.translate(canvas.width / (2 * DPR), canvas.height / (2 * DPR)); ctx.scale(cam.zoom, cam.zoom); const cs = toIso(cam.x, cam.y); ctx.translate(-cs.sx, -cs.sy); } // Convert a screen point (CSS px) to world (x,y) at z=0. function screenToWorld(sx, sy) { const cx = window.innerWidth / 2; const cy = window.innerHeight / 2; const camP = toIso(cam.x, cam.y); const projX = camP.sx + (sx - cx) / cam.zoom; const projY = camP.sy + (sy - cy) / cam.zoom; return fromIso(projX, projY); } // -- INPUT -- const pointers = new Map(); let pinchPrev = null; canvas.addEventListener('pointerdown', e => { canvas.setPointerCapture(e.pointerId); pointers.set(e.pointerId, { x: e.clientX, y: e.clientY }); }); canvas.addEventListener('pointermove', e => { if (!pointers.has(e.pointerId)) return; const prev = pointers.get(e.pointerId); pointers.set(e.pointerId, { x: e.clientX, y: e.clientY }); if (pointers.size === 1) { // Pan: drag delta in screen px → inverse-project to world. const dx = e.clientX - prev.x; const dy = e.clientY - prev.y; const dw = fromIso(-dx / cam.zoom, -dy / cam.zoom); cam.x += dw.x; cam.y += dw.y; clampCam(); } else if (pointers.size === 2) { const pts = [...pointers.values()]; const d = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y); const mid = { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 }; if (pinchPrev != null) { const before = screenToWorld(mid.x, mid.y); cam.zoom = clamp(cam.zoom * (d / pinchPrev), cam.min, cam.max); const after = screenToWorld(mid.x, mid.y); cam.x += before.x - after.x; cam.y += before.y - after.y; clampCam(); } pinchPrev = d; } }); function endPointer(e) { pointers.delete(e.pointerId); if (pointers.size < 2) pinchPrev = null; } canvas.addEventListener('pointerup', endPointer); canvas.addEventListener('pointercancel', endPointer); canvas.addEventListener('pointerleave', endPointer); canvas.addEventListener('wheel', e => { e.preventDefault(); const factor = Math.exp(-e.deltaY * 0.0014); const before = screenToWorld(e.clientX, e.clientY); cam.zoom = clamp(cam.zoom * factor, cam.min, cam.max); const after = screenToWorld(e.clientX, e.clientY); cam.x += before.x - after.x; cam.y += before.y - after.y; clampCam(); }, { passive: false }); document.getElementById('recenter').addEventListener('click', () => { cam.x = W / 2; cam.y = H / 2; cam.zoom = 0.75; }); const DEFAULT_SETTINGS = { paused: false, showVehicles: true, showPedestrians: true, showRain: true, showSteam: true, showSigns: true, trafficDensity: 1, bikeRatio: 0.22, pedDensity: 1, rainIntensity: 1, steamIntensity: 1, bloom: 1, headlightSoftness: 1, }; const sim = { ...DEFAULT_SETTINGS }; const controlPanel = document.getElementById('controlPanel'); const panelToggle = document.getElementById('togglePanel'); const controlInputs = { pauseToggle: document.getElementById('pauseToggle'), showVehicles: document.getElementById('showVehicles'), showPedestrians: document.getElementById('showPedestrians'), showRain: document.getElementById('showRain'), showSteam: document.getElementById('showSteam'), showSigns: document.getElementById('showSigns'), trafficDensity: document.getElementById('trafficDensity'), bikeRatio: document.getElementById('bikeRatio'), pedDensity: document.getElementById('pedDensity'), rainIntensity: document.getElementById('rainIntensity'), steamIntensity: document.getElementById('steamIntensity'), bloom: document.getElementById('bloom'), headlightSoftness: document.getElementById('headlightSoftness'), resetControls: document.getElementById('resetControls'), }; const controlOutputs = { trafficDensity: document.getElementById('trafficDensityValue'), bikeRatio: document.getElementById('bikeRatioValue'), pedDensity: document.getElementById('pedDensityValue'), rainIntensity: document.getElementById('rainIntensityValue'), steamIntensity: document.getElementById('steamIntensityValue'), bloom: document.getElementById('bloomValue'), headlightSoftness: document.getElementById('headlightSoftnessValue'), }; function formatPct(v) { return `${Math.round(v * 100)}%`; } function syncControlOutputs() { controlOutputs.trafficDensity.textContent = formatPct(sim.trafficDensity); controlOutputs.bikeRatio.textContent = `${Math.round(sim.bikeRatio * 100)}%`; controlOutputs.pedDensity.textContent = formatPct(sim.pedDensity); controlOutputs.rainIntensity.textContent = formatPct(sim.rainIntensity); controlOutputs.steamIntensity.textContent = formatPct(sim.steamIntensity); controlOutputs.bloom.textContent = formatPct(sim.bloom); controlOutputs.headlightSoftness.textContent = formatPct(sim.headlightSoftness); } function syncControlInputs() { controlInputs.pauseToggle.checked = sim.paused; controlInputs.showVehicles.checked = sim.showVehicles; controlInputs.showPedestrians.checked = sim.showPedestrians; controlInputs.showRain.checked = sim.showRain; controlInputs.showSteam.checked = sim.showSteam; controlInputs.showSigns.checked = sim.showSigns; controlInputs.trafficDensity.value = Math.round(sim.trafficDensity * 100); controlInputs.bikeRatio.value = Math.round(sim.bikeRatio * 100); controlInputs.pedDensity.value = Math.round(sim.pedDensity * 100); controlInputs.rainIntensity.value = Math.round(sim.rainIntensity * 100); controlInputs.steamIntensity.value = Math.round(sim.steamIntensity * 100); controlInputs.bloom.value = Math.round(sim.bloom * 100); controlInputs.headlightSoftness.value = Math.round(sim.headlightSoftness * 100); syncControlOutputs(); } function applyControlSideEffects() { if (typeof seedRain === 'function') seedRain(); if (!sim.showVehicles) cars.length = 0; if (!sim.showSteam) steam.length = 0; } panelToggle.addEventListener('click', () => { controlPanel.classList.toggle('is-collapsed'); panelToggle.textContent = controlPanel.classList.contains('is-collapsed') ? '+' : '−'; }); controlInputs.pauseToggle.addEventListener('change', e => { sim.paused = e.target.checked; }); controlInputs.showVehicles.addEventListener('change', e => { sim.showVehicles = e.target.checked; applyControlSideEffects(); }); controlInputs.showPedestrians.addEventListener('change', e => { sim.showPedestrians = e.target.checked; }); controlInputs.showRain.addEventListener('change', e => { sim.showRain = e.target.checked; }); controlInputs.showSteam.addEventListener('change', e => { sim.showSteam = e.target.checked; applyControlSideEffects(); }); controlInputs.showSigns.addEventListener('change', e => { sim.showSigns = e.target.checked; }); controlInputs.trafficDensity.addEventListener('input', e => { sim.trafficDensity = e.target.value / 100; syncControlOutputs(); }); controlInputs.bikeRatio.addEventListener('input', e => { sim.bikeRatio = e.target.value / 100; syncControlOutputs(); }); controlInputs.pedDensity.addEventListener('input', e => { sim.pedDensity = e.target.value / 100; syncControlOutputs(); }); controlInputs.rainIntensity.addEventListener('input', e => { sim.rainIntensity = e.target.value / 100; syncControlOutputs(); if (typeof seedRain === 'function') seedRain(); }); controlInputs.steamIntensity.addEventListener('input', e => { sim.steamIntensity = e.target.value / 100; syncControlOutputs(); }); controlInputs.bloom.addEventListener('input', e => { sim.bloom = e.target.value / 100; syncControlOutputs(); }); controlInputs.headlightSoftness.addEventListener('input', e => { sim.headlightSoftness = e.target.value / 100; syncControlOutputs(); }); controlInputs.resetControls.addEventListener('click', () => { Object.assign(sim, DEFAULT_SETTINGS); syncControlInputs(); applyControlSideEffects(); }); syncControlInputs(); /* ====== 3. CITY GENERATION ============================== */ // Recursive footprint subdivision. function subdivide(x0, y0, x1, y1, depth) { const w = x1 - x0, h = y1 - y0; if (depth > 3 || w < 70 || h < 70 || Math.random() < 0.30) { const inset = rand(4, 9); return [{ x: x0 + inset, y: y0 + inset, w: w - inset * 2, h: h - inset * 2 }]; } if (w > h * 1.15 || (w > 110 && Math.random() < 0.55)) { const s = x0 + w * rand(0.36, 0.64), g = rand(6, 12); return [...subdivide(x0, y0, s - g, y1, depth + 1), ...subdivide(s + g, y0, x1, y1, depth + 1)]; } const s = y0 + h * rand(0.36, 0.64), g = rand(6, 12); return [...subdivide(x0, y0, x1, s - g, depth + 1), ...subdivide(x0, s + g, x1, y1, depth + 1)]; } // Window bands on a building face. // Each band = { vRel: 0..1 along height, hRel0, hRel1: 0..1 along width, hue, lit } function makeWindowBands(faceW, faceH) { const bands = []; const bandCount = clamp(Math.floor(faceH / 14), 2, 9); const vStep = 1 / (bandCount + 1); for (let i = 1; i <= bandCount; i++) { const vRel = i * vStep; // Either one big band, or 1-3 segments const segCount = Math.random() < 0.45 ? 1 : irand(2, 3); const totalGap = 0.08 * (segCount - 1); const segLen = (0.88 - totalGap) / segCount; let cursor = 0.06; for (let s = 0; s < segCount; s++) { const h0 = cursor; const h1 = cursor + segLen; cursor = h1 + 0.08; const lit = Math.random() < 0.55; bands.push({ vRel, hRel0: h0, hRel1: h1, thickness: rand(0.018, 0.030), // fraction of building height hue: lit ? pick(NEON) : null, lit, flickerPhase: Math.random() * 10, flickers: lit && Math.random() < 0.04, }); } } return bands; } function makeRoofUnits(b) { const units = []; const cnt = clamp(Math.floor((b.w * b.h) / 1400), 0, 6); for (let i = 0; i < cnt; i++) { const uw = rand(7, Math.min(22, b.w * 0.32)); const uh = rand(7, Math.min(22, b.h * 0.32)); const uz = rand(3, 9); units.push({ x: rand(b.x + 4, b.x + b.w - uw - 4), y: rand(b.y + 4, b.y + b.h - uh - 4), w: uw, h: uh, z: uz, glow: Math.random() < 0.3 ? pick(NEON) : null, }); } return units; } function pickEntrance(b) { const opts = [ { side: 'N', x: b.x + b.w / 2, y: b.y, dx: 0, dy: -1 }, { side: 'S', x: b.x + b.w / 2, y: b.y + b.h, dx: 0, dy: 1 }, { side: 'W', x: b.x, y: b.y + b.h/2, dx:-1, dy: 0 }, { side: 'E', x: b.x + b.w, y: b.y + b.h/2, dx: 1, dy: 0 }, ]; // Prefer S or E (visible front faces in iso) return Math.random() < 0.7 ? (Math.random() < 0.5 ? opts[1] : opts[3]) : pick(opts); } function generateCity() { const buildings = []; const venues = []; const signs = []; // 3D neon signs perched on buildings const manholes = []; // round vents in roads const grates = []; // rectangular grates on sidewalks // Buildings per cell for (let i = 0; i < GRID; i++) { for (let j = 0; j < GRID; j++) { const x0 = i * CELL + PAD; const y0 = j * CELL + PAD; const x1 = (i + 1) * CELL - PAD; const y1 = (j + 1) * CELL - PAD; const subs = subdivide(x0, y0, x1, y1, 0); for (const s of subs) { if (s.w < 22 || s.h < 22) continue; const isVenue = Math.random() < 0.18; const hue = pick(NEON); const b = { x: s.x, y: s.y, w: s.w, h: s.h, // Vertical height (z) — venues short & wide; office blocks tall z: isVenue ? rand(22, 42) : rand(55, 130), top: pick(C.bTop), front: pick(C.bFront), right: pick(C.bRight), isVenue, hue, bandsR: null, bandsF: null, units: null, entrance: null, // pre-cache iso "depth key" of front-most corner (x+w, y+h) depth: 0, }; b.bandsR = makeWindowBands(b.h, b.z); // right wall: faceW=depth(h), faceH=z b.bandsF = makeWindowBands(b.w, b.z); // front wall: faceW=w, faceH=z b.units = makeRoofUnits(b); if (isVenue) b.entrance = pickEntrance(b); b.depth = b.x + b.w + b.y + b.h; buildings.push(b); if (isVenue) venues.push(b); } } } // Rooftop neon signs (3D thin box on roof, aligned with long edge) for (const b of buildings) { const signEligible = (b.isVenue || (b.z > 60 && Math.random() < 0.26)) && Math.min(b.w, b.h) >= 34 && Math.max(b.w, b.h) >= 58; if (!signEligible) continue; const horiz = b.w > b.h; const len = (horiz ? b.w : b.h) * rand(0.38, 0.62); const thickness = 4; const stand = rand(3.5, 7); // sign height above roof const inset = 10; const baseX = horiz ? rand(b.x + inset, b.x + b.w - len - inset) : b.x + b.w * 0.5 - thickness / 2; const baseY = horiz ? b.y + b.h * 0.5 - thickness / 2 : rand(b.y + inset, b.y + b.h - len - inset); signs.push({ x: baseX, y: baseY, w: horiz ? len : thickness, h: horiz ? thickness : len, z0: b.z, z1: b.z + stand, hue: b.isVenue ? b.hue : pick(NEON), flicker: Math.random() < 0.22, broken : Math.random() < 0.06, phase : Math.random() * 10, axis : horiz ? 'x' : 'y', text : pick(SIGN_TEXTS), // sort key: closest to camera = bottom-right corner of base depth : baseX + (horiz ? len : thickness) + baseY + (horiz ? thickness : len), }); } // Manholes — 30 round vents on roads (sources of steam) for (let n = 0; n < 36; n++) { let x, y; if (Math.random() < 0.5) { const row = irand(0, GRID); y = row * CELL + rand(-ROAD_W / 4, ROAD_W / 4); x = rand(40, W - 40); } else { const col = irand(0, GRID); x = col * CELL + rand(-ROAD_W / 4, ROAD_W / 4); y = rand(40, H - 40); } manholes.push({ x, y, r: rand(7, 9.5), emit: rand(0.6, 1.4), phase: rand(0, 100) }); } // Sidewalk grates — rectangular ground vents tucked along sidewalks Andrew for (let n = 0; n < 60; n++) { // pick a random sidewalk position const horizontal = Math.random() < 0.5; const idx = irand(0, GRID); const side = Math.random() < 0.5 ? -1 : 1; const off = (ROAD_W / 2 + SIDEWALK_W / 2) * side; const along = rand(60, (horizontal ? W : H) - 60); const gx = horizontal ? along : idx * CELL + off; const gy = horizontal ? idx * CELL + off : along; grates.push({ x: gx - (horizontal ? 10 : 5), y: gy - (horizontal ? 5 : 10), w: horizontal ? 20 : 10, h: horizontal ? 10 : 20, bars: horizontal ? 5 : 5, horizontal, emit: rand(0.3, 1.0), phase: rand(0, 100), }); } // Precompute static projected geometry for every building + sign. // Iso projection is independent of the camera — only the canvas // transform changes per frame. So we project once and re-use forever. for (const b of buildings) precomputeBuilding(b); for (const s of signs) precomputeSign(s); return { buildings, venues, signs, manholes, grates }; } function precomputeBuilding(b) { const x0 = b.x, x1 = b.x + b.w; const y0 = b.y, y1 = b.y + b.h; const z = b.z; b._rightFace = [ toIso(x1, y0, 0), toIso(x1, y1, 0), toIso(x1, y1, z), toIso(x1, y0, z), ]; b._frontFace = [ toIso(x0, y1, 0), toIso(x1, y1, 0), toIso(x1, y1, z), toIso(x0, y1, z), ]; b._roof = [ toIso(x0, y0, z), toIso(x1, y0, z), toIso(x1, y1, z), toIso(x0, y1, z), ]; // Right-wall bands for (const w of b.bandsR) { const v = w.vRel * z; const thk = w.thickness * z; const u0 = b.y + w.hRel0 * b.h; const u1 = b.y + w.hRel1 * b.h; w._proj = [ toIso(x1, u0, v), toIso(x1, u1, v), toIso(x1, u1, v + thk), toIso(x1, u0, v + thk), ]; } // Front-wall bands for (const w of b.bandsF) { const v = w.vRel * z; const thk = w.thickness * z; const u0 = b.x + w.hRel0 * b.w; const u1 = b.x + w.hRel1 * b.w; w._proj = [ toIso(u0, y1, v), toIso(u1, y1, v), toIso(u1, y1, v + thk), toIso(u0, y1, v + thk), ]; } // Roof units (boxes) for (const u of b.units) { u._top = [ toIso(u.x, u.y, z + u.z), toIso(u.x + u.w, u.y, z + u.z), toIso(u.x + u.w, u.y + u.h, z + u.z), toIso(u.x, u.y + u.h, z + u.z), ]; u._right = [ toIso(u.x + u.w, u.y, z), toIso(u.x + u.w, u.y + u.h, z), toIso(u.x + u.w, u.y + u.h, z + u.z), toIso(u.x + u.w, u.y, z + u.z), ]; u._front = [ toIso(u.x, u.y + u.h, z), toIso(u.x + u.w, u.y + u.h, z), toIso(u.x + u.w, u.y + u.h, z + u.z), toIso(u.x, u.y + u.h, z + u.z), ]; if (u.glow) u._gC = toIso(u.x + u.w / 2, u.y + u.h / 2, z + u.z); } // Pre-cache the door slab (if venue) front geometry if (b.isVenue && b.entrance) { const e = b.entrance; if (e.side === 'S') { b._doorFace = [ toIso(e.x - 6, y1, 2), toIso(e.x + 6, y1, 2), toIso(e.x + 6, y1, 14), toIso(e.x - 6, y1, 14), ]; } else if (e.side === 'E') { b._doorFace = [ toIso(x1, e.y - 6, 2), toIso(x1, e.y + 6, 2), toIso(x1, e.y + 6, 14), toIso(x1, e.y - 6, 14), ]; } b._entranceCenter = toIso(e.x + e.dx * 6, e.y + e.dy * 6, 0); } } function precomputeSign(s) { const x0 = s.x, x1 = s.x + s.w; const y0 = s.y, y1 = s.y + s.h; s._top = [ toIso(x0, y0, s.z1), toIso(x1, y0, s.z1), toIso(x1, y1, s.z1), toIso(x0, y1, s.z1), ]; s._front = [ toIso(x0, y1, s.z0), toIso(x1, y1, s.z0), toIso(x1, y1, s.z1), toIso(x0, y1, s.z1), ]; s._right = [ toIso(x1, y0, s.z0), toIso(x1, y1, s.z0), toIso(x1, y1, s.z1), toIso(x1, y0, s.z1), ]; s._center = toIso(x0 + s.w / 2, y0 + s.h / 2, (s.z0 + s.z1) / 2); s._textPos = toIso(x0 + s.w / 2, y0 + s.h / 2, s.z1 + 1.8); s._textAngle = s.axis === 'x' ? Math.atan2(IY, IX) : -Math.atan2(IY, IX); s._fontSize = clamp(Math.max(s.w, s.h) * 0.34, 7, 16); s._bloomR = Math.max(s.w, s.h) * 2.4; } const city = generateCity(); /* ====== 4. TRAFFIC ===================================== */ // Lane geometry: // h-east on row j: y = j*CELL + 0.22*ROAD_W // h-west on row j: y = j*CELL - 0.22*ROAD_W // v-south on col i: x = i*CELL + 0.22*ROAD_W // v-north on col i: x = i*CELL - 0.22*ROAD_W const LANE_OFF = ROAD_W * 0.22; // Intersection signals — keyed by "i_j" const signals = new Map(); for (let i = 0; i <= GRID; i++) { for (let j = 0; j <= GRID; j++) { signals.set(`${i}_${j}`, { i, j, // phase 0: H green, V red. phase 1: all-red briefly. phase 2: V green, H red. phase 3: all-red. phase: irand(0, 3), timer: rand(0, 8), }); } } const PHASE_DURATIONS = [9, 0.8, 9, 0.8]; function updateSignals(dt) { for (const s of signals.values()) { s.timer += dt; if (s.timer >= PHASE_DURATIONS[s.phase]) { s.timer = 0; s.phase = (s.phase + 1) % 4; } } } function hasGreenH(s) { return s.phase === 0; } function hasGreenV(s) { return s.phase === 2; } // Cars const cars = []; function carWorldPos(c) { return { x: c.x, y: c.y }; } function laneKey(c) { return c.axis === 'h' ? `h${c.idx}${c.dir > 0 ? 'e' : 'w'}` : `v${c.idx}${c.dir > 0 ? 's' : 'n'}`; } // Lane buckets (rebuilt each frame for fast leader lookup) const laneBuckets = new Map(); function rebuildLaneBuckets() { laneBuckets.clear(); for (const c of cars) { const k = laneKey(c); if (!laneBuckets.has(k)) laneBuckets.set(k, []); laneBuckets.get(k).push(c); } // sort each bucket by position along travel direction for (const arr of laneBuckets.values()) { arr.sort((a, b) => { const pa = a.axis === 'h' ? a.x * a.dir : a.y * a.dir; const pb = b.axis === 'h' ? b.x * b.dir : b.y * b.dir; return pa - pb; }); } } function progOf(c) { return c.axis === 'h' ? c.x * c.dir : c.y * c.dir; } // Spawn a car only if there's clearance at its entry point. function trySpawnCar() { const axis = Math.random() < 0.54 ? 'h' : 'v'; const idx = trafficLaneIndex(); const dir = Math.random() < 0.5 ? 1 : -1; const kind = Math.random() < sim.bikeRatio ? 'bike' : 'car'; const baseSpeed = kind === 'bike' ? rand(74, 108) : rand(58, 92); const isExotic = Math.random() < (kind === 'bike' ? 0.28 : 0.12); const color = isExotic ? pick(NEON) : null; let x, y; if (axis === 'h') { y = idx * CELL + dir * LANE_OFF; x = dir > 0 ? -30 : W + 30; } else { x = idx * CELL + dir * LANE_OFF; y = dir > 0 ? -30 : H + 30; } const tentative = { axis, idx, dir, x, y }; const k = laneKey(tentative); const bucket = laneBuckets.get(k) || []; const myProg = progOf(tentative); const clearance = kind === 'bike' ? 34 : 50; for (const o of bucket) { const op = progOf(o); if (op > myProg && op - myProg < clearance) return false; } cars.push({ kind, axis, idx, dir, x, y, len: kind === 'bike' ? rand(12, 15.5) : rand(20, 26), wid: kind === 'bike' ? rand(5.0, 6.3) : rand(11, 13), z: kind === 'bike' ? 4.2 : 6, baseSpeed, speed: baseSpeed, color, riderAccent: Math.random() < 0.40 ? pick(NEON) : null, headlightH: Math.random() < 0.75 ? 50 : 200, tailH: 0, stopBuffer: kind === 'bike' ? 18 : 26, }); return true; } // Returns the distance to the nearest stop-bar AHEAD where this car must stop, // OR Infinity if it can freely proceed. function nextStopDistance(c) { // Stop-bar = ROAD_W/2 before the intersection center. // For each upcoming intersection along this car's path, check its signal. if (c.axis === 'h') { // x progresses in +dir. let nearest = Infinity; for (let i = 0; i <= GRID; i++) { const ix = i * CELL; const dist = (ix - c.x) * c.dir; if (dist > -ROAD_W / 2 && dist < 240) { const sig = signals.get(`${i}_${c.idx}`); if (!hasGreenH(sig)) { const stopAt = dist - ROAD_W / 2; if (stopAt > -2 && stopAt < nearest) nearest = stopAt; } } } return nearest; } else { let nearest = Infinity; for (let j = 0; j <= GRID; j++) { const jy = j * CELL; const dist = (jy - c.y) * c.dir; if (dist > -ROAD_W / 2 && dist < 240) { const sig = signals.get(`${c.idx}_${j}`); if (!hasGreenV(sig)) { const stopAt = dist - ROAD_W / 2; if (stopAt > -2 && stopAt < nearest) nearest = stopAt; } } } return nearest; } } function updateCars(dt) { if (!sim.showVehicles) { cars.length = 0; return; } rebuildLaneBuckets(); const targetCars = Math.max(0, Math.round(68 * sim.trafficDensity)); if (cars.length > targetCars + 8) cars.splice(0, cars.length - targetCars); let attempts = 0; while (cars.length < targetCars && attempts < 6) { trySpawnCar(); attempts++; } for (let k = cars.length - 1; k >= 0; k--) { const c = cars[k]; const myProg = progOf(c); // Find leader in lane const bucket = laneBuckets.get(laneKey(c)); let leaderGap = Infinity; if (bucket) { // bucket is sorted ascending; find next entry after me for (let i = 0; i < bucket.length; i++) { const o = bucket[i]; if (o === c) continue; const op = progOf(o); if (op > myProg) { leaderGap = op - myProg - c.stopBuffer; break; } } } const sigGap = nextStopDistance(c); const gap = Math.min(leaderGap, sigGap); // Speed control: smooth deceleration as gap shrinks let target; if (gap < 4) target = 0; else if (gap < 70) target = c.baseSpeed * ((gap - 4) / 66); else target = c.baseSpeed; // Accel/decel const accel = target > c.speed ? 28 : 70; c.speed += clamp(target - c.speed, -accel * dt, accel * dt); c.speed = Math.max(0, c.speed); // Move if (c.axis === 'h') c.x += c.dir * c.speed * dt; else c.y += c.dir * c.speed * dt; // Despawn outside world bounds const m = 50; if (c.x < -m || c.x > W + m || c.y < -m || c.y > H + m) { cars.splice(k, 1); } } } /* ====== 5. PEDESTRIANS ================================== */ const peds = []; function sideOff() { return ROAD_W / 2 + SIDEWALK_W / 2; } function spawnWalker() { const horiz = Math.random() < 0.5; const idx = irand(0, GRID); const side = Math.random() < 0.5 ? -1 : 1; const off = sideOff() * side; const speed = rand(12, 18); const dir = Math.random() < 0.5 ? 1 : -1; let x, y, vx, vy; if (horiz) { y = idx * CELL + off; x = rand(0, W); vx = dir * speed; vy = 0; } else { x = idx * CELL + off; y = rand(0, H); vx = 0; vy = dir * speed; } const accent = Math.random() < 0.26 ? pick(NEON) : null; peds.push({ kind: 'walker', x, y, vx, vy, horiz, idx, side, style: createPedStyle(accent), bob: Math.random() * 6, bobSpeed: rand(4, 7), turnCD: rand(1.5, 4.5), pauseT: 0, }); } function spawnIdler(x, y, hue, ttl) { peds.push({ kind: 'idler', x, y, vx: 0, vy: 0, style: createPedStyle(hue || null), bob: Math.random() * 6, bobSpeed: rand(1.4, 2.6), ttl: ttl || rand(10, 35), }); } function seedPeds() { for (let i = 0; i < 110; i++) spawnWalker(); for (let i = 0; i < 28; i++) { const horiz = Math.random() < 0.5; const idx = irand(0, GRID); const side = Math.random() < 0.5 ? -1 : 1; const off = sideOff() * side; const along = rand(80, (horiz ? W : H) - 80); const cx = horiz ? along : idx * CELL + off; const cy = horiz ? idx * CELL + off : along; const gh = pick(NEON); const n = irand(2, 4); for (let k = 0; k < n; k++) { const a = (k / n) * TAU + rand(0, 1); spawnIdler(cx + Math.cos(a) * 3.2, cy + Math.sin(a) * 3.2, Math.random() < 0.5 ? gh : null); } } // Venue queues and sidewalk activity for (const v of city.venues) { if (!v.entrance) continue; const e = v.entrance; const cx = e.x + e.dx * (SIDEWALK_W * 0.7); const cy = e.y + e.dy * (SIDEWALK_W * 0.7); const qn = irand(3, 7); for (let k = 0; k < qn; k++) { const qx = cx + e.dx * (k * 5.2 + rand(-0.8, 1.4)) + e.dy * rand(-3.2, 3.2); const qy = cy + e.dy * (k * 5.2 + rand(-0.8, 1.4)) + e.dx * rand(-3.2, 3.2); spawnIdler(qx, qy, Math.random() < 0.58 ? v.hue : null, rand(18, 42)); } const clusterN = irand(2, 4); for (let k = 0; k < clusterN; k++) { spawnIdler(cx + rand(-12, 12), cy + rand(-12, 12), Math.random() < 0.42 ? v.hue : null, rand(10, 28)); } } // Micro-events / random hotspots for (let i = 0; i < 16; i++) { const horiz = Math.random() < 0.5; const idx = irand(0, GRID); const side = Math.random() < 0.5 ? -1 : 1; const off = sideOff() * side; const along = rand(100, (horiz ? W : H) - 100); const cx = horiz ? along : idx * CELL + off; const cy = horiz ? idx * CELL + off : along; const n = irand(2, 5); for (let k = 0; k < n; k++) { spawnIdler(cx + rand(-6, 6), cy + rand(-6, 6), Math.random() < 0.22 ? pick(NEON) : null, rand(12, 26)); } } } seedPeds(); function updatePeds(dt) { const targetWalkers = Math.max(0, Math.round(128 * sim.pedDensity)); let walkerCount = 0; for (const p of peds) if (p.kind === 'walker') walkerCount++; while (walkerCount < targetWalkers) { spawnWalker(); walkerCount++; } if (walkerCount > targetWalkers) { for (let i = peds.length - 1; i >= 0 && walkerCount > targetWalkers; i--) { if (peds[i].kind === 'walker') { peds.splice(i, 1); walkerCount--; } } } for (let k = peds.length - 1; k >= 0; k--) { const p = peds[k]; if (p.kind === 'walker') { if (p.pauseT > 0) p.pauseT -= dt; else { p.x += p.vx * dt; p.y += p.vy * dt; } p.turnCD -= dt; if (p.turnCD <= 0) { p.turnCD = rand(2.2, 5.5); if (Math.random() < 0.55) { // Try turn at the nearest cross street if (p.horiz) { const col = Math.round(p.x / CELL); const cx = col * CELL; if (Math.abs(p.x - cx) < 70 && col > 0 && col < GRID) { const ns = Math.random() < 0.5 ? -1 : 1; p.x = cx + sideOff() * ns; p.horiz = false; p.idx = col; p.side = ns; const sp = Math.hypot(p.vx, p.vy) || rand(12, 18); const dr = Math.random() < 0.5 ? 1 : -1; p.vx = 0; p.vy = dr * sp; } } else { const row = Math.round(p.y / CELL); const cy = row * CELL; if (Math.abs(p.y - cy) < 70 && row > 0 && row < GRID) { const ns = Math.random() < 0.5 ? -1 : 1; p.y = cy + sideOff() * ns; p.horiz = true; p.idx = row; p.side = ns; const sp = Math.hypot(p.vx, p.vy) || rand(12, 18); const dr = Math.random() < 0.5 ? 1 : -1; p.vx = dr * sp; p.vy = 0; } } } else if (Math.random() < 0.22) { p.pauseT = rand(0.5, 1.4); } } if (p.x < -20 || p.x > W + 20 || p.y < -20 || p.y > H + 20) { peds.splice(k, 1); spawnWalker(); } } else { p.ttl -= dt; if (p.ttl <= 0) { peds.splice(k, 1); if (Math.random() < 0.6) spawnWalker(); } } } } /* ====== 6. AMBIENT — steam + rain ======================= */ // Steam particles spawned from manholes & grates only. const steam = []; function updateSteam(dt, t) { if (!sim.showSteam || sim.steamIntensity <= 0) { steam.length = 0; return; } for (const m of city.manholes) { const phase = (t + m.phase) * m.emit; if (Math.random() < (0.06 + 0.04 * Math.sin(phase)) * sim.steamIntensity) { steam.push({ source: 'manhole', x0: m.x, y0: m.y, x: m.x + rand(-1.2, 1.2), y: m.y + rand(-1.2, 1.2), z: 0, zMax: rand(14, 22), vx: rand(-0.8, 0.8), vy: rand(-0.8, 0.8), vz: rand(6, 11), life: rand(2.2, 3.6), age: 0, r0: rand(3.4, 5.8), }); } } for (const g of city.grates) { if (Math.random() < 0.035 * g.emit * sim.steamIntensity) { steam.push({ source: 'grate', x0: g.x + g.w / 2, y0: g.y + g.h / 2, x: g.x + g.w / 2 + rand(-1.2, 1.2), y: g.y + g.h / 2 + rand(-1.2, 1.2), z: 0, zMax: rand(10, 18), vx: rand(-0.7, 0.7), vy: rand(-0.7, 0.7), vz: rand(5, 9), life: rand(1.8, 3.1), age: 0, r0: rand(2.3, 4.6), }); } } for (let k = steam.length - 1; k >= 0; k--) { const p = steam[k]; p.age += dt; if (p.age >= p.life) { steam.splice(k, 1); continue; } p.x += p.vx * dt; p.y += p.vy * dt; p.z = Math.min(p.z + p.vz * dt, p.zMax); p.vz *= (1 - 0.55 * dt); const drift = p.source === 'manhole' ? 4.5 : 3.4; p.x = clamp(p.x, p.x0 - drift, p.x0 + drift); p.y = clamp(p.y, p.y0 - drift, p.y0 + drift); } if (steam.length > 420) steam.splice(0, steam.length - 420); } // Rain in screen space. const rain = []; function seedRain() { rain.length = 0; const n = Math.max(0, Math.round(380 * sim.rainIntensity)); for (let i = 0; i < n; i++) { rain.push({ x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight, v: rand(620, 880), len: rand(8, 14), a: rand(0.18, 0.4), }); } } seedRain(); window.addEventListener('resize', seedRain); function updateRain(dt) { for (const r of rain) { r.y += r.v * dt; r.x += r.v * dt * 0.10; if (r.y > window.innerHeight + 20 || r.x > window.innerWidth + 20) { r.y = -10; r.x = Math.random() * window.innerWidth - 60; } } } /* ====== 7. RENDER ======================================= */ // Path a quad through 4 projected points. function quad(p) { ctx.beginPath(); ctx.moveTo(p[0].sx, p[0].sy); ctx.lineTo(p[1].sx, p[1].sy); ctx.lineTo(p[2].sx, p[2].sy); ctx.lineTo(p[3].sx, p[3].sy); ctx.closePath(); } // -- GROUND -- // Static city geometry is baked into Path2Ds once for cheap per-frame fills. let groundPaths = null; function buildGroundPaths() { const base = new Path2D(); const roads = new Path2D(); const sidewalks = new Path2D(); const curbs = new Path2D(); const lanes = new Path2D(); const stopBars = new Path2D(); function addQuad(p, target) { target.moveTo(p[0].sx, p[0].sy); target.lineTo(p[1].sx, p[1].sy); target.lineTo(p[2].sx, p[2].sy); target.lineTo(p[3].sx, p[3].sy); target.closePath(); } // base plane addQuad([toIso(0,0), toIso(W,0), toIso(W,H), toIso(0,H)], base); // roads for (let j = 0; j <= GRID; j++) { const y0 = j * CELL - ROAD_W / 2, y1 = y0 + ROAD_W; addQuad([toIso(0, y0), toIso(W, y0), toIso(W, y1), toIso(0, y1)], roads); } for (let i = 0; i <= GRID; i++) { const x0 = i * CELL - ROAD_W / 2, x1 = x0 + ROAD_W; addQuad([toIso(x0, 0), toIso(x1, 0), toIso(x1, H), toIso(x0, H)], roads); } // sidewalks for (let j = 0; j <= GRID; j++) { const yT0 = j * CELL - ROAD_W / 2 - SIDEWALK_W; const yT1 = j * CELL - ROAD_W / 2; const yB0 = j * CELL + ROAD_W / 2; const yB1 = yB0 + SIDEWALK_W; addQuad([toIso(0, yT0), toIso(W, yT0), toIso(W, yT1), toIso(0, yT1)], sidewalks); addQuad([toIso(0, yB0), toIso(W, yB0), toIso(W, yB1), toIso(0, yB1)], sidewalks); } for (let i = 0; i <= GRID; i++) { const xL0 = i * CELL - ROAD_W / 2 - SIDEWALK_W; const xL1 = i * CELL - ROAD_W / 2; const xR0 = i * CELL + ROAD_W / 2; const xR1 = xR0 + SIDEWALK_W; addQuad([toIso(xL0, 0), toIso(xL1, 0), toIso(xL1, H), toIso(xL0, H)], sidewalks); addQuad([toIso(xR0, 0), toIso(xR1, 0), toIso(xR1, H), toIso(xR0, H)], sidewalks); } // curb lines for (let j = 0; j <= GRID; j++) { const yT = j * CELL - ROAD_W / 2, yB = j * CELL + ROAD_W / 2; let p1 = toIso(0, yT), p2 = toIso(W, yT); curbs.moveTo(p1.sx, p1.sy); curbs.lineTo(p2.sx, p2.sy); p1 = toIso(0, yB); p2 = toIso(W, yB); curbs.moveTo(p1.sx, p1.sy); curbs.lineTo(p2.sx, p2.sy); } for (let i = 0; i <= GRID; i++) { const xL = i * CELL - ROAD_W / 2, xR = i * CELL + ROAD_W / 2; let p1 = toIso(xL, 0), p2 = toIso(xL, H); curbs.moveTo(p1.sx, p1.sy); curbs.lineTo(p2.sx, p2.sy); p1 = toIso(xR, 0); p2 = toIso(xR, H); curbs.moveTo(p1.sx, p1.sy); curbs.lineTo(p2.sx, p2.sy); } // road centerlines (dashed) for (let j = 0; j <= GRID; j++) { const a = toIso(0, j * CELL), b = toIso(W, j * CELL); lanes.moveTo(a.sx, a.sy); lanes.lineTo(b.sx, b.sy); } for (let i = 0; i <= GRID; i++) { const a = toIso(i * CELL, 0), b = toIso(i * CELL, H); lanes.moveTo(a.sx, a.sy); lanes.lineTo(b.sx, b.sy); } // Simple stop-bars at intersection approaches (thin lines just before the // road enters the intersection box). Reads as crosswalks without the cost. const BAR_W = 2.5; for (let i = 0; i <= GRID; i++) { for (let j = 0; j <= GRID; j++) { const cx = i * CELL, cy = j * CELL; const r = ROAD_W / 2; // west approach (bar before entering from -x) addQuad([toIso(cx - r - BAR_W, cy - r), toIso(cx - r, cy - r), toIso(cx - r, cy + r), toIso(cx - r - BAR_W, cy + r)], stopBars); addQuad([toIso(cx + r, cy - r), toIso(cx + r + BAR_W, cy - r), toIso(cx + r + BAR_W, cy + r), toIso(cx + r, cy + r)], stopBars); addQuad([toIso(cx - r, cy - r - BAR_W), toIso(cx + r, cy - r - BAR_W), toIso(cx + r, cy - r), toIso(cx - r, cy - r)], stopBars); addQuad([toIso(cx - r, cy + r), toIso(cx + r, cy + r), toIso(cx + r, cy + r + BAR_W), toIso(cx - r, cy + r + BAR_W)], stopBars); } } return { base, roads, sidewalks, curbs, lanes, stopBars }; } function drawGround() { if (!groundPaths) groundPaths = buildGroundPaths(); ctx.fillStyle = C.ground; ctx.fill(groundPaths.base); ctx.fillStyle = C.sidewalk; ctx.fill(groundPaths.sidewalks); ctx.fillStyle = C.road; ctx.fill(groundPaths.roads); ctx.strokeStyle = C.curb; ctx.lineWidth = 0.9; ctx.stroke(groundPaths.curbs); ctx.strokeStyle = C.roadLine; ctx.lineWidth = 0.7; ctx.setLineDash([10, 12]); ctx.stroke(groundPaths.lanes); ctx.setLineDash([]); ctx.fillStyle = C.crosswalk; ctx.fill(groundPaths.stopBars); } function drawManholes() { for (const m of city.manholes) { const p = toIso(m.x, m.y); // dark disc ctx.fillStyle = C.manhole; ctx.beginPath(); ctx.ellipse(p.sx, p.sy, m.r * IX, m.r * IY, 0, 0, TAU); ctx.fill(); // rim ring ctx.strokeStyle = C.manholeRim; ctx.lineWidth = 0.9; ctx.stroke(); // cross bar ctx.strokeStyle = '#262b3e'; ctx.lineWidth = 0.7; const a1 = toIso(m.x - m.r * 0.7, m.y), a2 = toIso(m.x + m.r * 0.7, m.y); const b1 = toIso(m.x, m.y - m.r * 0.7), b2 = toIso(m.x, m.y + m.r * 0.7); ctx.beginPath(); ctx.moveTo(a1.sx, a1.sy); ctx.lineTo(a2.sx, a2.sy); ctx.moveTo(b1.sx, b1.sy); ctx.lineTo(b2.sx, b2.sy); ctx.stroke(); } } function drawGrates() { for (const g of city.grates) { // base dark inset rectangle const c = [toIso(g.x, g.y), toIso(g.x + g.w, g.y), toIso(g.x + g.w, g.y + g.h), toIso(g.x, g.y + g.h)]; ctx.fillStyle = '#0a0c14'; quad(c); ctx.fill(); // bars ctx.strokeStyle = C.grateBar; ctx.lineWidth = 0.8; if (g.horizontal) { const step = g.w / g.bars; for (let i = 1; i < g.bars; i++) { const x = g.x + i * step; const p1 = toIso(x, g.y + 1), p2 = toIso(x, g.y + g.h - 1); ctx.beginPath(); ctx.moveTo(p1.sx, p1.sy); ctx.lineTo(p2.sx, p2.sy); ctx.stroke(); } } else { const step = g.h / g.bars; for (let i = 1; i < g.bars; i++) { const y = g.y + i * step; const p1 = toIso(g.x + 1, y), p2 = toIso(g.x + g.w - 1, y); ctx.beginPath(); ctx.moveTo(p1.sx, p1.sy); ctx.lineTo(p2.sx, p2.sy); ctx.stroke(); } } } } // Venue entrance lights drawn as flat additive ellipses on the ground. // Done BEFORE buildings so the buildings naturally occlude the parts // that should be hidden, eliminating the floating-orb artefact. function drawVenueLights() { if (sim.bloom <= 0) return; ctx.save(); ctx.globalCompositeOperation = 'lighter'; for (const b of city.venues) { if (!b.entrance || !b._entranceCenter) continue; const c = b._entranceCenter; softGlow(c.sx, c.sy, 48, 28, [ [0, hsl(b.hue, 72, 100, 0.28 * sim.bloom)], [0.45, hsl(b.hue, 66, 100, 0.14 * sim.bloom)], [1, hsl(b.hue, 66, 100, 0)] ]); softGlow(c.sx, c.sy, 22, 12, [ [0, hsl(b.hue, 78, 100, 0.26 * sim.bloom)], [1, hsl(b.hue, 78, 100, 0)] ]); } ctx.restore(); } // -- BUILDINGS as 3D iso boxes with window bands -- // Compute footprint corners as world points. function bldgCorners(b) { return { BL: { x: b.x, y: b.y }, BR: { x: b.x + b.w, y: b.y }, FL: { x: b.x, y: b.y + b.h }, FR: { x: b.x + b.w, y: b.y + b.h }, }; } function drawWallFront(b) { ctx.fillStyle = b.front; quad(b._frontFace); ctx.fill(); ctx.strokeStyle = C.wallSeam; ctx.lineWidth = 0.6; ctx.stroke(); } function drawWallRight(b) { ctx.fillStyle = b.right; quad(b._rightFace); ctx.fill(); ctx.strokeStyle = C.wallSeam; ctx.lineWidth = 0.6; ctx.stroke(); } function drawRoofTop(b) { ctx.fillStyle = b.top; quad(b._roof); ctx.fill(); ctx.strokeStyle = 'rgba(255,255,255,0.05)'; ctx.lineWidth = 0.6; ctx.stroke(); for (const u of b.units) { ctx.fillStyle = '#222a44'; quad(u._top); ctx.fill(); ctx.fillStyle = '#10142a'; quad(u._right); ctx.fill(); ctx.fillStyle = '#161b34'; quad(u._front); ctx.fill(); if (u.glow && sim.bloom > 0) { ctx.save(); ctx.globalCompositeOperation = 'lighter'; softGlow(u._gC.sx, u._gC.sy, 20, 12, [ [0, hsl(u.glow, 65, 100, 0.44 * sim.bloom)], [0.55, hsl(u.glow, 65, 100, 0.14 * sim.bloom)], [1, hsl(u.glow, 65, 100, 0)] ]); ctx.restore(); } } } // Render window bands on the right wall (precomputed quads). function drawBandsRight(b, t) { for (const w of b.bandsR) { if (w.lit) { let a = 0.9; if (w.flickers) a *= 0.4 + 0.6 * (Math.sin((t + w.flickerPhase) * 13) > 0.4 ? 1 : 0); ctx.fillStyle = hsl(w.hue, 68, 100, a); } else { ctx.fillStyle = C.windowOff; } quad(w._proj); ctx.fill(); } } function drawBandsFront(b, t) { for (const w of b.bandsF) { if (w.lit) { let a = 0.9; if (w.flickers) a *= 0.4 + 0.6 * (Math.sin((t + w.flickerPhase) * 13) > 0.4 ? 1 : 0); ctx.fillStyle = hsl(w.hue, 68, 100, a); } else { ctx.fillStyle = C.windowOff; } quad(w._proj); ctx.fill(); } } function drawBuilding(b, t) { // Order: right (back), front (mid), top (last) drawWallRight(b); drawWallFront(b); drawRoofTop(b); drawBandsRight(b, t); drawBandsFront(b, t); // Venue entrance door slab (additive bright rect on front face). if (b.isVenue && b._doorFace) { ctx.save(); ctx.globalCompositeOperation = 'lighter'; ctx.fillStyle = hsl(b.hue, 75, 100, 0.85); quad(b._doorFace); ctx.fill(); ctx.restore(); } } // -- SIGNS: thin neon volume above building (precomputed) -- function drawSign(s, t) { let a = 1; if (s.broken) a *= 0.25 + 0.75 * (Math.sin((t + s.phase) * 17) > 0.5 ? 1 : 0); else if (s.flicker) a *= 0.78 + 0.22 * Math.sin((t + s.phase) * 6); ctx.fillStyle = hsl(s.hue, 80, 100, a); quad(s._top); ctx.fill(); quad(s._front); ctx.fill(); quad(s._right); ctx.fill(); if (sim.bloom > 0) { ctx.save(); ctx.globalCompositeOperation = 'lighter'; const c = s._center; softGlow(c.sx, c.sy, s._bloomR * 0.72, s._bloomR * 0.44, [ [0, hsl(s.hue, 65, 100, 0.14 * a * sim.bloom)], [0.55, hsl(s.hue, 65, 100, 0.07 * a * sim.bloom)], [1, hsl(s.hue, 65, 100, 0)] ]); softGlow(c.sx, c.sy, s._bloomR * 0.34, s._bloomR * 0.20, [ [0, hsl(s.hue, 72, 100, 0.22 * a * sim.bloom)], [1, hsl(s.hue, 72, 100, 0)] ]); ctx.restore(); } ctx.save(); ctx.translate(s._textPos.sx, s._textPos.sy); ctx.rotate(s._textAngle); ctx.scale(1, 0.82); ctx.font = `600 ${s._fontSize}px ui-monospace, monospace`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.lineWidth = 2.6; ctx.strokeStyle = 'rgba(8,10,18,0.7)'; ctx.strokeText(s.text, 0, 0); ctx.fillStyle = hsl(s.hue, 78, 100, 0.96 * a); ctx.fillText(s.text, 0, 0); ctx.restore(); } // -- CARS -- function drawBike(c) { const w = c.axis === 'h' ? c.len : c.wid; const h = c.axis === 'h' ? c.wid : c.len; const bx = c.x - w / 2, by = c.y - h / 2; const z = c.z; const frame = c.color ? hsl(c.color, 38) : '#1b1f2b'; const trim = c.riderAccent || c.color || null; ctx.save(); ctx.globalAlpha = 0.42; ctx.fillStyle = '#000'; const sh = [toIso(bx + 0.7, by + 0.7), toIso(bx + w + 0.7, by + 0.7), toIso(bx + w + 0.7, by + h + 0.7), toIso(bx + 0.7, by + h + 0.7)]; quad(sh); ctx.fill(); ctx.restore(); ctx.fillStyle = '#05070d'; if (c.axis === 'h') { const wa = toIso(c.x - c.len * 0.28, c.y, 0.1); const wb = toIso(c.x + c.len * 0.28, c.y, 0.1); ctx.beginPath(); ctx.ellipse(wa.sx, wa.sy, 1.4, 0.9, 0, 0, TAU); ctx.fill(); ctx.beginPath(); ctx.ellipse(wb.sx, wb.sy, 1.4, 0.9, 0, 0, TAU); ctx.fill(); } else { const wa = toIso(c.x, c.y - c.len * 0.28, 0.1); const wb = toIso(c.x, c.y + c.len * 0.28, 0.1); ctx.beginPath(); ctx.ellipse(wa.sx, wa.sy, 1.4, 0.9, 0, 0, TAU); ctx.fill(); ctx.beginPath(); ctx.ellipse(wb.sx, wb.sy, 1.4, 0.9, 0, 0, TAU); ctx.fill(); } ctx.fillStyle = '#0c1018'; quad([toIso(bx, by + h * 0.28, z * 0.45), toIso(bx + w, by + h * 0.28, z * 0.45), toIso(bx + w, by + h * 0.72, z * 0.45), toIso(bx, by + h * 0.72, z * 0.45)]); ctx.fill(); ctx.fillStyle = frame; quad([toIso(bx + w * 0.14, by + h * 0.16, z), toIso(bx + w * 0.86, by + h * 0.16, z), toIso(bx + w * 0.86, by + h * 0.84, z), toIso(bx + w * 0.14, by + h * 0.84, z)]); ctx.fill(); const torso = toIso(c.x, c.y, z + 2.2); const head = toIso(c.x, c.y, z + 4.6); ctx.strokeStyle = '#1a202c'; ctx.lineWidth = 1.3; ctx.beginPath(); ctx.moveTo(torso.sx, torso.sy + 1.8); ctx.lineTo(head.sx, head.sy + 0.6); ctx.stroke(); ctx.fillStyle = '#202838'; ctx.beginPath(); ctx.arc(torso.sx, torso.sy, 1.5, 0, TAU); ctx.fill(); ctx.fillStyle = '#d8c9bd'; ctx.beginPath(); ctx.arc(head.sx, head.sy, 1.3, 0, TAU); ctx.fill(); if (trim) { ctx.save(); ctx.globalCompositeOperation = 'lighter'; softGlow(torso.sx, torso.sy, 4, 2.1, [ [0, hsl(trim, 70, 100, 0.16)], [1, hsl(trim, 70, 100, 0)] ]); ctx.restore(); } ctx.save(); ctx.globalCompositeOperation = 'lighter'; let fx, fy; if (c.axis === 'h') { fx = c.dir > 0 ? bx + w : bx; fy = c.y; } else { fx = c.x; fy = c.dir > 0 ? by + h : by; } const lamp = toIso(fx, fy, z + 0.8); const headK = sim.headlightSoftness; const bloomK = Math.max(0, sim.bloom); softGlow(lamp.sx, lamp.sy, 8 * headK, 4.8 * headK, [ [0, `hsla(${c.headlightH}, 100%, 82%, ${0.32 * bloomK})`], [0.5, `hsla(${c.headlightH}, 100%, 82%, ${0.14 * bloomK})`], [1, `hsla(${c.headlightH}, 100%, 82%, 0)`] ]); ctx.beginPath(); ctx.arc(lamp.sx, lamp.sy, 1.25, 0, TAU); ctx.fillStyle = `hsla(${c.headlightH}, 100%, 88%, 0.98)`; ctx.fill(); ctx.restore(); } // Draw a car as a low 3D box, oriented along axis. function drawCar(c, t) { if (c.kind === 'bike') { drawBike(c, t); return; } // footprint corners const halfL = c.len / 2, halfW = c.wid / 2; let cx, cy, w, h; if (c.axis === 'h') { cx = c.x; cy = c.y; w = c.len; h = c.wid; } else { cx = c.x; cy = c.y; w = c.wid; h = c.len; } const bx = cx - w / 2, by = cy - h / 2; const z = c.z; const body = c.color ? hsl(c.color, 35) : '#1a1e2a'; const bodyFront = c.color ? hsl(c.color, 25) : '#10131c'; const bodyRight = c.color ? hsl(c.color, 20) : '#0a0d15'; // ground shadow ctx.save(); ctx.globalAlpha = 0.5; ctx.fillStyle = '#000'; const sh = [toIso(bx + 1, by + 1), toIso(bx + w + 1, by + 1), toIso(bx + w + 1, by + h + 1), toIso(bx + 1, by + h + 1)]; quad(sh); ctx.fill(); ctx.restore(); // Right face ctx.fillStyle = bodyRight; quad([toIso(bx + w, by, 0), toIso(bx + w, by + h, 0), toIso(bx + w, by + h, z), toIso(bx + w, by, z)]); ctx.fill(); // Front face ctx.fillStyle = bodyFront; quad([toIso(bx, by + h, 0), toIso(bx + w, by + h, 0), toIso(bx + w, by + h, z), toIso(bx, by + h, z)]); ctx.fill(); // Top ctx.fillStyle = body; quad([toIso(bx, by, z), toIso(bx + w, by, z), toIso(bx + w, by + h, z), toIso(bx, by + h, z)]); ctx.fill(); // Windshield strip (dark) on top ctx.fillStyle = '#06090f'; if (c.axis === 'h') { // length along x: cabin in middle const u0 = bx + w * (c.dir > 0 ? 0.30 : 0.20); const u1 = bx + w * (c.dir > 0 ? 0.80 : 0.70); quad([toIso(u0, by + 1.2, z + 0.1), toIso(u1, by + 1.2, z + 0.1), toIso(u1, by + h - 1.2, z + 0.1), toIso(u0, by + h - 1.2, z + 0.1)]); ctx.fill(); } else { const u0 = by + h * (c.dir > 0 ? 0.30 : 0.20); const u1 = by + h * (c.dir > 0 ? 0.80 : 0.70); quad([toIso(bx + 1.2, u0, z + 0.1), toIso(bx + w - 1.2, u0, z + 0.1), toIso(bx + w - 1.2, u1, z + 0.1), toIso(bx + 1.2, u1, z + 0.1)]); ctx.fill(); } // Chassis neon rim (additive) if exotic if (c.color) { ctx.save(); ctx.globalCompositeOperation = 'lighter'; ctx.strokeStyle = hsl(c.color, 60, 100, 0.6); ctx.lineWidth = 0.7; quad([toIso(bx, by, z), toIso(bx + w, by, z), toIso(bx + w, by + h, z), toIso(bx, by + h, z)]); ctx.stroke(); ctx.restore(); } // Headlights: realistic soft beams, without visible glowing trapezoids. ctx.save(); ctx.globalCompositeOperation = 'lighter'; let fx, fy, dx, dy; if (c.axis === 'h') { fx = c.dir > 0 ? bx + w : bx; fy = cy; dx = c.dir; dy = 0; } else { fx = cx; fy = c.dir > 0 ? by + h : by; dx = 0; dy = c.dir; } const headK = sim.headlightSoftness; const bloomK = Math.max(0, sim.bloom); const coneLen = 76 * (0.92 + headK * 0.16); const lampA = toIso(fx, fy - c.wid * 0.3, z + 0.5); const lampB = toIso(fx, fy + c.wid * 0.3, z + 0.5); const beamStart = { sx: (lampA.sx + lampB.sx) * 0.5, sy: (lampA.sy + lampB.sy) * 0.5 }; const beamEnd = toIso(fx + dx * coneLen, fy + dy * coneLen, z + 0.2); const beamAngle = Math.atan2(beamEnd.sy - beamStart.sy, beamEnd.sx - beamStart.sx); const beamMidX = (beamStart.sx + beamEnd.sx) * 0.5; const beamMidY = (beamStart.sy + beamEnd.sy) * 0.5; const beamFarX = beamStart.sx * 0.28 + beamEnd.sx * 0.72; const beamFarY = beamStart.sy * 0.28 + beamEnd.sy * 0.72; softGlow(beamMidX, beamMidY, 26 * headK, 8.2 * headK, [ [0, `hsla(${c.headlightH}, 100%, 82%, ${0.10 * bloomK})`], [0.52, `hsla(${c.headlightH}, 100%, 82%, ${0.05 * bloomK})`], [1, `hsla(${c.headlightH}, 100%, 82%, 0)`] ], beamAngle); softGlow(beamFarX, beamFarY, 20 * headK, 6.2 * headK, [ [0, `hsla(${c.headlightH}, 100%, 80%, ${0.05 * bloomK})`], [1, `hsla(${c.headlightH}, 100%, 80%, 0)`] ], beamAngle); softGlow(beamStart.sx, beamStart.sy, 8.8 * headK, 5.0 * headK, [ [0, `hsla(${c.headlightH}, 100%, 86%, ${0.18 * bloomK})`], [1, `hsla(${c.headlightH}, 100%, 84%, 0)`] ], beamAngle); softGlow(lampA.sx, lampA.sy, 4.6 * headK, 4.6 * headK, [ [0, `hsla(${c.headlightH}, 100%, 88%, ${0.42 * bloomK})`], [0.58, `hsla(${c.headlightH}, 100%, 84%, ${0.16 * bloomK})`], [1, `hsla(${c.headlightH}, 100%, 82%, 0)`] ]); softGlow(lampB.sx, lampB.sy, 4.6 * headK, 4.6 * headK, [ [0, `hsla(${c.headlightH}, 100%, 88%, ${0.42 * bloomK})`], [0.58, `hsla(${c.headlightH}, 100%, 84%, ${0.16 * bloomK})`], [1, `hsla(${c.headlightH}, 100%, 82%, 0)`] ]); ctx.fillStyle = `hsla(${c.headlightH}, 100%, 92%, 0.98)`; ctx.beginPath(); ctx.arc(lampA.sx, lampA.sy, 1.1, 0, TAU); ctx.fill(); ctx.beginPath(); ctx.arc(lampB.sx, lampB.sy, 1.1, 0, TAU); ctx.fill(); // tail lights (red) ctx.fillStyle = `hsla(0, 100%, 60%, 0.95)`; let rx, ry; if (c.axis === 'h') { rx = c.dir > 0 ? bx : bx + w; ry = cy; } else { rx = cx; ry = c.dir > 0 ? by : by + h; } const t1 = toIso(rx, ry - c.wid * 0.3, z + 0.5); const t2 = toIso(rx, ry + c.wid * 0.3, z + 0.5); if (c.axis === 'h') { softGlow(t1.sx, t1.sy, 3.4 * headK, 3.4 * headK, [[0, `hsla(0,100%,62%,${0.22 * bloomK})`], [1, 'hsla(0,100%,62%,0)']]); softGlow(t2.sx, t2.sy, 3.4 * headK, 3.4 * headK, [[0, `hsla(0,100%,62%,${0.22 * bloomK})`], [1, 'hsla(0,100%,62%,0)']]); ctx.beginPath(); ctx.arc(t1.sx, t1.sy, 1.0, 0, TAU); ctx.fill(); ctx.beginPath(); ctx.arc(t2.sx, t2.sy, 1.0, 0, TAU); ctx.fill(); } else { const t3 = toIso(rx - c.wid * 0.3, ry, z + 0.5); const t4 = toIso(rx + c.wid * 0.3, ry, z + 0.5); softGlow(t3.sx, t3.sy, 3.4 * headK, 3.4 * headK, [[0, `hsla(0,100%,62%,${0.22 * bloomK})`], [1, 'hsla(0,100%,62%,0)']]); softGlow(t4.sx, t4.sy, 3.4 * headK, 3.4 * headK, [[0, `hsla(0,100%,62%,${0.22 * bloomK})`], [1, 'hsla(0,100%,62%,0)']]); ctx.beginPath(); ctx.arc(t3.sx, t3.sy, 1.0, 0, TAU); ctx.fill(); ctx.beginPath(); ctx.arc(t4.sx, t4.sy, 1.0, 0, TAU); ctx.fill(); } ctx.restore(); } // -- PEDS -- function drawPed(p, t) { const s = p.style || createPedStyle(); const bob = p.kind === 'walker' ? Math.sin((t + p.bob) * p.bobSpeed) * 0.35 : 0; const scale = s.scale; const head = toIso(p.x, p.y, 6.1 * scale + bob); const chest = toIso(p.x, p.y, 3.6 * scale + bob * 0.5); const foot = toIso(p.x, p.y, 0); const detail = clamp((cam.zoom - 0.58) / 0.9, 0, 1); const stride = p.kind === 'walker' ? Math.sin((t + p.bob) * p.bobSpeed * 0.75) * 0.8 : 0; ctx.fillStyle = 'rgba(0,0,0,0.42)'; ctx.beginPath(); ctx.ellipse(foot.sx, foot.sy + 0.7, 2.2 + detail * 1.2, 1.2 + detail * 0.5, 0, 0, TAU); ctx.fill(); ctx.strokeStyle = '#151a24'; ctx.lineWidth = 1.05 + detail * 0.6; ctx.beginPath(); ctx.moveTo(chest.sx, chest.sy + 1.6); ctx.lineTo(foot.sx - 0.9 - stride * 0.28, foot.sy); ctx.moveTo(chest.sx, chest.sy + 1.6); ctx.lineTo(foot.sx + 0.9 + stride * 0.28, foot.sy + 0.15); ctx.stroke(); const torsoW = 2.1 + detail * 1.0 + (s.longCoat ? 0.5 : 0); const torsoH = 4.2 + detail * 1.4 + (s.longCoat ? 1.0 : 0); ctx.fillStyle = s.body; ctx.beginPath(); ctx.moveTo(chest.sx, chest.sy - torsoH * 0.55); ctx.lineTo(chest.sx + torsoW * 0.8, chest.sy - torsoH * 0.15); ctx.lineTo(chest.sx + torsoW * 0.55, chest.sy + torsoH * 0.55); ctx.lineTo(chest.sx - torsoW * 0.55, chest.sy + torsoH * 0.55); ctx.lineTo(chest.sx - torsoW * 0.8, chest.sy - torsoH * 0.15); ctx.closePath(); ctx.fill(); if (s.accent) { ctx.fillStyle = hsl(s.accent, 64, 100, 0.85); ctx.fillRect(chest.sx - 0.55, chest.sy - 0.9, 1.1, 2.3 + detail * 0.6); ctx.save(); ctx.globalCompositeOperation = 'lighter'; softGlow(chest.sx, chest.sy - 0.1, 2.2 + detail * 1.0, 1.4 + detail * 0.5, [ [0, hsl(s.accent, 70, 100, s.accentStrength)], [1, hsl(s.accent, 70, 100, 0)] ]); ctx.restore(); } if (detail > 0.22 && s.accessory === 'bag') { ctx.fillStyle = '#0d1118'; ctx.fillRect(chest.sx + torsoW * 0.35, chest.sy - 0.25, 1.4, 1.9); } ctx.fillStyle = s.head; ctx.beginPath(); ctx.arc(head.sx, head.sy, 1.75 + detail * 0.55, 0, TAU); ctx.fill(); if ((s.hair === 'crest' || s.punk) && detail > 0.26) { const crestH = 1.55 + detail * 0.65; const crestW = 0.34 + detail * 0.18; ctx.fillStyle = s.accent ? hsl(s.accent, 56, 100, 0.9) : '#7f3cff'; ctx.beginPath(); ctx.moveTo(head.sx - crestW, head.sy - 0.95); ctx.quadraticCurveTo(head.sx - crestW * 0.7, head.sy - crestH * 0.72, head.sx - crestW * 0.25, head.sy - crestH); ctx.quadraticCurveTo(head.sx, head.sy - crestH - 0.28, head.sx + crestW * 0.25, head.sy - crestH); ctx.quadraticCurveTo(head.sx + crestW * 0.7, head.sy - crestH * 0.72, head.sx + crestW, head.sy - 0.95); ctx.quadraticCurveTo(head.sx, head.sy - 1.38, head.sx - crestW, head.sy - 0.95); ctx.fill(); } else if (s.hair === 'hood') { ctx.fillStyle = '#232b38'; ctx.beginPath(); ctx.arc(head.sx, head.sy - 0.1, 2.3, Math.PI * 1.05, Math.PI * 1.95); ctx.fill(); } if (s.accessory === 'visor') { ctx.strokeStyle = s.accent ? hsl(s.accent, 64, 100, 0.9) : '#77e0ff'; ctx.lineWidth = 1.0; ctx.beginPath(); ctx.moveTo(head.sx - 1.2, head.sy - 0.1); ctx.lineTo(head.sx + 1.2, head.sy - 0.1); ctx.stroke(); } if (detail > 0.15 && s.accessory === 'umbrella') { const u = toIso(p.x + 1.1, p.y - 1.1, 8.6 * scale); const hue = s.accent || pick(NEON); ctx.strokeStyle = '#444b5a'; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.moveTo(u.sx, u.sy + 3.6); ctx.lineTo(u.sx, u.sy - 0.4); ctx.stroke(); ctx.fillStyle = hsl(hue, 44, 100, 0.9); ctx.beginPath(); ctx.moveTo(u.sx - 3.0, u.sy + 0.1); ctx.quadraticCurveTo(u.sx, u.sy - 2.3, u.sx + 3.0, u.sy + 0.1); ctx.quadraticCurveTo(u.sx, u.sy + 0.9, u.sx - 3.0, u.sy + 0.1); ctx.fill(); } } // -- STEAM (additive, above ground) -- function drawSteamParticle(p) { const k = p.age / p.life; const r = p.r0 + k * 8; const a = (1 - k) * 0.16; const c = toIso(p.x, p.y, p.z); ctx.save(); ctx.globalCompositeOperation = 'lighter'; softGlow(c.sx, c.sy, r, r * 0.72, [ [0, `rgba(205, 220, 245, ${a})`], [0.6, `rgba(185, 205, 235, ${a * 0.55})`], [1, `rgba(185, 205, 235, 0)`] ]); ctx.restore(); } // -- RAIN (screen space) -- function drawRain() { if (!sim.showRain || sim.rainIntensity <= 0) return; ctx.save(); ctx.setTransform(DPR, 0, 0, DPR, 0, 0); ctx.strokeStyle = 'rgba(180, 200, 230, 0.42)'; ctx.lineWidth = 0.6; ctx.beginPath(); for (const r of rain) { ctx.globalAlpha = r.a * Math.min(1.2, sim.rainIntensity); ctx.moveTo(r.x, r.y); ctx.lineTo(r.x - r.len * 0.1, r.y - r.len); } ctx.stroke(); ctx.globalAlpha = 1; ctx.restore(); } /* ====== 8. MAIN LOOP ==================================== */ let last = performance.now(); let fpsAcc = 0, fpsCount = 0, fps = 0; const fpsEl = document.getElementById('fps'); const zEl = document.getElementById('zoomReadout'); function frame(now) { const dt = Math.min(0.05, (now - last) / 1000); const t = now / 1000; last = now; // updates if (!sim.paused) { updateSignals(dt); updateCars(dt); updatePeds(dt); updateSteam(dt, t); updateRain(dt); } // fps fpsCount++; fpsAcc += dt; if (fpsAcc > 0.5) { fps = Math.round(fpsCount / fpsAcc); fpsCount = 0; fpsAcc = 0; fpsEl.textContent = fps; zEl.textContent = cam.zoom.toFixed(2) + 'x'; } // clear ctx.setTransform(DPR, 0, 0, DPR, 0, 0); ctx.fillStyle = C.sky; ctx.fillRect(0, 0, canvas.width, canvas.height); applyCamera(); // FLAT GROUND LAYER drawGround(); drawVenueLights(); drawManholes(); drawGrates(); // DEPTH-SORTED LAYER // Build draw list: buildings + cars + peds + signs const drawList = []; for (const b of city.buildings) { drawList.push({ depth: b.x + b.w + b.y + b.h, kind: 'building', obj: b }); } if (sim.showVehicles) { for (const c of cars) { drawList.push({ depth: c.x + c.y + 0.5, kind: 'car', obj: c }); } } if (sim.showPedestrians) { for (const p of peds) { drawList.push({ depth: p.x + p.y + 1, kind: 'ped', obj: p }); } } if (sim.showSigns) { for (const s of city.signs) { // signs are on roofs — must draw AFTER the building below them drawList.push({ depth: s.depth + 2, kind: 'sign', obj: s }); } } if (sim.showSteam) { for (const p of steam) { drawList.push({ depth: p.x + p.y + 0.25, kind: 'steam', obj: p }); } } drawList.sort((a, b) => a.depth - b.depth); for (const d of drawList) { if (d.kind === 'building') drawBuilding(d.obj, t); else if (d.kind === 'car') drawCar(d.obj, t); else if (d.kind === 'ped') drawPed(d.obj, t); else if (d.kind === 'sign') drawSign(d.obj, t); else if (d.kind === 'steam') drawSteamParticle(d.obj); } // RAIN on top (screen) drawRain(); requestAnimationFrame(frame); } requestAnimationFrame(frame); })();