start defining v2 api

Author: g-harel

internal/animate/testing/script.ts

@@ -3,7 +3,7 @@ import {divide, prepare} from "../prepare";
 import {Coord, Point} from "../../types";
 import {length, insertAt, insertCount, rad, mod, mapPoints, forPoints} from "../../util";
 import {clear, drawInfo, drawClosed} from "../../render/canvas";
-import {genBlob} from "../../blobs";
+import {genBlob} from "../../gen";
 import {rand} from "../../rand";
 
 let animationSpeed = 2;

internal/blobs.ts renamed to internal/gen.ts

@@ -1,19 +1,17 @@
 import {Point} from "./types";
-import {smooth} from "../internal/util";
+import {smooth} from "./util";
 
 export const genBlob = (pointCount: number, offset: () => number): Point[] => {
     const angle = (Math.PI * 2) / pointCount;
-    const boundingSize = 1;
-    const boundingCenter = boundingSize / 2;
 
     const points: Point[] = [];
     for (let i = 0; i < pointCount; i++) {
         const randPointOffset = offset();
         const pointX = Math.sin(i * angle);
         const pointY = Math.cos(i * angle);
         points.push({
-            x: boundingCenter + pointX * randPointOffset,
-            y: boundingCenter + pointY * randPointOffset,
+            x: 0.5 + pointX * randPointOffset,
+            y: 0.5 + pointY * randPointOffset,
             handleIn: {angle: 0, length: 0},
             handleOut: {angle: 0, length: 0},
         });

legacy/__snapshots__/blobs.test.ts.snap renamed to public/__snapshots__/legacy.test.ts.snap

@@ -0,0 +1,77 @@
+import {genBlob} from "../internal/gen";
+import {rand} from "../internal/rand";
+import {Point} from "../internal/types";
+import {mapPoints} from "../internal/util";
+import {renderPath, renderEditable} from "../internal/render/svg";
+
+// TODO include editable types in this file
+// TODO make path editable in editable svg
+// TODO make editable svg more structured
+
+export interface BlobOptions {
+    seed: string | number;
+    extraPoints: number;
+    randomness: number;
+    size: number;
+}
+
+export interface CanvasOptions {}
+
+export interface SvgOptions {
+    style: {
+        color: string;
+        strokeColor: string;
+    }
+}
+
+export const raw = (blobOptions: BlobOptions): Point[] => {
+    const rgen = rand(String(blobOptions.seed));
+
+    // Scale of random movement increases as randomness approaches infinity.
+    // randomness = 0   -> rangeStart = 1
+    // randomness = 2   -> rangeStart = 0.8333
+    // randomness = 5   -> rangeStart = 0.6667
+    // randomness = 10  -> rangeStart = 0.5
+    // randomness = 20  -> rangeStart = 0.3333
+    // randomness = 50  -> rangeStart = 0.1667
+    // randomness = 100 -> rangeStart = 0.0909
+    const rangeStart = 1 / (1 + Math.abs(blobOptions.randomness) / 10);
+
+    const points = genBlob(
+        3 + Math.abs(blobOptions.extraPoints),
+        () => rangeStart + rgen() * (1 - rangeStart),
+    );
+
+    return mapPoints(points, ({curr}) => {
+        curr.x *= blobOptions.size;
+        curr.y *= blobOptions.size;
+        curr.handleIn.length *= blobOptions.size;
+        curr.handleOut.length *= blobOptions.size;
+        return curr;
+    });
+};
+
+export const canvas = (blobOptions: BlobOptions, canvasOptions: CanvasOptions) => {
+    // TODO
+};
+
+export const svg = (blobOptions: BlobOptions, svgOptions: SvgOptions) => {};
+
+export const svgPath = (blobOptions: BlobOptions): string => {
+    return renderPath(raw(blobOptions));
+};
+
+export const svgEditable = (blobOptions: BlobOptions, svgOptions: SvgOptions) => {
+    // TODO fill from svgOptions
+    // return renderEditable(raw(blobOptions), {
+    //     closed: true,
+    //     height: blobOptions.size,
+    //     width: blobOptions.size,
+    //     boundingBox: false,
+    //     fill: "",
+    //     guides: false,
+    //     stroke: "",
+    //     strokeWidth: 0,
+    //     transform: "",
+    // });
+};

public/blobs.ts

@@ -1,4 +1,4 @@
-import blobs, {BlobOptions} from "./blobs";
+import blobs, {BlobOptions} from "./legacy";
 
 const genMinimalOptions = (): BlobOptions => ({
     size: 1000 * Math.random(),

public/gen.ts

@@ -1,13 +1,13 @@
 import {rand} from "../internal/rand";
 import {renderEditable} from "../internal/render/svg";
 import {XmlElement} from "../editable";
-import {genBlob} from "../internal/blobs";
+import {genBlob} from "../internal/gen";
 import {mapPoints} from "../internal/util";
 
 const isBrowser = new Function("try {return this===window;}catch(e){ return false;}");
 const isLocalhost = () => location.hostname === "localhost" || location.hostname === "127.0.0.1";
 if (!isBrowser() || (isBrowser() && isLocalhost())) {
-    console.warn("You are using the legacy blobs API!\nPlease use TODO instead.");
+    console.warn("You are using the legacy blobs API!\nPlease use 'blobs/v2' instead.");
 }
 
 export interface PathOptions {

legacy/blobs.test.ts renamed to public/legacy.test.ts

@@ -3,16 +3,16 @@ import {uglify} from "rollup-plugin-uglify";
 
 const bundles = [
     {
-        entry: "legacy/blobs.ts",
+        entry: "public/legacy.ts",
         output: "index.js",
     },
     {
-        entry: "legacy/blobs.ts",
+        entry: "public/legacy.ts",
         output: "v1/index.js",
     },
     {
-        entry: "public/gen.ts",
-        output: "v2/gen.js",
+        entry: "public/blobs.ts",
+        output: "v2/index.js",
     },
 ];