@fusion.dev/helix-graph 0.122.0 → 0.124.0

package/dist/overlay/overlay.js

@@ -2,68 +2,111 @@ import { mixRgb } from '../connect-graph/looks.js';
 const SPEED = 340;
 const QUICKEST = 450;
 const SLOWEST = 1400;
-const ARRIVAL = 380;
+const ARRIVAL = 520;
 const FLYING = 400;
 const withAlpha = (color, alpha) => {
     const [red = 128, green = 128, blue = 128] = color.match(/[\d.]+/g)?.map(Number) ?? [];
     return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 };
-const TAIL = 110;
-const pulse = (context, leaves, arrives, from, to, along, through, glowing) => {
-    const strength = glowing ? 1.3 : 1;
+const TAIL = 120;
+const PIECES = 14;
+const BOW = 0.16;
+const BOW_MOST = 90;
+const SPARK = 0.22;
+const on = (a, c, b, t) => {
+    const u = 1 - t;
+    return {
+        x: u * u * a.x + 2 * u * t * c.x + t * t * b.x,
+        y: u * u * a.y + 2 * u * t * c.y + t * t * b.y,
+    };
+};
+const bowed = (from, to) => {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const length = Math.hypot(dx, dy) || 1;
+    const bow = Math.min(length * BOW, BOW_MOST) * 2;
+    return {
+        x: (from.x + to.x) / 2 - (dy / length) * bow,
+        y: (from.y + to.y) / 2 + (dx / length) * bow,
+    };
+};
+const bounded = (from, to, toward) => {
+    const middle = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+    const far = Math.hypot(toward.x - middle.x, toward.y - middle.y);
+    const most = Math.max(Math.hypot(to.x - from.x, to.y - from.y) * 0.9, 12);
+    if (far <= most) {
+        return toward;
+    }
+    return {
+        x: middle.x + ((toward.x - middle.x) * most) / far,
+        y: middle.y + ((toward.y - middle.y) * most) / far,
+    };
+};
+const trace = (context, a, c, b) => {
+    context.beginPath();
+    context.moveTo(a.x, a.y);
+    context.quadraticCurveTo(c.x, c.y, b.x, b.y);
+};
+const comet = (context, leaves, arrives, from, bend, to, along, through, glowing) => {
+    const strength = glowing ? 1.25 : 1;
+    const length = Math.hypot(bend.x - from.x, bend.y - from.y) + Math.hypot(to.x - bend.x, to.y - bend.y) || 1;
     const color = mixRgb(leaves, arrives, along);
-    const length = Math.hypot(to.x - from.x, to.y - from.y) || 1;
-    const head = { x: from.x + (to.x - from.x) * along, y: from.y + (to.y - from.y) * along };
-    const behind = Math.max(along - TAIL / length, 0);
-    const tail = { x: from.x + (to.x - from.x) * behind, y: from.y + (to.y - from.y) * behind };
     context.lineCap = 'round';
-    context.globalAlpha = 0.14 * Math.sin(Math.PI * through);
     const line = context.createLinearGradient(from.x, from.y, to.x, to.y);
-    line.addColorStop(0, leaves);
-    line.addColorStop(1, arrives);
+    line.addColorStop(0, withAlpha(leaves, 0.16 * Math.sin(Math.PI * through)));
+    line.addColorStop(1, withAlpha(arrives, 0.16 * Math.sin(Math.PI * through)));
     context.strokeStyle = line;
     context.lineWidth = 1;
-    context.beginPath();
-    context.moveTo(from.x, from.y);
-    context.lineTo(to.x, to.y);
-    context.stroke();
-    const fade = context.createLinearGradient(tail.x, tail.y, head.x, head.y);
-    const back = mixRgb(leaves, arrives, behind);
-    fade.addColorStop(0, withAlpha(back, 0));
-    fade.addColorStop(0.6, withAlpha(mixRgb(back, color, 0.6), 0.25));
-    fade.addColorStop(1, withAlpha(color, 0.95));
-    context.strokeStyle = fade;
-    context.shadowColor = color;
-    context.shadowBlur = 8;
-    context.globalAlpha = Math.min(0.35 * strength, 1);
-    context.lineWidth = 3.5;
-    context.beginPath();
-    context.moveTo(tail.x, tail.y);
-    context.lineTo(head.x, head.y);
-    context.stroke();
-    context.shadowBlur = 0;
-    context.globalAlpha = 1;
-    context.lineWidth = 1.4 * strength;
+    trace(context, from, bend, to);
     context.stroke();
-    const reach = 5 * strength;
-    const light = context.createRadialGradient(head.x, head.y, 0, head.x, head.y, reach);
-    light.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
-    light.addColorStop(0.4, withAlpha(color, 0.75));
+    const reach = Math.min(TAIL / length, along);
+    context.lineCap = 'butt';
+    let behind = on(from, bend, to, along - reach);
+    for (let piece = 1; piece <= PIECES; piece++) {
+        const share = piece / PIECES;
+        const t = along - reach * (1 - share);
+        const ahead = on(from, bend, to, t);
+        context.strokeStyle = withAlpha(mixRgb(leaves, arrives, t), (glowing ? 0.85 : 1) * share * share);
+        context.lineWidth = (0.4 + 2.2 * share) * strength;
+        context.beginPath();
+        context.moveTo(behind.x, behind.y);
+        context.lineTo(ahead.x, ahead.y);
+        context.stroke();
+        behind = ahead;
+    }
+    const head = on(from, bend, to, along);
+    const bloom = 9 * strength;
+    const light = context.createRadialGradient(head.x, head.y, 0, head.x, head.y, bloom);
+    light.addColorStop(0, glowing ? 'rgba(255, 255, 255, 0.95)' : withAlpha(color, 1));
+    light.addColorStop(0.18, glowing ? withAlpha(mixRgb(color, 'rgb(255, 255, 255)', 0.5), 0.9) : withAlpha(color, 0.85));
+    light.addColorStop(0.45, withAlpha(color, 0.35));
     light.addColorStop(1, withAlpha(color, 0));
     context.fillStyle = light;
     context.beginPath();
-    context.arc(head.x, head.y, reach, 0, Math.PI * 2);
+    context.arc(head.x, head.y, bloom, 0, Math.PI * 2);
     context.fill();
 };
+const spark = (context, color, at, gone) => {
+    context.strokeStyle = withAlpha(color, 0.6 * (1 - gone) ** 2);
+    context.lineWidth = 1.2;
+    context.beginPath();
+    context.arc(at.x, at.y, at.radius + 2 + 8 * ease(gone), 0, Math.PI * 2);
+    context.stroke();
+};
 const arrive = (context, color, at, gone) => {
-    const reach = at.radius + 6;
+    const reach = at.radius + 7;
     const glow = context.createRadialGradient(at.x, at.y, at.radius * 0.4, at.x, at.y, reach);
-    glow.addColorStop(0, withAlpha(color, 0.5 * (1 - gone) ** 2));
+    glow.addColorStop(0, withAlpha(color, 0.55 * (1 - gone) ** 2));
     glow.addColorStop(1, withAlpha(color, 0));
     context.fillStyle = glow;
     context.beginPath();
     context.arc(at.x, at.y, reach, 0, Math.PI * 2);
     context.fill();
+    context.strokeStyle = withAlpha(color, 0.7 * (1 - gone) ** 1.5);
+    context.lineWidth = 1.5 * (1 - gone) + 0.5;
+    context.beginPath();
+    context.arc(at.x, at.y, at.radius + 3 + 16 * ease(gone), 0, Math.PI * 2);
+    context.stroke();
 };
 export const isLight = (color) => {
     const [red = 0, green = 0, blue = 0] = color.match(/[\d.]+/g)?.map(Number) ?? [];
@@ -91,7 +134,7 @@ const nameGroups = (context, groups, looks, at) => {
                 points.push(point);
             }
         }
-        if (count < 2) {
+        if (count < Math.max(2, group.ids.length * 0.3)) {
             continue;
         }
         x /= count;
@@ -159,7 +202,7 @@ const fresh = (canvas, container) => {
     context.clearRect(0, 0, width, height);
     return context;
 };
-export const signalsOver = (container, onScreen) => {
+export const signalsOver = (container, onScreen, bend) => {
     let overlay;
     let flights = [];
     let flying = 0;
@@ -178,16 +221,20 @@ export const signalsOver = (container, onScreen) => {
             if (!from || !to) {
                 return false;
             }
-            flight.crossing ??= Math.min(Math.max((Math.hypot(to.x - from.x, to.y - from.y) / SPEED) * 1000, QUICKEST), SLOWEST);
+            flight.crossing ??= Math.min(Math.max(((Math.hypot(to.x - from.x, to.y - from.y) * 1.08) / SPEED) * 1000, QUICKEST), SLOWEST);
             const crossing = flight.crossing;
             const gone = (now - flight.started) / crossing;
             if (gone >= 1 + ARRIVAL / crossing) {
                 return false;
             }
+            const toward = bounded(from, to, bend?.(flight.from, flight.to) ?? bowed(from, to));
             context.save();
             if (gone < 1) {
                 if (flight.animate) {
-                    pulse(context, flight.leaves, flight.arrives, from, to, ease(gone), gone, glowing);
+                    comet(context, flight.leaves, flight.arrives, from, toward, to, ease(gone), gone, glowing);
+                    if (gone < SPARK) {
+                        spark(context, flight.leaves, from, gone / SPARK);
+                    }
                 }
                 else {
                     const line = context.createLinearGradient(from.x, from.y, to.x, to.y);
@@ -196,9 +243,7 @@ export const signalsOver = (container, onScreen) => {
                     context.globalAlpha = 1 - gone;
                     context.strokeStyle = line;
                     context.lineWidth = 2;
-                    context.beginPath();
-                    context.moveTo(from.x, from.y);
-                    context.lineTo(to.x, to.y);
+                    trace(context, from, toward, to);
                     context.stroke();
                 }
             }

package/dist/shapes/flat.d.ts

@@ -0,0 +1,28 @@
+import { type ShapeField } from '../connect-graph/shape-field.js';
+/**
+ * A flat field from an SVG: an `<svg>` element, or its markup. Its box is
+ * its `viewBox`, and its shape every path, rectangle, circle, ellipse and
+ * polygon in it, together, their holes cut by the even-odd rule.
+ *
+ * Transforms on the shapes are not read: draw the outline in the `viewBox`'s
+ * own units, as an exported icon or logo is.
+ */
+export declare const shapeFromSvg: (svg: SVGSVGElement | string, resolution?: number) => ShapeField;
+/** How an image is read as a shape. */
+export interface ImageOptions {
+    /** How opaque a pixel is to be inside, from 0 to 1. 0.5 by default. */
+    threshold?: number | undefined;
+    /** How many cells the field has along the image's longer side. 512 by default. */
+    resolution?: number | undefined;
+}
+/**
+ * A flat field from an image's opaque pixels: a logo, a silhouette, or a
+ * mask drawn for the purpose. Its box is the image's size in pixels.
+ *
+ * An image from another site is read only where that site allows it, as a
+ * canvas reads any image.
+ */
+export declare const shapeFromImage: (image: CanvasImageSource & {
+    height: number | SVGAnimatedLength;
+    width: number | SVGAnimatedLength;
+}, { resolution, threshold }?: ImageOptions) => ShapeField;

package/dist/shapes/flat.js

@@ -0,0 +1,63 @@
+import { FLAT, fieldFromCells, fieldFromPath, } from '../connect-graph/shape-field.js';
+const pathOf = (element) => {
+    const number = (name) => Number(element.getAttribute(name) ?? 0);
+    switch (element.localName) {
+        case 'path':
+            return element.getAttribute('d') ?? '';
+        case 'rect': {
+            const [x, y, width, height] = [number('x'), number('y'), number('width'), number('height')];
+            return `M${x} ${y}h${width}v${height}h${-width}Z`;
+        }
+        case 'circle':
+        case 'ellipse': {
+            const [cx, cy] = [number('cx'), number('cy')];
+            const rx = element.localName === 'circle' ? number('r') : number('rx');
+            const ry = element.localName === 'circle' ? number('r') : number('ry');
+            return `M${cx - rx} ${cy}a${rx} ${ry} 0 1 0 ${rx * 2} 0a${rx} ${ry} 0 1 0 ${-rx * 2} 0Z`;
+        }
+        case 'polygon': {
+            const points = element.getAttribute('points')?.trim() ?? '';
+            return points ? `M${points}Z` : '';
+        }
+        default:
+            return '';
+    }
+};
+export const shapeFromSvg = (svg, resolution = FLAT) => {
+    const element = typeof svg === 'string'
+        ? new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement
+        : svg;
+    const [, , width = 0, height = 0] = (element.getAttribute('viewBox') ?? '')
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    const box = {
+        height: height || Number(element.getAttribute('height') ?? 0),
+        width: width || Number(element.getAttribute('width') ?? 0),
+    };
+    const path = [...element.querySelectorAll('path, rect, circle, ellipse, polygon')]
+        .map(pathOf)
+        .join(' ');
+    return fieldFromPath(path, box.width || 1, box.height || 1, resolution);
+};
+export const shapeFromImage = (image, { resolution = FLAT, threshold = 0.5 } = {}) => {
+    const size = (value) => typeof value === 'number' ? value : value.baseVal.value;
+    const width = Math.max(size(image.width), 1);
+    const height = Math.max(size(image.height), 1);
+    const cell = Math.max(width, height) / resolution;
+    const nx = Math.max(1, Math.ceil(width / cell));
+    const ny = Math.max(1, Math.ceil(height / cell));
+    const canvas = document.createElement('canvas');
+    canvas.width = nx;
+    canvas.height = ny;
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    const cells = new Uint8Array(nx * ny);
+    if (context) {
+        context.drawImage(image, 0, 0, nx, ny);
+        const alpha = context.getImageData(0, 0, nx, ny).data;
+        for (let at = 0; at < cells.length; at++) {
+            cells[at] = (alpha[at * 4 + 3] ?? 0) / 255 >= threshold ? 1 : 0;
+        }
+    }
+    return fieldFromCells(cells, [nx, ny, 1], cell, { depth: 0, height, width });
+};

package/dist/shapes/index.d.ts

@@ -1 +1,6 @@
 export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, type ShapeField, } from '../connect-graph/shape-field.js';
+export { surfaceOf } from '../three/surface.js';
+export { type ImageOptions, shapeFromImage, shapeFromSvg } from './flat.js';
+export { shapeFromModel } from './model.js';
+export { box, onSphere, sphere, torus } from './solids.js';
+export { shapeFromTriangles, type TriangleOptions } from './triangles.js';

package/dist/shapes/index.js

@@ -1 +1,6 @@
 export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, } from '../connect-graph/shape-field.js';
+export { surfaceOf } from '../three/surface.js';
+export { shapeFromImage, shapeFromSvg } from './flat.js';
+export { shapeFromModel } from './model.js';
+export { box, onSphere, sphere, torus } from './solids.js';
+export { shapeFromTriangles } from './triangles.js';

package/dist/shapes/model.d.ts

@@ -0,0 +1,12 @@
+import type { ShapeField } from '../connect-graph/shape-field.js';
+import { type TriangleOptions } from './triangles.js';
+/**
+ * A solid field from a glTF model, the web's standard format for one: a
+ * URL to a `.glb` or `.gltf` file, or the file's bytes. Every mesh in it is
+ * read, placed as the model places it.
+ *
+ * **three.js reads the file**, imported when this is first called, so a page
+ * that draws no model never downloads a loader. It is an optional peer of
+ * this package.
+ */
+export declare const shapeFromModel: (source: string | ArrayBuffer, options?: TriangleOptions) => Promise<ShapeField>;

package/dist/shapes/model.js

@@ -0,0 +1,31 @@
+import { shapeFromTriangles } from './triangles.js';
+export const shapeFromModel = async (source, options = {}) => {
+    const [{ GLTFLoader }, { Mesh, Vector3 }] = await Promise.all([
+        import('three/addons/loaders/GLTFLoader.js'),
+        import('three'),
+    ]);
+    const loader = new GLTFLoader();
+    const model = typeof source === 'string'
+        ? await loader.loadAsync(source)
+        : await loader.parseAsync(source, '');
+    model.scene.updateMatrixWorld(true);
+    const corners = [];
+    const point = new Vector3();
+    model.scene.traverse((object) => {
+        if (!(object instanceof Mesh)) {
+            return;
+        }
+        const geometry = object.geometry;
+        const place = geometry.getAttribute('position');
+        if (!place) {
+            return;
+        }
+        const index = geometry.getIndex();
+        const count = index ? index.count : place.count;
+        for (let at = 0; at < count; at++) {
+            point.fromBufferAttribute(place, index ? index.getX(at) : at).applyMatrix4(object.matrixWorld);
+            corners.push(point.x, point.y, point.z);
+        }
+    });
+    return shapeFromTriangles(corners, null, options);
+};

package/dist/shapes/solids.d.ts

@@ -0,0 +1,28 @@
+import type { ShapeField } from '../connect-graph/shape-field.js';
+/** A ball `radius` across from its middle. */
+export declare const sphere: ({ radius }?: {
+    radius?: number;
+}) => ShapeField;
+/** A ring: `radius` from its middle to the middle of its tube, which is `tube` thick from its own middle out. */
+export declare const torus: ({ radius, tube, }?: {
+    radius?: number;
+    tube?: number;
+}) => ShapeField;
+/** A box `width` by `height` by `depth`, its edges rounded `round` in. */
+export declare const box: ({ depth, height, round, width, }?: {
+    depth?: number;
+    height?: number;
+    round?: number;
+    width?: number;
+}) => ShapeField;
+/**
+ * A flat shape wrapped round a ball, as a map of the world is round a globe:
+ * the flat shape's width is the way round and its height pole to pole, as an
+ * equirectangular map is drawn. The solid is a shell `thickness` deep at the
+ * ball's surface, wherever the flat shape is, so notes placed in it draw the
+ * map in three dimensions.
+ */
+export declare const onSphere: (flat: ShapeField, { radius, thickness }?: {
+    radius?: number;
+    thickness?: number;
+}) => ShapeField;

package/dist/shapes/solids.js

@@ -0,0 +1,47 @@
+export const sphere = ({ radius = 50 } = {}) => ({
+    depth: radius * 2,
+    distance: (x, y, z = radius) => Math.hypot(x - radius, y - radius, z - radius) - radius,
+    height: radius * 2,
+    width: radius * 2,
+});
+export const torus = ({ radius = 50, tube = 18, } = {}) => {
+    const reach = radius + tube;
+    return {
+        depth: tube * 2,
+        distance: (x, y, z = tube) => Math.hypot(Math.hypot(x - reach, y - reach) - radius, z - tube) - tube,
+        height: reach * 2,
+        width: reach * 2,
+    };
+};
+export const box = ({ depth = 100, height = 100, round = 0, width = 100, } = {}) => ({
+    depth,
+    distance: (x, y, z = depth / 2) => {
+        const qx = Math.abs(x - width / 2) - width / 2 + round;
+        const qy = Math.abs(y - height / 2) - height / 2 + round;
+        const qz = Math.abs(z - depth / 2) - depth / 2 + round;
+        return (Math.hypot(Math.max(qx, 0), Math.max(qy, 0), Math.max(qz, 0)) +
+            Math.min(Math.max(qx, qy, qz), 0) -
+            round);
+    },
+    height,
+    width,
+});
+export const onSphere = (flat, { radius = 50, thickness = radius * 0.08 } = {}) => {
+    const along = (Math.PI * 2 * radius) / Math.max(flat.width, 1e-9);
+    return {
+        depth: radius * 2,
+        distance: (x, y, z = radius) => {
+            const dx = x - radius;
+            const dy = y - radius;
+            const dz = z - radius;
+            const out = Math.hypot(dx, dy, dz);
+            const shell = Math.abs(out - (radius - thickness / 2)) - thickness / 2;
+            const longitude = Math.atan2(dx, dz);
+            const latitude = Math.acos(Math.min(Math.max(dy / (out || 1), -1), 1));
+            const map = flat.distance(((longitude + Math.PI) / (Math.PI * 2)) * flat.width, (latitude / Math.PI) * flat.height);
+            return Math.max(shell, map * along);
+        },
+        height: radius * 2,
+        width: radius * 2,
+    };
+};

package/dist/shapes/triangles.d.ts

@@ -0,0 +1,20 @@
+import { type ShapeField } from '../connect-graph/shape-field.js';
+/** How a solid is read from triangles. */
+export interface TriangleOptions {
+    /** How many cells the field has along the solid's longest side. 96 by default. */
+    resolution?: number | undefined;
+}
+/**
+ * A solid field from a closed surface of triangles: `positions` three
+ * numbers a corner, and `index` three corners a triangle, or every three
+ * corners in order where there is none. Its y points up, as a model's does,
+ * and its box is the surface's own bounds, a cell of room around them.
+ *
+ * **Read a column of cells at a time**: each triangle marks where it crosses
+ * the columns under it, and a cell is inside where an odd number of
+ * crossings lie in front of it. A model of a hundred thousand triangles is
+ * read in a moment, where testing each cell against each triangle would take
+ * minutes. A surface with gaps is read as closed where it can be, and a gap
+ * shows as a column filled or emptied through.
+ */
+export declare const shapeFromTriangles: (positions: ArrayLike<number>, index?: ArrayLike<number> | null | undefined, { resolution }?: TriangleOptions) => ShapeField;

package/dist/shapes/triangles.js

@@ -0,0 +1,92 @@
+import { fieldFromCells, SOLID } from '../connect-graph/shape-field.js';
+const NUDGE = 1e-6 * Math.PI;
+export const shapeFromTriangles = (positions, index, { resolution = SOLID } = {}) => {
+    const corners = Math.floor(positions.length / 3);
+    const low = [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY];
+    const high = [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY];
+    for (let at = 0; at < corners; at++) {
+        for (let axis = 0; axis < 3; axis++) {
+            const value = positions[at * 3 + axis];
+            low[axis] = Math.min(low[axis], value);
+            high[axis] = Math.max(high[axis], value);
+        }
+    }
+    if (corners === 0) {
+        return fieldFromCells(new Uint8Array(1), [1, 1, 1], 1, { depth: 1, height: 1, width: 1 });
+    }
+    const span = Math.max(high[0] - low[0], high[1] - low[1], high[2] - low[2], 1e-9);
+    const cell = span / Math.max(resolution - 2, 1);
+    const origin = low.map((value) => value - cell);
+    const nx = Math.ceil((high[0] - low[0]) / cell) + 2;
+    const ny = Math.ceil((high[1] - low[1]) / cell) + 2;
+    const nz = Math.ceil((high[2] - low[2]) / cell) + 2;
+    const crossings = Array.from({ length: nx * ny }, () => []);
+    const triangles = index ? Math.floor(index.length / 3) : Math.floor(corners / 3);
+    const corner = (triangle, which) => {
+        const at = index ? index[triangle * 3 + which] : triangle * 3 + which;
+        return [
+            (positions[at * 3] - origin[0]) / cell,
+            (high[1] + cell - positions[at * 3 + 1]) / cell,
+            (positions[at * 3 + 2] - origin[2]) / cell,
+        ];
+    };
+    for (let triangle = 0; triangle < triangles; triangle++) {
+        const [ax, ay, az] = corner(triangle, 0);
+        const [bx, by, bz] = corner(triangle, 1);
+        const [cx, cy, cz] = corner(triangle, 2);
+        const area = (bx - ax) * (cy - ay) - (cx - ax) * (by - ay);
+        if (Math.abs(area) < 1e-12) {
+            continue;
+        }
+        const left = Math.max(0, Math.ceil(Math.min(ax, bx, cx) - 0.5));
+        const right = Math.min(nx - 1, Math.floor(Math.max(ax, bx, cx) - 0.5));
+        const top = Math.max(0, Math.ceil(Math.min(ay, by, cy) - 0.5));
+        const bottom = Math.min(ny - 1, Math.floor(Math.max(ay, by, cy) - 0.5));
+        for (let row = top; row <= bottom; row++) {
+            for (let column = left; column <= right; column++) {
+                const px = column + 0.5 + NUDGE;
+                const py = row + 0.5 + NUDGE * Math.SQRT2;
+                const u = ((bx - px) * (cy - py) - (cx - px) * (by - py)) / area;
+                const v = ((cx - px) * (ay - py) - (ax - px) * (cy - py)) / area;
+                const w = 1 - u - v;
+                if (u < 0 || v < 0 || w < 0) {
+                    continue;
+                }
+                ;
+                crossings[row * nx + column].push(u * az + v * bz + w * cz);
+            }
+        }
+    }
+    const cells = new Uint8Array(nx * ny * nz);
+    for (let row = 0; row < ny; row++) {
+        for (let column = 0; column < nx; column++) {
+            const along = crossings[row * nx + column].sort((one, other) => one - other);
+            for (let pair = 0; pair + 1 < along.length; pair += 2) {
+                const from = Math.max(0, Math.ceil(along[pair] - 0.5));
+                const to = Math.min(nz - 1, Math.floor(along[pair + 1] - 0.5));
+                for (let layer = from; layer <= to; layer++) {
+                    cells[layer * nx * ny + row * nx + column] = 1;
+                }
+            }
+        }
+    }
+    const meshCorners = new Float32Array(corners * 3);
+    for (let at = 0; at < corners; at++) {
+        meshCorners[at * 3] = positions[at * 3] - origin[0];
+        meshCorners[at * 3 + 1] = high[1] + cell - positions[at * 3 + 1];
+        meshCorners[at * 3 + 2] = positions[at * 3 + 2] - origin[2];
+    }
+    const meshTriangles = index
+        ? Uint32Array.from({ length: triangles * 3 }, (_, at) => index[at])
+        : Uint32Array.from({ length: triangles * 3 }, (_, at) => at);
+    const field = fieldFromCells(cells, [nx, ny, nz], cell, {
+        depth: nz * cell,
+        height: ny * cell,
+        width: nx * cell,
+    });
+    return {
+        ...field,
+        distance: field.distance,
+        mesh: { corners: meshCorners, triangles: meshTriangles },
+    };
+};

package/dist/sigma/node-program.js

@@ -110,6 +110,11 @@ void main(void) {
     color = mix(color, vec3(1.0), rim * 0.14);
     alpha = 0.86;
   } else {
+    /* Flat, which unset is: matte, with a gentle fall of light across it so
+       a note reads as round, brighter toward its middle the larger it is
+       drawn, and a fine rim a shade darker so notes that touch stay two. */
+    color *= mix(0.82, 1.1, lit);
+    color = mix(color, min(color * 1.25, vec3(1.0)), (1.0 - smoothstep(0.0, 0.8, length(p - vec2(-0.25, 0.3)))) * 0.35 * drawn);
     color = mix(color, color * 0.72, rim * 0.6);
   }
 

package/dist/three/surface.d.ts

@@ -0,0 +1,18 @@
+import type { ShapeField } from '../connect-graph/shape-field.js';
+/**
+ * The surface of a solid field where its distance is `at`, as triangles:
+ * corners three numbers each in the field's box, and triangles three corners
+ * each. Surface nets: a corner in each cell the surface passes through, at
+ * the middle of where it crosses the cell's edges, and two triangles across
+ * each edge it crosses. Smooth enough to hide what is behind a shape, and
+ * made in a moment.
+ */
+export declare const surfaceOf: (field: ShapeField, { at, cells, }?: {
+    /** The distance the surface is drawn at: below zero inside the shape. 0 by default. */
+    at?: number | undefined;
+    /** How many cells the field is read in along its longest side. 72 by default. */
+    cells?: number | undefined;
+}) => {
+    corners: Float32Array;
+    triangles: Uint32Array;
+};