add smoothing util

Author: g-harel

README.md

@@ -0,0 +1,8 @@
+# blobs
+
+<!--
+
+TODO
+- seeded randomness
+
+ -->

blob.svg

@@ -1,17 +1,20 @@
-import {distance, rad, loopAccess} from "./util";
-import {Point, renderClosed} from "./render";
+// https://www.blobmaker.app/
+// https://math.stackexchange.com/questions/873224/calculate-control-points-of-cubic-bezier-curve-approximating-a-part-of-a-circle
 
-export interface BlobOptions {
-    size: number;
-    color: string;
-    complexity: number;
-    contrast: number;
-}
+import {rad, smooth} from "./util";
+import {render} from "./render";
+import {Point, BlobOptions} from "./types";
+
+export {BlobOptions} from "./types";
 
 // Generates a random rounded shape.
 export const blob = (opt: BlobOptions): string => {
     opt = Object.assign({}, opt);
 
+    if (!opt.stroke && !opt.color) {
+        throw new Error("no color or stroke specified")
+    }
+
     if (opt.complexity <= 0 || opt.complexity > 1) {
         throw new Error("complexity out of range ]0,1]");
     }
@@ -22,8 +25,7 @@ export const blob = (opt: BlobOptions): string => {
 
     const count = 3 + Math.floor(14 * opt.complexity);
     const angle = 360 / count;
-    const radius = opt.size / 3;
-    const handle = radius * (4 / 3) * Math.tan(rad(angle / 4));
+    const radius = opt.size / Math.E;
 
     const points: Point[] = [];
     for (let i = 0; i < count; i++) {
@@ -32,33 +34,23 @@ export const blob = (opt: BlobOptions): string => {
         points.push({
             x: Math.sin(rad(i * angle)) * radius * rand + opt.size / 2,
             y: Math.cos(rad(i * angle)) * radius * rand + opt.size / 2,
-            handles: {
-                angle: -i * angle,
-                in: handle,
-                out: handle,
-            },
         });
     }
 
-    // Adjust handle lengths according to proximity with adjacent points.
-    const expected = 2 * radius * Math.sin(rad(angle / 2));
-    for (let i = 0; i < count; i++) {
-        const point = loopAccess(points)(i);
-        if (!point.handles) continue; // Should not happen.
-
-        const {handles} = point;
-        handles.in = (handles.in * distance(point, loopAccess(points)(i - 1))) / expected;
-        handles.out = (handles.out * distance(point, loopAccess(points)(i + 1))) / expected;
-    }
+    const smoothed = smooth(points, {
+        closed: true,
+        strength: (4/3) * Math.tan(rad(angle/4)) / Math.sin(rad(angle/2)),
+    });
 
-    return renderClosed(points, {
+    return render(smoothed, {
+        closed: true,
         width: opt.size,
         height: opt.size,
         fill: opt.color,
         transform: `rotate(${Math.random() * angle},${opt.size / 2},${opt.size / 2})`,
-        stroke: "red",
-        strokeWidth: 2,
-        guides: true,
+        stroke: (opt.stroke && opt.stroke.color),
+        strokeWidth: (opt.stroke && opt.stroke.width),
+        guides: opt.guides,
     });
 };
 
@@ -68,24 +60,10 @@ console.log(
         complexity: 0.2,
         contrast: 1,
         size: 600,
+        guides: true,
+        stroke: {
+            color: "red",
+            width: 1.8,
+        },
     }),
 );
-
-// console.log(
-//     renderClosed(
-//         [
-//             {x: 700, y: 200, handles: {angle: -135, out: 80, in: 80}},
-//             {x: 300, y: 200, handles: {angle: 135, out: 80, in: 80}},
-//             {x: 300, y: 600, handles: {angle: 45, out: 80, in: 80}},
-//             {x: 700, y: 600, handles: {angle: -45, out: 80, in: 80}},
-//         ],
-//         {
-//             width: 1000,
-//             height: 800,
-//             fill: "pink",
-//             stroke: "red",
-//             strokeWidth: 2,
-//             guides: true,
-//         },
-//     ),
-// );

index.ts

@@ -1,72 +1,9 @@
-import {loopAccess, rad} from "./util";
+import {loopAccess, interpolate} from "./util";
+import {Point, RenderOptions} from "./types";
 
-export interface Point {
-    // Cartesian coordinates (starting at [0,0] in the bottom left).
-    x: number;
-    y: number;
-
-    // Optional cubic bezier handle configuration.
-    handles?: {
-        // Direction of the outgoing path in degrees. Value is relative to the 3:00 position
-        // on a clock and the positive direction is counter-clockwise.
-        angle: number;
-
-        // Distance between each handle and the point.
-        out: number;
-        in: number;
-    };
-}
-
-interface InternalPoint {
-    // Coordinates of the point in the SVG viewport.
-    x: number;
-    y: number;
-
-    // Cubic bezier handle configuration.
-    handles: {
-        // Direction of the outgoing path in radians. Value is relative to the 9:00 position
-        // on a clock and the positive direction is counter-clockwise.
-        angle: number;
-
-        // Distance between each handle and the point.
-        out: number;
-        in: number;
-    };
-}
-
-export interface RenderOptions {
-    // Viewport size.
-    width: number;
-    height: number;
-
-    // Transformation applied to all drawn points.
-    transform?: string;
-
-    // Output path styling.
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number;
-
-    // Option to render guides (points, handles and viewport).
-    guides?: boolean;
-    boundingBox?: boolean;
-}
-
-// Translates a point's [x,y] cartesian coordinates into values relative to the viewport.
-// Translates the angle from degrees to radians and moves the start angle a half rotation.
-const cleanupPoint = (point: Point, opt: RenderOptions): InternalPoint => {
-    const handles = point.handles || {angle: 0, out: 0, in: 0};
-    handles.angle = Math.PI + rad(handles.angle);
-    return {
-        x: point.x,
-        y: opt.height - point.y,
-        handles,
-    };
-};
-
-// Renders a closed shape made up of the input points.
-export const renderClosed = (p: Point[], opt: RenderOptions): string => {
-    const points = p.map((point) => cleanupPoint(point, opt));
+// Renders a shape made up of the input points.
+export const render = (p: Point[], opt: RenderOptions): string => {
+    const points = p.map((point) => interpolate(point, opt));
 
     // Compute guides from input point data.
     const handles: {x1: number; y1: number; x2: number; y2: number}[] = [];

render.ts

@@ -0,0 +1,76 @@
+export interface Point {
+    // Cartesian coordinates (starting at [0,0] in the bottom left).
+    x: number;
+    y: number;
+
+    // Optional cubic bezier handle configuration.
+    handles?: {
+        // Direction of the outgoing path in degrees. Value is relative to the 3:00 position
+        // on a clock and the positive direction is counter-clockwise.
+        angle: number;
+
+        // Distance between each handle and the point.
+        out: number;
+        in: number;
+    };
+}
+
+export interface SVGPoint {
+    // Coordinates of the point in the SVG viewport.
+    x: number;
+    y: number;
+
+    // Cubic bezier handle configuration.
+    handles: {
+        // Direction of the outgoing path in radians. Value is relative to the 9:00 position
+        // on a clock and the positive direction is counter-clockwise.
+        angle: number;
+
+        // Distance between each handle and the point.
+        out: number;
+        in: number;
+    };
+}
+
+export interface BlobOptions {
+    size: number;
+    color?: string;
+    stroke?: {
+        color: string;
+        width: number;
+    };
+    guides?: boolean;
+    complexity: number;
+    contrast: number;
+}
+
+export interface SmoothingOptions {
+    // Declare whether the path is closed.
+    // This option is currently always true.
+    closed: true;
+
+    // Smoothing strength as ration [0,1].
+    strength: number;
+}
+
+export interface RenderOptions {
+    // Viewport size.
+    width: number;
+    height: number;
+
+    // Transformation applied to all drawn points.
+    transform?: string;
+
+    // Declare whether the path should be closed.
+    // This option is currently always true.
+    closed: true;
+
+    // Output path styling.
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+
+    // Option to render guides (points, handles and viewport).
+    guides?: boolean;
+    boundingBox?: boolean;
+}

types.ts

@@ -1,7 +1,4 @@
-interface Point {
-    x: number;
-    y: number;
-}
+import {Point, RenderOptions, SVGPoint, SmoothingOptions} from "./types";
 
 // Safe array access at any index using a modulo operation that will always be positive.
 export const loopAccess = <T>(arr: T[]) => (i: number): T => {
@@ -13,7 +10,54 @@ export const rad = (deg: number) => {
     return (deg / 360) * 2 * Math.PI;
 };
 
+// Converts radians to degrees.
+export const deg = (rad: number) => {
+    return (((rad / Math.PI) * 1) / 2) * 360;
+};
+
 // Calculates distance between two points.
 export const distance = (p1: Point, p2: Point): number => {
     return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
 };
+
+// Calculates the angle of the line from p1 to p2 in degrees.
+export const angle = (p1: Point, p2: Point): number => {
+    return deg(Math.atan2(p2.y - p1.y, p2.x - p1.x));
+};
+
+// Translates a point's [x,y] cartesian coordinates into values relative to the viewport.
+// Translates the angle from degrees to radians and moves the start angle a half rotation.
+export const interpolate = (point: Point, opt: RenderOptions): SVGPoint => {
+    const handles = point.handles || {angle: 0, out: 0, in: 0};
+    handles.angle = Math.PI + rad(handles.angle);
+    return {
+        x: point.x,
+        y: opt.height - point.y,
+        handles,
+    };
+};
+
+// Smooths out the path made up of the given points. This will override the existing handles.
+export const smooth = (points: Point[], opt: SmoothingOptions): Point[] => {
+    if (points.length === 2) return points;
+
+    const out: Point[] = [];
+
+    for (let i = 0; i < points.length; i++) {
+        const point = loopAccess(points)(i);
+        const before = loopAccess(points)(i - 1);
+        const after = loopAccess(points)(i + 1);
+
+        out.push({
+            x: point.x,
+            y: point.y,
+            handles: {
+                angle: angle(before, after),
+                in: opt.strength * (1 / 2) * distance(point, before),
+                out: opt.strength * (1 / 2) * distance(point, after),
+            },
+        });
+    }
+
+    return out;
+};