@johnmorrisdotca/kyogijo-stadiums 0.40.2 → 0.43.0

package/dist/outside.d.ts

@@ -0,0 +1,43 @@
+import { type DistrictPlan } from "./district.ts";
+import { OUTSIDE_LEVELS, outsideCount, type OutsideCrowd, type OutsideLevel } from "./outside.paint.ts";
+import type { Pt } from "./crowd.ts";
+export { OUTSIDE_LEVELS, outsideCount };
+export type { OutsideCrowd, OutsideLevel };
+/** What can be asked of the crowd outside a district (`DistrictOptions.outside`). Off by default. */
+export interface OutsideOptions {
+    /** The share of the venues' seats standing outside, in percent: 0 (the default, nobody), 25, 50, 75 or 100. */
+    level?: OutsideLevel;
+}
+/** The most people to a square metre of walkable ground in the list at 100 percent: a crowd standing close, short of a crush. */
+export declare const OUTSIDE_DENSITY = 3;
+/** The distance from a venue's building at which the crowd has thinned to half what it is at the wall, in metres. */
+export declare const OUTSIDE_REACH = 60;
+/** Whether a number is one of the levels. */
+export declare const isOutsideLevel: (level: unknown) => level is OutsideLevel;
+/** The level an options object asks for: 0 when it asks for none. Throws for a level that is not one of `OUTSIDE_LEVELS`. */
+export declare function outsideLevelOf(options: {
+    outside?: OutsideOptions;
+} | undefined): OutsideLevel;
+/** A small, fast generator of numbers in [0, 1) from a whole seed (mulberry32): only integer arithmetic, so it gives the same numbers in every engine. */
+export declare function seeded(seed: number): () => number;
+/** The mask a plan's venues stand on, if there is one: the first mask that names one of its venues. */
+export declare const maskIdOf: (plan: Pick<DistrictPlan, "members">) => string | undefined;
+/** Whether a plan has a crowd to show: some venue of it stands on a mask. */
+export declare const hasOutside: (plan: Pick<DistrictPlan, "members">) => boolean;
+/** The ids of the venues there is a walkable mask round. */
+export declare const OUTSIDE_VENUES: readonly string[];
+/**
+ * The crowd outside a plan's venues, in the plan's frame: the people of every venue of the plan that stands on a mask (each with its seats as the plan has them), worked out once and kept. `undefined` where no venue of the plan
+ * has a mask. The crowd is the same list whatever level is shown: `outsideCount` says how many of its first people stand at a level.
+ * @example
+ * ```ts
+ * import { planDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * import { outsideCount, outsideCrowd } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const crowd = outsideCrowd(planDistrict({ venues: ["bc-place", "rogers-arena"] }))!;
+ * console.log(crowd.venues.map((v) => `${v.key} ${v.placed}`).join(", "), outsideCount(crowd, 50));
+ * // bc-place:cfl 54500, rogers-arena 18871 36686
+ * ```
+ */
+export declare function outsideCrowd(plan: DistrictPlan): OutsideCrowd | undefined;
+/** Whether a point of the plan's frame (feet) is on the mask's walkable ground: the inverse of what `outsideCrowd` does to a person, for a test to hold the crowd to the mask. */
+export declare function standsOnWalkable(plan: DistrictPlan, maskId: string, [fx, fy]: Pt): boolean;

package/dist/outside.dom.d.ts

@@ -0,0 +1,44 @@
+import { type OutsideCrowd, type OutsideLevel, type OutsideStats } from "./outside.paint.ts";
+/** What a view tells its crowd layer. `crowd` makes (or fetches) the crowd and is called only when one is to be shown. */
+export interface OutsideSpec {
+    level: OutsideLevel;
+    crowd: () => OutsideCrowd | undefined;
+    /** The plan's view box in feet: what the canvas covers. */
+    viewBox: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+}
+/** What a mounted crowd layer lets a page do and read. */
+export interface OutsideLayer {
+    /** The level shown. */
+    readonly level: OutsideLevel;
+    setLevel(level: OutsideLevel): void;
+    /** The 3D view's zoom: a near view is painted finer (its people discs, not density). The paint is redone only when the zoom crosses `NEAR`. */
+    zoom(zoom: number): void;
+    /** What the last paint cost, in milliseconds, and drew: `undefined` before the first. */
+    readonly last: {
+        ms: number;
+        pixels: number;
+        stats: OutsideStats;
+    } | undefined;
+    destroy(): void;
+}
+/** The zoom above which the 3D view paints the crowd finer. */
+export declare const NEAR = 1.5;
+/** The widest a canvas is made, in pixels: a district seen whole at 1.4 times the floor's own size, near at 2.4 times, never past this. */
+export declare const MAX_WIDE = 3072;
+/** The colour the crowd is painted in: the page's `--ky-dist-people` (as the district's drawing sets it, light and dark) read as red, green and blue. */
+export declare function inkOf(from: Element): [number, number, number];
+/**
+ * The crowd on the floor of a 3D view: a canvas as the last child of the floor element (which the view's matrices already move), as wide in pixels as the floor is, 1.4 times (2.4 times when the view is near; `layer.zoom`).
+ * `floor` is the `.ky-turn-floor` element. It is painted once now and again only when something it shows changes.
+ */
+export declare function attachOutside3d(floor: HTMLElement, spec: OutsideSpec, prefetchCrowd?: boolean): OutsideLayer;
+/**
+ * The crowd over a 2D plan: a canvas in `wrap` (a positioned element the plan's SVG is the child of), laid exactly over the box the SVG draws its view in (it keeps its shape inside a box of another, as `meet` does), as many pixels
+ * as the box has device pixels, and made again when the box changes size.
+ */
+export declare function attachOutsidePlan(wrap: HTMLElement, svg: SVGSVGElement, spec: OutsideSpec, prefetchCrowd?: boolean): OutsideLayer;

package/dist/outside.dom.js

@@ -0,0 +1,203 @@
+// The crowd outside on a page: one canvas per view, painted from the typed arrays of `outside.paint.ts` with a single `putImageData`. In the 3D view the canvas is a child of the floor, so the floor's own `matrix3d` carries it
+// round with the turn and no frame of the turn spends anything on it; in the 2D plan it lies over the drawing's own box. It is painted when its level, its size, its zoom's detail or its colour changes, and never because a view
+// turned or a pointer moved: nothing here animates, nothing is polled, and a reader who prefers reduced motion sees the same. The crowd (a quarter of a second of work, once) is asked for only when a level above 0 is shown or,
+// when a page asked for one, in an idle moment after the mount, so that the first press of a level is not slow.
+import { frameOf, rasterOutside } from "./outside.paint.js";
+/** The zoom above which the 3D view paints the crowd finer. */
+export const NEAR = 1.5;
+/** The widest a canvas is made, in pixels: a district seen whole at 1.4 times the floor's own size, near at 2.4 times, never past this. */
+export const MAX_WIDE = 3072;
+/** The colour the crowd is painted in: the page's `--ky-dist-people` (as the district's drawing sets it, light and dark) read as red, green and blue. */
+export function inkOf(from) {
+    const doc = from.ownerDocument;
+    const value = doc.defaultView?.getComputedStyle(from).getPropertyValue("--ky-dist-people").trim() || "#c2410c";
+    const probe = doc.createElement("canvas");
+    probe.width = probe.height = 1;
+    const g = probe.getContext("2d", { willReadFrequently: true });
+    if (g === null)
+        return [194, 65, 12];
+    g.fillStyle = "#c2410c";
+    g.fillStyle = value;
+    g.fillRect(0, 0, 1, 1);
+    const d = g.getImageData(0, 0, 1, 1).data;
+    return [d[0], d[1], d[2]];
+}
+/** Call `change` when the page's theme may have changed (its `data-theme`, its class, or the system's colour scheme); gives the function that stops. */
+function watchTheme(doc, change) {
+    const media = doc.defaultView?.matchMedia?.("(prefers-color-scheme: dark)");
+    media?.addEventListener?.("change", change);
+    const seen = typeof MutationObserver === "function" ? new MutationObserver(change) : undefined;
+    seen?.observe(doc.documentElement, { attributes: true, attributeFilter: ["data-theme", "class"] });
+    return () => {
+        media?.removeEventListener?.("change", change);
+        seen?.disconnect();
+    };
+}
+/** The shared body of both layers: a canvas, what to paint on it and where. */
+function layerOf(canvas, spec, colourFrom, size) {
+    const doc = canvas.ownerDocument;
+    let level = spec.level;
+    let ink = inkOf(colourFrom());
+    let drawn = "";
+    let alive = true;
+    let last;
+    const layer = {
+        zoomTier: 0,
+        get level() {
+            return level;
+        },
+        get last() {
+            return last;
+        },
+        setLevel(next) {
+            if (next === level)
+                return;
+            level = next;
+            layer.repaint();
+        },
+        zoom(zoom) {
+            const tier = zoom > NEAR ? 1 : 0;
+            if (tier === layer.zoomTier)
+                return;
+            layer.zoomTier = tier;
+            layer.repaint();
+        },
+        repaint(force = false) {
+            if (!alive)
+                return;
+            const width = Math.min(MAX_WIDE, Math.max(1, Math.round(size())));
+            if (level === 0) {
+                // Nobody: the canvas is made one pixel, so that it holds no memory.
+                if (canvas.width !== 1 || canvas.height !== 1) {
+                    canvas.width = 1;
+                    canvas.height = 1;
+                }
+                canvas.hidden = true;
+                drawn = "";
+                return;
+            }
+            const crowd = spec.crowd();
+            if (crowd === undefined)
+                return;
+            canvas.hidden = false;
+            const frame = frameOf(spec.viewBox, width);
+            const key = `${level}|${frame.width}x${frame.height}|${ink.join(",")}`;
+            if (!force && key === drawn)
+                return;
+            const started = performance.now();
+            const { rgba, stats } = rasterOutside(crowd, level, frame, ink);
+            if (canvas.width !== frame.width || canvas.height !== frame.height) {
+                canvas.width = frame.width;
+                canvas.height = frame.height;
+            }
+            const g = canvas.getContext("2d");
+            if (g === null)
+                return;
+            g.putImageData(new ImageData(rgba, frame.width, frame.height), 0, 0);
+            drawn = key;
+            last = { ms: performance.now() - started, pixels: frame.width * frame.height, stats };
+        },
+        destroy() {
+            if (!alive)
+                return;
+            alive = false;
+            stopTheme();
+            canvas.remove();
+        },
+    };
+    const stopTheme = watchTheme(doc, () => {
+        const next = inkOf(colourFrom());
+        if (next.join() !== ink.join()) {
+            ink = next;
+            layer.repaint();
+        }
+    });
+    return layer;
+}
+/** Ask for the crowd in an idle moment, so that the first press of a level has nothing to wait for. */
+function prefetch(win, crowd) {
+    const idle = win?.requestIdleCallback;
+    if (typeof idle === "function")
+        idle.call(win, () => void crowd(), { timeout: 2000 });
+    else
+        win?.setTimeout(() => void crowd(), 300);
+}
+/**
+ * The crowd on the floor of a 3D view: a canvas as the last child of the floor element (which the view's matrices already move), as wide in pixels as the floor is, 1.4 times (2.4 times when the view is near; `layer.zoom`).
+ * `floor` is the `.ky-turn-floor` element. It is painted once now and again only when something it shows changes.
+ */
+export function attachOutside3d(floor, spec, prefetchCrowd = true) {
+    const doc = floor.ownerDocument;
+    const canvas = doc.createElement("canvas");
+    canvas.className = "ky-turn-outside";
+    canvas.setAttribute("aria-hidden", "true");
+    canvas.setAttribute("data-outside", String(spec.level));
+    canvas.style.cssText = "position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none";
+    floor.append(canvas);
+    const layer = layerOf(canvas, spec, () => floor.querySelector(".ky-district") ?? floor, () => (parseFloat(floor.style.width) || floor.clientWidth || 1400) * (layer.zoomTier === 1 ? 2.4 : 1.4));
+    const set = layer.setLevel;
+    layer.setLevel = (next) => {
+        canvas.setAttribute("data-outside", String(next));
+        set(next);
+    };
+    layer.repaint();
+    if (prefetchCrowd)
+        prefetch(doc.defaultView, spec.crowd);
+    return layer;
+}
+/**
+ * The crowd over a 2D plan: a canvas in `wrap` (a positioned element the plan's SVG is the child of), laid exactly over the box the SVG draws its view in (it keeps its shape inside a box of another, as `meet` does), as many pixels
+ * as the box has device pixels, and made again when the box changes size.
+ */
+export function attachOutsidePlan(wrap, svg, spec, prefetchCrowd = true) {
+    const doc = wrap.ownerDocument;
+    const win = doc.defaultView;
+    const canvas = doc.createElement("canvas");
+    canvas.className = "ky-district-outside";
+    canvas.setAttribute("aria-hidden", "true");
+    canvas.setAttribute("data-outside", String(spec.level));
+    canvas.style.cssText = "position:absolute;pointer-events:none";
+    wrap.append(canvas);
+    /** The box the drawing's view fills inside the SVG's own box, in CSS pixels, relative to the wrap. */
+    const place = () => {
+        const box = svg.getBoundingClientRect();
+        const home = wrap.getBoundingClientRect();
+        const k = Math.min(box.width / spec.viewBox.w, box.height / spec.viewBox.h);
+        const [w, h] = [spec.viewBox.w * k, spec.viewBox.h * k];
+        canvas.style.left = `${box.left - home.left + (box.width - w) / 2}px`;
+        canvas.style.top = `${box.top - home.top + (box.height - h) / 2}px`;
+        canvas.style.width = `${w}px`;
+        canvas.style.height = `${h}px`;
+        return { w };
+    };
+    const layer = layerOf(canvas, spec, () => svg, () => place().w * Math.min(3, win?.devicePixelRatio ?? 1));
+    const set = layer.setLevel;
+    layer.setLevel = (next) => {
+        canvas.setAttribute("data-outside", String(next));
+        set(next);
+    };
+    let frame = 0;
+    let observer;
+    if (typeof ResizeObserver === "function") {
+        observer = new ResizeObserver(() => {
+            if (frame !== 0 || win === null)
+                return;
+            frame = win.requestAnimationFrame(() => {
+                frame = 0;
+                layer.repaint();
+            });
+        });
+        observer.observe(svg);
+    }
+    const destroy = layer.destroy;
+    layer.destroy = () => {
+        observer?.disconnect();
+        if (frame !== 0)
+            win?.cancelAnimationFrame(frame);
+        destroy();
+    };
+    layer.repaint();
+    if (prefetchCrowd)
+        prefetch(win, spec.crowd);
+    return layer;
+}

package/dist/outside.js

@@ -0,0 +1,227 @@
+// The crowd outside a district's venues: people standing where people may stand (`walk.ts`: sidewalks, plazas, parks, platforms and the venues' own ground, never a carriageway, a railway, water or a building), at 0, 25, 50, 75
+// or 100 percent of the venues' seats. One ordered list of people: a level is a prefix of it, so that moving the level up only adds people and moving it down only takes some away, and the same options always give the same
+// list (a seeded generator, integer arithmetic and no clock). The crowd is thickest by the venues and thins with distance, never more than `OUTSIDE_DENSITY` people to a square metre. Pure: a plan in, typed arrays out; `outside.paint.ts`
+// turns them into pixels and `outside.dom.ts` puts the pixels on a page. Roads are never drawn: the crowd's shape is what shows them.
+import { districtMember, turnBy } from "./district.js";
+import { FEET_PER_METRE } from "./geometry.js";
+import { metresFrom } from "./venues.geo.js";
+import { WALK_DATA } from "./walk.data.js";
+import { WALK_IDS, walkIdFor, walkMask } from "./walk.js";
+import { OUTSIDE_LEVELS, outsideCount } from "./outside.paint.js";
+export { OUTSIDE_LEVELS, outsideCount };
+/** The most people to a square metre of walkable ground in the list at 100 percent: a crowd standing close, short of a crush. */
+export const OUTSIDE_DENSITY = 3;
+/** The distance from a venue's building at which the crowd has thinned to half what it is at the wall, in metres. */
+export const OUTSIDE_REACH = 60;
+/** Whether a number is one of the levels. */
+export const isOutsideLevel = (level) => OUTSIDE_LEVELS.includes(level);
+/** The level an options object asks for: 0 when it asks for none. Throws for a level that is not one of `OUTSIDE_LEVELS`. */
+export function outsideLevelOf(options) {
+    const level = options?.outside?.level;
+    if (level === undefined)
+        return 0;
+    if (!isOutsideLevel(level))
+        throw new Error(`outside level ${String(level)}: the levels are ${OUTSIDE_LEVELS.join(", ")}`);
+    return level;
+}
+/** A small, fast generator of numbers in [0, 1) from a whole seed (mulberry32): only integer arithmetic, so it gives the same numbers in every engine. */
+export function seeded(seed) {
+    let a = seed >>> 0;
+    return () => {
+        a = (a + 0x6d2b79f5) >>> 0;
+        let t = a;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+const seedOf = (text) => {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < text.length; i += 1)
+        h = Math.imul(h ^ text.charCodeAt(i), 0x01000193);
+    return h >>> 0;
+};
+/** The distance from a point to a ring's outline, in metres. */
+function edgeDistance(ring, x, y) {
+    let best = Infinity;
+    for (let i = 0, j = ring.length - 1; i < ring.length; j = i, i += 1) {
+        const [ax, ay] = ring[j];
+        const [dx, dy] = [ring[i][0] - ax, ring[i][1] - ay];
+        const len2 = dx * dx + dy * dy;
+        const t = len2 < 1e-12 ? 0 : Math.max(0, Math.min(1, ((x - ax) * dx + (y - ay) * dy) / len2));
+        const [ex, ey] = [x - ax - t * dx, y - ay - t * dy];
+        best = Math.min(best, ex * ex + ey * ey);
+    }
+    return Math.sqrt(best);
+}
+/** The side of a block of cells a crowd's weight is worked out for, in cells. */
+const BLOCK = 8;
+const populations = new Map();
+/**
+ * The people of every venue on a mask: for each venue in turn, its seats' worth, placed on the cells nobody has filled, thick by its building and thinning with the distance (a weight 1 / (1 + (d / reach)^2), scaled until the
+ * seats are placed without a cell going past the density), then every venue's people mixed in one list so that any prefix is a random share of each. A venue the ground cannot hold has `placed` below `seats`.
+ */
+function populate(mask, wanted, id) {
+    const { cell, width, height, cells } = mask;
+    const perCell = OUTSIDE_DENSITY * cell * cell;
+    const room = new Float32Array(width * height);
+    const standing = [];
+    for (let i = 0; i < cells.length; i += 1)
+        if (cells[i] === 1) {
+            room[i] = perCell;
+            standing.push(i);
+        }
+    const bw = Math.ceil(width / BLOCK);
+    // The blocks with any ground to stand on: the only ones a weight is worked out for.
+    const used = new Uint8Array(bw * Math.ceil(height / BLOCK));
+    for (const i of standing)
+        used[Math.floor(Math.floor(i / width) / BLOCK) * bw + Math.floor((i % width) / BLOCK)] = 1;
+    const lists = [];
+    const venues = [];
+    for (const venue of wanted) {
+        // The weight of each block: a function of the distance of its middle from the venue's building.
+        const weight = new Float32Array(bw * Math.ceil(height / BLOCK));
+        for (let br = 0; br < Math.ceil(height / BLOCK); br += 1) {
+            for (let bc = 0; bc < bw; bc += 1) {
+                if (!used[br * bw + bc])
+                    continue;
+                const d = edgeDistance(venue.ring, mask.x0 + (bc + 0.5) * BLOCK * cell, mask.y0 + (br + 0.5) * BLOCK * cell);
+                weight[br * bw + bc] = 1 / (1 + (d / OUTSIDE_REACH) ** 2);
+            }
+        }
+        const w = new Float32Array(standing.length);
+        standing.forEach((i, k) => {
+            w[k] = weight[Math.floor(Math.floor(i / width) / BLOCK) * bw + Math.floor((i % width) / BLOCK)];
+        });
+        // The scale that places the seats (and a little over, which the shuffle's cut takes off again): found by bisection on the sum of what each cell takes.
+        const target = venue.seats * 1.02;
+        const taken = (lambda) => {
+            let sum = 0;
+            for (let k = 0; k < standing.length; k += 1)
+                sum += Math.min(room[standing[k]], lambda * w[k]);
+            return sum;
+        };
+        let [lo, hi] = [0, 200];
+        if (taken(hi) < target)
+            lo = hi;
+        else
+            for (let n = 0; n < 24; n += 1) {
+                const mid = (lo + hi) / 2;
+                if (taken(mid) < target)
+                    lo = mid;
+                else
+                    hi = mid;
+            }
+        const lambda = taken(hi) < target ? hi : (lo + hi) / 2;
+        const random = seeded(seedOf(`${id}|${venue.key}`));
+        const px = [];
+        const py = [];
+        for (let k = 0; k < standing.length; k += 1) {
+            const i = standing[k];
+            const want = Math.min(room[i], lambda * w[k]);
+            const n = Math.floor(want + random());
+            if (n === 0)
+                continue;
+            room[i] = Math.max(0, room[i] - n);
+            const [col, row] = [i % width, Math.floor(i / width)];
+            for (let m = 0; m < n; m += 1) {
+                // Inside the middle of the cell, so that a person is never on its edge.
+                px.push(mask.x0 + (col + 0.15 + 0.7 * random()) * cell);
+                py.push(mask.y0 + (row + 0.15 + 0.7 * random()) * cell);
+            }
+        }
+        // A random order, so that any prefix is a random share of the venue's people; the cut at the seats takes off the few over.
+        for (let i = px.length - 1; i > 0; i -= 1) {
+            const j = Math.floor(random() * (i + 1));
+            [px[i], px[j]] = [px[j], px[i]];
+            [py[i], py[j]] = [py[j], py[i]];
+        }
+        const placed = Math.min(venue.seats, px.length);
+        lists.push({ x: px.slice(0, placed), y: py.slice(0, placed) });
+        venues.push({ key: venue.key, seats: venue.seats, placed });
+    }
+    // The venues mixed in one list: the next person is the venue's whose share is the smallest so far.
+    const total = lists.reduce((s, l) => s + l.x.length, 0);
+    const x = new Float32Array(total);
+    const y = new Float32Array(total);
+    const venue = new Uint8Array(total);
+    const given = new Array(lists.length).fill(0);
+    for (let k = 0; k < total; k += 1) {
+        let pick = -1;
+        lists.forEach((l, v) => {
+            if (given[v] >= l.x.length)
+                return;
+            if (pick < 0 || given[v] * lists[pick].x.length < given[pick] * l.x.length)
+                pick = v;
+        });
+        x[k] = lists[pick].x[given[pick]];
+        y[k] = lists[pick].y[given[pick]];
+        venue[k] = pick;
+        given[pick] += 1;
+    }
+    return { venues, x, y, venue, count: total };
+}
+/** The mask a plan's venues stand on, if there is one: the first mask that names one of its venues. */
+export const maskIdOf = (plan) => walkIdFor(plan.members.map((m) => m.member.id));
+/** Whether a plan has a crowd to show: some venue of it stands on a mask. */
+export const hasOutside = (plan) => maskIdOf(plan) !== undefined;
+/** The ids of the venues there is a walkable mask round. */
+export const OUTSIDE_VENUES = Object.freeze([...new Set(WALK_IDS.flatMap((id) => WALK_DATA[id].venues.map((key) => key.split(":")[0])))]);
+const placedCache = new WeakMap();
+/**
+ * The crowd outside a plan's venues, in the plan's frame: the people of every venue of the plan that stands on a mask (each with its seats as the plan has them), worked out once and kept. `undefined` where no venue of the plan
+ * has a mask. The crowd is the same list whatever level is shown: `outsideCount` says how many of its first people stand at a level.
+ * @example
+ * ```ts
+ * import { planDistrict } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * import { outsideCount, outsideCrowd } from "@johnmorrisdotca/kyogijo-stadiums/district";
+ * const crowd = outsideCrowd(planDistrict({ venues: ["bc-place", "rogers-arena"] }))!;
+ * console.log(crowd.venues.map((v) => `${v.key} ${v.placed}`).join(", "), outsideCount(crowd, 50));
+ * // bc-place:cfl 54500, rogers-arena 18871 36686
+ * ```
+ */
+export function outsideCrowd(plan) {
+    const cached = placedCache.get(plan);
+    if (cached !== undefined)
+        return cached ?? undefined;
+    const maskId = maskIdOf(plan);
+    if (maskId === undefined) {
+        placedCache.set(plan, null);
+        return undefined;
+    }
+    const data = WALK_DATA[maskId];
+    const ids = data.venues.map((key) => key.split(":")[0]);
+    const present = ids.map((id) => plan.members.find((m) => m.member.id === id)).filter((m) => m !== undefined);
+    const extras = { buildings: data.venues.map((key) => metresFrom(data.origin, districtMember(key).ring)), apron: 5 };
+    const mask = walkMask(maskId, extras);
+    const wanted = present.map((m) => ({ key: m.member.key, seats: m.member.seats, ring: extras.buildings[ids.indexOf(m.member.id)] }));
+    const kept = `${maskId}|${wanted.map((w) => `${w.key}:${w.seats}`).join(",")}`;
+    let population = populations.get(kept);
+    if (population === undefined) {
+        population = populate(mask, wanted, maskId);
+        populations.set(kept, population);
+    }
+    // Into the plan's frame: the mask's metres from its origin, to the plan's origin, to feet with the page's y going down, turned with the map.
+    const [shiftX, shiftY] = metresFrom(plan.origin, [data.origin])[0];
+    const x = new Float32Array(population.count);
+    const y = new Float32Array(population.count);
+    for (let i = 0; i < population.count; i += 1) {
+        const [px, py] = turnBy([(shiftX + population.x[i]) * FEET_PER_METRE, -(shiftY + population.y[i]) * FEET_PER_METRE], plan.turn);
+        x[i] = px;
+        y[i] = py;
+    }
+    const crowd = { mask: maskId, venues: population.venues, x, y, venue: population.venue, count: population.count };
+    placedCache.set(plan, crowd);
+    return crowd;
+}
+/** Whether a point of the plan's frame (feet) is on the mask's walkable ground: the inverse of what `outsideCrowd` does to a person, for a test to hold the crowd to the mask. */
+export function standsOnWalkable(plan, maskId, [fx, fy]) {
+    const data = WALK_DATA[maskId];
+    const [shiftX, shiftY] = metresFrom(plan.origin, [data.origin])[0];
+    const [ux, uy] = turnBy([fx, fy], -plan.turn);
+    const mask = walkMask(maskId, { buildings: data.venues.map((key) => metresFrom(data.origin, districtMember(key).ring)), apron: 5 });
+    const [mx, my] = [ux / FEET_PER_METRE - shiftX, -uy / FEET_PER_METRE - shiftY];
+    const col = Math.floor((mx - mask.x0) / mask.cell);
+    const row = Math.floor((my - mask.y0) / mask.cell);
+    return col >= 0 && row >= 0 && col < mask.width && row < mask.height && mask.cells[row * mask.width + col] === 1;
+}

package/dist/outside.paint.d.ts

@@ -0,0 +1,57 @@
+/** The crowds outside there are: a share of the venues' seats, in percent. */
+export declare const OUTSIDE_LEVELS: readonly [0, 25, 50, 75, 100];
+export type OutsideLevel = (typeof OUTSIDE_LEVELS)[number];
+/** The people of one district, in the plan's frame: where each stands (feet, as the plan's drawing has them), which venue's crowd it is, and how many the venues' seats asked for and the walkable ground could hold. */
+export interface OutsideCrowd {
+    /** The mask the crowd stands on. */
+    mask: string;
+    venues: {
+        key: string;
+        seats: number;
+        placed: number;
+    }[];
+    /** The people, in order: venues interleaved, so that a prefix holds each venue's share. */
+    x: Float32Array;
+    y: Float32Array;
+    /** The index in `venues` of each person's venue. */
+    venue: Uint8Array;
+    /** How many people the list holds. */
+    count: number;
+}
+/** How many people of the list stand outside at a level: the list is ordered, so these are its first. */
+export declare const outsideCount: (crowd: Pick<OutsideCrowd, "count">, level: OutsideLevel) => number;
+/** A person's width in metres. */
+export declare const PERSON_METRES = 0.55;
+/** Where the crowd's pixels lie: a buffer `width` by `height`, with `(x0, y0)` the plan's feet at its top left corner and `scale` its pixels to a foot. */
+export interface OutsideFrame {
+    width: number;
+    height: number;
+    x0: number;
+    y0: number;
+    scale: number;
+}
+/** A person is drawn as a disc where they are wider than this many pixels, and as one pixel of density where they are not. */
+export declare const DOTS_FROM = 1.2;
+/** What painting a level cost and drew: for the docs and the tests to quote. */
+export interface OutsideStats {
+    people: number;
+    /** `dots` when a person is wider than a pixel and a fifth, else `density`. */
+    mode: "dots" | "density";
+    /** Pixels stamped, counting each time a person lands on one. */
+    stamps: number;
+}
+/**
+ * The people of a crowd at a level (its first `outsideCount`) as RGBA bytes in a frame, in one colour with the alpha that says how many stand on each pixel. `ink` is `[red, green, blue]`.
+ * It gives the bytes and what it drew.
+ */
+export declare function rasterOutside(crowd: OutsideCrowd, level: OutsideLevel, frame: OutsideFrame, ink: readonly [number, number, number]): {
+    rgba: Uint8ClampedArray;
+    stats: OutsideStats;
+};
+/** The frame of a buffer that covers a view box of the plan (feet) in `width` pixels, as high as the box's shape makes it. */
+export declare function frameOf(view: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}, width: number): OutsideFrame;

package/dist/outside.paint.js

@@ -0,0 +1,88 @@
+// The crowd outside as pixels: every person of a level's prefix stamped into one buffer, as a typed array and a loop, never an element, a path or a call to the canvas per person. Pure (no page, no canvas): a crowd and a frame in,
+// RGBA bytes out, so that the same bytes come out in Node and in a browser, and a test can hold them to a budget. A person is 0.55 metres across; where that is under a pixel and a fifth (a district seen whole) a person is one
+// pixel and the crowd reads as density, where it is more (a venue seen near) each is a small disc. Nothing animates: a crowd is painted when its level, its size or its colour changes, not when the view turns.
+import { FEET_PER_METRE } from "./geometry.js";
+/** The crowds outside there are: a share of the venues' seats, in percent. */
+export const OUTSIDE_LEVELS = [0, 25, 50, 75, 100];
+/** How many people of the list stand outside at a level: the list is ordered, so these are its first. */
+export const outsideCount = (crowd, level) => Math.round((crowd.count * level) / 100);
+/** A person's width in metres. */
+export const PERSON_METRES = 0.55;
+/** A person is drawn as a disc where they are wider than this many pixels, and as one pixel of density where they are not. */
+export const DOTS_FROM = 1.2;
+/** The disc a person is, as offsets from its pixel, by radius in pixels (0 is the pixel itself). */
+const DISCS = new Map();
+function discOf(radius) {
+    const kept = DISCS.get(radius);
+    if (kept !== undefined)
+        return kept;
+    const offsets = [];
+    for (let dy = -radius; dy <= radius; dy += 1)
+        for (let dx = -radius; dx <= radius; dx += 1)
+            if (dx * dx + dy * dy <= radius * radius + radius * 0.5)
+                offsets.push(dx, dy);
+    const disc = Int16Array.from(offsets);
+    DISCS.set(radius, disc);
+    return disc;
+}
+/**
+ * The people of a crowd at a level (its first `outsideCount`) as RGBA bytes in a frame, in one colour with the alpha that says how many stand on each pixel. `ink` is `[red, green, blue]`.
+ * It gives the bytes and what it drew.
+ */
+export function rasterOutside(crowd, level, frame, ink) {
+    const { width, height, x0, y0, scale } = frame;
+    const people = outsideCount(crowd, level);
+    const rgba = new Uint8ClampedArray(width * height * 4);
+    const metresPerPixel = 1 / (scale * FEET_PER_METRE);
+    const across = PERSON_METRES / metresPerPixel;
+    const dots = across > DOTS_FROM;
+    const radius = dots ? Math.min(8, Math.max(1, Math.round(across / 2))) : 0;
+    const disc = discOf(radius);
+    const cover = new Uint8Array(width * height);
+    let stamps = 0;
+    for (let i = 0; i < people; i += 1) {
+        const px = Math.floor((crowd.x[i] - x0) * scale);
+        const py = Math.floor((crowd.y[i] - y0) * scale);
+        if (radius === 0) {
+            if (px >= 0 && py >= 0 && px < width && py < height) {
+                const at = py * width + px;
+                if (cover[at] < 255)
+                    cover[at] += 1;
+                stamps += 1;
+            }
+            continue;
+        }
+        for (let k = 0; k < disc.length; k += 2) {
+            const [sx, sy] = [px + disc[k], py + disc[k + 1]];
+            if (sx < 0 || sy < 0 || sx >= width || sy >= height)
+                continue;
+            const at = sy * width + sx;
+            if (cover[at] < 255)
+                cover[at] += 1;
+            stamps += 1;
+        }
+    }
+    // The alpha of a pixel with n people on it: one person covers `first` of it, and each more covers the rest by that share again, so that a dense crowd saturates and a sparse one stays light.
+    const area = metresPerPixel * metresPerPixel;
+    const first = dots ? 0.82 : Math.min(0.7, Math.max(0.16, (Math.PI / 4) * PERSON_METRES * PERSON_METRES / area));
+    const alpha = new Uint8Array(256);
+    for (let n = 1; n < 256; n += 1)
+        alpha[n] = Math.round(255 * (1 - (1 - first) ** n));
+    const [r, g, b] = ink;
+    for (let at = 0; at < cover.length; at += 1) {
+        const n = cover[at];
+        if (n === 0)
+            continue;
+        const o = at * 4;
+        rgba[o] = r;
+        rgba[o + 1] = g;
+        rgba[o + 2] = b;
+        rgba[o + 3] = alpha[n];
+    }
+    return { rgba, stats: { people, mode: dots ? "dots" : "density", stamps } };
+}
+/** The frame of a buffer that covers a view box of the plan (feet) in `width` pixels, as high as the box's shape makes it. */
+export function frameOf(view, width) {
+    const scale = width / view.w;
+    return { width: Math.round(width), height: Math.max(1, Math.round(view.h * scale)), x0: view.x, y0: view.y, scale };
+}

package/dist/plateau-entry.d.ts

@@ -0,0 +1,3 @@
+export { PLATEAU_ATTRIBUTION, PLATEAU_AREAS, TOKYO_DOME_CITY } from "./plateau.data.ts";
+export { CONTEXT_BLOCKS, CONTEXT_LANDMARK, CONTEXT_LANDMARK_REACH, CONTEXT_REACH, CONTEXT_TONES, decodeBuilding } from "./context.ts";
+export type { ContextArea } from "./context.ts";