refactor internals into more focused modules

Author: g-harel

index.ts

@@ -1,11 +1,38 @@
 // https://www.blobmaker.app/
-// https://math.stackexchange.com/questions/873224/calculate-control-points-of-cubic-bezier-curve-approximating-a-part-of-a-circle
 
-import {rad, smooth, rand} from "./util";
-import {render} from "./render";
-import {Point, BlobOptions} from "./types";
+import {rand} from "./internal/math/rand";
+import {Point} from "./internal/math/geometry";
+import {rad} from "./internal/math/unit";
+import {smooth} from "./internal/svg/smooth";
+import {render} from "./internal/svg/render";
 
-export {BlobOptions} from "./types";
+export interface BlobOptions {
+    // Bounding box dimensions.
+    size: number;
+
+    // Shape complexity.
+    complexity: number;
+
+    // Shape contrast.
+    contrast: number;
+
+    // Fill color.
+    color?: string;
+
+    stroke?: {
+        // Stroke color.
+        color: string;
+
+        // Stroke width.
+        width: number;
+    };
+
+    // Value to seed random number generator.
+    seed?: string;
+
+    // Render points, handles and stroke.
+    guides?: boolean;
+}
 
 // Generates a random rounded shape.
 const blobs = (opt: BlobOptions): string => {

internal/math/geometry.ts

@@ -0,0 +1,16 @@
+import {deg} from "./unit";
+
+export interface Point {
+    x: number;
+    y: number;
+}
+
+// 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));
+};

internal/math/rand.ts

@@ -0,0 +1,35 @@
+// Seeded random number generator.
+// https://stackoverflow.com/a/47593316/3053361
+export const rand = (seed: string) => {
+    const xfnv1a = (str: string) => {
+        let h = 2166136261 >>> 0;
+        for (let i = 0; i < str.length; i++) {
+            h = Math.imul(h ^ str.charCodeAt(i), 16777619);
+        }
+        return () => {
+            h += h << 13;
+            h ^= h >>> 7;
+            h += h << 3;
+            h ^= h >>> 17;
+            return (h += h << 5) >>> 0;
+        };
+    };
+
+    const sfc32 = (a: number, b: number, c: number, d: number) => () => {
+        a >>>= 0;
+        b >>>= 0;
+        c >>>= 0;
+        d >>>= 0;
+        var t = (a + b) | 0;
+        a = b ^ (b >>> 9);
+        b = (c + (c << 3)) | 0;
+        c = (c << 21) | (c >>> 11);
+        d = (d + 1) | 0;
+        t = (t + d) | 0;
+        c = (c + t) | 0;
+        return (t >>> 0) / 4294967296;
+    };
+
+    const seedGenerator = xfnv1a(seed);
+    return sfc32(seedGenerator(), seedGenerator(), seedGenerator(), seedGenerator());
+};

internal/math/unit.ts

@@ -0,0 +1,9 @@
+// Converts degrees to radians.
+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;
+};

internal/svg/point.ts

@@ -0,0 +1,47 @@
+import {rad} from "../math/unit";
+
+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;
+    };
+}
+
+// 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, height: number): SVGPoint => {
+    const handles = point.handles || {angle: 0, out: 0, in: 0};
+    handles.angle = Math.PI + rad(handles.angle);
+    return {
+        x: point.x,
+        y: height - point.y,
+        handles,
+    };
+};

render.ts renamed to internal/svg/render.ts

@@ -1,9 +1,31 @@
-import {loopAccess, interpolate} from "./util";
-import {Point, RenderOptions} from "./types";
+import {loopAccess} from "./util";
+import {Point, interpolate} from "./point";
+
+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;
+}
 
 // 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));
+    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}[] = [];

internal/svg/smooth.ts

@@ -0,0 +1,38 @@
+import {Point} from "./point";
+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 ration [0,1].
+    strength: number;
+}
+
+// Smooths out the path made up of the given points. This will override the existing handles.
+// https://math.stackexchange.com/questions/873224/calculate-control-points-of-cubic-bezier-curve-approximating-a-part-of-a-circle
+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;
+};

internal/svg/util.ts

@@ -0,0 +1,4 @@
+// Safe array access at any index using a modulo operation that will always be positive.
+export const loopAccess = <T>(arr: T[]) => (i: number): T => {
+    return arr[((i % arr.length) + arr.length) % arr.length];
+};