add seeded randomness

Author: g-harel

README.md

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

blob.svg

@@ -1,18 +1,19 @@
 // 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} from "./util";
+import {rad, smooth, rand} 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);
+    // Random number generator.
+    const rgen = rand(opt.seed || String(Date.now()));
 
     if (!opt.stroke && !opt.color) {
-        throw new Error("no color or stroke specified")
+        throw new Error("no color or stroke specified");
     }
 
     if (opt.complexity <= 0 || opt.complexity > 1) {
@@ -29,7 +30,7 @@ export const blob = (opt: BlobOptions): string => {
 
     const points: Point[] = [];
     for (let i = 0; i < count; i++) {
-        const rand = 1 - 0.8 * opt.contrast * Math.random();
+        const rand = 1 - 0.8 * opt.contrast * rgen();
 
         points.push({
             x: Math.sin(rad(i * angle)) * radius * rand + opt.size / 2,
@@ -39,31 +40,32 @@ export const blob = (opt: BlobOptions): string => {
 
     const smoothed = smooth(points, {
         closed: true,
-        strength: (4/3) * Math.tan(rad(angle/4)) / Math.sin(rad(angle/2)),
+        strength: ((4 / 3) * Math.tan(rad(angle / 4))) / Math.sin(rad(angle / 2)),
     });
 
     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: (opt.stroke && opt.stroke.color),
-        strokeWidth: (opt.stroke && opt.stroke.width),
+        transform: `rotate(${rgen() * angle},${opt.size / 2},${opt.size / 2})`,
+        stroke: opt.stroke && opt.stroke.color,
+        strokeWidth: opt.stroke && opt.stroke.width,
         guides: opt.guides,
     });
 };
 
 console.log(
     blob({
         color: "pink",
-        complexity: 0.2,
-        contrast: 1,
-        size: 600,
+        complexity: 0.4,
+        seed: "16",
+        contrast: 0.4,
+        size: 400,
         guides: true,
         stroke: {
             color: "red",
-            width: 1.8,
+            width: 1,
         },
     }),
 );

index.ts

@@ -34,6 +34,7 @@ export interface SVGPoint {
 
 export interface BlobOptions {
     size: number;
+    seed?: string;
     color?: string;
     stroke?: {
         color: string;

types.ts

@@ -61,3 +61,39 @@ export const smooth = (points: Point[], opt: SmoothingOptions): Point[] => {
 
     return out;
 };
+
+// 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());
+};