@a2f0/skyline 0.2.56 → 0.2.57

package/lib/models/borg-warner-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Borg-Warner Building, 200 South Michigan Avenue (A. Epstein & Sons with William
 // Lescaze, 1958): the geographic layout's model, on the mapped outline 124873918. The
 // original layout has no model of it; the drawing shows it across Adams from Peoples Gas.
@@ -69,10 +69,7 @@ export function createBorgWarnerGeographicBuilding(record, projectPlan, offset)
     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 southWest = lot.reduce((best, p) => (p[1] - p[0] > best[1] - best[0] ? p : best));
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(southWest), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    const { rect } = lotFrame(corner, southWest, northEast);
     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.roof, b[1]], [a[0], h.roof, a[1]]], [[n[0], 0, n[1]]], core);

package/lib/models/colour-materials.d.ts

@@ -2,8 +2,8 @@ import type { BuildingModel } from "./building-kit.js";
 import type { Daylight } from "../study-types.js";
 import { type ReflectionColours } from "./colour-reflections.js";
 import { type NightLighting } from "./night-windows.js";
-export declare const materialNames: readonly ["neutral", "glass", "green glass", "blue-green glass", "bronze glass", "lit window", "dim window", "lamp", "limestone", "marble", "white granite", "granite", "dark granite", "slate", "white terracotta", "pink terracotta", "green tile", "brick", "common brick", "orange brick", "brown brick", "buff brick", "glazed brick", "concrete", "precast", "copper", "maroon", "blue enamel", "bronze", "dark metal", "aluminium", "stainless", "opaque spandrel", "crown glass", "crown lights", "screen", "band lights", "sign board", "sign letters", "cap lights"];
-export type MaterialName = (typeof materialNames)[number];
+import type { MaterialName } from "./material-names.js";
+export { materialNames, type MaterialName } from "./material-names.js";
 export type Tones = Readonly<Record<number, MaterialName>>;
 export type Batch = readonly [material: MaterialName, tones?: Tones];
 export type BuildingMaterials = Readonly<Record<string, Batch>>;

package/lib/models/colour-materials.js

@@ -9,16 +9,7 @@ import { nightWindowMask } from "./night-windows.js";
 // and each mesh's batch, the part of its name after the last " · ", or that without a trailing
 // number, so "glazing 3" reads as "glazing". A surface is its batch's material unless its grey
 // names another.
-export const materialNames = [
-    "neutral", "glass", "green glass", "blue-green glass", "bronze glass", "lit window", "dim window", "lamp",
-    "limestone", "marble", "white granite", "granite", "dark granite", "slate",
-    "white terracotta", "pink terracotta", "green tile", "brick", "common brick", "orange brick", "brown brick", "buff brick", "glazed brick",
-    "concrete", "precast", "copper", "maroon", "blue enamel", "bronze", "dark metal", "aluminium", "stainless", "opaque spandrel",
-    // Parts the photographs show on their own, named as the night first showed them: crown glass
-    // and crown lights, an emblem screen and the lights in its bands, a sign's board and letters,
-    // and a lit cap.
-    "crown glass", "crown lights", "screen", "band lights", "sign board", "sign letters", "cap lights",
-];
+export { materialNames } from "./material-names.js";
 // A batch's lit and dim office windows.
 const windows = (lit, dim) => ({ [lit]: "lit window", [dim]: "dim window" });
 export const colourMaterials = {

package/lib/models/colour-palette.d.ts

@@ -1,4 +1,4 @@
-import type { MaterialName } from "./colour-materials.js";
+import type { MaterialName } from "./material-names.js";
 export type Measurement = number | MaterialName | null;
 export declare const measuredColours: Readonly<Record<string, Readonly<Partial<Record<MaterialName, Measurement>>>>>;
 export declare const daylightColours: {

package/lib/models/facade-grid.d.ts

@@ -1,6 +1,13 @@
 import * as THREE from "../vendor/three-r186.js";
 import type { BatchData, Builder, Plan, Run, Vec2 } from "./building-kit.js";
 export declare const orient: (corners: Vec2[]) => Vec2[];
+export declare function lotFrame(corner: Vec2, toWest: Vec2, toNorth: Vec2): {
+    west: Vec2;
+    north: Vec2;
+    at: (a: number, b: number) => Vec2;
+    inLot: (p: Vec2) => Vec2;
+    rect: (a0: number, a1: number, b0: number, b1: number) => Vec2[];
+};
 export declare const planOf: (corners: Vec2[]) => Plan;
 export declare const turnAt: (a: Run, b: Run) => number;
 export interface Chain {

package/lib/models/facade-grid.js

@@ -4,6 +4,23 @@ export const orient = (corners) => {
     const area = corners.reduce((sum, [x, z], i) => { const [x2, z2] = corners[(i + 1) % corners.length]; return sum + x * z2 - x2 * z; }, 0);
     return area < 0 ? corners : [...corners].reverse();
 };
+// A lot's frame from the corner its fronts run from: `west` and `north` are the unit
+// directions from `corner` toward two other points, `at(a, b)` is the point `a` along `west`
+// and `b` along `north`, `inLot` is its inverse, a point's distances along the two fronts,
+// which can meet a little off square, and `rect` is the oriented outline from a0 to a1 along
+// `west` and b0 to b1 along `north`.
+export function lotFrame(corner, toWest, toNorth) {
+    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
+    const west = unit(toWest), north = unit(toNorth);
+    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
+    const skew = west[0] * north[1] - west[1] * north[0];
+    const inLot = (p) => {
+        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
+        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
+    };
+    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    return { west, north, at, inLot, rect };
+}
 export const planOf = (corners) => corners.map((corner, i) => line(corner, corners[(i + 1) % corners.length]));
 // The turn from run a into run b at their shared corner; negative where the outline turns
 // out (a convex corner) and positive where it turns in.

package/lib/models/gage-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Gage Building, 18 South Michigan Avenue (Holabird & Roche, with a front by Louis
 // Sullivan, 1899; four storeys added in 1902): the geographic layout's model, on the mapped
 // outline 124865450. The original layout has no model of it; the drawing shows its Michigan
@@ -65,17 +65,7 @@ export function createGageGeographicBuilding(record, projectPlan, offset) {
     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 southWest = lot.reduce((best, p) => (p[1] - p[0] > best[1] - best[0] ? p : best));
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(southWest), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along the south wall and the Michigan front,
-    // which meet a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    const { inLot, rect } = lotFrame(corner, southWest, northEast);
     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.top, b[1]], [a[0], h.top, a[1]]], [[n[0], 0, n[1]]], core);

package/lib/models/lake-view-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Lake View Building, 116 South Michigan Avenue (Jenney, Mundie & Jensen; its top five
 // storeys added by them in 1912): the geographic layout's model, on the mapped outline
 // 145498711. The original layout has no model of it; the drawing shows it between Peoples
@@ -62,15 +62,7 @@ export function createLakeViewGeographicBuilding(record, projectPlan, offset) {
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    // A point's distances along the south wall and the Michigan front, which meet a little
-    // off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { inLot } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     const front = inLot(northEast)[1];
     planOf(lot).forEach((run) => {
         const a = run.at(0), b = run.at(run.length), n = run.normal(0);

package/lib/models/maclean-center-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The MacLean Center, 112 South Michigan Avenue, built as the Illinois Athletic Club
 // (Barnett, Haynes & Barnett, 1908) and raised six floors by Swann & Weiskopf in 1985: the
 // geographic layout's model, on the mapped outline 145498712. The original layout has no
@@ -78,18 +78,8 @@ export function createMacleanCenterGeographicBuilding(record, projectPlan, offse
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along the south wall and the Michigan front,
-    // which meet a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { inLot, rect } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     const front = inLot(northEast)[1];
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
     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.top, b[1]], [a[0], h.top, a[1]]], [[n[0], 0, n[1]]], core);

package/lib/models/material-names.d.ts

@@ -0,0 +1,2 @@
+export declare const materialNames: readonly ["neutral", "glass", "green glass", "blue-green glass", "bronze glass", "lit window", "dim window", "lamp", "limestone", "marble", "white granite", "granite", "dark granite", "slate", "white terracotta", "pink terracotta", "green tile", "brick", "common brick", "orange brick", "brown brick", "buff brick", "glazed brick", "concrete", "precast", "copper", "maroon", "blue enamel", "bronze", "dark metal", "aluminium", "stainless", "opaque spandrel", "crown glass", "crown lights", "screen", "band lights", "sign board", "sign letters", "cap lights"];
+export type MaterialName = (typeof materialNames)[number];

package/lib/models/material-names.js

@@ -0,0 +1,13 @@
+// The colour trial's named materials (https://github.com/a2f0/skyline/issues/115), which
+// colour-materials.ts assigns to every surface, colour-palette.ts measures and night-windows.ts
+// lights. They live apart from all three so that each can name them without importing another.
+export const materialNames = [
+    "neutral", "glass", "green glass", "blue-green glass", "bronze glass", "lit window", "dim window", "lamp",
+    "limestone", "marble", "white granite", "granite", "dark granite", "slate",
+    "white terracotta", "pink terracotta", "green tile", "brick", "common brick", "orange brick", "brown brick", "buff brick", "glazed brick",
+    "concrete", "precast", "copper", "maroon", "blue enamel", "bronze", "dark metal", "aluminium", "stainless", "opaque spandrel",
+    // Parts the photographs show on their own, named as the night first showed them: crown glass
+    // and crown lights, an emblem screen and the lights in its bands, a sign's board and letters,
+    // and a lit cap.
+    "crown glass", "crown lights", "screen", "band lights", "sign board", "sign letters", "cap lights",
+];

package/lib/models/michigan-boulevard-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Michigan Boulevard Building, 30 North Michigan Avenue (Jarvis Hunt, 1914, fifteen
 // storeys; six added by Hunt in 1923): the geographic layout's model, on the mapped outline
 // 126982630. The original layout has no model of it; the drawing shows its Michigan front
@@ -68,18 +68,8 @@ export function createMichiganBoulevardGeographicBuilding(record, projectPlan, o
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along the south wall and the Michigan front,
-    // which meet a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { inLot, rect } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     const front = inLot(northEast)[1];
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
     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.top, b[1]], [a[0], h.top, a[1]]], [[n[0], 0, n[1]]], core);

package/lib/models/monroe-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Monroe Building, 104 South Michigan Avenue (Holabird & Roche, 1912): the geographic
 // layout's model, on the mapped outline 145498713. The original layout has no model of it;
 // the drawing shows it left of the University Club, across Monroe Street.
@@ -71,17 +71,7 @@ export function createMonroeGeographicBuilding(record, projectPlan, offset) {
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along the south wall and the Michigan front,
-    // which meet a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    const { at, inLot, rect } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     const lift = ([x, z], y) => [x, y, z];
     // The lot's four corners, in lot coordinates: its north and south walls are a little out
     // of parallel.

package/lib/models/night-windows.d.ts

@@ -1,5 +1,5 @@
 import type * as THREE from "../vendor/three-r186.js";
-import type { MaterialName } from "./colour-materials.js";
+import type { MaterialName } from "./material-names.js";
 export interface NightLighting {
     /** Sunset/dawn transition, from daylight (0) to full darkness (1). */
     darkness: number;

package/lib/models/north-michigan-180-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // 180 North Michigan Avenue, the Harvester Building (1927): the geographic layout's model,
 // on the mapped outline 210671714. The original layout has no model of it; the drawing
 // shows its south wall behind Millennium Park Plaza, which hides its Michigan front.
@@ -59,15 +59,7 @@ export function createNorthMichigan180GeographicBuilding(record, projectPlan, of
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    // A point's distances along the south wall and the Michigan front, which meet a little off
-    // square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { inLot } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     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.top, b[1]], [a[0], h.top, a[1]]], [[n[0], 0, n[1]]], core);

package/lib/models/peoples-gas-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Peoples Gas Building, 122 South Michigan Avenue (D. H. Burnham & Co., 1911): the
 // geographic layout's model, on the mapped outline 145498710 and its parts. The original
 // layout has no model of it; the drawing shows it between the Lake View Building and Adams
@@ -90,16 +90,7 @@ export function createPeoplesGasGeographicBuilding(record, projectPlan, offset)
     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 southWest = lot.reduce((best, p) => (p[1] - p[0] > best[1] - best[0] ? p : best));
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(southWest), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along the Adams and Michigan fronts, which
-    // meet a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { west, north, at, inLot } = lotFrame(corner, southWest, northEast);
     const [adams, michigan] = [inLot(southWest)[0], inLot(northEast)[1]];
     // Corners and edges by value, since parts share the outline's nodes.
     const key = (p) => `${p[0].toFixed(3)},${p[1].toFixed(3)}`;

package/lib/models/railway-exchange-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Railway Exchange Building, 224 South Michigan Avenue (Frederick P. Dinkelberg of D. H.
 // Burnham & Co., 1904): the geographic layout's model, on the mapped outline 124873931. The
 // original layout has no model of it; the drawing shows it at Michigan and Jackson, left of
@@ -71,14 +71,7 @@ export function createRailwayExchangeGeographicBuilding(record, projectPlan, off
     const northEast = lot.reduce((best, p) => (p[0] - p[1] > best[0] - best[1] ? p : best));
     const southWest = lot.reduce((best, p) => (p[1] - p[0] > best[1] - best[0] ? p : best));
     const northWest = lot.reduce((best, p) => (-p[0] - p[1] > -best[0] - best[1] ? p : best));
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(southWest), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { at, inLot } = lotFrame(corner, southWest, northEast);
     const [jackson, michigan] = [inLot(southWest)[0], inLot(northEast)[1]];
     const lift = ([x, z], y) => [x, y, z];
     // The walls to the roof's foot.

package/lib/models/six-north-michigan-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // Six North Michigan, the Montgomery Ward Building (Schmidt, Garden & Martin, 1899; four
 // floors added by Holabird & Roche, 1923): the geographic layout's model, on the mapped
 // outline 126982631. The original layout has no model of it; the drawing shows it right of
@@ -79,17 +79,8 @@ export function createSixNorthMichiganGeographicBuilding(record, projectPlan, of
     // The lot's south-east corner, and its Madison and Michigan fronts running from it.
     const corner = lot.reduce((best, p) => (p[0] + p[1] > best[0] + best[1] ? p : best));
     const neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const [west, north] = neighbours[0][0] < neighbours[1][0] ? [unit(neighbours[0]), unit(neighbours[1])] : [unit(neighbours[1]), unit(neighbours[0])];
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along Madison and Michigan, whose fronts meet
-    // a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    const [westward, northward] = neighbours[0][0] < neighbours[1][0] ? [neighbours[0], neighbours[1]] : [neighbours[1], neighbours[0]];
+    const { at, inLot, rect } = lotFrame(corner, westward, northward);
     const [depth, front] = [Math.max(...lot.map((p) => inLot(p)[0])), Math.max(...lot.map((p) => inLot(p)[1]))];
     const tower = (grow) => rect(-grow, h.towerDepth + grow, h.towerSouth - grow, h.towerNorth + grow);
     // A solid on an outline between two heights.

package/lib/models/university-club-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The University Club of Chicago, 76 East Monroe Street (Holabird & Roche, 1909): the
 // geographic layout's model, on the mapped outline 126982632. The original layout has no
 // model of it; the drawing shows it left of Willoughby Tower, behind the Monroe Building.
@@ -81,18 +81,8 @@ export function createUniversityClubGeographicBuilding(record, projectPlan, offs
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along Monroe and Michigan, whose fronts meet a
-    // little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { at, inLot, rect } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     const [length, depth] = [Math.max(...lot.map((p) => inLot(p)[0])), inLot(northEast)[1]];
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
     const lift = ([x, z], y) => [x, y, z];
     // The main block, to the parapet's top.
     planOf(lot).forEach((run) => {

package/lib/models/willoughby-tower-geographic.js

@@ -1,6 +1,6 @@
 import * as THREE from "../vendor/three-r186.js";
 import { createBuilder, inside, polygonOf } from "./building-kit.js";
-import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt } from "./facade-grid.js";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // Willoughby Tower, 8 South Michigan Avenue (Samuel N. Crowen, 1929): the geographic
 // layout's model, on the mapped outline 124873939. The original layout has no model of it;
 // the drawing shows it left of Six North Michigan, outside the excerpt it is fitted to.
@@ -64,10 +64,8 @@ export function createWilloughbyTowerGeographicBuilding(record, projectPlan, off
     // The lot's south-east corner, and its south wall and Michigan front running from it.
     const corner = lot.reduce((best, p) => (p[0] + p[1] > best[0] + best[1] ? p : best));
     const neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const [west, north] = neighbours[0][0] < neighbours[1][0] ? [unit(neighbours[0]), unit(neighbours[1])] : [unit(neighbours[1]), unit(neighbours[0])];
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    const [westward, northward] = neighbours[0][0] < neighbours[1][0] ? [neighbours[0], neighbours[1]] : [neighbours[1], neighbours[0]];
+    const { west, at, inLot, rect } = lotFrame(corner, westward, northward);
     // The south wall's length: the farthest lot corner on its line.
     const southWall = Math.max(...lot.filter((p) => Math.abs((p[0] - corner[0]) * west[1] - (p[1] - corner[1]) * west[0]) < 0.5).map((p) => (p[0] - corner[0]) * west[0] + (p[1] - corner[1]) * west[1]));
     const shaft = rect(0, h.shaftWidth, 0, h.shaftDepth), shoulder = rect(h.shaftWidth, southWall, 0, h.shaftDepth), crown = rect(h.crownEnds, h.shaftWidth - h.crownEnds, h.crownSides, h.shaftDepth - h.crownSides);
@@ -131,13 +129,6 @@ export function createWilloughbyTowerGeographicBuilding(record, projectPlan, off
         const columns = [0, at(0.15), at(0.25), at(0.315), at(0.385), at(0.465), at(0.535), at(0.615), at(0.685), at(0.75), at(0.85), length];
         return [columns, (bay) => (bay === 2 || bay === 10 ? "window" : bay === 4 || bay === 6 || bay === 8 ? "strip" : "stone")];
     };
-    // The inverse of `at`: a point's distances along the south wall and the Michigan front,
-    // which meet a degree off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
     // The crown: three arched windows to a face, 0.9 m wide and 1.7 m apart, their heads
     // narrowing to the middle 0.45 m. A short face's are tall and centred on it; a long
     // face's are short, centred crownWindows west of Michigan, as the drawing has them.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/skyline",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "description": "Interactive Chicago skyline viewer and reusable Three.js building models",
   "license": "UNLICENSED",
   "repository": {

package/site/models/borg-warner-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Borg-Warner Building, 200 South Michigan Avenue (A. Epstein & Sons with William
 // Lescaze, 1958): the geographic layout's model, on the mapped outline 124873918. The
 // original layout has no model of it; the drawing shows it across Adams from Peoples Gas.
@@ -69,10 +69,7 @@ export function createBorgWarnerGeographicBuilding(record, projectPlan, offset)
     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 southWest = lot.reduce((best, p) => (p[1] - p[0] > best[1] - best[0] ? p : best));
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(southWest), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    const { rect } = lotFrame(corner, southWest, northEast);
     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.roof, b[1]], [a[0], h.roof, a[1]]], [[n[0], 0, n[1]]], core);

package/site/models/colour-materials.js

@@ -9,16 +9,7 @@ import { nightWindowMask } from "./night-windows.js";
 // and each mesh's batch, the part of its name after the last " · ", or that without a trailing
 // number, so "glazing 3" reads as "glazing". A surface is its batch's material unless its grey
 // names another.
-export const materialNames = [
-    "neutral", "glass", "green glass", "blue-green glass", "bronze glass", "lit window", "dim window", "lamp",
-    "limestone", "marble", "white granite", "granite", "dark granite", "slate",
-    "white terracotta", "pink terracotta", "green tile", "brick", "common brick", "orange brick", "brown brick", "buff brick", "glazed brick",
-    "concrete", "precast", "copper", "maroon", "blue enamel", "bronze", "dark metal", "aluminium", "stainless", "opaque spandrel",
-    // Parts the photographs show on their own, named as the night first showed them: crown glass
-    // and crown lights, an emblem screen and the lights in its bands, a sign's board and letters,
-    // and a lit cap.
-    "crown glass", "crown lights", "screen", "band lights", "sign board", "sign letters", "cap lights",
-];
+export { materialNames } from "./material-names.js";
 // A batch's lit and dim office windows.
 const windows = (lit, dim) => ({ [lit]: "lit window", [dim]: "dim window" });
 export const colourMaterials = {

package/site/models/facade-grid.js

@@ -4,6 +4,23 @@ export const orient = (corners) => {
     const area = corners.reduce((sum, [x, z], i) => { const [x2, z2] = corners[(i + 1) % corners.length]; return sum + x * z2 - x2 * z; }, 0);
     return area < 0 ? corners : [...corners].reverse();
 };
+// A lot's frame from the corner its fronts run from: `west` and `north` are the unit
+// directions from `corner` toward two other points, `at(a, b)` is the point `a` along `west`
+// and `b` along `north`, `inLot` is its inverse, a point's distances along the two fronts,
+// which can meet a little off square, and `rect` is the oriented outline from a0 to a1 along
+// `west` and b0 to b1 along `north`.
+export function lotFrame(corner, toWest, toNorth) {
+    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
+    const west = unit(toWest), north = unit(toNorth);
+    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
+    const skew = west[0] * north[1] - west[1] * north[0];
+    const inLot = (p) => {
+        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
+        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
+    };
+    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    return { west, north, at, inLot, rect };
+}
 export const planOf = (corners) => corners.map((corner, i) => line(corner, corners[(i + 1) % corners.length]));
 // The turn from run a into run b at their shared corner; negative where the outline turns
 // out (a convex corner) and positive where it turns in.

package/site/models/gage-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Gage Building, 18 South Michigan Avenue (Holabird & Roche, with a front by Louis
 // Sullivan, 1899; four storeys added in 1902): the geographic layout's model, on the mapped
 // outline 124865450. The original layout has no model of it; the drawing shows its Michigan
@@ -65,17 +65,7 @@ export function createGageGeographicBuilding(record, projectPlan, offset) {
     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 southWest = lot.reduce((best, p) => (p[1] - p[0] > best[1] - best[0] ? p : best));
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(southWest), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along the south wall and the Michigan front,
-    // which meet a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    const { inLot, rect } = lotFrame(corner, southWest, northEast);
     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.top, b[1]], [a[0], h.top, a[1]]], [[n[0], 0, n[1]]], core);

package/site/models/lake-view-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Lake View Building, 116 South Michigan Avenue (Jenney, Mundie & Jensen; its top five
 // storeys added by them in 1912): the geographic layout's model, on the mapped outline
 // 145498711. The original layout has no model of it; the drawing shows it between Peoples
@@ -62,15 +62,7 @@ export function createLakeViewGeographicBuilding(record, projectPlan, offset) {
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    // A point's distances along the south wall and the Michigan front, which meet a little
-    // off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { inLot } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     const front = inLot(northEast)[1];
     planOf(lot).forEach((run) => {
         const a = run.at(0), b = run.at(run.length), n = run.normal(0);

package/site/models/maclean-center-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The MacLean Center, 112 South Michigan Avenue, built as the Illinois Athletic Club
 // (Barnett, Haynes & Barnett, 1908) and raised six floors by Swann & Weiskopf in 1985: the
 // geographic layout's model, on the mapped outline 145498712. The original layout has no
@@ -78,18 +78,8 @@ export function createMacleanCenterGeographicBuilding(record, projectPlan, offse
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along the south wall and the Michigan front,
-    // which meet a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { inLot, rect } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     const front = inLot(northEast)[1];
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
     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.top, b[1]], [a[0], h.top, a[1]]], [[n[0], 0, n[1]]], core);

package/site/models/material-names.js

@@ -0,0 +1,13 @@
+// The colour trial's named materials (https://github.com/a2f0/skyline/issues/115), which
+// colour-materials.ts assigns to every surface, colour-palette.ts measures and night-windows.ts
+// lights. They live apart from all three so that each can name them without importing another.
+export const materialNames = [
+    "neutral", "glass", "green glass", "blue-green glass", "bronze glass", "lit window", "dim window", "lamp",
+    "limestone", "marble", "white granite", "granite", "dark granite", "slate",
+    "white terracotta", "pink terracotta", "green tile", "brick", "common brick", "orange brick", "brown brick", "buff brick", "glazed brick",
+    "concrete", "precast", "copper", "maroon", "blue enamel", "bronze", "dark metal", "aluminium", "stainless", "opaque spandrel",
+    // Parts the photographs show on their own, named as the night first showed them: crown glass
+    // and crown lights, an emblem screen and the lights in its bands, a sign's board and letters,
+    // and a lit cap.
+    "crown glass", "crown lights", "screen", "band lights", "sign board", "sign letters", "cap lights",
+];

package/site/models/michigan-boulevard-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Michigan Boulevard Building, 30 North Michigan Avenue (Jarvis Hunt, 1914, fifteen
 // storeys; six added by Hunt in 1923): the geographic layout's model, on the mapped outline
 // 126982630. The original layout has no model of it; the drawing shows its Michigan front
@@ -68,18 +68,8 @@ export function createMichiganBoulevardGeographicBuilding(record, projectPlan, o
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along the south wall and the Michigan front,
-    // which meet a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { inLot, rect } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     const front = inLot(northEast)[1];
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
     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.top, b[1]], [a[0], h.top, a[1]]], [[n[0], 0, n[1]]], core);

package/site/models/monroe-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Monroe Building, 104 South Michigan Avenue (Holabird & Roche, 1912): the geographic
 // layout's model, on the mapped outline 145498713. The original layout has no model of it;
 // the drawing shows it left of the University Club, across Monroe Street.
@@ -71,17 +71,7 @@ export function createMonroeGeographicBuilding(record, projectPlan, offset) {
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along the south wall and the Michigan front,
-    // which meet a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    const { at, inLot, rect } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     const lift = ([x, z], y) => [x, y, z];
     // The lot's four corners, in lot coordinates: its north and south walls are a little out
     // of parallel.

package/site/models/north-michigan-180-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // 180 North Michigan Avenue, the Harvester Building (1927): the geographic layout's model,
 // on the mapped outline 210671714. The original layout has no model of it; the drawing
 // shows its south wall behind Millennium Park Plaza, which hides its Michigan front.
@@ -59,15 +59,7 @@ export function createNorthMichigan180GeographicBuilding(record, projectPlan, of
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    // A point's distances along the south wall and the Michigan front, which meet a little off
-    // square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { inLot } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     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.top, b[1]], [a[0], h.top, a[1]]], [[n[0], 0, n[1]]], core);

package/site/models/peoples-gas-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Peoples Gas Building, 122 South Michigan Avenue (D. H. Burnham & Co., 1911): the
 // geographic layout's model, on the mapped outline 145498710 and its parts. The original
 // layout has no model of it; the drawing shows it between the Lake View Building and Adams
@@ -90,16 +90,7 @@ export function createPeoplesGasGeographicBuilding(record, projectPlan, offset)
     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 southWest = lot.reduce((best, p) => (p[1] - p[0] > best[1] - best[0] ? p : best));
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(southWest), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along the Adams and Michigan fronts, which
-    // meet a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { west, north, at, inLot } = lotFrame(corner, southWest, northEast);
     const [adams, michigan] = [inLot(southWest)[0], inLot(northEast)[1]];
     // Corners and edges by value, since parts share the outline's nodes.
     const key = (p) => `${p[0].toFixed(3)},${p[1].toFixed(3)}`;

package/site/models/railway-exchange-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The Railway Exchange Building, 224 South Michigan Avenue (Frederick P. Dinkelberg of D. H.
 // Burnham & Co., 1904): the geographic layout's model, on the mapped outline 124873931. The
 // original layout has no model of it; the drawing shows it at Michigan and Jackson, left of
@@ -71,14 +71,7 @@ export function createRailwayExchangeGeographicBuilding(record, projectPlan, off
     const northEast = lot.reduce((best, p) => (p[0] - p[1] > best[0] - best[1] ? p : best));
     const southWest = lot.reduce((best, p) => (p[1] - p[0] > best[1] - best[0] ? p : best));
     const northWest = lot.reduce((best, p) => (-p[0] - p[1] > -best[0] - best[1] ? p : best));
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(southWest), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { at, inLot } = lotFrame(corner, southWest, northEast);
     const [jackson, michigan] = [inLot(southWest)[0], inLot(northEast)[1]];
     const lift = ([x, z], y) => [x, y, z];
     // The walls to the roof's foot.

package/site/models/six-north-michigan-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // Six North Michigan, the Montgomery Ward Building (Schmidt, Garden & Martin, 1899; four
 // floors added by Holabird & Roche, 1923): the geographic layout's model, on the mapped
 // outline 126982631. The original layout has no model of it; the drawing shows it right of
@@ -79,17 +79,8 @@ export function createSixNorthMichiganGeographicBuilding(record, projectPlan, of
     // The lot's south-east corner, and its Madison and Michigan fronts running from it.
     const corner = lot.reduce((best, p) => (p[0] + p[1] > best[0] + best[1] ? p : best));
     const neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const [west, north] = neighbours[0][0] < neighbours[1][0] ? [unit(neighbours[0]), unit(neighbours[1])] : [unit(neighbours[1]), unit(neighbours[0])];
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along Madison and Michigan, whose fronts meet
-    // a little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    const [westward, northward] = neighbours[0][0] < neighbours[1][0] ? [neighbours[0], neighbours[1]] : [neighbours[1], neighbours[0]];
+    const { at, inLot, rect } = lotFrame(corner, westward, northward);
     const [depth, front] = [Math.max(...lot.map((p) => inLot(p)[0])), Math.max(...lot.map((p) => inLot(p)[1]))];
     const tower = (grow) => rect(-grow, h.towerDepth + grow, h.towerSouth - grow, h.towerNorth + grow);
     // A solid on an outline between two heights.

package/site/models/university-club-geographic.js

@@ -1,6 +1,6 @@
 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";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // The University Club of Chicago, 76 East Monroe Street (Holabird & Roche, 1909): the
 // geographic layout's model, on the mapped outline 126982632. The original layout has no
 // model of it; the drawing shows it left of Willoughby Tower, behind the Monroe Building.
@@ -81,18 +81,8 @@ export function createUniversityClubGeographicBuilding(record, projectPlan, offs
     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 neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const west = unit(neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1]), north = unit(northEast);
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    // The inverse of `at`: a point's distances along Monroe and Michigan, whose fronts meet a
-    // little off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
+    const { at, inLot, rect } = lotFrame(corner, neighbours[0][0] < neighbours[1][0] ? neighbours[0] : neighbours[1], northEast);
     const [length, depth] = [Math.max(...lot.map((p) => inLot(p)[0])), inLot(northEast)[1]];
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
     const lift = ([x, z], y) => [x, y, z];
     // The main block, to the parapet's top.
     planOf(lot).forEach((run) => {

package/site/models/willoughby-tower-geographic.js

@@ -1,6 +1,6 @@
 import * as THREE from "../vendor/three-r186.js";
 import { createBuilder, inside, polygonOf } from "./building-kit.js";
-import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt } from "./facade-grid.js";
+import { chainSkin, chainsOf, orient, paintedSlab, planOf, turnsAt, lotFrame } from "./facade-grid.js";
 // Willoughby Tower, 8 South Michigan Avenue (Samuel N. Crowen, 1929): the geographic
 // layout's model, on the mapped outline 124873939. The original layout has no model of it;
 // the drawing shows it left of Six North Michigan, outside the excerpt it is fitted to.
@@ -64,10 +64,8 @@ export function createWilloughbyTowerGeographicBuilding(record, projectPlan, off
     // The lot's south-east corner, and its south wall and Michigan front running from it.
     const corner = lot.reduce((best, p) => (p[0] + p[1] > best[0] + best[1] ? p : best));
     const neighbours = [lot[(lot.indexOf(corner) + 1) % lot.length], lot[(lot.indexOf(corner) + lot.length - 1) % lot.length]];
-    const unit = (p) => { const d = Math.hypot(p[0] - corner[0], p[1] - corner[1]); return [(p[0] - corner[0]) / d, (p[1] - corner[1]) / d]; };
-    const [west, north] = neighbours[0][0] < neighbours[1][0] ? [unit(neighbours[0]), unit(neighbours[1])] : [unit(neighbours[1]), unit(neighbours[0])];
-    const at = (a, b) => [corner[0] + west[0] * a + north[0] * b, corner[1] + west[1] * a + north[1] * b];
-    const rect = (a0, a1, b0, b1) => orient([at(a0, b0), at(a1, b0), at(a1, b1), at(a0, b1)]);
+    const [westward, northward] = neighbours[0][0] < neighbours[1][0] ? [neighbours[0], neighbours[1]] : [neighbours[1], neighbours[0]];
+    const { west, at, inLot, rect } = lotFrame(corner, westward, northward);
     // The south wall's length: the farthest lot corner on its line.
     const southWall = Math.max(...lot.filter((p) => Math.abs((p[0] - corner[0]) * west[1] - (p[1] - corner[1]) * west[0]) < 0.5).map((p) => (p[0] - corner[0]) * west[0] + (p[1] - corner[1]) * west[1]));
     const shaft = rect(0, h.shaftWidth, 0, h.shaftDepth), shoulder = rect(h.shaftWidth, southWall, 0, h.shaftDepth), crown = rect(h.crownEnds, h.shaftWidth - h.crownEnds, h.crownSides, h.shaftDepth - h.crownSides);
@@ -131,13 +129,6 @@ export function createWilloughbyTowerGeographicBuilding(record, projectPlan, off
         const columns = [0, at(0.15), at(0.25), at(0.315), at(0.385), at(0.465), at(0.535), at(0.615), at(0.685), at(0.75), at(0.85), length];
         return [columns, (bay) => (bay === 2 || bay === 10 ? "window" : bay === 4 || bay === 6 || bay === 8 ? "strip" : "stone")];
     };
-    // The inverse of `at`: a point's distances along the south wall and the Michigan front,
-    // which meet a degree off square.
-    const skew = west[0] * north[1] - west[1] * north[0];
-    const inLot = (p) => {
-        const [x, z] = [p[0] - corner[0], p[1] - corner[1]];
-        return [(x * north[1] - z * north[0]) / skew, (west[0] * z - west[1] * x) / skew];
-    };
     // The crown: three arched windows to a face, 0.9 m wide and 1.7 m apart, their heads
     // narrowing to the middle 0.45 m. A short face's are tall and centred on it; a long
     // face's are short, centred crownWindows west of Michigan, as the drawing has them.