@a2f0/skyline 0.0.0-stage → 0.1.1

package/site/models/building-kit.js

@@ -0,0 +1,358 @@
+import * as THREE from "../vendor/three-r186.js";
+// Shared geometry for fitted skyline models. A plan is a list of runs, straight or
+// arced, counterclockwise from above, so each run's outward normal is to its right.
+// Units are meters; +x is east (right in the skyline view) and +z is south.
+export const deg = Math.PI / 180;
+export function line(a, b) {
+    const length = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    const tangent = [(b[0] - a[0]) / length, (b[1] - a[1]) / length];
+    const normal = [-tangent[1], tangent[0]];
+    return {
+        length,
+        pieces: () => 1,
+        at: (s, offset = 0) => [a[0] + tangent[0] * s + normal[0] * offset, a[1] + tangent[1] * s + normal[1] * offset],
+        normal: () => normal,
+    };
+}
+// Angles measure the outward normal from +z toward +x. A concave arc keeps its
+// center outside the building, so the same angle gives the same normal. Facets stay
+// within `step`; 2.4° keeps silhouettes round without faceted toon bands.
+export function arc(center, radius, from, to, concave = false, step = 2.4 * deg) {
+    const length = radius * Math.abs(to - from);
+    const angle = (s) => from + (to - from) * s / length;
+    const side = concave ? -1 : 1;
+    return {
+        length,
+        pieces: (s0 = 0, s1 = length) => Math.max(1, Math.ceil(Math.abs(to - from) * (s1 - s0) / length / step - 1e-9)),
+        at(s, offset = 0) {
+            const a = angle(s), reach = side * radius + offset;
+            return [center[0] + Math.sin(a) * reach, center[1] + Math.cos(a) * reach];
+        },
+        normal: (s = 0) => [Math.sin(angle(s)), Math.cos(angle(s))],
+    };
+}
+// A gentle convex arc between two corners, bulging outward by its sagitta.
+export function bulge(a, b, sagitta, step) {
+    const chord = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    const radius = chord * chord / (8 * sagitta) + sagitta / 2;
+    const mid = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+    const inward = [(b[1] - a[1]) / chord, -(b[0] - a[0]) / chord];
+    const center = [mid[0] + inward[0] * (radius - sagitta), mid[1] + inward[1] * (radius - sagitta)];
+    const angleOf = (p) => Math.atan2(p[0] - center[0], p[1] - center[1]);
+    let from = angleOf(a), to = angleOf(b);
+    if (to < from)
+        to += Math.PI * 2;
+    return arc(center, radius, from, to, false, step);
+}
+// A rectangular plan from its bounds, counterclockwise from above: the south, east, north,
+// then west faces. North is the smaller z.
+export function rectangle(west, east, north, south) {
+    const [sw, se, ne, nw] = [[west, south], [east, south], [east, north], [west, north]];
+    return [line(sw, se), line(se, ne), line(ne, nw), line(nw, sw)];
+}
+export const evenly = (length, count) => Array.from({ length: count + 1 }, (_, i) => length * i / count);
+export const cornerNormal = (a, b) => { const l = Math.hypot(a[0] + b[0], a[1] + b[1]); return [(a[0] + b[0]) / l, (a[1] + b[1]) / l]; };
+export const station = (run, s) => ({ at: run.at(s), normal: run.normal(s) });
+// A plan point offset outward along a station's normal and sideways along its run.
+export const along = ({ at, normal }, offset, side = 0) => [at[0] + normal[0] * offset + normal[1] * side, at[1] + normal[1] * offset - normal[0] * side];
+export const point = ([x, z], y) => [x, y, z];
+// The plan outline with the same facets the walls use, so roofs meet them edge to edge.
+export function polygonOf(runs) {
+    return runs.flatMap((run) => { const n = run.pieces(0, run.length); return Array.from({ length: n }, (_, i) => run.at(run.length * i / n)); });
+}
+// Twice the signed area with +z south, so a counterclockwise plan from above is negative.
+const shoelace = (polygon) => polygon.reduce((sum, [x, z], i) => { const [x2, z2] = polygon[(i + 1) % polygon.length]; return sum + x * z2 - x2 * z; }, 0);
+export function inside(polygon, [x, z]) {
+    let result = false;
+    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i, i += 1) {
+        const [xi, zi] = polygon[i], [xj, zj] = polygon[j];
+        if ((zi > z) !== (zj > z) && x < (xj - xi) * (z - zi) / (zj - zi) + xi)
+            result = !result;
+    }
+    return result;
+}
+// A model under construction: toon materials, batched geometry, and the standard model
+// API once finished. Solids are closed by default. A caller may omit only faces another
+// surface covers, by name, and each omission is kept in building.userData.omitted so a
+// test can prove the cover.
+export function createBuilder(name, buildingId, { gradient = [70, 135, 200, 255] } = {}) {
+    const building = new THREE.Group();
+    building.name = name;
+    building.userData["buildingId"] = buildingId;
+    const omitted = building.userData["omitted"] = [];
+    const ramp = new THREE.DataTexture(new Uint8Array(gradient), gradient.length, 1, THREE.RedFormat);
+    ramp.minFilter = ramp.magFilter = THREE.NearestFilter;
+    ramp.needsUpdate = true;
+    const materials = [], batches = [];
+    const material = (color, extras = {}) => {
+        const surface = new THREE.MeshToonMaterial({ color, gradientMap: ramp, ...extras });
+        materials.push(surface);
+        return surface;
+    };
+    // Each batch is one draw call. Normals are analytic, so arc facets shade as a curve.
+    const batch = (batchName, surface) => {
+        const data = { name: batchName, surface, positions: [], normals: [], colors: [] };
+        batches.push(data);
+        return data;
+    };
+    const always = () => true;
+    // Runs must hand over end to start, and a loop must come back to where it began;
+    // otherwise the walls leave a gap no omission records.
+    const joins = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]) <= 1e-6;
+    function checkJoins(runs, label, loop) {
+        runs.forEach((run, index) => {
+            const next = runs[index + 1];
+            if (next && !joins(run.at(run.length), next.at(0)))
+                throw new Error(`A ${label}'s runs must join end to start.`);
+        });
+        const last = runs.at(-1);
+        if (loop && !joins(last.at(last.length), runs[0].at(0)))
+            throw new Error(`A ${label}'s runs must return to their start.`);
+    }
+    const white = new THREE.Color(1, 1, 1);
+    // Winding follows the first normal, so every helper stays outward-facing.
+    // Quads pass their vertices directly, avoiding temporary triangle and normal arrays
+    // for every face while retaining the same winding, vertex order, and attributes.
+    function appendTriangle(target, a, b, c, na, nb, nc, color = white) {
+        const ux = b[0] - a[0], uy = b[1] - a[1], uz = b[2] - a[2];
+        const vx = c[0] - a[0], vy = c[1] - a[1], vz = c[2] - a[2];
+        const facing = (uy * vz - uz * vy) * na[0] + (uz * vx - ux * vz) * na[1] + (ux * vy - uy * vx) * na[2];
+        if (facing < 0) {
+            const point = b;
+            b = c;
+            c = point;
+            const normal = nb;
+            nb = nc;
+            nc = normal;
+        }
+        target.positions.push(a[0], a[1], a[2], b[0], b[1], b[2], c[0], c[1], c[2]);
+        target.normals.push(na[0], na[1], na[2], nb[0], nb[1], nb[2], nc[0], nc[1], nc[2]);
+        target.colors.push(color.r, color.g, color.b, color.r, color.g, color.b, color.r, color.g, color.b);
+    }
+    function triangle(target, points, normals, color) {
+        appendTriangle(target, points[0], points[1], points[2], normals[0], normals[1], normals[2], color);
+    }
+    function quad(target, [a, b, c, d], normals, color) {
+        const na = normals[0], flat = normals.length === 1;
+        const nb = flat ? na : normals[1], nc = flat ? na : normals[2], nd = flat ? na : normals[3];
+        appendTriangle(target, a, b, c, na, nb, nc, color);
+        appendTriangle(target, a, c, d, na, nc, nd, color);
+    }
+    // Names a face that does not exist, so a typo cannot silently keep it.
+    const checkOmit = (omit, allowed, what) => {
+        const unknown = (omit ?? []).find((faceName) => !allowed.includes(faceName));
+        if (unknown)
+            throw new Error(`A ${what} has no "${unknown}" face; it has ${allowed.join(", ")}.`);
+    };
+    // A flat face of a solid, unless the caller omitted it as covered.
+    function face(target, corners, normal, skip) {
+        if (skip)
+            omitted.push({ batch: target.name, corners, normal });
+        else
+            quad(target, corners, [normal]);
+    }
+    // A rectangle mapped onto a plan run, split into facets that follow an arc. Panels
+    // are single surfaces for panes and trim, not solids.
+    function panel(target, run, s0, s1, y0, y1, offset, color) {
+        const n = run.pieces(s0, s1);
+        for (let i = 0; i < n; i += 1) {
+            const sa = s0 + (s1 - s0) * i / n, sb = s0 + (s1 - s0) * (i + 1) / n;
+            const [pa, pb] = [run.at(sa, offset), run.at(sb, offset)];
+            const [na, nb] = [run.normal(sa), run.normal(sb)].map(([x, z]) => [x, 0, z]);
+            quad(target, [[pa[0], y0, pa[1]], [pb[0], y0, pb[1]], [pb[0], y1, pb[1]], [pa[0], y1, pa[1]]], [na, nb, nb, na], color);
+        }
+    }
+    // A horizontal strip between two offsets from a run: a soffit or a ledge top.
+    function ledge(target, run, s0, s1, y, inner, outer, up) {
+        const n = run.pieces(s0, s1), normal = [[0, up ? 1 : -1, 0]];
+        for (let i = 0; i < n; i += 1) {
+            const sa = s0 + (s1 - s0) * i / n, sb = s0 + (s1 - s0) * (i + 1) / n;
+            quad(target, [point(run.at(sa, inner), y), point(run.at(sb, inner), y), point(run.at(sb, outer), y), point(run.at(sa, outer), y)], normal);
+        }
+    }
+    // A projecting band along consecutive runs, chamfered at convex corners. It is closed
+    // by its back, soffit, top, and start and end returns unless `omit` names them; a
+    // `closed` band, such as a parapet around a whole roof, turns its last corner onto its
+    // first run instead of ending. `visible` skips pieces buried inside another volume, and
+    // the band closes itself wherever it stops and reopens.
+    function band(target, runs, y0, y1, proud, { omit = [], from = 0, to = Infinity, closed = false, visible = always } = {}) {
+        if (closed && (from !== 0 || to !== Infinity))
+            throw new Error("A closed band wraps whole runs, so it takes no from or to.");
+        if (closed && visible !== always)
+            throw new Error("A closed band cannot also be trimmed by visible; split it into open bands.");
+        checkJoins(runs, closed ? "closed band" : "band", closed);
+        const faceNames = ["back", "soffit", "top", "start", "end"];
+        checkOmit(omit, faceNames, "band");
+        const [back, soffit, top, start, end] = faceNames.map((faceName) => !omit.includes(faceName));
+        const endFace = (run, s, sign, keep) => {
+            const [inner, outer] = [run.at(s), run.at(s, proud)], n = run.normal(s);
+            face(target, [point(inner, y0), point(outer, y0), point(outer, y1), point(inner, y1)], [n[1] * sign, 0, -n[0] * sign], !keep);
+        };
+        // Outward normals turn counterclockwise from above at a convex corner, opening a wedge to fill.
+        const cornerWedge = (run, next) => {
+            const at = run.at(run.length), n1 = run.normal(run.length), n2 = next.normal(0);
+            const turn = n1[0] * n2[1] - n1[1] * n2[0];
+            // Runs that double back share a point but face opposite ways, so no wedge can close
+            // the joint and both returns are missing: a hole no omission would record. Runs that
+            // merely continue straight face the same way and need no wedge at all.
+            if (Math.abs(turn) <= 1e-6 && n1[0] * n2[0] + n1[1] * n2[1] < 0)
+                throw new Error("A band cannot double back on itself; end the band and start another.");
+            if (turn > 1e-6)
+                throw new Error("A band cannot turn a concave corner; split it into two bands there.");
+            if (turn >= -1e-6)
+                return;
+            const a = run.at(run.length, proud), b = next.at(0, proud), mitre = cornerNormal(n1, n2);
+            quad(target, [point(a, y0), point(b, y0), point(b, y1), point(a, y1)], [[mitre[0], 0, mitre[1]]]);
+            if (soffit)
+                triangle(target, [point(at, y0), point(b, y0), point(a, y0)], [[0, -1, 0], [0, -1, 0], [0, -1, 0]]);
+            else
+                omitted.push({ batch: target.name, corners: [point(at, y0), point(b, y0), point(a, y0)], normal: [0, -1, 0] });
+            if (top)
+                triangle(target, [point(at, y1), point(a, y1), point(b, y1)], [[0, 1, 0], [0, 1, 0], [0, 1, 0]]);
+            else
+                omitted.push({ batch: target.name, corners: [point(at, y1), point(a, y1), point(b, y1)], normal: [0, 1, 0] });
+        };
+        const pieces = [];
+        runs.forEach((run, index) => {
+            const first = index === 0 ? from : 0, last = Math.min(run.length, index === runs.length - 1 ? to : Infinity);
+            if (last - first <= 1e-9)
+                return;
+            const count = run.pieces(first, last);
+            for (let i = 0; i < count; i += 1) {
+                const sa = first + (last - first) * i / count, sb = first + (last - first) * (i + 1) / count;
+                pieces.push({ run, index, sa, sb, shown: visible(run.at((sa + sb) / 2, proud + 0.2), y0) });
+            }
+        });
+        let drawn = false, opened = false, previous = null;
+        for (const piece of pieces) {
+            const { run, sa, sb, shown } = piece;
+            // A closed band opens with no return: its wrap-around corner closes it instead.
+            if (shown && !drawn && !(closed && !opened))
+                endFace(run, sa, -1, opened ? true : start);
+            if (!shown && drawn && previous)
+                endFace(previous.run, previous.sb, 1, true);
+            if (shown && drawn && previous && previous.index !== piece.index)
+                cornerWedge(previous.run, run);
+            drawn = shown;
+            previous = piece;
+            if (!shown)
+                continue;
+            opened = true;
+            panel(target, run, sa, sb, y0, y1, proud);
+            const [ia, ib, oa, ob] = [run.at(sa), run.at(sb), run.at(sa, proud), run.at(sb, proud)];
+            if (soffit)
+                ledge(target, run, sa, sb, y0, 0, proud, false);
+            else
+                omitted.push({ batch: target.name, corners: [point(ia, y0), point(ib, y0), point(ob, y0), point(oa, y0)], normal: [0, -1, 0] });
+            if (top)
+                ledge(target, run, sa, sb, y1, 0, proud, true);
+            else
+                omitted.push({ batch: target.name, corners: [point(ia, y1), point(ib, y1), point(ob, y1), point(oa, y1)], normal: [0, 1, 0] });
+            const [na, nb] = [run.normal(sa), run.normal(sb)].map(([x, z]) => [-x, 0, -z]);
+            const backCorners = [point(ib, y0), point(ia, y0), point(ia, y1), point(ib, y1)];
+            if (back)
+                quad(target, backCorners, [nb, na, na, nb]);
+            else
+                omitted.push({ batch: target.name, corners: backCorners, normal: [(na[0] + nb[0]) / 2, 0, (na[2] + nb[2]) / 2] });
+        }
+        if (drawn && closed && previous)
+            cornerWedge(previous.run, runs[0]);
+        else if (drawn && previous)
+            endFace(previous.run, previous.sb, 1, end);
+    }
+    // A box on a local frame: fins, mullions, posts, and rooftop masses. Depths run along
+    // the frame's normal from `back` to `front`.
+    function box(target, [x, z], normal, halfWidth, back, front, y0, y1, { omit = [] } = {}) {
+        const t = [normal[1], -normal[0]];
+        const p = (side, depth, y) => [x + t[0] * side + normal[0] * depth, y, z + t[1] * side + normal[1] * depth];
+        const faces = {
+            front: [[p(-halfWidth, front, y0), p(halfWidth, front, y0), p(halfWidth, front, y1), p(-halfWidth, front, y1)], [normal[0], 0, normal[1]]],
+            back: [[p(halfWidth, back, y0), p(-halfWidth, back, y0), p(-halfWidth, back, y1), p(halfWidth, back, y1)], [-normal[0], 0, -normal[1]]],
+            left: [[p(-halfWidth, back, y0), p(-halfWidth, front, y0), p(-halfWidth, front, y1), p(-halfWidth, back, y1)], [-t[0], 0, -t[1]]],
+            right: [[p(halfWidth, front, y0), p(halfWidth, back, y0), p(halfWidth, back, y1), p(halfWidth, front, y1)], [t[0], 0, t[1]]],
+            bottom: [[p(-halfWidth, back, y0), p(halfWidth, back, y0), p(halfWidth, front, y0), p(-halfWidth, front, y0)], [0, -1, 0]],
+            top: [[p(-halfWidth, back, y1), p(-halfWidth, front, y1), p(halfWidth, front, y1), p(halfWidth, back, y1)], [0, 1, 0]],
+        };
+        checkOmit(omit, Object.keys(faces), "box");
+        for (const [faceName, [corners, n]] of Object.entries(faces))
+            face(target, corners, n, omit.includes(faceName));
+    }
+    // Ear clipping for non-convex roofs and floors; the bundle omits ShapeUtils.
+    function slab(target, polygon, y, up) {
+        const area = shoelace(polygon);
+        const ring = polygon.map((_, i) => i), normal = [0, up ? 1 : -1, 0];
+        const convex = (a, b, c) => {
+            const pa = polygon[a], pb = polygon[b], pc = polygon[c];
+            return ((pb[0] - pa[0]) * (pc[1] - pa[1]) - (pb[1] - pa[1]) * (pc[0] - pa[0])) * area > 0;
+        };
+        const touches = (a, b, q) => {
+            const pa = polygon[a], pb = polygon[b];
+            return ((pb[0] - pa[0]) * (q[1] - pa[1]) - (pb[1] - pa[1]) * (q[0] - pa[0])) * area >= -1e-9;
+        };
+        const contains = (a, b, c, q) => touches(a, b, q) && touches(b, c, q) && touches(c, a, q);
+        for (let guard = 0; ring.length > 3 && guard < polygon.length * polygon.length; guard += 1) {
+            for (let i = 0; i < ring.length; i += 1) {
+                const [a, b, c] = [ring[(i + ring.length - 1) % ring.length], ring[i], ring[(i + 1) % ring.length]];
+                if (!convex(a, b, c) || ring.some((k) => k !== a && k !== b && k !== c && contains(a, b, c, polygon[k])))
+                    continue;
+                triangle(target, [point(polygon[a], y), point(polygon[b], y), point(polygon[c], y)], [normal, normal, normal]);
+                ring.splice(i, 1);
+                break;
+            }
+        }
+        if (ring.length > 3)
+            throw new Error(`A slab's polygon could not be triangulated; ${ring.length} vertices remain, so check it for repeated or crossing edges.`);
+        triangle(target, ring.map((k) => point(polygon[k], y)), [normal, normal, normal]);
+    }
+    // Walls rise through the given heights, so a seam can land on a drawn corner; a roof
+    // and a floor close the volume. Returns the plan polygon.
+    function prism(target, runs, heights, { omit = [] } = {}) {
+        checkJoins(runs, "prism", true);
+        const polygon = polygonOf(runs);
+        if (shoelace(polygon) >= 0)
+            throw new Error("A prism's plan must run counterclockwise from above, or its walls face inward.");
+        runs.forEach((run) => heights.slice(1).forEach((top, i) => panel(target, run, 0, run.length, heights[i], top, 0)));
+        checkOmit(omit, ["top", "bottom"], "prism");
+        for (const [faceName, y, up] of [["top", heights.at(-1), true], ["bottom", heights[0], false]]) {
+            if (!omit.includes(faceName))
+                slab(target, polygon, y, up);
+            else
+                omitted.push({ batch: target.name, corners: polygon.map((corner) => point(corner, y)), normal: [0, up ? 1 : -1, 0] });
+        }
+        return polygon;
+    }
+    // Batches become meshes in creation order, with silhouette lines for `outlines` only.
+    function finish({ height, outlines = [], threshold = 20, opacity = 0.3 }) {
+        const meshes = new Map(batches.map((data) => {
+            const geometry = new THREE.BufferGeometry();
+            geometry.setAttribute("position", new THREE.Float32BufferAttribute(data.positions, 3));
+            geometry.setAttribute("normal", new THREE.Float32BufferAttribute(data.normals, 3));
+            if (data.surface.vertexColors)
+                geometry.setAttribute("color", new THREE.Float32BufferAttribute(data.colors, 3));
+            const mesh = new THREE.Mesh(geometry, data.surface);
+            mesh.name = data.name;
+            mesh.castShadow = mesh.receiveShadow = true;
+            building.add(mesh);
+            return [data, mesh];
+        }));
+        const lines = outlines.flatMap((data) => [...new THREE.EdgesGeometry(meshes.get(data).geometry, threshold).getAttribute("position").array]);
+        const edgeGeometry = new THREE.BufferGeometry();
+        edgeGeometry.setAttribute("position", new THREE.Float32BufferAttribute(lines, 3));
+        const edges = new THREE.LineSegments(edgeGeometry, new THREE.LineBasicMaterial({ color: 0xcccccc, transparent: true, opacity }));
+        edges.name = "silhouette edges";
+        building.add(edges);
+        return {
+            building,
+            height,
+            triangleCount: batches.reduce((count, data) => count + data.positions.length / 9, 0),
+            setHighlighted(highlighted) {
+                materials.forEach((surface) => surface.emissive.setHex(highlighted ? 0x222222 : 0x000000));
+            },
+            setWireframe(enabled) {
+                materials.forEach((surface) => { surface.wireframe = enabled; });
+                edges.visible = !enabled;
+            },
+        };
+    }
+    return { building, material, batch, triangle, quad, panel, ledge, band, box, slab, prism, finish };
+}

package/site/models/celebrations.js

@@ -0,0 +1,44 @@
+// Documented Chicago window displays, adapted to the modeled south facade.
+// Sources and the limits of each reconstruction: docs/celebration-lighting.md.
+// `adapted` identifies unverified wording; all window placements are reconstructed.
+export const celebrations = [
+    { id: "bulls", label: "Bulls", lines: ["GO", "BULLS"], adapted: true },
+    { id: "cubs", label: "Cubs", lines: ["GO", "CUBS", "GO"], adapted: false },
+    { id: "sox", label: "White Sox", lines: ["SOX", "PRIDE"], adapted: false },
+    { id: "bears", label: "Bears", lines: ["BEAR", "DOWN"], adapted: false },
+    { id: "hawks", label: "Blackhawks", lines: ["HAWKS", "WIN"], adapted: false },
+    { id: "thanks", label: "Thanksgiving", lines: ["GIVE", "THANKS"], adapted: false },
+];
+// Five floors per letter, with a dark window between letters. These are compact
+// reconstructions, not claims to reproduce an electrician's original shade plan.
+const letters = {
+    A: ["01110", "10001", "11111", "10001", "10001"],
+    B: ["11110", "10001", "11110", "10001", "11110"],
+    C: ["01111", "10000", "10000", "10000", "01111"],
+    D: ["11110", "10001", "10001", "10001", "11110"],
+    E: ["11111", "10000", "11110", "10000", "11111"],
+    G: ["01111", "10000", "10111", "10001", "01111"],
+    H: ["10001", "10001", "11111", "10001", "10001"],
+    I: ["11111", "00100", "00100", "00100", "11111"],
+    K: ["10001", "10010", "11100", "10010", "10001"],
+    L: ["10000", "10000", "10000", "10000", "11111"],
+    N: ["10001", "11001", "10101", "10011", "10001"],
+    O: ["01110", "10001", "10001", "10001", "01110"],
+    P: ["11110", "10001", "11110", "10000", "10000"],
+    R: ["11110", "10001", "11110", "10010", "10001"],
+    S: ["01111", "10000", "01110", "00001", "11110"],
+    T: ["11111", "00100", "00100", "00100", "00100"],
+    U: ["10001", "10001", "10001", "10001", "01110"],
+    V: ["10001", "10001", "10001", "01010", "00100"],
+    W: ["10001", "10001", "10101", "10101", "01010"],
+    X: ["10001", "01010", "00100", "01010", "10001"],
+};
+export function windowWord(word) {
+    const glyphs = [...word].map((letter) => {
+        const glyph = letters[letter];
+        if (!glyph)
+            throw new Error(`Unsupported window letter: ${letter}`);
+        return glyph;
+    });
+    return Array.from({ length: 5 }, (_, row) => glyphs.map((glyph) => glyph[row]).join("0"));
+}

package/site/models/chicago-athletic-association-geographic.js

@@ -0,0 +1,173 @@
+import * as THREE from "../vendor/three-r186.js";
+import { createBuilder, polygonOf } from "./building-kit.js";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt } from "./facade-grid.js";
+// The Chicago Athletic Association, 12 South Michigan Avenue (Henry Ives Cobb, 1893): the
+// geographic layout's model, on the mapped outline 147476152. The original layout has no
+// model of it; the drawing paints its Michigan front in Willoughby Tower's group, below and
+// left of the tower, right of the Gage Building.
+//
+// A Venetian Gothic front of stone and brick in three bays: an arched ground floor, a row of
+// small arches, a great arcade over three floors, two floors of windows, the eighth floor's
+// traceried arcade, a carved frieze and a projecting cornice, and a top storey of diaper
+// brick pierced by nine roundels. The levels are the Historic American Buildings Survey's
+// measured drawings, HABS IL-1226, from the first floor to the parapet's 149 ft 4 in; see
+// docs/chicago-athletic-association-reference.md. Units are meters; +x is east, +z is south.
+const ft = (feet, inches = 0) => (feet + inches / 12) * 0.3048;
+export const chicagoAthleticLevels = Object.freeze({
+    // Each floor's level on the survey's section, the first to the eleventh.
+    floors: [0, ft(17, 5.5), ft(33), ft(46, 6.5), ft(62), ft(73, 1.5), ft(83, 5), ft(94, 1), ft(114, 6), ft(127, 3), ft(136, 5)],
+    arcade: [ft(93, 1), ft(112, 11)], // the eighth floor's traceried lights, read on the elevation
+    cornice: [ft(120, 9.5), ft(126, 11)], // the cornice's profile, read on the section
+    roundels: ft(144), // the roundels' centres, read on the elevation
+    parapet: 45.52, // the top of the parapet, measured at 149 ft 4 in
+});
+const h = chicagoAthleticLevels;
+const floor = (n) => h.floors[n - 1];
+// The skins' colours: the window tones, and the stone, the carved frieze and the brick, which
+// no window shares.
+export const chicagoAthleticPalette = Object.freeze({ glass: [0x262626, 0x2a2a2a, 0x2e2e2e, 0x323232], lit: 0x6e6e6e, dim: 0x3a3a3a, stone: 0x6d6d6d, frieze: 0x7a7a7a, brick: 0x5a5a5a });
+const palette = chicagoAthleticPalette;
+const color = (hex) => new THREE.Color(hex);
+const glassTones = palette.glass.map(color);
+const litGlass = color(palette.lit), dimGlass = color(palette.dim);
+const stone = color(palette.stone), frieze = color(palette.frieze), brick = color(palette.brick);
+const core = color(0x262626), roofing = color(0x3a3a3a);
+function paneColor(row, bay, wall) {
+    const hash = (Math.imul(row + 31, 0x9e3779b1) ^ Math.imul(bay + 79, 0x85ebca77) ^ Math.imul(wall + 61, 0xc2b2ae3d)) >>> 0;
+    const value = hash % 101;
+    if (value < 4)
+        return litGlass;
+    if (value < 8)
+        return dimGlass;
+    return glassTones[value % glassTones.length];
+}
+export const chicagoAthleticRows = [
+    { lo: 0.25, hi: 0.9, kind: "stone", floor: 1 },
+    { lo: 0.9, hi: 4.3, kind: "ground", floor: 1 },
+    { lo: 4.3, hi: floor(2) + 1.2, kind: "stone", floor: 2 },
+    { lo: floor(2) + 1.2, hi: floor(3) - 1, kind: "arches", floor: 2 },
+    { lo: floor(3) - 1, hi: floor(3) + 1, kind: "stone", floor: 3 },
+    { lo: floor(3) + 1, hi: floor(6) - 0.8, kind: "great", floor: 3 },
+    { lo: floor(6) - 0.8, hi: floor(6) + 0.9, kind: "band", floor: 6 },
+    { lo: floor(6) + 0.9, hi: floor(7) - 0.4, kind: "window", floor: 6 },
+    { lo: floor(7) - 0.4, hi: floor(7) + 0.8, kind: "stone", floor: 7 },
+    { lo: floor(7) + 0.8, hi: h.arcade[0] - 0.3, kind: "window", floor: 7 },
+    { lo: h.arcade[0] - 0.3, hi: h.arcade[0], kind: "stone", floor: 8 },
+    { lo: h.arcade[0], hi: h.arcade[1], kind: "arcade", floor: 8 },
+    { lo: h.arcade[1], hi: h.cornice[0], kind: "frieze", floor: 9 },
+    { lo: h.cornice[0], hi: h.cornice[1], kind: "stone", floor: 9 },
+    { lo: h.cornice[1], hi: floor(10) + 0.3, kind: "brick", floor: 10 },
+    { lo: floor(10) + 0.3, hi: floor(10) + 2.2, kind: "attic", floor: 10 },
+    { lo: floor(10) + 2.2, hi: h.roundels - 0.45, kind: "brick", floor: 11 },
+    { lo: h.roundels - 0.45, hi: h.roundels + 0.45, kind: "roundel", floor: 11 },
+    { lo: h.roundels + 0.45, hi: h.parapet, kind: "brick", floor: 11 },
+];
+const rows = chicagoAthleticRows;
+// Along the front, as fractions of it from the south corner, read on the measured elevation:
+// the three bays' openings between the stone quoins, in two, eight and two lights; the nine
+// roundels, 90 cm across; and the top storey's one window, at its north end.
+export const chicagoAthleticFront = Object.freeze({
+    bays: [[0.053, 0.195, 2], [0.254, 0.74, 8], [0.799, 0.941, 2]],
+    roundels: Array.from({ length: 9 }, (_, k) => 0.0773 + k * 0.1065),
+    attic: [0.84, 0.947],
+});
+const front = chicagoAthleticFront;
+export function createChicagoAthleticAssociationGeographicBuilding(record, projectPlan, offset) {
+    const kit = createBuilder(record.name, record.id);
+    const shell = kit.batch("Chicago Athletic Association · shell", kit.material(0xffffff, { vertexColors: true }));
+    const wall = kit.batch("Chicago Athletic Association · stone, brick and windows", kit.material(0xffffff, { vertexColors: true }));
+    const cornice = kit.batch("Chicago Athletic Association · cornice", kit.material(0x7a7a7a));
+    const lot = orient(polygonOf(projectPlan(record.footprint.coordinates)));
+    // The lot's south-east corner, on Michigan against the Gage Building, with the front running
+    // north to Willoughby Tower.
+    const corner = lot.reduce((best, p) => (p[0] + p[1] > best[0] + best[1] ? p : best));
+    const northEast = lot.reduce((best, p) => (p[0] - p[1] > best[0] - best[1] ? p : best));
+    const length = Math.hypot(northEast[0] - corner[0], northEast[1] - corner[1]);
+    const north = [(northEast[0] - corner[0]) / length, (northEast[1] - corner[1]) / length], west = [north[1], -north[0]];
+    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
+    planOf(lot).forEach((run) => {
+        const a = run.at(0), b = run.at(run.length), n = run.normal(0);
+        kit.quad(shell, [[a[0], 0, a[1]], [b[0], 0, b[1]], [b[0], h.parapet, b[1]], [a[0], h.parapet, a[1]]], [[n[0], 0, n[1]]], core);
+    });
+    paintedSlab(kit, shell, lot, 0, false, roofing);
+    paintedSlab(kit, shell, lot, h.parapet, true, roofing);
+    // The cornice projects 88 cm along the front, as the elevation shows it, from 12 cm inside
+    // it, stopping 3 cm short of the neighbours' walls.
+    kit.prism(cornice, planOf(orient([at(-0.88, 0.03), at(-0.88, length - 0.03), at(0.12, length - 0.03), at(0.12, 0.03)])), [h.cornice[0], h.cornice[1]]);
+    // A wall's skin, one box to a chain the `keep` test accepts, held 2 cm clear of its ends
+    // or 9 cm where the outline turns in, over `span`; `cells` lays a wall's columns out across
+    // it, from its start, and paints a cell by its middle and row.
+    const skin = (seed, keep, span, cells) => {
+        const plan = planOf(lot), heights = [span[0].lo, ...span.map((row) => row.hi)];
+        chainsOf(plan).forEach((chain, index) => {
+            if (!chain.runs.every((run) => keep(plan[run])))
+                return;
+            const first = chain.runs[0], last = chain.runs.at(-1);
+            const s0 = turnsAt(plan, first)[0] > 0 ? 0.09 : 0.02, s1 = chain.length - (turnsAt(plan, last)[1] > 0 ? 0.09 : 0.02);
+            const [columns, paint] = cells(chain.length, plan[first].at(0));
+            chainSkin(kit, wall, plan, chain, 0, chain.runs.length - 1, s0, s1, columns, heights, 0.02, 0.07, (bay, r) => {
+                const row = span[r], color = paint((columns[bay - 1] + columns[bay]) / 2, row, bay);
+                return color === glassTones[0] ? paneColor(row.floor, bay, seed * 8 + index) : color;
+            }, seed === 0 ? stone : brick);
+        });
+    };
+    const facing = (x, z) => (run) => run.normal(0)[0] * x + run.normal(0)[1] * z > 0.9;
+    // The front: each bay's lights between 15 cm colonnettes, which the bands and the frieze
+    // cross; the top storey's roundels and window in its brick.
+    const michigan = (chain, start) => {
+        const fromSouth = Math.hypot(start[0] - corner[0], start[1] - corner[1]) < chain / 2;
+        const s = (fraction) => (fromSouth ? fraction * chain : chain - fraction * chain);
+        const lights = front.bays.flatMap(([a, b, count]) => Array.from({ length: count }, (_, k) => {
+            const width = (b - a) * chain, step = width / count;
+            return [s(a) + (fromSouth ? 1 : -1) * (k * step + (k > 0 ? 0.075 : 0)), s(a) + (fromSouth ? 1 : -1) * ((k + 1) * step - (k < count - 1 ? 0.075 : 0))].sort((p, q) => p - q);
+        }));
+        const roundels = front.roundels.map((c) => [s(c) - 0.45, s(c) + 0.45]);
+        const attic = front.attic.map(s).sort((p, q) => p - q);
+        const cuts = [...lights.flat(), ...roundels.flat(), ...attic].filter((x) => x > 0.1 && x < chain - 0.1);
+        const inside = (spans, x) => spans.some(([a, b]) => x > a && x < b);
+        return [[0, ...[...new Set(cuts)].sort((p, q) => p - q), chain], (middle, row) => {
+                if (row.kind === "frieze")
+                    return frieze;
+                if (row.kind === "band" || row.kind === "stone")
+                    return stone;
+                if (row.kind === "brick")
+                    return brick;
+                if (row.kind === "roundel")
+                    return inside(roundels, middle) ? glassTones[0] : brick;
+                if (row.kind === "attic")
+                    return inside([attic], middle) ? glassTones[0] : brick;
+                return inside(lights, middle) ? glassTones[0] : stone;
+            }];
+    };
+    // The other walls' rows: a window 1.8 m tall on each floor from the second, its sill
+    // 90 cm up, to the parapet.
+    const sides = [{ lo: 0.25, hi: floor(2) + 0.9, kind: "brick", floor: 1 }];
+    for (let n = 2; n <= 11; n += 1) {
+        sides.push({ lo: floor(n) + 0.9, hi: floor(n) + 2.7, kind: "window", floor: n });
+        sides.push({ lo: floor(n) + 2.7, hi: n < 11 ? floor(n + 1) + 0.9 : h.parapet, kind: "brick", floor: n });
+    }
+    // The alley and the light court's walls: windows 1.6 m wide, spread evenly about 3.2 m
+    // apart.
+    const court = (chain) => {
+        const count = Math.max(1, Math.round(chain / 3.2)), centres = Array.from({ length: count }, (_, i) => chain * (i + 0.5) / count);
+        return [[0, ...centres.flatMap((c) => [c - 0.8, c + 0.8]), chain], (middle, row) => (row.kind === "window" && centres.some((c) => Math.abs(middle - c) < 0.8) ? glassTones[0] : brick)];
+    };
+    // A run's middle, in metres west of the front and north of the south corner.
+    const place = (run) => {
+        const mid = run.at(run.length / 2), [x, z] = [mid[0] - corner[0], mid[1] - corner[1]];
+        return [x * west[0] + z * west[1], x * north[0] + z * north[1]];
+    };
+    // The Michigan front, as against the light court's east wall, 39 m back.
+    const isMichigan = (run) => facing(1, 0)(run) && place(run)[0] < 1;
+    // The party walls keep the bare shell: the Gage to the south, Willoughby Tower and the
+    // annex on Madison to the north, all taller, cover them. The light court's north wall,
+    // 6.8 m in from the party line, is not one.
+    const party = (run) => (facing(0, 1)(run) ? place(run)[1] < 1 : facing(0, -1)(run) && place(run)[1] > length - 3);
+    skin(0, isMichigan, rows, michigan);
+    skin(1, (run) => !isMichigan(run) && !party(run), sides, court);
+    const model = kit.finish({ height: h.parapet, outlines: [shell, cornice], opacity: 0.16 });
+    model.building.position.set(offset[0], 0, offset[1]);
+    model.building.userData["geography"] = record;
+    model.building.userData["geographicDetail"] = { levels: h, source: "docs/chicago-athletic-association-reference.md" };
+    return model;
+}

package/site/models/crain-communications.js

@@ -0,0 +1,75 @@
+import { buildCrainTower, crainFloors, crainMainRoof } from "./crain-tower.js";
+// The Crain Communications Building on a clean version of its mapped plan, in real meters:
+// the solo study shows it whole, and the skyline study places a copy cut at the drawing's
+// datum. crain-tower.ts builds it, and the geographic model on the mapped parts.
+//
+// The plan is the OpenStreetMap outline squared up. The south-west half is an isosceles
+// right triangle with 38.6 m legs. The north-east half is its twin across the split, its
+// own split line parallel to the first and 4.95 m from it. The two touch along the middle,
+// and a V-notch opens at each end of the split: 7.6 m deep at the south-east corner, and at
+// the north-west, where the gap between them runs 13.4 m inward as the slot. Both roofs
+// peak at the published 177.4 m and fall 1.225 m per metre along the diagonal, about 51°,
+// measured on the photograph the drawing was traced from. OpenStreetMap's roof tags put the
+// two peaks 5 m apart and the slopes near 55°, which the photograph does not show.
+// See docs/crain-reference.md. Units are meters; +x is east and +z is south.
+const halfWidth = 19.3, halfDepth = 22.8;
+const offset = halfDepth - halfWidth;
+const notch = 7.6, slotLength = 13.4;
+const tip = 177.4, fall = 1.225;
+const diagonal = [Math.SQRT1_2, Math.SQRT1_2];
+// The south-west half, from its peak on the west face.
+const peakWest = [-halfWidth, halfDepth - 2 * halfWidth];
+const southWest = [-halfWidth, halfDepth], southEast = [halfWidth, halfDepth];
+// The north-east half, from its peak at the north-west corner.
+const northWest = [-halfWidth, -halfDepth], northEast = [halfWidth, -halfDepth];
+const notchApex = [halfWidth - notch, halfDepth - notch], notchEast = [halfWidth, halfDepth - 2 * notch];
+const slotWest = [peakWest[0] + slotLength * diagonal[0], peakWest[1] + slotLength * diagonal[1]];
+const slotEast = [slotWest[0] + offset, slotWest[1] - offset];
+const notchWest = [peakWest[0] + offset, peakWest[1] - offset];
+const along = (from) => (point) => (point[0] - from[0]) * diagonal[0] + (point[1] - from[1]) * diagonal[1];
+const southWestRoof = (point) => tip - fall * along(peakWest)(point);
+const northEastRoof = (point) => tip - fall * along(northWest)(point);
+function createCrain(base) {
+    return buildCrainTower({
+        name: "Crain Communications Building",
+        id: "building-crain-communications",
+        base,
+        grid: { origin: southWest, axis: [1, 0] },
+        volumes: [
+            { corners: [peakWest, southWest, southEast, notchApex, slotWest], roof: southWestRoof, glazed: true },
+            { corners: [northWest, northEast, notchEast, notchApex, slotWest, slotEast], roof: northEastRoof, glazed: true },
+            { corners: [peakWest, slotWest, slotEast, notchWest], roof: () => crainMainRoof, glazed: false },
+        ],
+    });
+}
+// The whole building from the street, for the solo study.
+export function createCrainBuilding() {
+    return createCrain(0);
+}
+// The skyline drawing shows the tower from the photograph's treeline up, so its platform
+// datum crosses the tower above the street: 39.6 m, fitted with the placement in
+// skyline-study.ts, which scales and places this copy. Its y = 0 is that datum, and the
+// lowest drawn sill is the twelfth floor's, the first above the lobby being the second.
+export const crainSkylineBase = 39.6;
+export function createCrainSkylineBuilding() {
+    return createCrain(crainSkylineBase);
+}
+// Features the skyline test projects against the drawing, in the skyline copy's own
+// coordinates, derived from the geometry above. The drawn sills are the twenty-nine the
+// left face shows below its shoulder, the twelfth floor's to the fortieth's, on the
+// south-west corner the drawing's left edge traces.
+const at = ([x, z], real) => [x, real - crainSkylineBase, z];
+const sill = (floor) => crainFloors.lobbyTop + (floor - 2) * crainFloors.pitch + crainFloors.sill;
+export const crainFeatures = {
+    crainSills: Array.from({ length: 29 }, (_, i) => at(southWest, sill(12 + i))),
+    // A point on the south face, below the roof and clear of every neighbour, for hover.
+    crainFacadeProbe: [0, 60, halfDepth + 0.05],
+    crainPeakWest: at(peakWest, southWestRoof(peakWest)),
+    crainPeakEast: at(northWest, northEastRoof(northWest)),
+    crainShoulderWest: at(southWest, southWestRoof(southWest)),
+    crainShoulderEast: at(northEast, northEastRoof(northEast)),
+    crainFoot: at(southEast, southWestRoof(southEast)),
+    crainStepEast: at(notchEast, northEastRoof(notchEast)),
+    crainSlotWest: at(slotWest, southWestRoof(slotWest)),
+    crainSlotEast: at(slotEast, northEastRoof(slotEast)),
+};