Wireframe, and fixes to mitering

scene/lobby.pr

@@ -35,7 +35,28 @@
     <scale <v 2.0 2.0 0.1>
      <box>>>>>>
 
-<sprite "house" []
+<sprite "t" []
+ <move <v -2.0 0.001 0.0>
+  <rotate <v 0.0 0.0 0.0>
+   <turtle [
+     90 U
+     90 L 0.05 B 90 R
+     PenDown 1 F 90 L 0.1 F 90 L 1 F 90 L 0.1 F DefinePen
+     Home
+     "double" SetSideOrientation
+     #t SetMiter
+     #f SetWireframe
+     90 L
+     PenDown
+     90 R 0 F
+     1 F 90 R 0 F
+     1 F 90 R 0 F
+     1 F 90 R 0 F
+     PenUp
+   ]>
+  >>>
+
+@<sprite "house" []
  <move <v 0.0 0.0 10.0>
   <rotate <v 0.0 0.0 0.0>
    <texture ["textures/oak-herringbone-5e80fb40b00c9-1200.jpg"]
@@ -82,13 +103,16 @@
 
       [ to [angle length] [ angle L [length F] draw ] saved ] to wall
 
+      #f SetWireframe
       #t SetMiter
       [ 0 F ] to miter
       [ 90 L miter ] to --
       [ 90 R miter ] to ++
 
       exteriorWall
+      --
       [
+        ++
         2.1 F --
         0.3 F [1 F] eDoor 0.9 F ++
         7.7 F ++

src/earcut.ts

@@ -0,0 +1,767 @@
+/*
+ISC License
+
+Copyright (c) 2016, Mapbox
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
+*/
+
+// Ported to TypeScript by Tony Garnock-Jones tonyg@leastfixedpoint.com, Feb 2023
+
+export function earcut(
+    data: ArrayLike<number>,
+    holeIndices?: ArrayLike<number>,
+    dim = 2,
+): number[] {
+    const hasHoles = holeIndices && holeIndices.length;
+    const outerLen = hasHoles ? holeIndices[0] * dim : data.length;
+    let outerNode = linkedList(data, 0, outerLen, dim, true);
+    const triangles: number[] = [];
+
+    if (!outerNode || outerNode.next === outerNode.prev) return triangles;
+
+    let minX: number = NaN;
+    let minY: number = NaN;
+    let invSize: number = NaN;
+
+    if (hasHoles) outerNode = eliminateHoles(data, holeIndices, outerNode, dim);
+
+    // if the shape is not too simple, we'll use z-order curve hash later; calculate polygon bbox
+    if (data.length > 80 * dim) {
+        let maxX = minX = data[0];
+        let maxY = minY = data[1];
+
+        for (var i = dim; i < outerLen; i += dim) {
+            const x = data[i];
+            const y = data[i + 1];
+            if (x < minX) minX = x;
+            if (y < minY) minY = y;
+            if (x > maxX) maxX = x;
+            if (y > maxY) maxY = y;
+        }
+
+        // minX, minY and invSize are later used to transform coords into integers for z-order calculation
+        invSize = Math.max(maxX - minX, maxY - minY);
+        invSize = invSize !== 0 ? 32767 / invSize : 0;
+    }
+
+    earcutLinked(outerNode, triangles, dim, minX, minY, invSize, 0);
+
+    return triangles;
+}
+
+// create a circular doubly linked list from polygon points in the specified winding order
+function linkedList(
+    data: ArrayLike<number>,
+    start: number,
+    end: number,
+    dim: number,
+    clockwise: boolean,
+): Node | null {
+    let last: Node | null = null;
+
+    if (clockwise === (signedArea(data, start, end, dim) > 0)) {
+        for (let i = start; i < end; i += dim) last = insertNode(i, data[i], data[i + 1], last);
+    } else {
+        for (let i = end - dim; i >= start; i -= dim) last = insertNode(i, data[i], data[i + 1], last);
+    }
+
+    if (last && equals(last, last.next)) {
+        removeNode(last);
+        last = last.next;
+    }
+
+    return last;
+}
+
+// eliminate colinear or duplicate points
+function filterPoints(start: Node, end?: Node): Node;
+function filterPoints(start?: Node | null, end?: Node | null): Node | null;
+function filterPoints(start?: Node | null, end?: Node | null): Node | null {
+    if (!start) return start ?? null;
+    if (!end) end = start;
+
+    var p: Node = start;
+    let again: boolean;
+    do {
+        again = false;
+
+        if (!p.steiner && (equals(p, p.next) || area(p.prev, p, p.next) === 0)) {
+            removeNode(p);
+            p = end = p.prev;
+            if (p === p.next) break;
+            again = true;
+
+        } else {
+            p = p.next;
+        }
+    } while (again || p !== end);
+
+    return end;
+}
+
+// main ear slicing loop which triangulates a polygon (given as a linked list)
+function earcutLinked(
+    ear0: Node | null,
+    triangles: number[],
+    dim: number,
+    minX: number,
+    minY: number,
+    invSize: number,
+    pass: number,
+): void {
+    if (!ear0) return;
+    let ear = ear0;
+
+    // interlink polygon nodes in z-order
+    if (!pass && invSize) indexCurve(ear, minX, minY, invSize);
+
+    let stop = ear;
+    let prev: Node;
+    let next: Node;
+
+    // iterate through ears, slicing them one by one
+    while (ear.prev !== ear.next) {
+        prev = ear.prev;
+        next = ear.next;
+
+        if (invSize ? isEarHashed(ear, minX, minY, invSize) : isEar(ear)) {
+            // cut off the triangle
+            triangles.push(prev.i / dim | 0);
+            triangles.push(ear.i / dim | 0);
+            triangles.push(next.i / dim | 0);
+
+            removeNode(ear);
+
+            // skipping the next vertex leads to less sliver triangles
+            ear = next.next;
+            stop = next.next;
+
+            continue;
+        }
+
+        ear = next;
+
+        // if we looped through the whole remaining polygon and can't find any more ears
+        if (ear === stop) {
+            // try filtering points and slicing again
+            if (!pass) {
+                earcutLinked(filterPoints(ear), triangles, dim, minX, minY, invSize, 1);
+
+            // if this didn't work, try curing all small self-intersections locally
+            } else if (pass === 1) {
+                ear = cureLocalIntersections(filterPoints(ear), triangles, dim);
+                earcutLinked(ear, triangles, dim, minX, minY, invSize, 2);
+
+            // as a last resort, try splitting the remaining polygon into two
+            } else if (pass === 2) {
+                splitEarcut(ear, triangles, dim, minX, minY, invSize);
+            }
+
+            break;
+        }
+    }
+}
+
+// check whether a polygon node forms a valid ear with adjacent nodes
+function isEar(ear: Node): boolean {
+    var a = ear.prev,
+        b = ear,
+        c = ear.next;
+
+    if (area(a, b, c) >= 0) return false; // reflex, can't be an ear
+
+    // now make sure we don't have other points inside the potential ear
+    var ax = a.x, bx = b.x, cx = c.x, ay = a.y, by = b.y, cy = c.y;
+
+    // triangle bbox; min & max are calculated like this for speed
+    var x0 = ax < bx ? (ax < cx ? ax : cx) : (bx < cx ? bx : cx),
+        y0 = ay < by ? (ay < cy ? ay : cy) : (by < cy ? by : cy),
+        x1 = ax > bx ? (ax > cx ? ax : cx) : (bx > cx ? bx : cx),
+        y1 = ay > by ? (ay > cy ? ay : cy) : (by > cy ? by : cy);
+
+    var p = c.next;
+    while (p !== a) {
+        if (p.x >= x0 && p.x <= x1 && p.y >= y0 && p.y <= y1 &&
+            pointInTriangle(ax, ay, bx, by, cx, cy, p.x, p.y) &&
+            area(p.prev, p, p.next) >= 0) return false;
+        p = p.next;
+    }
+
+    return true;
+}
+
+function isEarHashed(ear: Node, minX: number, minY: number, invSize: number): boolean {
+    var a = ear.prev,
+        b = ear,
+        c = ear.next;
+
+    if (area(a, b, c) >= 0) return false; // reflex, can't be an ear
+
+    var ax = a.x, bx = b.x, cx = c.x, ay = a.y, by = b.y, cy = c.y;
+
+    // triangle bbox; min & max are calculated like this for speed
+    var x0 = ax < bx ? (ax < cx ? ax : cx) : (bx < cx ? bx : cx),
+        y0 = ay < by ? (ay < cy ? ay : cy) : (by < cy ? by : cy),
+        x1 = ax > bx ? (ax > cx ? ax : cx) : (bx > cx ? bx : cx),
+        y1 = ay > by ? (ay > cy ? ay : cy) : (by > cy ? by : cy);
+
+    // z-order range for the current triangle bbox;
+    var minZ = zOrder(x0, y0, minX, minY, invSize),
+        maxZ = zOrder(x1, y1, minX, minY, invSize);
+
+    var p = ear.prevZ,
+        n = ear.nextZ;
+
+    // look for points inside the triangle in both directions
+    while (p && p.z >= minZ && n && n.z <= maxZ) {
+        if (p.x >= x0 && p.x <= x1 && p.y >= y0 && p.y <= y1 && p !== a && p !== c &&
+            pointInTriangle(ax, ay, bx, by, cx, cy, p.x, p.y) && area(p.prev, p, p.next) >= 0) return false;
+        p = p.prevZ;
+
+        if (n.x >= x0 && n.x <= x1 && n.y >= y0 && n.y <= y1 && n !== a && n !== c &&
+            pointInTriangle(ax, ay, bx, by, cx, cy, n.x, n.y) && area(n.prev, n, n.next) >= 0) return false;
+        n = n.nextZ;
+    }
+
+    // look for remaining points in decreasing z-order
+    while (p && p.z >= minZ) {
+        if (p.x >= x0 && p.x <= x1 && p.y >= y0 && p.y <= y1 && p !== a && p !== c &&
+            pointInTriangle(ax, ay, bx, by, cx, cy, p.x, p.y) && area(p.prev, p, p.next) >= 0) return false;
+        p = p.prevZ;
+    }
+
+    // look for remaining points in increasing z-order
+    while (n && n.z <= maxZ) {
+        if (n.x >= x0 && n.x <= x1 && n.y >= y0 && n.y <= y1 && n !== a && n !== c &&
+            pointInTriangle(ax, ay, bx, by, cx, cy, n.x, n.y) && area(n.prev, n, n.next) >= 0) return false;
+        n = n.nextZ;
+    }
+
+    return true;
+}
+
+// go through all polygon nodes and cure small local self-intersections
+function cureLocalIntersections(
+    start: Node,
+    triangles: number[],
+    dim: number,
+): Node {
+    let p = start;
+    do {
+        const a = p.prev;
+        const b = p.next.next;
+
+        if (!equals(a, b) && intersects(a, p, p.next, b) && locallyInside(a, b) && locallyInside(b, a)) {
+
+            triangles.push(a.i / dim | 0);
+            triangles.push(p.i / dim | 0);
+            triangles.push(b.i / dim | 0);
+
+            // remove two nodes involved
+            removeNode(p);
+            removeNode(p.next);
+
+            p = start = b;
+        }
+        p = p.next;
+    } while (p !== start);
+
+    return filterPoints(p);
+}
+
+// try splitting polygon into two and triangulate them independently
+function splitEarcut(
+    start: Node,
+    triangles: number[],
+    dim: number,
+    minX: number,
+    minY: number,
+    invSize: number,
+): void {
+    // look for a valid diagonal that divides the polygon into two
+    let a = start;
+    do {
+        let b = a.next.next;
+        while (b !== a.prev) {
+            if (a.i !== b.i && isValidDiagonal(a, b)) {
+                // split the polygon in two by the diagonal
+                let c = splitPolygon(a, b);
+
+                // filter colinear points around the cuts
+                a = filterPoints(a, a.next);
+                c = filterPoints(c, c.next);
+
+                // run earcut on each half
+                earcutLinked(a, triangles, dim, minX, minY, invSize, 0);
+                earcutLinked(c, triangles, dim, minX, minY, invSize, 0);
+                return;
+            }
+            b = b.next;
+        }
+        a = a.next;
+    } while (a !== start);
+}
+
+// link every hole into the outer loop, producing a single-ring polygon without holes
+function eliminateHoles(
+    data: ArrayLike<number>,
+    holeIndices: ArrayLike<number>,
+    outerNode: Node,
+    dim: number,
+): Node {
+    const queue: Node[] = [];
+    const len = holeIndices.length;
+
+    for (let i = 0; i < len; i++) {
+        const start = holeIndices[i] * dim;
+        const end = i < len - 1 ? holeIndices[i + 1] * dim : data.length;
+        const list = linkedList(data, start, end, dim, false)!;
+        if (list === list.next) list.steiner = true;
+        queue.push(getLeftmost(list));
+    }
+
+    queue.sort(compareX);
+
+    // process holes from left to right
+    for (let i = 0; i < queue.length; i++) {
+        outerNode = eliminateHole(queue[i], outerNode);
+    }
+
+    return outerNode;
+}
+
+function compareX(a: Node, b: Node): number {
+    return a.x - b.x;
+}
+
+// find a bridge between vertices that connects hole with an outer ring and and link it
+function eliminateHole(
+    hole: Node,
+    outerNode: Node,
+): Node {
+    const bridge = findHoleBridge(hole, outerNode);
+    if (!bridge) {
+        return outerNode;
+    }
+
+    const bridgeReverse = splitPolygon(bridge, hole);
+
+    // filter collinear points around the cuts
+    filterPoints(bridgeReverse, bridgeReverse.next);
+    return filterPoints(bridge, bridge.next);
+}
+
+// David Eberly's algorithm for finding a bridge between hole and outer polygon
+function findHoleBridge(
+    hole: Node,
+    outerNode: Node,
+): Node | null {
+    let p = outerNode;
+    const hx = hole.x;
+    const hy = hole.y;
+    let qx = -Infinity;
+    let m: Node | null = null;
+
+    // find a segment intersected by a ray from the hole's leftmost point to the left;
+    // segment's endpoint with lesser x will be potential connection point
+    do {
+        if (hy <= p.y && hy >= p.next.y && p.next.y !== p.y) {
+            var x = p.x + (hy - p.y) * (p.next.x - p.x) / (p.next.y - p.y);
+            if (x <= hx && x > qx) {
+                qx = x;
+                m = p.x < p.next.x ? p : p.next;
+                if (x === hx) return m; // hole touches outer segment; pick leftmost endpoint
+            }
+        }
+        p = p.next;
+    } while (p !== outerNode);
+
+    if (!m) return null;
+
+    // look for points inside the triangle of hole point, segment intersection and endpoint;
+    // if there are no points found, we have a valid connection;
+    // otherwise choose the point of the minimum angle with the ray as connection point
+
+    const stop = m;
+    const mx = m.x;
+    const my = m.y;
+    let tanMin = Infinity;
+
+    p = m;
+
+    do {
+        if (hx >= p.x && p.x >= mx && hx !== p.x &&
+                pointInTriangle(hy < my ? hx : qx, hy, mx, my, hy < my ? qx : hx, hy, p.x, p.y)) {
+
+            const tan = Math.abs(hy - p.y) / (hx - p.x); // tangential
+
+            if (locallyInside(p, hole) &&
+                (tan < tanMin || (tan === tanMin && (p.x > m.x || (p.x === m.x && sectorContainsSector(m, p)))))) {
+                m = p;
+                tanMin = tan;
+            }
+        }
+
+        p = p.next;
+    } while (p !== stop);
+
+    return m;
+}
+
+// whether sector in vertex m contains sector in vertex p in the same coordinates
+function sectorContainsSector(m: Node, p: Node): boolean {
+    return area(m.prev, m, p.prev) < 0 && area(p.next, m, m.next) < 0;
+}
+
+// interlink polygon nodes in z-order
+function indexCurve(start: Node, minX: number, minY: number, invSize: number): void {
+    let p = start;
+    do {
+        if (p.z === 0) p.z = zOrder(p.x, p.y, minX, minY, invSize);
+        p.prevZ = p.prev;
+        p.nextZ = p.next;
+        p = p.next;
+    } while (p !== start);
+
+    p.prevZ!.nextZ = null;
+    p.prevZ = null;
+
+    sortLinked(p);
+}
+
+// Simon Tatham's linked list merge sort algorithm
+// http://www.chiark.greenend.org.uk/~sgtatham/algorithms/listsort.html
+function sortLinked(list: Node): Node;
+function sortLinked(list: Node | null): Node | null;
+function sortLinked(list: Node | null): Node | null {
+    let inSize = 1;
+    let numMerges: number;
+    do {
+        let p: Node | null = list;
+        let tail = null;
+
+        list = null;
+        numMerges = 0;
+
+        while (p) {
+            numMerges++;
+            let q: Node | null = p;
+            let pSize = 0;
+            for (let i = 0; i < inSize; i++) {
+                pSize++;
+                q = q.nextZ;
+                if (!q) break;
+            }
+            let qSize = inSize;
+
+            while (pSize > 0 || (qSize > 0 && q)) {
+                let e;
+                if (pSize !== 0 && (qSize === 0 || !q || p!.z <= q.z)) {
+                    e = p!;
+                    p = p!.nextZ;
+                    pSize--;
+                } else {
+                    e = q!;
+                    q = q!.nextZ;
+                    qSize--;
+                }
+
+                if (tail) tail.nextZ = e;
+                else list = e;
+
+                e.prevZ = tail;
+                tail = e;
+            }
+
+            p = q;
+        }
+
+        tail!.nextZ = null;
+        inSize *= 2;
+
+    } while (numMerges > 1);
+
+    return list;
+}
+
+// z-order of a point given coords and inverse of the longer side of data bbox
+function zOrder(x: number, y: number, minX: number, minY: number, invSize: number): number {
+    // coords are transformed into non-negative 15-bit integer range
+    x = (x - minX) * invSize | 0;
+    y = (y - minY) * invSize | 0;
+
+    x = (x | (x << 8)) & 0x00FF00FF;
+    x = (x | (x << 4)) & 0x0F0F0F0F;
+    x = (x | (x << 2)) & 0x33333333;
+    x = (x | (x << 1)) & 0x55555555;
+
+    y = (y | (y << 8)) & 0x00FF00FF;
+    y = (y | (y << 4)) & 0x0F0F0F0F;
+    y = (y | (y << 2)) & 0x33333333;
+    y = (y | (y << 1)) & 0x55555555;
+
+    return x | (y << 1);
+}
+
+// find the leftmost node of a polygon ring
+function getLeftmost(start: Node): Node {
+    let p = start;
+    let leftmost = start;
+    do {
+        if (p.x < leftmost.x || (p.x === leftmost.x && p.y < leftmost.y)) leftmost = p;
+        p = p.next;
+    } while (p !== start);
+
+    return leftmost;
+}
+
+// check if a point lies within a convex triangle
+function pointInTriangle(
+    ax: number,
+    ay: number,
+    bx: number,
+    by: number,
+    cx: number,
+    cy: number,
+    px: number,
+    py: number,
+): boolean {
+    return (cx - px) * (ay - py) >= (ax - px) * (cy - py) &&
+           (ax - px) * (by - py) >= (bx - px) * (ay - py) &&
+           (bx - px) * (cy - py) >= (cx - px) * (by - py);
+}
+
+// check if a diagonal between two polygon nodes is valid (lies in polygon interior)
+function isValidDiagonal(a: Node, b: Node): boolean {
+    return (a.next.i !== b.i)
+        && (a.prev.i !== b.i)
+        && !intersectsPolygon(a, b)
+        && (// doesn't intersect other edges
+            locallyInside(a, b)
+                && locallyInside(b, a)
+                && middleInside(a, b)
+                && (// locally visible
+                    !!area(a.prev, a, b.prev) || !!area(a, b.prev, b))
+                || // does not create opposite-facing sectors
+                equals(a, b)
+                && area(a.prev, a, a.next) > 0
+                && area(b.prev, b, b.next) > 0); // special zero-length case
+}
+
+// signed area of a triangle
+function area(p: Node, q: Node, r: Node): number {
+    return (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y);
+}
+
+// check if two points are equal
+function equals(p1: Node, p2: Node): boolean {
+    return p1.x === p2.x && p1.y === p2.y;
+}
+
+// check if two segments intersect
+function intersects(p1: Node, q1: Node, p2: Node, q2: Node): boolean {
+    const o1 = sign(area(p1, q1, p2));
+    const o2 = sign(area(p1, q1, q2));
+    const o3 = sign(area(p2, q2, p1));
+    const o4 = sign(area(p2, q2, q1));
+
+    if (o1 !== o2 && o3 !== o4) return true; // general case
+
+    if (o1 === 0 && onSegment(p1, p2, q1)) return true; // p1, q1 and p2 are collinear and p2 lies on p1q1
+    if (o2 === 0 && onSegment(p1, q2, q1)) return true; // p1, q1 and q2 are collinear and q2 lies on p1q1
+    if (o3 === 0 && onSegment(p2, p1, q2)) return true; // p2, q2 and p1 are collinear and p1 lies on p2q2
+    if (o4 === 0 && onSegment(p2, q1, q2)) return true; // p2, q2 and q1 are collinear and q1 lies on p2q2
+
+    return false;
+}
+
+// for collinear points p, q, r, check if point q lies on segment pr
+function onSegment(p: Node, q: Node, r: Node): boolean {
+    return q.x <= Math.max(p.x, r.x) && q.x >= Math.min(p.x, r.x) && q.y <= Math.max(p.y, r.y) && q.y >= Math.min(p.y, r.y);
+}
+
+function sign(num: number): -1 | 0 | 1 {
+    return num > 0 ? 1 : num < 0 ? -1 : 0;
+}
+
+// check if a polygon diagonal intersects any polygon segments
+function intersectsPolygon(a: Node, b: Node): boolean {
+    let p = a;
+    do {
+        if (p.i !== a.i && p.next.i !== a.i && p.i !== b.i && p.next.i !== b.i &&
+                intersects(p, p.next, a, b)) return true;
+        p = p.next;
+    } while (p !== a);
+
+    return false;
+}
+
+// check if a polygon diagonal is locally inside the polygon
+function locallyInside(a: Node, b: Node): boolean {
+    return area(a.prev, a, a.next) < 0 ?
+        area(a, b, a.next) >= 0 && area(a, a.prev, b) >= 0 :
+        area(a, b, a.prev) < 0 || area(a, a.next, b) < 0;
+}
+
+// check if the middle point of a polygon diagonal is inside the polygon
+function middleInside(a: Node, b: Node): boolean {
+    let p = a;
+    let inside = false;
+    const px = (a.x + b.x) / 2;
+    const py = (a.y + b.y) / 2;
+    do {
+        if (((p.y > py) !== (p.next.y > py)) && p.next.y !== p.y &&
+                (px < (p.next.x - p.x) * (py - p.y) / (p.next.y - p.y) + p.x))
+            inside = !inside;
+        p = p.next;
+    } while (p !== a);
+
+    return inside;
+}
+
+// link two polygon vertices with a bridge; if the vertices belong to the same ring, it splits polygon into two;
+// if one belongs to the outer ring and another to a hole, it merges it into a single ring
+function splitPolygon(a: Node, b: Node): Node {
+    const an = a.next;
+    const bp = b.prev;
+
+    a.next = b;
+    b.prev = a;
+
+    const a2 = new Node(a.i, a.x, a.y, null!, an);
+    an.prev = a2;
+
+    const b2 = new Node(b.i, b.x, b.y, bp, a2);
+    a2.prev = b2;
+    bp.next = b2;
+
+    return b2;
+}
+
+// create a node and optionally link it with previous one (in a circular doubly linked list)
+function insertNode(i: number, x: number, y: number, last: Node | null): Node {
+    if (!last) {
+        const p = new Node(i, x, y, null!, null!);
+        p.prev = p;
+        p.next = p;
+        return p;
+    } else {
+        const p = new Node(i, x, y, last, last.next);
+        last.next.prev = p;
+        last.next = p;
+        return p;
+    }
+}
+
+function removeNode(p: Node) {
+    p.next.prev = p.prev;
+    p.prev.next = p.next;
+
+    if (p.prevZ) p.prevZ.nextZ = p.nextZ;
+    if (p.nextZ) p.nextZ.prevZ = p.prevZ;
+}
+
+class Node {
+    z = 0; // z-order curve value
+
+    // previous and next nodes in z-order
+    prevZ: Node | null = null;
+    nextZ: Node | null = null;
+
+    // indicates whether this is a steiner point
+    steiner = false;
+
+    constructor(
+        public i: number, // vertex index in coordinates array
+        public x: number,
+        public y: number,
+        // previous and next vertex nodes in a polygon ring
+        public prev: Node,
+        public next: Node,
+    ) {}
+}
+
+// return a percentage difference between the polygon area and its triangulation area;
+// used to verify correctness of triangulation
+earcut.deviation = function (
+    data: ArrayLike<number>,
+    holeIndices: ArrayLike<number> | null | undefined,
+    dim: number,
+    triangles: number[],
+): number {
+    const hasHoles = holeIndices && holeIndices.length;
+    const outerLen = hasHoles ? holeIndices[0] * dim : data.length;
+
+    let polygonArea = Math.abs(signedArea(data, 0, outerLen, dim));
+    if (hasHoles) {
+        for (let i = 0, len = holeIndices.length; i < len; i++) {
+            const start = holeIndices[i] * dim;
+            const end = i < len - 1 ? holeIndices[i + 1] * dim : data.length;
+            polygonArea -= Math.abs(signedArea(data, start, end, dim));
+        }
+    }
+
+    let trianglesArea = 0;
+    for (let i = 0; i < triangles.length; i += 3) {
+        const a = triangles[i] * dim;
+        const b = triangles[i + 1] * dim;
+        const c = triangles[i + 2] * dim;
+        trianglesArea += Math.abs(
+            (data[a] - data[c]) * (data[b + 1] - data[a + 1]) -
+            (data[a] - data[b]) * (data[c + 1] - data[a + 1]));
+    }
+
+    return polygonArea === 0 && trianglesArea === 0 ? 0 :
+        Math.abs((trianglesArea - polygonArea) / polygonArea);
+};
+
+function signedArea(
+    data: ArrayLike<number>,
+    start: number,
+    end: number,
+    dim: number,
+): number {
+    let sum = 0;
+    for (let i = start, j = end - dim; i < end; i += dim) {
+        sum += (data[j] - data[i]) * (data[i + 1] + data[j + 1]);
+        j = i;
+    }
+    return sum;
+}
+
+export type Flattened = {
+    vertices: number[],
+    holes: number[],
+    dimensions: number,
+};
+
+// turn a polygon in a multi-dimensional array form (e.g. as in GeoJSON) into a form Earcut accepts
+earcut.flatten = function (
+    data: number[][][],
+): Flattened {
+    const dim = data[0][0].length;
+    const result: Flattened = {vertices: [], holes: [], dimensions: dim};
+
+    let holeIndex = 0;
+    for (let i = 0; i < data.length; i++) {
+        for (let j = 0; j < data[i].length; j++) {
+            for (let d = 0; d < dim; d++) result.vertices.push(data[i][j][d]);
+        }
+        if (i > 0) {
+            holeIndex += data[i - 1].length;
+            result.holes.push(holeIndex);
+        }
+    }
+    return result;
+};

src/turtle.ts

@@ -1,5 +1,6 @@
 import {
     Mesh,
+    MeshBuilder,
     Plane,
     Quaternion,
     Ray,
@@ -9,6 +10,7 @@ import {
 } from '@babylonjs/core/Legacy/legacy';
 
 import * as Cat from './cat.js';
+import { earcut } from './earcut';
 
 export class PenError extends Cat.RuntimeError {}
 
@@ -40,6 +42,11 @@ export class PenState {
         this.directions = [];
     }
 
+    up() {
+        this.paths = null;
+        this.directions = null;
+    }
+
     push(pos: Vector3, q: Quaternion, miter: boolean) {
         const directions = this.directions!;
         const paths = this.paths!;
@@ -53,23 +60,40 @@ export class PenState {
             for (let pathIndex = 0; pathIndex < paths.length; pathIndex++) {
                 const steps = paths[pathIndex];
                 const p = steps[steps.length - 1];
-                steps[steps.length - 1] = p.add(lastDir.scale(new Ray(p, lastDir).intersectsPlane(miterPlane)!));
+                const d = pointDistance(p, lastDir, miterPlane);
+                if (d !== null) steps[steps.length - 1] = p.add(lastDir.scale(d));
             }
+            this.templatePath.forEach((p, i) => {
+                const r = p.multiply(this.templateScale).applyRotationQuaternion(q).addInPlace(pos);
+                const d = pointDistance(r, thisDir, miterPlane);
+                if (d !== null) r.addInPlace(thisDir.scale(d));
+                paths[i].push(r);
+            });
+        } else {
+            this.templatePath.forEach((p, i) => {
+                const r = p.multiply(this.templateScale).applyRotationQuaternion(q).addInPlace(pos);
+                paths[i].push(r);
+            });
         }
 
-        this.templatePath.forEach((p, i) => {
-            paths[i].push(p.multiply(this.templateScale).applyRotationQuaternion(q).addInPlace(pos));
-        });
-
         directions.push(q);
     }
 };
 
+// Adapted from Ray.intersectsPlane
+function pointDistance(origin: Vector3, direction: Vector3, plane: Plane): number | null {
+    const result1 = Vector3.Dot(plane.normal, direction);
+    if (Math.abs(result1) < 1e-6) return null; // direction parallel to plane
+    const result2 = Vector3.Dot(plane.normal, origin);
+    return (-plane.d - result2) / result1;
+}
+
 const D2R = Math.PI / 180;
 
 export class TurtleVM extends Cat.VM<TurtleVM> {
     container: Mesh;
     meshes: Mesh[] = [];
+    wireframe = false;
 
     counter = 0;
     sideOrientation = Mesh.DEFAULTSIDE;
@@ -121,10 +145,37 @@ export class TurtleVM extends Cat.VM<TurtleVM> {
             throw new Error('todo');
         }
 
-        const m = new Mesh(this.container.name + this.counter++);
-        // TODO: this.sideOrientation
+        if (this.wireframe) {
+            this.emitWireframe();
+        } else {
+            this.emitSolid();
+        }
 
-        const vertexData = new VertexData();
+        this.pen.up();
+    }
+
+    emitWireframe() {
+        const lines: Vector3[][] = [];
+        const paths = this.pen.paths!;
+        const pathCount = paths.length;
+        const stepCount = paths[0].length;
+
+        for (let pathIndex = 1; pathIndex < pathCount; pathIndex++) {
+            for (let stepIndex = 1; stepIndex < stepCount; stepIndex++) {
+                lines.push([paths[pathIndex - 1][stepIndex - 1],
+                            paths[pathIndex - 1][stepIndex],
+                            paths[pathIndex][stepIndex],
+                            paths[pathIndex][stepIndex - 1]]);
+            }
+        }
+
+        const meshName = this.container.name + this.counter++;
+        const ls = MeshBuilder.CreateLineSystem(meshName, { lines }, null);
+        ls.parent = this.container;
+        this.meshes.push(ls);
+    }
+
+    emitSolid() {
         const positions: number[] = [];
         const indices: number[] = [];
         const normals: number[] = [];
@@ -139,6 +190,10 @@ export class TurtleVM extends Cat.VM<TurtleVM> {
         const uTotal: number[] = [];
         const vTotal: number[] = [];
 
+        const capVerts = paths.flatMap(p => p[0].asArray());
+        console.log(capVerts);
+        console.log(earcut(capVerts, void 0, 3).map(i => paths[0][i].asArray()));
+
         for (let pathIndex = 0; pathIndex < pathCount; pathIndex++) {
             uTotal.push(0);
             us.push([]);
@@ -167,7 +222,8 @@ export class TurtleVM extends Cat.VM<TurtleVM> {
             const pointIndex = positions.length / 3;
             const p = paths[pathIndex][stepIndex];
             positions.push(... p.asArray());
-            uvs.push((p.x - p.z) / 1.2, (p.y) / 0.9);
+            uvs.push((p.x - p.z), (p.y));
+            // uvs.push((p.x - p.z) / 1.2, (p.y) / 0.9);
             // uvs.push(us[pathIndex][stepIndex] / uTotal[pathIndex],
             //          vs[stepIndex][pathIndex] / vTotal[stepIndex]);
             return pointIndex;
@@ -195,18 +251,15 @@ export class TurtleVM extends Cat.VM<TurtleVM> {
 
         VertexData.ComputeNormals(positions, indices, normals);
         VertexData._ComputeSides(this.sideOrientation, positions, indices, normals, uvs);
+
+        const vertexData = new VertexData();
         vertexData.positions = new Float32Array(positions);
         vertexData.indices = new Int32Array(indices);
         vertexData.normals = new Float32Array(normals);
         vertexData.uvs = new Float32Array(uvs);
 
+        const m = new Mesh(this.container.name + this.counter++);
         vertexData.applyToMesh(m);
-
-        // const m = MeshBuilder.CreateRibbon(this.container.name + this.counter++, {
-        //     pathArray: this.pen.paths!,
-        //     sideOrientation: this.sideOrientation,
-        // });
-
         m.parent = this.container;
         this.meshes.push(m);
     }
@@ -275,6 +328,7 @@ export const TurtlePrimitives: Cat.Environment<TurtleVM> = Object.assign({}, Cat
     'PenUp'() { this.penUp(false); return []; },
     'Close'() { this.penUp(true); return []; },
 
+    'SetWireframe'(b) { this.wireframe = b as boolean; return []; },
     'SetSmooth'(b) { this.smooth = b as boolean; return []; },
     'SetMiter'(b) { this.miter = b as boolean; return []; },
     'SetSideOrientation'(s) {

yarn.lock

@@ -71,23 +71,23 @@
     salty-crypto "0.3.1"
 
 "@syndicate-lang/html@*":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@syndicate-lang/html/-/html-0.14.3.tgz#b197bdb18b05a5472da70b92f0ad41522f703eda"
-  integrity sha512-Cyrew6JGEMY7nXSr4HGLHKlvIbnO4XZoTuPU9wPlXpRM0YbRqoItTZoLi7/wIVN5IwDUgbHCuTLA6LxADnyK5g==
+  version "0.14.4"
+  resolved "https://registry.yarnpkg.com/@syndicate-lang/html/-/html-0.14.4.tgz#6006d5a2af003951651162405466c4940a1ece7b"
+  integrity sha512-vnq+VxnVqyBKF6QuqSMCR6Eqr+PPBrAzdhoy1zqrBQmnTtLnZsrShHf5ZcFHOu8hXTbmb3mqILLT4EbpOxuKSw==
   dependencies:
     "@syndicate-lang/core" "^0.14.1"
 
 "@syndicate-lang/timer@*":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@syndicate-lang/timer/-/timer-0.14.3.tgz#3f0d967fac3c4fa92bab0b5457979cf1b274a058"
-  integrity sha512-sP4VGCWhJJc4v0+OUzXF+wI+9D3WnNQFImrew6ugz1QVzIqJVK/SXdqzAw4nqLVgjDqT0dtDRwDEzWh3+5Knew==
+  version "0.14.4"
+  resolved "https://registry.yarnpkg.com/@syndicate-lang/timer/-/timer-0.14.4.tgz#fd97c7bebac9d735639528b342ec67fa0bf0a257"
+  integrity sha512-FaPwfk6Dlikf24c4arVFBnN6AfM/aZde64wfB/LaCJwfFijWqFVsw3rdusm5FFVKti2+Dbdf8lshINCszQBy5Q==
   dependencies:
     "@syndicate-lang/core" "^0.14.1"
 
 "@syndicate-lang/ts-plugin@*":
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/@syndicate-lang/ts-plugin/-/ts-plugin-0.14.1.tgz#9fc2b78fb771e4db2c1c0ee02ef6c419a59666b7"
-  integrity sha512-7Ebov50uYc96oRpNOMIJn7jOPGONdT7p1pHdty1Xj1wXCPFbo7NUGrgs6ZghJmhq1WzsCQ3L0VlUT4Rbbx2Rzg==
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@syndicate-lang/ts-plugin/-/ts-plugin-0.15.0.tgz#b7ad58e6427f97b07709f5c15514e14093ce44a8"
+  integrity sha512-xVztn9NaZLXYFwxBFfzkmOyN8Uhw2qR8D8bR/n5mxUweJGGLELo6SXmYOM/VEAJvawA3Zk3xLBYqB5VtQOyYDQ==
   dependencies:
     "@syndicate-lang/compiler" "^0.13.1"
     "@syndicate-lang/core" "^0.14.1"
@@ -103,9 +103,9 @@
     yargs "^16.2.0"
 
 "@syndicate-lang/ws-relay@*":
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/@syndicate-lang/ws-relay/-/ws-relay-0.14.3.tgz#358373159119d30d427e36394985be2288bd0f09"
-  integrity sha512-NMVXrUYFIvDeOcdviQ3FxH3k4cFsYyPgJVWTXb/x09Tbmk0ogRnVx4Lg/jwnSb0tEzjAYO0A3D9vUiUKjL72Pw==
+  version "0.14.4"
+  resolved "https://registry.yarnpkg.com/@syndicate-lang/ws-relay/-/ws-relay-0.14.4.tgz#4d446cec0a4579fabfe9dfcc40e04ff51ec4123b"
+  integrity sha512-SITEMOKSVK4Cs964/YnVeltbA9Ospg/k3KJuitUyIQcR6eBUMp5BKXIlTuwv9zmQK7zqsbOjZdBDhKTSNaksRw==
   dependencies:
     "@preserves/core" ">=0.20.2"
     "@syndicate-lang/core" "^0.14.1"