webgl2-sdf 0.0.1

package/src/utils/create-empty-grid.ts

@@ -0,0 +1,32 @@
+import { ROW_COUNT } from "../row-count";
+import { Cell } from "../types/cell";
+
+
+/**
+ * 
+ * @param colCount
+ * @param padCount
+ */
+function createEmptyGrid(
+        colCount: number,
+        padCount: number) {
+
+    const grid: Cell[][] = [];
+    // for (let u=0; u<ROW_COUNT + 2*padCount; u++) {
+    for (let u=0; u<colCount + 2*padCount; u++) {
+        const cells: Cell[] = [];
+        for (let v=0; v<ROW_COUNT + 2*padCount; v++) {
+            cells.push({
+                lineSegs: [],
+                closeCells: [],
+                crossingCells: []
+            });
+        }
+        grid.push(cells);
+    }
+
+    return grid;
+}
+
+
+export { createEmptyGrid }

package/src/utils/create-empty-strips.ts

@@ -0,0 +1,21 @@
+import { ROW_COUNT } from "../row-count";
+import { Strip } from "../types/strip";
+
+
+/**
+ * 
+ * @param count the number of strips
+ */
+// TODO - remove
+function createEmptyStrips() {
+    const strips: Strip[] = [];
+    for (let v=0; v<ROW_COUNT; v++) {
+        // TODO - simplify
+        strips.push({ lineSegs: [] });
+    }
+
+    return strips;
+}
+
+
+export { createEmptyStrips }

package/src/utils/distance-seg-to-p.ts

@@ -0,0 +1,50 @@
+
+const { min, max, sqrt } = Math;
+
+
+/**
+ * Returns the minimum distance from the given line segment to the origin.
+ */
+function distanceSegToP(
+        seg: number[][],
+        p: number[]) {
+
+    const seg0 = seg[0];
+    const seg1 = seg[1];
+    const _x1 = seg0[0];
+    const _y1 = seg0[1];
+    const _x2 = seg1[0];
+    const _y2 = seg1[1];
+
+    const x = p[0];
+    const y = p[1];
+
+    const x1 = _x1 - x;
+    const y1 = _y1 - y;
+    const x2 = _x2 - x;
+    const y2 = _y2 - y;
+    
+    // Vector from point 1 to point 2
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    
+    const lengthSq = dx*dx + dy*dy;
+    
+    // Calculate projection parameter t
+    // t represents where the closest point lies on the line segment
+    // t = 0 means closest point is at seg[0], t = 1 means closest point is at seg[1]
+    const t = max(0, min(1, -(x1*dx + y1*dy) / lengthSq));
+    
+    // Find the closest point on the segment
+    const closestX = x1 + t*dx;
+    const closestY = y1 + t*dy;
+    
+    // Return distance from origin to closest point
+    return sqrt(closestX*closestX + closestY*closestY);
+}
+
+
+export { distanceSegToP }
+
+// Quokka tests
+// distanceSegToOrigin([[0,1],[-1,-2]]);//?

package/src/utils/find-close-cells.ts

@@ -0,0 +1,171 @@
+import type { Cell } from "../types/cell";
+import { ROW_COUNT } from "../row-count";
+import { circsCache } from "./calc-circs";
+import { distanceSegToP } from "./distance-seg-to-p";
+import { jumpIdx } from "./jump-idx";
+
+
+const { min, SQRT2 } = Math;
+
+
+function findCloseCells(
+        grid: Cell[][],
+        colCount: number,
+        cellSize: number,
+        maxDistance: number,
+        padCount: number) {
+
+    const findCloseCellsFor_ = findCloseCellsFor(grid, colCount, cellSize, maxDistance, padCount)
+    
+    let _minD = 0;  // minimum for previous row, col 0
+    let minD = 0;
+    for (let i=padCount; i<colCount + padCount; i++) {
+        minD = _minD;
+        for (let j=padCount; j<ROW_COUNT + padCount; j++) {
+            minD = findCloseCellsFor_(i, j, minD);
+            if (j === padCount) { _minD = minD; }
+        }
+    }
+}
+
+
+function findCloseCellsFor(
+        grid: Cell[][],
+        colCount: number,
+        cellSize: number,
+        maxDistance: number,
+        padCount: number) {
+
+    return function findCloseCellsFor_(
+            i: number,
+            j: number,
+            _minD: number): number {
+
+        // reduce current circle search range since we moved one square
+        let k = jumpIdx((_minD - SQRT2*cellSize) / cellSize);
+        let minD = Number.POSITIVE_INFINITY;
+        while (k < circsCache.length) {
+            const from = circsCache[k].from;
+
+            // `SQRT2` to account for diagonal
+            if (cellSize*from > maxDistance + SQRT2*cellSize) {
+                break;
+            }
+
+            // uncomment loop below to search all equidistant squares
+            // while (circsCache?.[k].from === from) {
+                const { u, v } = circsCache[k];
+                const u_ = u + i;
+                const v_ = v + j;
+                if (u_ < 0 || u_ >= colCount + 2*padCount ||
+                    v_ < 0 || v_ >= ROW_COUNT + 2*padCount) {
+
+                    k++; continue;
+                }
+
+                const { lineSegs } = grid[u_][v_];
+                for (let l=0; l<lineSegs.length; l++) {
+                    // center of square
+                    const c = [(i - padCount + 0.5)*cellSize, (j - padCount + 0.5)*cellSize];
+                    const d = distanceSegToP(lineSegs[l], c);
+                    if (d < minD) {
+                        minD = d;
+                    }
+                }
+
+                k++;
+            // }
+
+            if (minD !== Number.POSITIVE_INFINITY) {
+                break;
+            }
+        }
+
+        if (minD === Number.POSITIVE_INFINITY) {
+            return min(
+                maxDistance + SQRT2*cellSize,
+                cellSize * circsCache[circsCache.length - 1].from
+            );
+        }
+
+        const { closeCells } = grid[i][j];
+        let l = jumpIdx((_minD - 2*SQRT2*cellSize) / cellSize);
+        while (l < circsCache.length) {
+            const { from, u, v } = circsCache[l];
+
+            // `SQRT2` to account for diagonal
+            if (cellSize*from > min(minD, maxDistance) + SQRT2*cellSize) {
+                break;
+            }
+
+            const u_ = u + i;
+            const v_ = v + j;
+            if (u_ < 0 || u_ >= colCount + 2*padCount ||
+                v_ < 0 || v_ >= ROW_COUNT + 2*padCount) {
+
+                l++; continue;
+            }
+
+            const { lineSegs } = grid[u_][v_];
+            if (lineSegs.length > 0) {
+                closeCells.push((2*padCount + ROW_COUNT)*u_ + v_);
+            }
+
+            l++;
+        }
+
+        return minD;
+    }
+}
+
+
+export { findCloseCells }
+
+
+// Quokka tests
+// const grid: Cell[][] = [
+//     [
+//         { u: 0, v: 0, lineSegs: [], closeCells: [], crossingCells: [] },
+//         { u: 0, v: 1, lineSegs: [], closeCells: [], crossingCells: [] },
+//         { u: 0, v: 2, lineSegs: [], closeCells: [], crossingCells: [] },
+//         { u: 0, v: 3, lineSegs: [], closeCells: [], crossingCells: [] }
+//     ],
+//     [
+//         { u: 1, v: 0, lineSegs: [], closeCells: [], crossingCells: [] },
+//         {
+//             u: 1, v: 1,
+//             lineSegs: [[[175, 163], [175, 355]]],
+//             closeCells: [], crossingCells: []
+//         },
+//         {
+//             u: 1, v: 2,
+//             lineSegs: [[[175, 355], [335, 355]]],
+//             closeCells: [], crossingCells: []
+//         },
+//         { u: 1, v: 3, lineSegs: [], closeCells: [], crossingCells: [] }
+//     ],
+//     [
+//         { u: 2, v: 0, lineSegs: [], closeCells: [], crossingCells: [] },
+//         {
+//             u: 2, v: 1,
+//             lineSegs: [[[335, 163], [175, 163]]],
+//             closeCells: [], crossingCells: []
+//         },
+//         {
+//             u: 2, v: 2,
+//             lineSegs: [[[335, 355], [335, 163]]],
+//             closeCells: [], crossingCells: []
+//         },
+//         { u: 2, v: 3, lineSegs: [], closeCells: [], crossingCells: [] }
+//     ],
+//     [
+//         { u: 3, v: 0, lineSegs: [], closeCells: [], crossingCells: [] },
+//         { u: 3, v: 1, lineSegs: [], closeCells: [], crossingCells: [] },
+//         { u: 3, v: 2, lineSegs: [], closeCells: [], crossingCells: [] },
+//         { u: 3, v: 3, lineSegs: [], closeCells: [], crossingCells: [] }
+//     ]
+// ];
+
+// findCloseCells(grid);
+// const v = grid.map(cells => cells.map(c => ({ u: c.u, v: c.v, closeCells: c.closeCells })));
+// v;//?

package/src/utils/find-crossing-cells.ts

@@ -0,0 +1,40 @@
+import { ROW_COUNT } from "../row-count";
+import type { Cell } from "../types/cell";
+
+
+// TODO - simplify?
+// TODO - could be made much faster by also checking intersections here
+// and passing the result to the next cell
+function findCrossingCells(
+        grid: Cell[][],
+        colCount: number,
+        padCount: number) {
+
+    for (let i=padCount; i<colCount + padCount; i++) {
+        for (let j=padCount; j<ROW_COUNT + padCount; j++) {
+            const cc = grid[i][j].crossingCells;
+
+            for (let k=padCount; k<=i; k++) {
+                if (grid[k][j].lineSegs.length === 0) { continue; }
+                cc.push((ROW_COUNT + 2*padCount)*k + j);
+            }
+        }
+    }
+}
+
+
+export { findCrossingCells }
+
+
+// Quokka tests
+// import { createEmptyGrid } from "./create-empty-grid";
+// // const g = createEmptyGrid(0);
+// const g = createEmptyGrid(0);
+// // g[0][0].lineSegs.push([[]]);
+// g[2][0].lineSegs.push([[]]);
+// g[2][2].lineSegs.push([[]]);
+// findCrossingCells(g);
+// let r = 2;
+// // g.map(r => r.map(c => c.crossingCells))[r].map(v => v);//?
+// g.map(r => r.map(c => c.crossingCells))[r].map(v => v.map(r => r[1]));//?
+// g;//?

package/src/utils/get-distance-to-line-function.ts

@@ -0,0 +1,59 @@
+
+const { sqrt } = Math;
+
+
+/**
+ * Returns a function that returns the signed distance to the given line from
+ * the given point.
+ * 
+ * @param pS a point on the line
+ * @param pE a different point on the line; if `pS` is the same as `pE` then
+ * the distance to the point `pS` (or `pE`) will be returned.
+ */
+function getDistanceToLineFunction(
+		pS: number[],
+		pE: number[]) {
+
+	const xS = pS[0];
+	const yS = pS[1];
+	const xE = pE[0];
+	const yE = pE[1];
+
+	const s = yS - yE;
+	const t = xE - xS;
+	const v = xS*yE - xE*yS;
+	
+	// Calculate the length of the line for normalization
+	const lineLength = sqrt(s*s + t*t);
+
+	return function(p: number[]): number {
+		const x = p[0];
+		const y = p[1];
+
+		// Calculate the perpendicular distance from point to line
+		return lineLength !== 0
+            ? (s*x + t*y + v) / lineLength
+            : sqrt((x - xS)**2 + (y - yS)**2)
+        ;
+	}
+}
+
+
+export { getDistanceToLineFunction }
+
+
+// Quokka tests
+{
+    const pS = [6,2];
+    const pE = [6,2];
+    const p = [10,1];
+    const f = getDistanceToLineFunction(pS,pE);
+    f(p);//?
+}
+// {
+//     const p0 = [0,0];
+//     const p1 = [6,1];
+//     const p2 = [10,1];
+//     const f = getDistanceToLineFunction(p0,p2);
+//     f(p1);//?
+// }

package/src/utils/is-point-in-box.ts

@@ -0,0 +1,16 @@
+
+function isPointInBox(
+        p: number[],
+        box: number[][]) {
+
+    const [x,y] = p;
+    const [[xS,yS],[xE,yE]] = box;
+
+    return (
+        x > xS && x < xE &&
+        y > yS && y < yE
+    );
+}
+
+
+export { isPointInBox }

package/src/utils/jump-idx.ts

@@ -0,0 +1,107 @@
+import { circsCache } from "./calc-circs";
+
+const { trunc, max, E } = Math;
+
+
+/**
+ * @param v 
+ */
+function binarySearchRange<T>(
+        v: number) {
+
+    let min = 0;
+    let max = circsCache.length - 1;
+
+    let mid = 0;
+    while (min <= max) {
+        mid = (min + max) >>> 1;//?
+        const midVal = circsCache[mid].from;
+        if (midVal === v) {
+            // return [min,mid,max];
+            return mid;
+        } else if (v > midVal) {
+            min = mid + 1;
+        } else { 
+            max = mid - 1; 
+        }
+    }
+
+    // return [min,mid,max];
+    return mid;
+}
+
+
+// const [Q,R] = [10.606601717798213, 35.531676008879735];
+// const [A1,B1,F1] = [102.42126, 0.153169, -117.56077];
+// const [A2,B2,C2,D2,F2] = [-0.000660087, 0.388148, 841.25744, -0.0529616, -1089.49916];
+// const [A3,B3,C3,D3,F3] = [-7567711.63, -0.0251756, 7562560.69, 0.025054, -7475.16953];
+// function jumpIdxOld(
+//         c: number) {
+
+//     let idx = trunc(
+//         c <= 0 ? 0 : c <= 0.7071067811865476 ? 1 : c <= 1.5 ? 5
+//         // Three-part regression (faster than binary search in this case)
+//         : (c <= Q) 
+//         ? A1*(E**(B1*c)) + F1
+//         : c <= R
+//         ? A2*(E**(B2*c)) + C2*(E**(-D2*c)) + F2
+//         : A3*(E**(B3*c)) + C3*(E**(-D3*c)) + F3);
+
+//     c = max(0, c);
+//     while (circsCache[idx].from > c) { idx--; }
+//     while (circsCache[idx + 1].from < c) { idx++; }
+
+//     return idx;
+// }
+
+
+function jumpIdx(
+        c: number) {
+
+    let idx = binarySearchRange(c);
+
+    c = max(0, c);
+    while (idx !== 0 && circsCache[idx].from >= c) { idx--; }
+    while (idx < circsCache.length - 2 && circsCache[idx + 1].from < c) { idx++; }
+
+    return idx;
+}
+
+
+export { jumpIdx }
+
+
+// Quokka tests
+// // circsCache.slice(0,30).map(c => c.from);//?
+// circsCache[12].from;//?
+// circsCache[15].from;//?
+// // circsCache.length;//?
+
+// // jumpIdxOld(1.5811388300841898);//?
+// jumpIdx(0.5);//?
+// binarySearchRange(1.5811388300841898);//?
+
+
+// jumpIdxOld(3.7);//?
+// jumpIdx(3.7);//?
+// // binarySearchRange(3.7);//?
+
+// jumpIdxOld(0);//?
+// jumpIdx(0);//?
+// // binarySearchRange(0);//?
+
+// jumpIdxOld(13.7);//?
+// jumpIdx(13.7);//?
+// // binarySearchRange(13.7);//?
+
+// jumpIdxOld(33.7);//?
+// jumpIdx(33.7);//?
+// // binarySearchRange(33.7);//?
+
+// // jumpIdxOld(55);//?
+// // jumpIdx(55);//?
+// binarySearchRange(55);//?
+
+
+
+

package/src/utils/map-to-viewbox.ts

@@ -0,0 +1,41 @@
+
+function mapToViewbox(
+        viewbox: [number,number,number,number],
+        width: number,
+        height: number,
+        psss: (number[][])[][]): (number[][])[][] {
+
+    if (viewbox[0] === 0 && viewbox[1] === 0 &&
+        viewbox[2] === width && viewbox[3] === height) {
+
+        return psss;
+    }
+
+    const [vx, vy, vw, vh] = viewbox;
+
+    const scaleX = width/vw;
+    const scaleY = height/vh;
+    const psss_: number[][][][] = [];
+    for (let i=0; i<psss.length; i++) {
+        const pss = psss[i];
+        const pss_: (number[][])[] = [];
+        for (let j=0; j<pss.length; j++) {
+            const ps = pss[j];
+            const ps_: number[][] = [];
+            for (let k=0; k<ps.length; k++) {
+                const [x,y] = ps[k];
+
+                const x_ = scaleX*x - vx;
+                const y_ = scaleY*y - vy;
+                ps_.push([x_,y_]);
+            }
+            pss_.push(ps_);
+        }
+        psss_.push(pss_);
+    }
+
+    return psss_;
+}
+
+
+export { mapToViewbox }

package/src/utils/path.ts

@@ -0,0 +1,137 @@
+
+// /**
+//  * Find the point on a quadratic bezier curve at t where t is in the range [0, 1]
+//  */
+// function pointOnQuadraticBezier (
+//         x0: number, y0: number, x1: number, y1: number, x2: number, y2: number, t: number,
+//         pointOut: { x: number; y: number }) {
+
+//     const t2 = 1 - t
+//     pointOut.x = t2*t2*x0 + 2*t2*t*x1 + t*t*x2;
+//     pointOut.y = t2*t2*y0 + 2*t2*t*y1 + t*t*y2;
+// }
+
+
+// /**
+//  * Find the point on a cubic bezier curve at t where t is in the range [0, 1]
+//  */
+// function pointOnCubicBezier (
+//         x0: number, y0: number, x1: number, y1: number,
+//         x2: number, y2: number, x3: number, y3: number,
+//         t: number,
+//         pointOut: { x: number; y: number }) {
+
+//     const t2 = 1 - t;
+//     pointOut.x = t2*t2*t2*x0 + 3*t2*t2*t*x1 + 3*t2*t*t*x2 + t*t*t*x3;
+//     pointOut.y = t2*t2*t2*y0 + 3*t2*t2*t*y1 + 3*t2*t*t*y2 + t*t*t*y3;
+// }
+
+
+// /**
+//  * Parse a path string into its constituent line/curve commands, invoking a callback for each.
+//  * @param {string} pathString - An SVG-like path string to parse; should only contain commands: M/L/Q/C/Z
+//  * @param {function(
+//  *   command: 'L'|'Q'|'C',
+//  *   startX: number,
+//  *   startY: number,
+//  *   endX: number,
+//  *   endY: number,
+//  *   ctrl1X?: number,
+//  *   ctrl1Y?: number,
+//  *   ctrl2X?: number,
+//  *   ctrl2Y?: number
+//  * )} commandCallback - A callback function that will be called once for each parsed path command, passing the
+//  *                      command identifier (only L/Q/C commands) and its numeric arguments.
+//  */
+// export function forEachPathCommand(
+//         pathString: string, commandCallback: Function) {
+
+//   const segmentRE = /([MLQCZ])([^MLQCZ]*)/g
+//   let match, firstX, firstY, prevX, prevY
+//   while ((match = segmentRE.exec(pathString))) {
+//     const args = match[2].split(/[,\s]+/)
+//     switch (match[1]) {
+//       case 'M':
+//         prevX = firstX = +args[0]
+//         prevY = firstY = +args[1]
+//         break
+//       case 'L':
+//         if (+args[0] !== prevX || +args[1] !== prevY) { // yup, some fonts have zero-length line commands
+//           commandCallback('L', prevX, prevY, (prevX = +args[0]), (prevY = +args[1]))
+//         }
+//         break
+//       case 'Q': {
+//         commandCallback('Q', prevX, prevY, (prevX = +args[2]), (prevY = +args[3]), +args[0], +args[1])
+//         break
+//       }
+//       case 'C': {
+//         commandCallback('C', prevX, prevY, (prevX = +args[4]), (prevY = +args[5]), +args[0], +args[1], +args[2], +args[3])
+//         break
+//       }
+//       case 'Z':
+//         if (prevX !== firstX || prevY !== firstY) {
+//           commandCallback('L', prevX, prevY, firstX, firstY)
+//         }
+//         break
+//     }
+//   }
+// }
+
+
+// /**
+//  * Convert a path string to a series of straight line segments
+//  * @param {string} pathString - An SVG-like path string to parse; should only contain commands: M/L/Q/C/Z
+//  * @param {function(x1:number, y1:number, x2:number, y2:number)} segmentCallback - A callback
+//  *        function that will be called once for every line segment
+//  * @param {number} [curvePoints] - How many straight line segments to use when approximating a
+//  *        bezier curve in the path. Defaults to 16.
+//  */
+// export function pathToLineSegments (pathString: any, segmentCallback: any, curvePoints = 16) {
+//     const tempPoint = { x: 0, y: 0 }
+//     forEachPathCommand(
+//             pathString,
+//             (command: any, startX: any, startY: any, endX: any, endY: any,
+//              ctrl1X: any, ctrl1Y: any, ctrl2X: any, ctrl2Y: any) => {
+
+//         switch (command) {
+//         case 'L':
+//             segmentCallback(startX, startY, endX, endY);
+//             break;
+//         case 'Q': {
+//             let prevCurveX = startX
+//             let prevCurveY = startY
+//             for (let i = 1; i < curvePoints; i++) {
+//               pointOnQuadraticBezier(
+//                   startX, startY,
+//                   ctrl1X, ctrl1Y,
+//                   endX, endY,
+//                   i / (curvePoints - 1),
+//                   tempPoint
+//               )
+//               segmentCallback(prevCurveX, prevCurveY, tempPoint.x, tempPoint.y)
+//               prevCurveX = tempPoint.x
+//               prevCurveY = tempPoint.y
+//             }
+//             break;
+//         }
+//         case 'C': {
+//             let prevCurveX = startX
+//             let prevCurveY = startY
+//             for (let i = 1; i < curvePoints; i++) {
+//               pointOnCubicBezier(
+//                   startX, startY,
+//                   ctrl1X, ctrl1Y,
+//                   ctrl2X, ctrl2Y,
+//                   endX, endY,
+//                   i / (curvePoints - 1),
+//                   tempPoint
+//               )
+//               segmentCallback(prevCurveX, prevCurveY, tempPoint.x, tempPoint.y)
+//               prevCurveX = tempPoint.x
+//               prevCurveY = tempPoint.y
+//             }
+//             break
+//         }
+//         }
+//     });
+// }