// @scroll 8 // Showcase hallway: every site made here hangs as a picture in an endless corridor. Scroll to walk; // as you reach each picture you turn to face it, and if you keep scrolling you just keep walking. // Edit SITES to add your sites: name, short title, year, accent colour, motif, url, blurb. const { Num } = pts const W = ctx.width, H = ctx.height, s = Math.min(W, H) / 720 const S = ctx.state, T = Number.isFinite(ctx.time) ? ctx.time : 0, dt = Number.isFinite(ctx.dt) ? Math.min(ctx.dt, 0.1) : 0 // the pointer, made safe: before it has ever moved it can be missing or NaN, and one NaN would poison the head's turn for ever const P0 = ctx.pointer, P = { x: P0 && Number.isFinite(P0.x) ? P0.x : P0 && Number.isFinite(P0[0]) ? P0[0] : W / 2, y: P0 && Number.isFinite(P0.y) ? P0.y : P0 && Number.isFinite(P0[1]) ? P0[1] : H / 2 } // Dark, as the showcase hub is (its Kissing rooms palette): the ground, plates a shade up, light ink, blue-grey hairlines, one warm accent const PAPER = "#0b0d10", PLATE = "#12161b", INK = "#dfe4ea", SEPIA = "#4a5561", GREY = "#6b7785", SHADOW = "#000000", LAMP = "#ffc2ad" const VERM = "#ee4b2b", MOSS = "#86b06e", INDIGO = "#7b8de0", OCHRE = "#e0b04a" // @a spacing 0.5 2 // @b lens 0.5 1.6 // @c turn 0 1.2 // @d detail 0.3 2 const SP = 5 * Num.clamp(params.a, 0.5, 2), KB = Num.clamp(params.b, 0.5, 1.6), KC = Num.clamp(params.c, 0, 1.2), KD = Num.clamp(params.d, 0.3, 2) // The sites on show (edit freely; motif is one of the figures below) const SITES = [ { name: "Everything here is drawn", short: "THIS PAGE IS DRAWN", year: "2026", colour: VERM, motif: "epicycles", slug: "this-page-is-drawn", url: "this-page-is-drawn/?load=4&renderer=gpu#how", blurb: "Every heading, button and field on the page is pts.js geometry on the GPU, with real HTML underneath, so it reads, tabs and submits like any page.", tools: ["Site runtime", "pts.js layout", "GPU renderer", "Real HTML underneath"] }, { name: "Broadway Boogie", short: "BROADWAY BOOGIE", year: "2026", colour: OCHRE, motif: "mondrian", slug: "broadway-boogie", url: "broadway-boogie/", blurb: "Mondrian's last painting as a tunnel you fly down: drag to fly through the city's yellow grid and roll it as you go.", tools: ["Code: draw", "3D projection", "Data node", "GPU labels"] }, { name: "One line portrait", short: "ONE LINE PORTRAIT", year: "2026", colour: INDIGO, motif: "line", slug: "one-line-portrait", url: "one-line-portrait/", blurb: "A whole site drawn without lifting the pen: a stippled portrait joined into one line that never crosses, straightening itself while you watch.", tools: ["Code: draw", "Stipple to one line", "Tapered GPU lines", "Scroll"] }, { name: "The Infinite Penrose Monastic Loop", short: "PENROSE LOOP", year: "2026", colour: MOSS, motif: "stairs", slug: "penrose-loop", url: "penrose-loop/", blurb: "Ascent & Sons, eternal staircases since 1960: thirty-six treads, zero units of progress, and monks who step off the edge.", tools: ["Code: draw", "Isometric drawing", "GPU shapes", "GPU labels", "Scroll"] }, ] const N = SITES.length // Memory: where you are in the corridor, how far you've walked, what's open, what you've stood before if (S.hall !== 2 || [S.walk, S.walkT, S.yaw, S.pitch, S.spd, S.walked, S.openT].some(v => !Number.isFinite(v))) { S.hall = 2; S.walk = 0; S.walkT = 0; S.yaw = 0; S.pitch = 0; S.spd = 0; S.walked = 0; S.open = null; S.openT = 0; S.openDir = 0; S.seen = []; S.idle = 0; S.sinceInput = 9; S.cards = []; S.hint = 1; S.interactions = 0; S.stood = 0; S.planBoxes = []; S.lastAuto = 0 } if (!S.gb) S.gb = {} const UI = Math.max(0.82, s) // The corridor's measures (metres), the plates' (plate px, 400 to the metre), the lens const HWx = 1.6, HH = 2.8, EYE = 1.55, PICY = 1.5, PX = 400, CWp = 600, CHp = 400, STRIP = CHp * 0.22, PAD = CHp * 0.06 const STAND = W > H ? -0.9 : -1.2 const F = Math.min(W * 0.75, H * 0.95) * KB, HOR = H * 0.5, NEAR = 0.08 const standOf = k => k * SP + STAND, siteOf = k => ((k % N) + N) % N, nearestK = z => Math.round((z - STAND) / SP), sideOf = k => (((k % 2) + 2) % 2) ? 1 : -1 const smooth = t => t * t * (3 - 2 * t) const pad2 = n => ("0" + n).slice(-2) const inRect = (p, r) => p[0] >= r[0] && p[0] <= r[2] && p[1] >= r[1] && p[1] <= r[3] const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2] const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]] const sp = Math.min(W * 0.76 / CWp, H * 0.56 / CHp), fx = W / 2, fy = H * 0.42 // Input: the mouse wheel (one window listener) and a drag walk you; ← → ↑ ↓ step a picture; clicks let wheelDelta = 0 if (typeof window !== "undefined") { if (!window.__swWheel) { window.__swWheel = e => { const t = e.target; if (t && t.tagName === "CANVAS") window.__swWheelDelta = (window.__swWheelDelta || 0) + e.deltaY }; window.addEventListener("wheel", window.__swWheel, { passive: true }) } wheelDelta = window.__swWheelDelta || 0; window.__swWheelDelta = 0 } let click = null, stepped = 0, moved = false, dragging = false if (wheelDelta) { S.walkT += wheelDelta * 0.012; moved = true; S.interactions++; if (S.open !== null) S.openDir = -1 } // The page's scroll walks you too (published, the code has no window to hear the wheel on): the whole scroll is the whole hall if (ctx.scroll && typeof ctx.scroll.page === "number") { if (S.pg !== undefined && Math.abs(ctx.scroll.page - S.pg) > 1e-5) { S.walkT += (ctx.scroll.page - S.pg) * (N + 0.6) * SP; moved = true; S.interactions++; if (S.open !== null) S.openDir = -1 } S.pg = ctx.scroll.page } if (art.tapped("down") || art.tapped("right")) stepped++ if (art.tapped("up") || art.tapped("left")) stepped-- if (stepped) { S.walkT = standOf(nearestK(S.walkT) + stepped); moved = true; S.interactions++; if (S.open !== null) S.openDir = -1 } if (S.open !== null && (art.tapped("escape") || art.tapped("esc"))) S.openDir = -1 if (ctx.pressed) { if (!S.press) S.press = { y: P.y, w0: S.walkT, moved: false } const pr = S.press, dy = P.y - pr.y if (Math.abs(dy) > 8) pr.moved = true if (pr.moved && S.open === null) { dragging = true; S.walkT = pr.w0 - dy * 0.02 / s; moved = true } } else if (S.press) { if (!S.press.moved) click = [P.x, P.y]; S.press = null; S.interactions++ } if (moved || click || ctx.pressed) { S.sinceInput = 0; S.idle = 0 } else { S.sinceInput += dt; S.idle += dt } if (S.interactions >= 2) S.hint = Math.max(0, S.hint - dt * 0.6) // Walking: the target settles on the nearest picture's standing place when you stop; idle long enough, you stroll on if (!dragging && S.sinceInput > 0.35) S.walkT += (standOf(nearestK(S.walkT)) - S.walkT) * (1 - Math.exp(-dt * 5)) if (S.open === null && S.idle > 12 && T - S.lastAuto > 7) { S.walkT = standOf(nearestK(S.walkT) + 1); S.lastAuto = T } const prevWalk = S.walk S.walk += (S.walkT - S.walk) * (1 - Math.exp(-dt * (dragging ? 12 : 4))) S.spd += (Math.abs(S.walk - prevWalk) / Math.max(dt, 1e-3) - S.spd) * Math.min(1, dt * 8) S.walked += Math.abs(S.walk - prevWalk) if (S.open !== null) { S.openT = Num.clamp(S.openT + S.openDir * dt * 3, 0, 1); if (S.openT <= 0 && S.openDir < 0) S.open = null } const eOpen = S.open !== null ? smooth(S.openT) : 0 // The head: it turns toward whichever picture you're reaching (a bell round its standing place), the pointer leans it a little const sig = SP * 0.28, kNear = nearestK(S.walk) let yawSum = 0, wSum = 0, wFace = 0, kFace = kNear for (let k = kNear - 1; k <= kNear + 1; k++) { const w = Math.exp(-(((S.walk - standOf(k)) / sig) ** 2)), ang = Math.atan2(sideOf(k) * HWx, k * SP - S.walk) yawSum += w * ang; wSum += w; if (w > wFace) { wFace = w; kFace = k } } const pn = [(P.x - W / 2) / W, (P.y - HOR) / H] S.yaw += (KC * yawSum / Math.max(1, wSum) + pn[0] * 0.12 - S.yaw) * Math.min(1, dt * 5) S.pitch += (-pn[1] * 0.1 - S.pitch) * Math.min(1, dt * 4) if (S.open === null && wFace > 0.85 && Math.abs(S.walk - S.walkT) < 0.05 && S.sinceInput > 0.5) { S.stood += dt; if (S.stood > 0.8) S.seen[siteOf(kFace)] = true } else S.stood = 0 const eye = EYE + 0.03 * Math.sin(S.walk * Math.PI * 2 / 0.8) * Math.min(1, S.spd / 1.5) // The camera: world (x across, y up, z along the hall) to the eye, then the lens const cy = Math.cos(S.yaw), sy = Math.sin(S.yaw), cp = Math.cos(S.pitch), spp = Math.sin(S.pitch) const cam = (x, y, z) => { const dy = y - eye, dz = z - S.walk; const x1 = x * cy - dz * sy, z1 = x * sy + dz * cy; return [x1, dy * cp - z1 * spp, dy * spp + z1 * cp] } const dir = (x, y, z) => { const x1 = x * cy - z * sy, z1 = x * sy + z * cy; return [x1, y * cp - z1 * spp, y * spp + z1 * cp] } const proj = c => { const sc = F / c[2]; return [W / 2 + c[0] * sc, HOR - c[1] * sc, sc] } const clipSeg = (a, b) => { if (a[2] < NEAR && b[2] < NEAR) return null; if (a[2] >= NEAR && b[2] >= NEAR) return [a, b]; const t = (NEAR - a[2]) / (b[2] - a[2]); const m = [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, NEAR]; return a[2] < NEAR ? [m, b] : [a, m] } // The hall: floor tiles, skirting and rail, the edges, a pilaster and a lamp between every two pictures; hairlines fading with depth form.fillOnly(PAPER).rect([[0, 0], [W, H]]) const X = form.ctx const bands = [[], [], []], bandZ = [SP * 1.3, SP * 2.8], lamps = [], pools = [] const clip2 = (p, q) => { // Liang–Barsky to a box round the frame, so no coordinate runs thousands of px off-screen const x0 = -W, y0 = -H, x1 = 2 * W, y1 = 2 * H; let t0 = 0, t1 = 1; const dx = q[0] - p[0], dy = q[1] - p[1] for (const [pp, qq] of [[-dx, p[0] - x0], [dx, x1 - p[0]], [-dy, p[1] - y0], [dy, y1 - p[1]]]) { if (pp === 0) { if (qq < 0) return null } else { const r = qq / pp; if (pp < 0) { if (r > t1) return null; if (r > t0) t0 = r } else { if (r < t0) return null; if (r < t1) t1 = r } } } return [[p[0] + dx * t0, p[1] + dy * t0], [p[0] + dx * t1, p[1] + dy * t1]] } const seg = (x0, y0, z0, x1, y1, z1) => { const c = clipSeg(cam(x0, y0, z0), cam(x1, y1, z1)); if (!c) return; const mz = (c[0][2] + c[1][2]) / 2, b = mz < bandZ[0] ? 0 : mz < bandZ[1] ? 1 : 2; const l = clip2(proj(c[0]), proj(c[1])); if (l && Number.isFinite(l[0][0] + l[0][1] + l[1][0] + l[1][1])) bands[b].push(l) } const zA = S.walk - 3, zB = S.walk + SP * 6, TILE = 0.8 for (const [x, y] of [[-HWx, 0], [HWx, 0], [-HWx, HH], [HWx, HH], [-HWx, 0.12], [HWx, 0.12], [-HWx, 2.35], [HWx, 2.35]]) for (let z = zA; z < zB; z += SP) seg(x, y, z, x, y, Math.min(zB, z + SP)) for (let z = Math.ceil(zA / TILE) * TILE; z < zB; z += TILE) seg(-HWx, 0, z, HWx, 0, z) for (let k = 1; k < 4; k++) { const x = -HWx + k * TILE; for (let z = zA; z < zB; z += SP) seg(x, 0, z, x, 0, Math.min(zB, z + SP)) } // ceiling beams: hairlines that run to the vanishing point (the walls stay bare, so the pictures carry them) for (let z = Math.ceil(zA / (TILE * 2)) * TILE * 2; z < zB; z += TILE * 2) seg(-HWx, HH, z, HWx, HH, z) for (let k = Math.floor(zA / SP); k * SP + SP / 2 < zB; k++) { const z = k * SP + SP / 2 seg(-HWx, 0, z, -HWx, HH, z); seg(HWx, 0, z, HWx, HH, z); seg(-HWx, HH, z, HWx, HH, z) const cs = [[-0.2, HH - 0.01, z - 0.6], [0.2, HH - 0.01, z - 0.6], [0.2, HH - 0.01, z + 0.6], [-0.2, HH - 0.01, z + 0.6]].map(p => cam(p[0], p[1], p[2])) if (cs.every(c => c[2] > 0.3)) lamps.push(cs.map(c => { const p = proj(c); return [p[0], p[1]] })) // its light on the floor: rings a little wider each, faint, added up into a soft pool for (let ri = 0; ri < 3; ri++) { const R = 0.55 + ri * 0.35, ring = [] for (let a = 0; a < 28; a++) { const t = a / 28 * Math.PI * 2; ring.push(cam(Math.cos(t) * Math.min(R, HWx - 0.05), 0.001, z + Math.sin(t) * R * 1.4)) } if (ring.every(c => c[2] > 1.6)) pools.push(ring.map(c => { const p = proj(c); return [p[0], p[1]] })) } } const hz = 1 - 0.95 * eOpen for (let b = 0; b < 3; b++) if (bands[b].length) art.draw(bands[b], { mode: "lines", stroke: SEPIA, width: 0.8 * s, opacity: [0.75, 0.38, 0.14][b] * hz }) if (pools.length) art.draw(pools, { mode: "shapes", fill: LAMP, opacity: 0.035 * hz, blend: "lighter" }) if (lamps.length) art.draw(lamps, { mode: "shapes", fill: LAMP, opacity: 0.22 * hz }) // The figures: each site's idea in miniature, in unit coordinates x in [-A, A], y in [-1, 1] (y down) const hs = (a, b) => { const v = Math.sin(a * 127.1 + b * 311.7 + 0.37) * 43758.5453; return v - Math.floor(v) } const circ = (cx, cy, r, n = 20) => { const g = []; for (let q = 0; q <= n; q++) { const a = q / n * Math.PI * 2; g.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]) } return g } const MOTIFS = { epicycles(M, A, t, k, px, py, acc) { const cx = -A * 0.42, cy = 0.05, r = [0.48, 0.25, 0.12], f = [0.6, -2.3, 4.6 + 2.5 * k * (px / A)] const tip = tt => { let x = cx, y = cy; const g = [[x, y]]; for (let j = 0; j < 3; j++) { x += r[j] * Math.cos(f[j] * tt); y += r[j] * Math.sin(f[j] * tt); g.push([x, y]) } return g } const arms = tip(t) for (let j = 0; j < 3; j++) { M.lines.push(circ(arms[j][0], arms[j][1], r[j], 22)); M.cols.push(SEPIA) } M.lines.push(arms); M.cols.push(acc) const tr = []; const n = Math.round(100 * KD); for (let q = 0; q <= n; q++) tr.push(tip(t - 3.2 + q * 3.2 / n)[3]) M.lines.push(tr); M.cols.push(acc); M.pts.push(arms[3]) }, dither(M, A, t, k, px, py) { const BAY = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5] const rows = Math.round(13 * KD), cols = Math.round(rows * A) for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) { const x = -A + (c + 0.5) * 2 * A / cols, y = -1 + (r + 0.5) * 2 / rows let b = 0.5 + 0.36 * Math.sin(x * 2.1 + t * 0.9) * Math.cos(y * 2.5 - t * 0.6) + 0.18 * Math.sin((x + y) * 1.6 - t * 0.4) if (k > 0.01) b += k * 0.9 * Math.exp(-((x - px) ** 2 + (y - py) ** 2) * 5) if (1 - b > (BAY[(r % 4) * 4 + c % 4] + 0.5) / 16) M.pts.push([x, y]) } }, line(M, A, t, k, px, py, acc) { const a = 3, b = 2 + k * (px / A + 1), n = Math.round(200 * KD), g = [] for (let q = 0; q <= n; q++) { const u = q / n * Math.PI * 2; g.push([A * 0.86 * Math.sin(a * u + t * 0.25), 0.86 * Math.sin(b * u + t * 0.4)]) } M.lines.push(g); M.cols.push(acc); M.pts.push(g[Math.floor((t * 0.08 % 1) * n)]) }, terrain(M, A, t, k, px, py, acc) { const rows = 8, n = Math.round(28 * KD), hor = new Array(n + 1).fill(9) for (let i = rows - 1; i >= 0; i--) { const y0 = -0.72 + i * 1.5 / (rows - 1); let seg = null for (let q = 0; q <= n; q++) { const x = -A + q * 2 * A / n const h = Math.sin(x * 1.7 + i * 0.9 + t * 0.35) * Math.cos(x * 1.1 - i * 0.6 + t * 0.2) + 0.5 * Math.sin(x * 3.9 + i * 2.1 - t * 0.5) const bump = k * 0.5 * Math.exp(-((x - px) ** 2 + (y0 - py) ** 2) * 3) const y = y0 - Math.abs(h) * 0.28 - bump if (y < hor[q]) { hor[q] = y; if (!seg) { seg = []; M.lines.push(seg); M.cols.push(i % 2 ? SEPIA : acc) } seg.push([x, y]) } else seg = null } } }, stairs(M, A, t, k, px, py, acc) { const iso = (x, y, z) => [(x - y) * 0.1732, (x + y) * 0.1 - z * 0.2] const c0 = iso(-3.5, 1, 2.2), I = (x, y, z) => { const p = iso(x, y, z); return [p[0] - c0[0], p[1] - c0[1]] } for (let j = 0; j < 7; j++) { const x1 = -j - 1, x0 = -j, zt = (j + 1) * 0.5 M.lines.push([I(x1, 0, zt), I(x0, 0, zt), I(x0, 2, zt), I(x1, 2, zt), I(x1, 0, zt)]); M.cols.push(INK) M.lines.push([I(x0, 0, zt - 0.5), I(x0, 0, zt), I(x0, 2, zt), I(x0, 2, zt - 0.5), I(x0, 0, zt - 0.5)]); M.cols.push(SEPIA) M.lines.push([I(x1, 2, 0), I(x0, 2, 0), I(x0, 2, zt), I(x1, 2, zt)]); M.cols.push(SEPIA) } const spd = 0.3 + k * 0.5 * (0.5 + px / A / 2) const p = (t * spd) % 1, j = Math.floor(p * 7), f = p * 7 - j const b = I(-j - 0.5 - f, 1, (j + 1) * 0.5 + 0.5 * f + 0.2 + Math.sin(f * Math.PI) * 0.45) M.lines.push(circ(b[0], b[1], 0.07, 12)); M.cols.push(acc); M.pts.push(b) }, mondrian(M, A, t, k, px, py, acc) { const leaves = [] const split = (x0, y0, x1, y1, d, id) => { if (d === 0 || (hs(id, 9) < 0.18 && d < 3)) { leaves.push([x0, y0, x1, y1, id]); return } const r = 0.32 + 0.36 * hs(id, 3) + 0.07 * Math.sin(t * 0.5 + hs(id, 5) * 6.3), ar = (x1 - x0) / (y1 - y0) if (ar > 1.2 || (hs(id, 7) > 0.5 && ar > 0.6)) { const xm = x0 + (x1 - x0) * r; split(x0, y0, xm, y1, d - 1, id * 2); split(xm, y0, x1, y1, d - 1, id * 2 + 1) } else { const ym = y0 + (y1 - y0) * r; split(x0, y0, x1, ym, d - 1, id * 2); split(x0, ym, x1, y1, d - 1, id * 2 + 1) } } split(-A, -1, A, 1, 4, 1) const pal = [VERM, INDIGO, OCHRE] for (const [x0, y0, x1, y1, id] of leaves) { const h = hs(id, 11), under = k > 0.05 && px >= x0 && px <= x1 && py >= y0 && py <= y1 if (h < 0.3 || under) { M.fills.push([[x0, y0], [x1, y0], [x1, y1], [x0, y1]]); M.fcols.push(under ? acc : pal[Math.floor(h * 10) % 3]) } M.lines.push([[x0, y0], [x1, y0], [x1, y1], [x0, y1], [x0, y0]]); M.cols.push(INK) } }, go(M, A, t, k, px, py, acc, st) { const n = 9, cs = 1.8 / (n - 1), x0 = -0.9, y0 = -0.9 for (let i = 0; i < n; i++) { M.lines.push([[x0 + i * cs, y0], [x0 + i * cs, y0 + 1.8]]); M.cols.push(SEPIA); M.lines.push([[x0, y0 + i * cs], [x0 + 1.8, y0 + i * cs]]); M.cols.push(SEPIA) } for (const [c, r] of [[2, 2], [6, 2], [4, 4], [2, 6], [6, 6]]) M.pts.push([x0 + c * cs, y0 + r * cs]) if (!st.stones) { st.stones = []; const used = new Set(); for (let m = 0; m < 60 && st.stones.length < 36; m++) { const c = Math.floor(hs(m, 21) * n), r = Math.floor(hs(m, 22) * n), key = c * 16 + r; if (used.has(key)) continue; used.add(key); st.stones.push([c, r]) } } const cnt = Math.floor(t / 0.7) % (st.stones.length + 6) for (let m = 0; m < Math.min(cnt, st.stones.length); m++) { const [c, r] = st.stones[m], cx = x0 + c * cs, cy = y0 + r * cs; if (m % 2 === 0) { M.fills.push(circ(cx, cy, cs * 0.44, 12)); M.fcols.push(INK) } else { M.lines.push(circ(cx, cy, cs * 0.44, 12)); M.cols.push(INK) } } if (k > 0.05) { const c = Math.round((px - x0) / cs), r = Math.round((py - y0) / cs); if (c >= 0 && c < n && r >= 0 && r < n) { M.lines.push(circ(x0 + c * cs, y0 + r * cs, cs * 0.44, 12)); M.cols.push(acc) } } }, maze(M, A, t, k, px, py, acc, st) { const rows = 5, cols = Math.round(rows * A), tw = 2 * A / cols, th = 2 / rows if (!st.flip || st.flip.length !== rows * cols) { st.flip = new Array(rows * cols).fill(0); st.nextFlip = 0; st.ptile = -1 } if (t > st.nextFlip) { st.nextFlip = t + 0.6; st.flip[Math.floor(hs(Math.floor(t * 10), 3) * rows * cols)] ^= 1 } if (k > 0.05) { const c = Math.floor((px + A) / tw), r = Math.floor((py + 1) / th), i = c + r * cols; if (c >= 0 && c < cols && r >= 0 && r < rows && i !== st.ptile) { st.flip[i] ^= 1; st.ptile = i } } else st.ptile = -1 const arc = (cx, cy, a0) => { const g = []; for (let q = 0; q <= 6; q++) { const a = a0 + q / 6 * Math.PI / 2; g.push([cx + Math.cos(a) * tw / 2, cy + Math.sin(a) * th / 2]) } return g } for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) { const x = -A + c * tw, y = -1 + r * th, o = (hs(c, r) > 0.5 ? 1 : 0) ^ st.flip[c + r * cols] if (o) { M.lines.push(arc(x, y, 0)); M.lines.push(arc(x + tw, y + th, Math.PI)) } else { M.lines.push(arc(x + tw, y, Math.PI / 2)); M.lines.push(arc(x, y + th, -Math.PI / 2)) } M.cols.push(acc, acc) } }, } // Where each picture hangs this frame: on alternate walls, every SP metres, far ones faint; the open one lifts off the wall to a flat panel const cards = [] for (let k = kNear - 1; k <= kNear + 6; k++) { const side = sideOf(k), isOpen = S.open === k const Cc = cam(side * (HWx - 0.015), PICY, k * SP), exc = dir(0, 0, -side), eyc = dir(0, -1, 0) const map3 = (u, v) => { const p = proj([Cc[0] + (u * exc[0] + v * eyc[0]) / PX, Cc[1] + (u * exc[1] + v * eyc[1]) / PX, Cc[2] + (u * exc[2] + v * eyc[2]) / PX]); p[2] /= PX; return p } let zmin = 1e9 for (const [u, v] of [[-CWp / 2, -CHp / 2], [CWp / 2, -CHp / 2], [CWp / 2, CHp / 2], [-CWp / 2, CHp / 2]]) zmin = Math.min(zmin, Cc[2] + (u * exc[2] + v * eyc[2]) / PX) const front = zmin > 0.3 if (!front && !isOpen) continue const map = isOpen && eOpen > 0 ? (u, v) => { const a = front ? map3(u, v) : [fx, fy, sp]; const bx = fx + u * sp, by = fy + v * sp; return [a[0] + (bx - a[0]) * eOpen, a[1] + (by - a[1]) * eOpen, a[2] + (sp - a[2]) * eOpen] } : map3 const w = Math.exp(-(((S.walk - standOf(k)) / sig) ** 2)) let alpha = Num.clamp(1.3 - Cc[2] / (SP * 5.5), 0, 1) if (isOpen) alpha = Math.max(alpha, eOpen); else alpha *= 1 - eOpen cards.push({ k, site: siteOf(k), z: isOpen ? -1e9 : Cc[2], map, alpha, isOpen, w, Cc, exc, eyc, front }) } cards.sort((a, b) => b.z - a.z) // The plates: paper, shadow, lettering and ink all on the GPU, back to front, so a nearer plate covers a farther one const FONT = 'Inter, "Inter Variable", system-ui, sans-serif' const th2 = (CHp - STRIP - 2 * PAD) / 2, tw2 = CWp / 2 - PAD, A = tw2 / th2, ty = -STRIP / 2 const hall = [] const rayD = [(P.x - W / 2) / F, -(P.y - HOR) / F, 1] for (const c of cards) { if (c.alpha < 0.02) continue const m = c.map, site = SITES[c.site] const q = [m(-CWp / 2, -CHp / 2), m(CWp / 2, -CHp / 2), m(CWp / 2, CHp / 2), m(-CWp / 2, CHp / 2)] const wpx = Math.hypot(q[1][0] - q[0][0], q[1][1] - q[0][1]) if (!(wpx >= 5) || !q.every(p => Number.isFinite(p[0] + p[1]))) continue c.quad = q c.sc = m(0, 0)[2] // where the pointer falls on the plate: a ray to its plane on the wall, the flat basis when it's open let la = 1e9, lb = 1e9 if (c.isOpen && eOpen > 0.5) { la = (P.x - fx) / sp; lb = (P.y - fy) / sp } else if (c.front) { const n = cross(c.exc, c.eyc), den = dot(rayD, n); if (Math.abs(den) > 1e-6) { const t = dot(c.Cc, n) / den; if (t > 0) { const h = [rayD[0] * t - c.Cc[0], rayD[1] * t - c.Cc[1], rayD[2] * t - c.Cc[2]]; la = dot(h, c.exc) * PX; lb = dot(h, c.eyc) * PX } } } c.hover = Math.abs(la) <= CWp / 2 && Math.abs(lb) <= CHp / 2 && (S.open === null || c.isOpen) const flat = ps => ps.map(p => [Math.round(p[0] * 10) / 10, Math.round(p[1] * 10) / 10]) hall.push({ k: c.k, slug: site.slug, url: site.url, title: site.name, alpha: Math.round(c.alpha * 100) / 100, z: c.sc, near: c.w, open: c.isOpen && eOpen > 0.5, hover: c.hover, pic: flat([m(-tw2, ty - th2), m(tw2, ty - th2), m(tw2, ty + th2), m(-tw2, ty + th2)]) }) // the plate with a shadow under it (GPU fills, so they sit over the hall's lines and under the ink) const sh = [m(-CWp / 2 + 5, -CHp / 2 + 7), m(CWp / 2 + 5, -CHp / 2 + 7), m(CWp / 2 + 5, CHp / 2 + 7), m(-CWp / 2 + 5, CHp / 2 + 7)].map(p => [p[0], p[1]]) art.draw([sh], { mode: "shapes", fill: SHADOW, opacity: 0.55 * c.alpha }) art.draw([q.map(p => [p[0], p[1]])], { mode: "shapes", fill: PLATE, opacity: c.alpha }) const fs = CHp * 0.075, yS = CHp / 2 - STRIP / 2 // the live figure, steered by the pointer when you're facing this plate (or it's open) const M = { lines: [], cols: [], pts: [], fills: [], fcols: [] } const st = S.cards[c.site] || (S.cards[c.site] = { k: 0 }) const kT = c.hover && (c.w > 0.35 || c.isOpen) ? 1 : 0 st.k += (kT - st.k) * Math.min(1, dt * 6) if (wpx > 24) MOTIFS[site.motif](M, A, T, st.k, la / th2, (lb - ty) / th2, site.colour, st) const U2 = p => { const r = m(p[0] * th2, ty + p[1] * th2); return [r[0], r[1]] } const lines = [q.concat([q[0]]).map(p => [p[0], p[1]])], cols = [c.hover && c.w > 0.35 && !c.isOpen ? site.colour : INK] const d0 = m(-CWp / 2, CHp / 2 - STRIP), d1 = m(CWp / 2, CHp / 2 - STRIP) lines.push([[d0[0], d0[1]], [d1[0], d1[1]]]); cols.push(SEPIA) // the strip's lettering: glyph outlines laid in plate units and sent through the plate's basis, so they sit in perspective // lettering, filled: each letter's outline in ink and its counters cut back to the plate (a loop turned the other way // round from the text's biggest is a hole), laid in plate units and sent through the plate's basis, in perspective const tfill = [], tcol = [], thole = [] const glab = (str, u, v, size, colour, align) => { const G = art.glyphs(str, { size, at: [0, 0], weight: 700 }); if (!G.length) return 0 const key = str + "|" + Math.round(size); let b = S.gb[key] if (!b) { let x0 = 1e9, x1 = -1e9; for (const f of G) for (let i = 0; i < f.length; i += 2) { if (f[i] < x0) x0 = f[i]; if (f[i] > x1) x1 = f[i] } b = S.gb[key] = [x0, x1] } const ox = align === "left" ? u - b[0] : align === "right" ? u - b[1] : u - (b[0] + b[1]) / 2 const area = f => { let a = 0; for (let i = 0, n = f.length; i < n; i += 2) { const j = (i + 2) % n; a += f[i] * f[j + 1] - f[j] * f[i + 1] } return a / 2 } let big = 0; for (const f of G) { const a = area(f); if (Math.abs(a) > Math.abs(big)) big = a } for (const f of G) { const g = []; for (let i = 0; i < f.length; i += 2) { const r = m(ox + f[i], v + f[i + 1]); g.push([r[0], r[1]]) } if (g.length < 3) continue; if (area(f) * big >= 0) { tfill.push(g); tcol.push(colour) } else thole.push(g) } return b[1] - b[0] } if (wpx > 40) { const nw = glab(pad2(c.site + 1), -CWp / 2 + PAD, yS, fs * 0.8, GREY, "left") || fs glab(site.short, -CWp / 2 + PAD + nw + fs * 0.5, yS, fs, INK, "left") const yw = glab(site.year, CWp / 2 - PAD, yS, fs * 0.8, GREY, "right") || fs if (S.seen[c.site]) { const dc = m(CWp / 2 - PAD - yw - fs * 0.7, yS), dr = fs * 0.16 * dc[2]; tfill.push(circ(dc[0], dc[1], dr, 14)); tcol.push(MOSS) } } for (let j = 0; j < M.lines.length; j++) { lines.push(M.lines[j].map(U2)); cols.push(M.cols[j]) } art.draw(lines, { mode: "lines", color: "own colours", colours: cols, width: Math.max(0.5, 1.0 * s * c.sc), opacity: c.alpha }) if (tfill.length) art.draw(tfill, { mode: "shapes", color: "own colours", colours: tcol, opacity: c.alpha }) if (thole.length) art.draw(thole, { mode: "shapes", fill: PLATE, opacity: c.alpha }) if (M.fills.length) art.draw(M.fills.map(f => f.map(U2)), { mode: "shapes", color: "own colours", colours: M.fcols, opacity: c.alpha * 0.9 }) if (M.pts.length) art.draw([M.pts.map(U2)], { mode: "points", stroke: site.colour, fill: site.colour, size: Math.max(1.2, CHp * 0.012 * c.sc), dot: "circle", opacity: c.alpha }) } // The plan: a strip of the corridor under the view, you as a dot with your heading, the pictures as ticks you can click const txt = (str, x, y, size, colour, align = "left", weight = "500", alpha = 1) => { X.save(); X.globalAlpha = alpha; X.fillStyle = colour; X.font = `${weight} ${size}px ${FONT}`; X.textAlign = align; X.textBaseline = "middle"; X.fillText(str, x, y); X.restore() } const seenCount = S.seen.filter(Boolean).length const uiA = 1 - eOpen const py0 = H * 0.885, pscale = W * 0.84 / (SP * 4.4), pL = W * 0.08, pR = W * 0.92 X.save(); X.globalAlpha = 0.6 * uiA; X.strokeStyle = SEPIA; X.lineWidth = 0.8 * s; X.beginPath(); X.moveTo(pL, py0 - 7 * s); X.lineTo(pR, py0 - 7 * s); X.moveTo(pL, py0 + 7 * s); X.lineTo(pR, py0 + 7 * s); X.stroke(); X.restore() S.planBoxes = [] for (let k = Math.floor((S.walk - 2.3 * SP) / SP); k <= Math.ceil((S.walk + 2.3 * SP) / SP); k++) { const x = W / 2 + (k * SP - S.walk) * pscale if (x < pL + 12 * s || x > pR - 12 * s) continue const side = sideOf(k), site = siteOf(k), yw = py0 + side * 7 * s, facing = Math.exp(-(((S.walk - standOf(k)) / sig) ** 2)) > 0.5 const col = facing ? VERM : S.seen[site] ? MOSS : GREY X.save(); X.globalAlpha = uiA; X.fillStyle = col; X.fillRect(x - 0.75 * pscale, yw - 1.25 * s, 1.5 * pscale, 2.5 * s); X.restore() txt(pad2(site + 1), x, py0 + side * 19 * s, 10 * UI, col, "center", facing ? "700" : "500", uiA) S.planBoxes.push({ k, r: [x - 14 * s, py0 - 26 * s, x + 14 * s, py0 + 26 * s] }) } X.save(); X.globalAlpha = uiA; X.fillStyle = VERM; X.beginPath(); X.arc(W / 2, py0, 3 * s, 0, 7); X.fill(); X.strokeStyle = VERM; X.lineWidth = 1.2 * s; X.beginPath(); X.moveTo(W / 2, py0); X.lineTo(W / 2 + Math.cos(S.yaw) * 12 * s, py0 + Math.sin(S.yaw) * 12 * s); X.stroke(); X.restore() txt("SITES MADE HERE", W * 0.05, H * 0.115, 11 * UI, GREY, "left", "600", uiA) txt(`${Math.round(S.walked)} M WALKED · ${seenCount} / ${N} SEEN`, W * 0.05, H * 0.115 + 17 * UI, 11 * UI, GREY, "left", "500", uiA) const narrow = W < 600 const hint = S.open !== null ? (narrow ? "click outside to close" : "click outside the panel to close · scroll to walk on") : (narrow ? "scroll to walk · click a piece to open" : "scroll or drag to walk · you turn to each piece as you reach it · click it to open") txt(hint, W / 2, H * 0.965, 11 * UI, GREY, "center", "500", S.open !== null ? eOpen : S.hint) // The open plate: its name in lettering above, the blurb and a VISIT pill below S.visit = null if (S.open !== null && eOpen > 0.01) { const site = SITES[siteOf(S.open)], pt = fy - CHp * sp / 2, pb = fy + CHp * sp / 2 const g = art.glyphs(site.name.toUpperCase(), { size: 24 * s, at: [W / 2, pt - 30 * s], weight: 800, tracking: 0.04 }) if (g.length) { const area = f => { let a = 0; for (let i = 0, n = f.length; i < n; i += 2) { const j = (i + 2) % n; a += f[i] * f[j + 1] - f[j] * f[i + 1] } return a / 2 } let big = 0; for (const f of g) { const a = area(f); if (Math.abs(a) > Math.abs(big)) big = a } const ink = g.filter(f => area(f) * big >= 0), holes = g.filter(f => area(f) * big < 0), v = site.name + "|" + Math.round(W) + "|" + Math.round(H) art.draw(ink, { mode: "shapes", fill: INK, opacity: eOpen, version: v + "|ink" }) if (holes.length) art.draw(holes, { mode: "shapes", fill: PAPER, opacity: eOpen, version: v + "|holes" }) } X.save(); X.font = `500 ${15 * UI}px ${FONT}` const maxW = Math.min(W * 0.84, 560 * s), words = site.blurb.split(" "), rows = []; let line = "" for (const w of words) { const tst = line ? line + " " + w : w; if (X.measureText(tst).width > maxW && line) { rows.push(line); line = w } else line = tst } if (line) rows.push(line) X.restore() let y = pb + 30 * s for (const r of rows) { txt(r, W / 2, y, 15 * UI, INK, "center", "500", eOpen); y += 22 * UI } if (site.tools && site.tools.length) { y += 8 * UI txt("MADE WITH", W / 2, y, 10 * UI, GREY, "center", "600", eOpen); y += 20 * UI const cp = 9 * UI, cg = 6 * UI, chh = 20 * UI, labels = site.tools.map(t => t.toUpperCase()) X.save(); X.font = `600 ${10.5 * UI}px ${FONT}`; const ws = labels.map(t => X.measureText(t).width + 2 * cp); X.restore() const chipRows = [[]]; let rw = 0 for (let i = 0; i < labels.length; i++) { if (rw + ws[i] > maxW && chipRows[chipRows.length - 1].length) { chipRows.push([]); rw = 0 } chipRows[chipRows.length - 1].push(i); rw += ws[i] + cg } for (const row of chipRows) { let x = W / 2 - (row.reduce((a, i) => a + ws[i], 0) + cg * (row.length - 1)) / 2 for (const i of row) { X.save(); X.globalAlpha = eOpen * 0.9; X.beginPath() if (X.roundRect) X.roundRect(x, y - chh / 2, ws[i], chh, chh / 2); else X.rect(x, y - chh / 2, ws[i], chh) X.lineWidth = 1 * s; X.strokeStyle = site.colour; X.stroke(); X.restore() txt(labels[i], x + ws[i] / 2, y, 10.5 * UI, INK, "center", "600", eOpen * 0.9) x += ws[i] + cg } y += chh + cg } } const pw = 128 * s, ph = 34 * s, py = y + 14 * s, pr = [W / 2 - pw / 2, py, W / 2 + pw / 2, py + ph] const hov = inRect([P.x, P.y], pr) X.save(); X.globalAlpha = eOpen; X.beginPath() if (X.roundRect) X.roundRect(pr[0], pr[1], pw, ph, ph / 2); else X.rect(pr[0], pr[1], pw, ph) X.lineWidth = 1.2 * s; X.strokeStyle = VERM; X.fillStyle = VERM; hov ? X.fill() : X.stroke(); X.restore() txt("VISIT →", W / 2, py + ph / 2, 12 * UI, hov ? PAPER : VERM, "center", "700", eOpen) S.visit = pr } // For the page this hallway is on: where each picture is (the live site goes there), and VISIT art.share("hall", { w: W, h: H, frames: hall, visit: S.visit && S.open !== null ? { rect: S.visit, url: SITES[siteOf(S.open)].url } : null }) // Clicks, on this frame's layout: the plan (walk there), a picture you're facing (open it), another (walk to it), VISIT if (click) { if (S.open !== null) { if (S.openT > 0.5 && S.visit && inRect(click, S.visit)) { const u = SITES[siteOf(S.open)].url; if (u && u !== "#" && typeof window !== "undefined") { try { window.open(u, "_blank") } catch (e) {} } } else S.openDir = -1 } else { let hit = null for (const b of S.planBoxes) if (inRect(click, b.r)) hit = b.k if (hit !== null) S.walkT = standOf(hit) else for (const c of cards.slice().reverse()) { if (c.alpha < 0.05 || !c.quad || !c.hover) continue if (c.w > 0.35) { S.open = c.k; S.openT = 0; S.openDir = 1; S.seen[c.site] = true } else S.walkT = standOf(c.k) break } } }

Boom For Real

Work