Isometric city animation for a website

<canvas id="city" style="position:fixed;inset:0;width:100%;height:100%;background:#0e1228"></canvas>
<script>
const canvas = document.getElementById('city')
const g = canvas.getContext('2d')
const N = 13, CARS = 26 // N cells a side; a street every 4th row and column
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
const rand = (i) => { const x = Math.sin(i * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x) } // repeatable random
const isStreet = (i) => i % 4 === 0

// The plan: every lot off the streets gets a height, tallest near the middle; a few are parks
const lots = []
for (let i = 0; i < N; i++) for (let j = 0; j < N; j++) {
  if (isStreet(i) || isStreet(j)) continue
  const d = Math.hypot(i - N / 2, j - N / 2) / (N / 2)
  const r = rand(i * 31 + j)
  lots.push({ i, j, park: r < 0.1, floors: Math.round(1 + Math.max(0, 1 - d) * 7 * (0.4 + r) + rand(i + j * 17) * 2), warm: r > 0.5 })
}
// Cars drive along the streets; dir is +1 or -1 along the street, lane keeps them apart
const streets = []
for (let k = 0; k < N; k += 4) streets.push(k)
const cars = Array.from({ length: CARS }, (_, n) => ({
  alongX: n % 2 === 0, line: streets[n % streets.length], dir: rand(n) < 0.5 ? 1 : -1,
  start: rand(n + 99) * N, speed: 0.6 + rand(n + 7) * 0.6,
}))

let w, h, dpr, tw, th, fh, ox, oy // tile width and height, floor height, origin
function size() {
  dpr = Math.min(devicePixelRatio, 2)
  w = canvas.width = innerWidth * dpr
  h = canvas.height = innerHeight * dpr
  tw = Math.min(w * 0.85, h * 1.25) / N; th = tw / 2; fh = th * 0.5
  ox = w / 2; oy = h / 2 - (N * th) / 2 + fh * 3 // nudged down to leave room for the towers
}
size()
// Isometric projection: grid x and y run down-right and down-left, z goes straight up
const iso = (x, y, z = 0) => [ox + (x - y) * tw / 2, oy + (x + y) * th / 2 - z]

function poly(color, ...pts) {
  g.fillStyle = color; g.beginPath(); g.moveTo(...pts[0])
  for (const p of pts.slice(1)) g.lineTo(...p)
  g.closePath(); g.fill()
}

function building(b, t) {
  const m = 0.12, i = b.i + m, j = b.j + m, s = 1 - 2 * m, z = b.floors * fh // inset from the lot edge
  if (b.park) { poly('#1f3a3a', iso(i, j), iso(i + s, j), iso(i + s, j + s), iso(i, j + s)); return }
  poly('#2b3260', iso(i, j + s), iso(i + s, j + s), iso(i + s, j + s, z), iso(i, j + s, z)) // left face, in shade
  poly('#4a5389', iso(i + s, j), iso(i + s, j + s), iso(i + s, j + s, z), iso(i + s, j, z)) // right face, lit
  poly('#6b75b0', iso(i, j, z), iso(i + s, j, z), iso(i + s, j + s, z), iso(i, j + s, z)) // roof
  // Windows: two per face per floor, each switching on and off on its own slow clock
  for (let f = 0; f < b.floors; f++) for (let c = 0; c < 2; c++) for (let side = 0; side < 2; side++) {
    const seed = b.i * 977 + b.j * 131 + f * 7 + c * 3 + side
    const on = rand(seed + Math.floor(t / (4 + rand(seed) * 6) + rand(seed + 1))) > 0.55
    if (!on) continue
    g.fillStyle = b.warm ? '#ffd38a' : '#bfe3ff'
    const u = (0.2 + c * 0.4) * s, z0 = f * fh + fh * 0.3, z1 = z0 + fh * 0.45
    const at = side ? (a, zz) => iso(i + a, j + s, zz) : (a, zz) => iso(i + s, j + a, zz)
    poly(g.fillStyle, at(u, z0), at(u + 0.2 * s, z0), at(u + 0.2 * s, z1), at(u, z1))
  }
}

function car(c, t) {
  const along = (((c.start + c.dir * c.speed * t) % N) + N) % N
  const lane = c.line + 0.5 + c.dir * 0.18
  const [x, y] = c.alongX ? [along, lane] : [lane, along]
  const [sx, sy] = iso(x, y, 1.5 * dpr)
  g.fillStyle = c.dir > 0 ? '#fff4d8' : '#ff5d5d' // coming toward you: headlights; going away: tail lights
  g.shadowColor = g.fillStyle; g.shadowBlur = 8 * dpr
  g.beginPath(); g.arc(sx, sy, 2 * dpr, 0, Math.PI * 2); g.fill()
  g.shadowBlur = 0
}

function frame(now) {
  const t = still ? 6 : now / 1000
  g.fillStyle = '#0e1228'; g.fillRect(0, 0, w, h)
  poly('#141933', iso(0, 0), iso(N, 0), iso(N, N), iso(0, N)) // streets
  for (const b of lots) poly('#1d2342', iso(b.i, b.j), iso(b.i + 1, b.j), iso(b.i + 1, b.j + 1), iso(b.i, b.j + 1))
  // Painter's order: draw from the back (small x + y) to the front, cars and buildings together
  const items = lots.map((b) => ({ k: b.i + b.j + 1, draw: () => building(b, t) }))
  for (const c of cars) {
    const along = (((c.start + c.dir * c.speed * t) % N) + N) % N
    items.push({ k: along + c.line + 0.5 + 0.01, draw: () => car(c, t) })
  }
  items.sort((a, b) => a.k - b.k).forEach((it) => it.draw())
  if (!still) requestAnimationFrame(frame)
}
addEventListener('resize', () => { size(); if (still) frame(0) })
requestAnimationFrame(frame)
</script>