consolidate old and new point types into one

Author: g-harel

index.ts

@@ -1,7 +1,7 @@
 // https://www.blobmaker.app/
 
 import {rand} from "./internal/math/rand";
-import {Coord} from "./internal/types";
+import {Shape} from "./internal/types";
 import {rad} from "./internal/math/unit";
 import {smooth} from "./internal/svg/smooth";
 import {renderEditable} from "./internal/svg/render";
@@ -72,22 +72,20 @@ blobs.editable = (opt: BlobOptions): XmlElement => {
     const angle = 360 / count;
     const radius = opt.size / Math.E;
 
-    const points: Coord[] = [];
+    const points: Shape = [];
     for (let i = 0; i < count; i++) {
         const rand = 1 - 0.8 * opt.contrast * rgen();
-
         points.push({
             x: Math.sin(rad(i * angle)) * radius * rand + opt.size / 2,
-            y: Math.cos(rad(i * angle)) * radius * rand + opt.size / 2,
+            y: opt.size - (Math.cos(rad(i * angle)) * radius * rand + opt.size / 2),
+            handleIn: {angle: 0, length: 0},
+            handleOut: {angle: 0, length: 0},
         });
     }
 
     // https://math.stackexchange.com/a/873589/235756
     const smoothingStrength = ((4 / 3) * Math.tan(rad(angle / 4))) / Math.sin(rad(angle / 2));
-    const smoothed = smooth(points, {
-        closed: true,
-        strength: smoothingStrength,
-    });
+    const smoothed = smooth(points, smoothingStrength);
 
     return renderEditable(smoothed, {
         closed: true,
@@ -101,6 +99,7 @@ blobs.editable = (opt: BlobOptions): XmlElement => {
     });
 };
 
+// TODO remove
 blobs.path = (opt: PathOptions) => {
     if (!opt) {
         throw new Error("no options specified");
@@ -125,20 +124,20 @@ blobs.path = (opt: PathOptions) => {
     const angle = 360 / count;
     const radius = opt.size / Math.E;
 
-    const points: Coord[] = [];
+    const points: Shape = [];
     for (let i = 0; i < count; i++) {
         const rand = 1 - 0.8 * opt.contrast * rgen();
-
         points.push({
             x: Math.sin(rad(i * angle)) * radius * rand + opt.size / 2,
             y: Math.cos(rad(i * angle)) * radius * rand + opt.size / 2,
+            handleIn: {angle: 0, length: 0},
+            handleOut: {angle: 0, length: 0},
         });
     }
 
-    const smoothed = smooth(points, {
-        closed: true,
-        strength: ((4 / 3) * Math.tan(rad(angle / 4))) / Math.sin(rad(angle / 2)),
-    });
+    // https://math.stackexchange.com/a/873589/235756
+    const smoothingStrength = ((4 / 3) * Math.tan(rad(angle / 4))) / Math.sin(rad(angle / 2));
+    const smoothed = smooth(points, smoothingStrength);
 
     return smoothed;
 };

internal/shape/prepare.ts

@@ -54,6 +54,7 @@ export const divideShape = (count: number, points: Shape): Shape => {
 };
 
 const fixAngles = (a: Shape, b: Shape): Shape => {
+    // TODO fix in first shape too
     const out: Shape = [];
     for (let i = 0; i < a.length; i++) {
         const point = copyPoint(b[i]);

internal/shape/util.ts

@@ -8,22 +8,26 @@ export const copyPoint = (p: Point): Point => ({
     handleOut: {...p.handleOut},
 });
 
-export const expandHandle = (point: Coord, handle: Handle): Coord => {
-    return {
-        x: point.x + handle.length * Math.cos(handle.angle),
-        y: point.y + handle.length * Math.sin(handle.angle),
-    };
+export const angleBetween = (a: Coord, b: Coord): number => {
+    const dx = b.x - a.x;
+    const dy = -b.y + a.y;
+    const angle = Math.atan2(dy, dx);
+    if (angle < 0) {
+        return Math.abs(angle);
+    } else {
+        return 2 * Math.PI - angle;
+    }
 };
 
-const collapseHandle = (point: Coord, handle: Coord): Handle => {
-    const dx = handle.x - point.x;
-    const dy = -handle.y + point.y;
-    let angle = Math.atan2(dy, dx);
-    return {
-        angle: angle < 0 ? Math.abs(angle) : 2 * Math.PI - angle,
-        length: Math.sqrt(dx ** 2 + dy ** 2),
-    };
-};
+export const expandHandle = (point: Coord, handle: Handle): Coord => ({
+    x: point.x + handle.length * Math.cos(handle.angle),
+    y: point.y + handle.length * Math.sin(handle.angle),
+});
+
+const collapseHandle = (point: Coord, handle: Coord): Handle => ({
+    angle: angleBetween(point, handle),
+    length: Math.sqrt((handle.x - point.x) ** 2 + (handle.y - point.y) ** 2),
+});
 
 export const length = (a: Point, b: Point): number => {
     const aHandle = expandHandle(a, a.handleOut);

internal/svg/point.ts

@@ -1,6 +1,7 @@
 import {loopAccess} from "./util";
-import {Point, interpolate} from "./point";
 import {xml, XmlElement} from "../../editable";
+import {Shape} from "../types";
+import {expandHandle} from "../shape/util";
 
 export interface RenderOptions {
     // Viewport size.
@@ -26,45 +27,15 @@ export interface RenderOptions {
 
 // Renders a shape made up of the input points to an editable data structure
 // which can be rendered to svg.
-export const renderEditable = (p: Point[], opt: RenderOptions): XmlElement => {
-    const points = p.map((point) => interpolate(point, opt.height));
-
-    // Compute guides from input point data.
-    const handles: {x1: number; y1: number; x2: number; y2: number}[] = [];
+export const renderEditable = (points: Shape, opt: RenderOptions): XmlElement => {
+    // Render path data attribute from points and handles.
+    let path = `M${points[0].x},${points[0].y}`;
     for (let i = 0; i < points.length; i++) {
-        const {x, y, handles: hands} = loopAccess(points)(i);
-
+        const curr = loopAccess(points)(i);
         const next = loopAccess(points)(i + 1);
-        const nextHandles = next.handles;
-
-        if (hands === undefined) {
-            handles.push({x1: x, y1: y, x2: next.x, y2: next.y});
-            continue;
-        }
-
-        handles.push({
-            x1: x - Math.cos(hands.angle) * hands.out,
-            y1: y + Math.sin(hands.angle) * hands.out,
-            x2: next.x + Math.cos(nextHandles.angle) * nextHandles.in,
-            y2: next.y - Math.sin(nextHandles.angle) * nextHandles.in,
-        });
-    }
-
-    // Render path data attribute from points and handles. Must loop more times
-    // than the number of points in order to correctly close the path.
-    let path = "";
-    for (let i = 0; i <= points.length; i++) {
-        const point = loopAccess(points)(i);
-        const hands = loopAccess(handles)(i - 1);
-
-        // Start at the first point's coordinates.
-        if (i === 0) {
-            path += `M${point.x},${point.y}`;
-            continue;
-        }
-
-        // Add cubic bezier coordinates using the computed handle positions.
-        path += `C${hands.x1},${hands.y1},${hands.x2},${hands.y2},${point.x},${point.y}`;
+        const currControl = expandHandle(curr, curr.handleOut);
+        const nextControl = expandHandle(next, next.handleIn);
+        path += `C${currControl.x},${currControl.y},${nextControl.x},${nextControl.y},${next.x},${next.y}`;
     }
 
     const stroke = opt.stroke || (opt.guides ? "black" : "none");
@@ -109,49 +80,50 @@ export const renderEditable = (p: Point[], opt: RenderOptions): XmlElement => {
 
         // Points and handles.
         for (let i = 0; i < points.length; i++) {
-            const {x, y} = loopAccess(points)(i);
-            const hands = loopAccess(handles)(i);
-            const nextPoint = loopAccess(points)(i + 1);
-
-            const xmlIncomingHandleLine = xml("line");
-            xmlIncomingHandleLine.attributes.x1 = x;
-            xmlIncomingHandleLine.attributes.y1 = y;
-            xmlIncomingHandleLine.attributes.x2 = hands.x1;
-            xmlIncomingHandleLine.attributes.y2 = hands.y1;
-            xmlIncomingHandleLine.attributes["stroke-width"] = size;
-            xmlIncomingHandleLine.attributes.stroke = color;
+            const curr = loopAccess(points)(i);
+            const next = loopAccess(points)(i + 1);
+            const currControl = expandHandle(curr, curr.handleOut);
+            const nextControl = expandHandle(next, next.handleIn);
 
             const xmlOutgoingHandleLine = xml("line");
-            xmlOutgoingHandleLine.attributes.x1 = nextPoint.x;
-            xmlOutgoingHandleLine.attributes.y1 = nextPoint.y;
-            xmlOutgoingHandleLine.attributes.x2 = hands.x2;
-            xmlOutgoingHandleLine.attributes.y2 = hands.y2;
+            xmlOutgoingHandleLine.attributes.x1 = curr.x;
+            xmlOutgoingHandleLine.attributes.y1 = curr.y;
+            xmlOutgoingHandleLine.attributes.x2 = currControl.x;
+            xmlOutgoingHandleLine.attributes.y2 = currControl.y;
             xmlOutgoingHandleLine.attributes["stroke-width"] = size;
             xmlOutgoingHandleLine.attributes.stroke = color;
-            xmlOutgoingHandleLine.attributes["stroke-dasharray"] = 2 * size;
 
-            const xmlIncomingHandleCircle = xml("circle");
-            xmlIncomingHandleCircle.attributes.cx = hands.x1;
-            xmlIncomingHandleCircle.attributes.cy = hands.y1;
-            xmlIncomingHandleCircle.attributes.r = size;
-            xmlIncomingHandleCircle.attributes.fill = color;
+            const xmlIncomingHandleLine = xml("line");
+            xmlIncomingHandleLine.attributes.x1 = next.x;
+            xmlIncomingHandleLine.attributes.y1 = next.y;
+            xmlIncomingHandleLine.attributes.x2 = nextControl.x;
+            xmlIncomingHandleLine.attributes.y2 = nextControl.y;
+            xmlIncomingHandleLine.attributes["stroke-width"] = size;
+            xmlIncomingHandleLine.attributes.stroke = color;
+            xmlIncomingHandleLine.attributes["stroke-dasharray"] = 2 * size;
 
             const xmlOutgoingHandleCircle = xml("circle");
-            xmlOutgoingHandleCircle.attributes.cx = hands.x2;
-            xmlOutgoingHandleCircle.attributes.cy = hands.y2;
+            xmlOutgoingHandleCircle.attributes.cx = currControl.x;
+            xmlOutgoingHandleCircle.attributes.cy = currControl.y;
             xmlOutgoingHandleCircle.attributes.r = size;
             xmlOutgoingHandleCircle.attributes.fill = color;
 
+            const xmlIncomingHandleCircle = xml("circle");
+            xmlIncomingHandleCircle.attributes.cx = nextControl.x;
+            xmlIncomingHandleCircle.attributes.cy = nextControl.y;
+            xmlIncomingHandleCircle.attributes.r = size;
+            xmlIncomingHandleCircle.attributes.fill = color;
+
             const xmlPointCircle = xml("circle");
-            xmlPointCircle.attributes.cx = x;
-            xmlPointCircle.attributes.cy = y;
+            xmlPointCircle.attributes.cx = curr.x;
+            xmlPointCircle.attributes.cy = curr.y;
             xmlPointCircle.attributes.r = 2 * size;
             xmlPointCircle.attributes.fill = color;
 
-            xmlContentGroup.children.push(xmlIncomingHandleLine);
             xmlContentGroup.children.push(xmlOutgoingHandleLine);
-            xmlContentGroup.children.push(xmlIncomingHandleCircle);
+            xmlContentGroup.children.push(xmlIncomingHandleLine);
             xmlContentGroup.children.push(xmlOutgoingHandleCircle);
+            xmlContentGroup.children.push(xmlIncomingHandleCircle);
             xmlContentGroup.children.push(xmlPointCircle);
         }
     }

internal/svg/render.ts

@@ -1,35 +1,31 @@
-import {Point} from "./point";
+import {Shape} from "../types";
 import {loopAccess} from "./util";
-import {angle, distance} from "../math/geometry";
-
-export interface SmoothingOptions {
-    // Declare whether the path is closed.
-    // This option is currently always true.
-    closed: true;
-
-    // Smoothing strength as ratio [0,1].
-    strength: number;
-}
+import {distance} from "../math/geometry";
+import {angleBetween} from "../shape/util";
 
 // Smooths out the path made up of the given points.
 // Existing handles are ignored.
-export const smooth = (points: Point[], opt: SmoothingOptions): Point[] => {
-    if (points.length < 3) throw new Error("not enough points to smooth shape");
+export const smooth = (shape: Shape, strength: number): Shape => {
+    if (shape.length < 3) throw new Error("not enough points to smooth shape");
 
-    const out: Point[] = [];
+    const out: Shape = [];
 
-    for (let i = 0; i < points.length; i++) {
-        const curr = loopAccess(points)(i);
-        const before = loopAccess(points)(i - 1);
-        const after = loopAccess(points)(i + 1);
+    for (let i = 0; i < shape.length; i++) {
+        const curr = loopAccess(shape)(i);
+        const before = loopAccess(shape)(i - 1);
+        const after = loopAccess(shape)(i + 1);
+        const angle = angleBetween(before, after);
 
         out.push({
             x: curr.x,
             y: curr.y,
-            handles: {
-                angle: angle(before, after),
-                in: opt.strength * (1 / 2) * distance(curr, before),
-                out: opt.strength * (1 / 2) * distance(curr, after),
+            handleIn: {
+                angle: angle + Math.PI,
+                length: strength * (1 / 2) * distance(curr, before),
+            },
+            handleOut: {
+                angle,
+                length: strength * (1 / 2) * distance(curr, after),
             },
         });
     }