[ { "path": ".github/workflows/push.yml", "content": "on: push\nname: on-push\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - uses: actions/setup-node@v1\n with:\n node-version: '18.x'\n - run: yarn\n - run: yarn run build\n - run: yarn run test\n" }, { "path": ".gitignore", "content": "coverage/\nnode_modules/\n~*\n*.js\n*.js.map\n*.d.ts\n.cache\ndist\n!rollup.config.js\ndocs/*.js\ndocs/*.svg\ndocs/*.css\n" }, { "path": ".npmignore", "content": "*\n!README.md\n!LICENSE\n!package.json\n!**/*.js\n!**/*.js.map\n!**/index.d.ts\n" }, { "path": "CHANGELOG.md", "content": "# 2.3.0\n\n- Add `CanvasCustomKeyframe` to `v2/animate`\n- Add `wigglePreset` to `v2/animate`\n\n# 2.2.1\n\n- Add support for custom point-based keyframes\n- Add option to set custom timestamp provider\n- Add module support, thank you to #4 and #7\n- Export `Animation` and `TimestampProvider` types from `v2/animate`\n\n# 2.2.0\n\n- Remove added points from end keyframe after interpolation completes.\n- Add play/pause/playPause API for animations.\n\n# 2.1.0\n\n- Improved type checks on user-provided data\n- Added `\"blobs/v2/animate\"`\n - Animate between arbitrary blob keyframes\n - Separate import to keep main bundle small\n - New demo website with animated blob transitions\n - Supports only canvas rendering\n\n# 2.0.1\n\n- Fix typo in code example of README\n\n# 2.0.0\n\n- **BREAKING** Editable SVG element creation function has moved to\n `blobs.xml(tagName)`.\n- Added `\"blobs/v2\"`\n - 30% smaller compressed size\n - Supports canvas rendering\n - Supports raw SVG path rendering\n\n# 1.1.0\n\n- Add support for editable output\n\n# 1.0.5\n\n- Fix assets in README on npmjs.com\n\n# 1.0.4\n\n- Use snapshot tests to verify consistency\n- Ignore unnecessary files in npm tarball\n- Output sourcemap file\n- Add project logo\n- README content updates\n\n# 1.0.3\n\n- Add link to demo page in the README\n\n# 1.0.2\n\n- Make transpiled output minified\n- Minor changes to the README\n\n# 1.0.1\n\n- Remove accidental dependency\n- Minor changes to the README\n\n# 1.0.0\n\n- Initial release\n" }, { "path": "CNAME", "content": "blobs.dev" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) Gabriel Harel\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.legacy.md", "content": "The legacy API exists to preserve compatibility for users importing the package\nusing a `script` tag. Because [unpkg.com](https://unpkg.com) serves the latest\nversion of the package if no version is specified, I can't break backwards\ncompatibility, even with a major release. This API also preserves a few features\nthat could potentially still be useful to some users (guide rendering and\neditable svg).\n\n---\n\n## Install\n\n```ts\n// $ npm install blobs\nconst blobs = require(\"blobs\");\n```\n\n```html\n\n```\n\n## Usage\n\n```typescript\nconst svg = blobs(options);\n```\n\n![](https://svgsaur.us?t=&w=5&h=32&b=fdcc56)\n![](https://svgsaur.us/?t=WARNING&w=103&h=32&s=16&y=21&x=12&b=feefcd&f=arial&o=b)\n![](https://svgsaur.us?t=&w=1&h=48&)\n\n_Options are **not**\n[sanitized](https://en.wikipedia.org/wiki/HTML_sanitization). Never trust raw\nuser-submitted values in the options._\n\n## Options\n\n#### Required\n\n| Name | Type | Description |\n| ------------ | -------- | -------------------------------------------- |\n| `size` | `number` | Bounding box dimensions (in pixels) |\n| `complexity` | `number` | Blob complexity (number of points) |\n| `contrast` | `number` | Blob contrast (randomness of point position) |\n\n#### Optional\n\n| Name | Type | Default | Description |\n| -------------- | ---------- | ---------- | ------------------------------------- |\n| `color` | `string?` | `\"none\"` | Fill color |\n| `stroke` | `object?` | `...` | Stroke options |\n| `stroke.color` | `string` | `\"none\"` | Stroke color |\n| `stroke.width` | `number` | `0` | Stroke width (in pixels) |\n| `seed` | `string?` | _`random`_ | Value to seed random number generator |\n| `guides` | `boolean?` | `false` | Render points, handles and stroke |\n\n_Either `stroke` or `color` must be defined._\n\n_Guides will use stroke color and width if defined. Otherwise, they default to\n`black` stroke with width of `1`._\n\n##### Example Options Object\n\n```typescript\nconst options = {\n size: 600,\n complexity: 0.2,\n contrast: 0.4,\n color: \"#ec576b\",\n stroke: {\n width: 0,\n color: \"black\",\n },\n guides: false,\n seed: \"1234\",\n};\n```\n\n## Advanced\n\nIf you need to edit the output svg for your use case, blobs also allows for\n_editable_ output.\n\n```typescript\nconst editableSvg = blobs.editable(options);\n```\n\nThe output of this function is a data structure that represents a nested svg\ndocument. This structure can be changed and rendered to a string using its\n`render` function.\n\n```typescript\neditableSvg.attributes.width = 1000;\nconst svg = editableSvg.render();\n```\n\nNew elements can be added anywhere in the hierarchy.\n\n```typescript\nconst xmlChild = blobs.xml(\"path\");\nxmlChild.attributes.stroke = \"red\";\n// ...\neditableSvg.children.push(xmlChild);\n```\n" }, { "path": "README.md", "content": "

\n Legacy documentation\n

\n\n

\n \n \n

\n\n

\n \n \n \n

\n\n## Install\n\n```bash\n$ npm install blobs\n```\n\n```ts\nimport * as blobs2 from \"blobs/v2\";\n```\n\n```ts\nimport * as blobs2Animate from \"blobs/v2/animate\";\n```\n\n

\n OR\n

\n\n```html\n\n```\n\n```html\n\n```\n\n## SVG Path\n\n```js\nconst svgPath = blobs2.svgPath({\n seed: Math.random(),\n extraPoints: 8,\n randomness: 4,\n size: 256,\n});\ndoSomething(svgPath);\n```\n\n## SVG\n\n```js\nconst svgString = blobs2.svg(\n {\n seed: Math.random(),\n extraPoints: 8,\n randomness: 4,\n size: 256,\n },\n {\n fill: \"white\", // 🚨 NOT SANITIZED\n stroke: \"black\", // 🚨 NOT SANITIZED\n strokeWidth: 4,\n },\n);\ncontainer.innerHTML = svgString;\n```\n\n## Canvas\n\n```js\nconst path = blobs2.canvasPath(\n {\n seed: Math.random(),\n extraPoints: 16,\n randomness: 2,\n size: 128,\n },\n {\n offsetX: 16,\n offsetY: 32,\n },\n);\nctx.stroke(path);\n```\n\n## Canvas Animation\n\n```js\nconst ctx = /* ... */;\nconst animation = blobs2Animate.canvasPath();\n\n// Set up rendering loop.\nconst renderAnimation = () => {\n ctx.clearRect(0, 0, width, height);\n ctx.fill(animation.renderFrame());\n requestAnimationFrame(renderAnimation);\n};\nrequestAnimationFrame(renderAnimation);\n\n// Transition to new blob on canvas click.\nctx.canvas.onclick = () => {\n animation.transition({\n duration: 4000,\n timingFunction: \"ease\",\n callback: loopAnimation,\n blobOptions: {...},\n });\n};\n```\n\n## Canvas Wiggle\n\n```js\nconst ctx = /* ... */;\nconst animation = blobs2Animate.canvasPath();\n\n// Set up rendering loop.\nconst renderAnimation = () => {\n ctx.clearRect(0, 0, width, height);\n ctx.fill(animation.renderFrame());\n requestAnimationFrame(renderAnimation);\n};\nrequestAnimationFrame(renderAnimation);\n\n// Begin wiggle animation.\nblobs2Animate.wigglePreset(\n animation\n /* blobOptions= */ {...},\n /* canvasOptions= */ {},\n /* wiggleOptions= */ {speed: 2},\n)\n```\n\n## Complete API\n\n### `\"blobs/v2\"`\n\n```ts\nexport interface BlobOptions {\n // A given seed will always produce the same blob.\n // Use `Math.random()` for pseudorandom behavior.\n seed: string | number;\n // Actual number of points will be `3 + extraPoints`.\n extraPoints: number;\n // Increases the amount of variation in point position.\n randomness: number;\n // Size of the bounding box.\n size: number;\n}\n\nexport interface CanvasOptions {\n // Coordinates of top-left corner of the blob.\n offsetX?: number;\n offsetY?: number;\n}\nexport const canvasPath: (blobOptions: BlobOptions, canvasOptions?: CanvasOptions) => Path2D;\n\nexport interface SvgOptions {\n fill?: string; // Default: \"#ec576b\".\n stroke?: string; // Default: \"none\".\n strokeWidth?: number; // Default: 0.\n}\nexport const svg: (blobOptions: BlobOptions, svgOptions?: SvgOptions) => string;\nexport const svgPath: (blobOptions: BlobOptions) => string;\n```\n\n### `\"blobs/v2/animate\"`\n\n```ts\ninterface Keyframe {\n // Duration of the keyframe animation in milliseconds.\n duration: number;\n // Delay before animation begins in milliseconds.\n // Default: 0.\n delay?: number;\n // Controls the speed of the animation over time.\n // Default: \"linear\".\n timingFunction?:\n | \"linear\"\n | \"easeEnd\"\n | \"easeStart\"\n | \"ease\"\n | \"elasticEnd0\"\n | \"elasticEnd1\"\n | \"elasticEnd2\"\n | \"elasticEnd3\";\n // Called after keyframe end-state is reached or passed.\n // Called exactly once when the keyframe end-state is rendered.\n // Not called if the keyframe is preempted by a new transition.\n callback?: () => void;\n // Standard options, refer to \"blobs/v2\" documentation.\n canvasOptions?: {\n offsetX?: number;\n offsetY?: number;\n };\n}\n\nexport interface CanvasKeyframe extends Keyframe {\n // Standard options, refer to \"blobs/v2\" documentation.\n blobOptions: {\n seed: number | string;\n randomness: number;\n extraPoints: number;\n size: number;\n };\n}\n\nexport interface CanvasCustomKeyframe extends Keyframe {\n // List of point coordinates that produce a single, closed shape.\n points: Point[];\n}\n\nexport interface Animation {\n // Renders the current state of the animation.\n renderFrame: () => Path2D;\n // Renders the current state of the animation as points.\n renderPoints: () => Point[];\n // Immediately begin animating through the given keyframes.\n // Non-rendered keyframes from previous transitions are cancelled.\n transition: (...keyframes: (CanvasKeyframe | CanvasCustomKeyframe)[]) => void;\n // Resume a paused animation. Has no effect if already playing.\n play: () => void;\n // Pause a playing animation. Has no effect if already paused.\n pause: () => void;\n // Toggle between playing and pausing the animation.\n playPause: () => void;\n}\n\n// Function that returns the current timestamp. This value will be used for all\n// duration/delay values and will be used to interpolate between keyframes. It\n// must produce values increasing in size.\n// Default: `Date.now`.\nexport interface TimestampProvider {\n (): number;\n}\nexport const canvasPath: (timestampProvider?: TimestampProvider) => Animation;\n\nexport interface WiggleOptions {\n // Speed of the wiggle movement. Higher is faster.\n speed: number;\n // Length of the transition from the current state to the wiggle blob.\n // Default: 0\n initialTransition?: number;\n}\n// Preset animation that produces natural-looking random movement.\n// The wiggle animation will continue indefinitely until the next transition.\nexport const wigglePreset = (\n animation: Animation,\n blobOptions: BlobOptions,\n canvasOptions: CanvasOptions,\n wiggleOptions: WiggleOptions,\n)\n```\n\n## License\n\n[MIT](./LICENSE)\n" }, { "path": "demo/content.ts", "content": "import {addCanvas, addTitle, colors, sizes} from \"./internal/layout\";\nimport {\n calcBouncePercentage,\n drawClosed,\n drawHandles,\n drawLine,\n drawOpen,\n drawPoint,\n forceStyles,\n point,\n tempStyles,\n} from \"./internal/canvas\";\nimport {\n coordPoint,\n deg,\n distance,\n expandHandle,\n forPoints,\n mapPoints,\n mod,\n shift,\n split,\n splitLine,\n} from \"../internal/util\";\nimport {timingFunctions} from \"../internal/animate/timing\";\nimport {Coord, Point} from \"../internal/types\";\nimport {rand} from \"../internal/rand\";\nimport {genFromOptions, smoothBlob} from \"../internal/gen\";\nimport {BlobOptions} from \"../public/blobs\";\nimport {interpolateBetween, interpolateBetweenSmooth} from \"../internal/animate/interpolate\";\nimport {divide} from \"../internal/animate/prepare\";\nimport {statefulAnimationGenerator} from \"../internal/animate/state\";\nimport {CanvasKeyframe, canvasPath, wigglePreset} from \"../public/animate\";\n\nconst makePoly = (pointCount: number, radius: number, center: Coord): Point[] => {\n const angle = (2 * Math.PI) / pointCount;\n const points: Point[] = [];\n const nullHandle = {angle: 0, length: 0};\n for (let i = 0; i < pointCount; i++) {\n const coord = expandHandle(center, {angle: i * angle, length: radius});\n points.push({...coord, handleIn: nullHandle, handleOut: nullHandle});\n }\n return points;\n};\n\nconst centeredBlob = (options: BlobOptions, center: Coord): Point[] => {\n return mapPoints(genFromOptions(options), ({curr}) => {\n curr.x += center.x - options.size / 2;\n curr.y += center.y - options.size / 2;\n return curr;\n });\n};\n\nconst calcFullDetails = (percentage: number, a: Point, b: Point) => {\n const a0: Coord = a;\n const a1 = expandHandle(a, a.handleOut);\n const a2 = expandHandle(b, b.handleIn);\n const a3: Coord = b;\n\n const b0 = splitLine(percentage, a0, a1);\n const b1 = splitLine(percentage, a1, a2);\n const b2 = splitLine(percentage, a2, a3);\n const c0 = splitLine(percentage, b0, b1);\n const c1 = splitLine(percentage, b1, b2);\n const d0 = splitLine(percentage, c0, c1);\n\n return {a0, a1, a2, a3, b0, b1, b2, c0, c1, d0};\n};\n\naddTitle(4, \"Vector graphics\");\n\naddCanvas(\n 1.3,\n // Pixelated circle.\n (ctx, width, height) => {\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n const gridSize = width * 0.01;\n const gridCountX = width / gridSize;\n const gridCountY = height / gridSize;\n\n // https://www.desmos.com/calculator/psohl602g5\n const radius = width * 0.3;\n const falloff = width * 0.0015;\n const thickness = width * 0.01;\n\n for (let x = 0; x < gridCountX; x++) {\n for (let y = 0; y < gridCountY; y++) {\n const curr = {\n x: x * gridSize + gridSize / 2,\n y: y * gridSize + gridSize / 2,\n };\n const d = distance(curr, center);\n const opacity = Math.max(\n 0,\n Math.min(1, Math.abs(thickness / (d - radius)) - falloff),\n );\n\n tempStyles(\n ctx,\n () => {\n ctx.globalAlpha = opacity;\n ctx.fillStyle = colors.highlight;\n },\n () => ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize),\n );\n }\n }\n\n return `Raster image formats encode images as a finite number of pixel values. They\n therefore have a maximum scale which depends on the display.`;\n },\n // Smooth circle.\n (ctx, width, height) => {\n const pt = width * 0.01;\n const shapeSize = width * 0.6;\n const cx = width * 0.5;\n const cy = height * 0.5;\n\n tempStyles(\n ctx,\n () => {\n ctx.lineWidth = pt;\n ctx.strokeStyle = colors.highlight;\n },\n () => {\n ctx.beginPath();\n ctx.arc(cx, cy, shapeSize / 2, 0, 2 * Math.PI);\n ctx.stroke();\n },\n );\n\n return `By contrast vector formats are defined by formulas and can scale infinitely. They\n are well suited for artwork with sharp lines and are used for font glyphs.`;\n },\n);\n\naddCanvas(\n 1.3,\n (ctx, width, height, animate) => {\n const startPeriod = (1 + Math.E) * 1000;\n const endPeriod = (1 + Math.PI) * 1000;\n\n animate((frameTime) => {\n const startPercentage = calcBouncePercentage(\n startPeriod,\n timingFunctions.ease,\n frameTime,\n );\n const startLengthPercentage = calcBouncePercentage(\n startPeriod * 0.8,\n timingFunctions.ease,\n frameTime,\n );\n const startAngle = split(startPercentage, -45, +45);\n const startLength = width * 0.1 + width * 0.2 * startLengthPercentage;\n const start = point(width * 0.2, height * 0.5, 0, 0, startAngle, startLength);\n\n const endPercentage = calcBouncePercentage(endPeriod, timingFunctions.ease, frameTime);\n const endLengthPercentage = calcBouncePercentage(\n endPeriod * 0.8,\n timingFunctions.ease,\n frameTime,\n );\n const endAngle = split(endPercentage, 135, 225);\n const endLength = width * 0.1 + width * 0.2 * endLengthPercentage;\n const end = point(width * 0.8, height * 0.5, endAngle, endLength, 0, 0);\n\n drawOpen(ctx, start, end, true);\n });\n\n return `Vector-based image formats often support Bezier curves. A cubic bezier curve is defined\n by four coordinates: the start/end points and corresponding \"handle\" points. Visually, these\n handles define the direction and \"momentum\" of the line. The curve is tangent to the handle\n at either of the points.`;\n },\n (ctx, width, height, animate) => {\n const angleRange = 20;\n const lengthRange = 40;\n const period = 5000;\n\n const r = rand(\"blobs\");\n const ra = r();\n const rb = r();\n const rc = r();\n const rd = r();\n\n const wobbleHandle = (\n frameTime: number,\n period: number,\n p: Point,\n locked: boolean,\n ): Point => {\n const angleIn =\n deg(p.handleIn.angle) +\n angleRange *\n (0.5 - calcBouncePercentage(period * 1.1, timingFunctions.ease, frameTime));\n const lengthIn =\n p.handleIn.length +\n lengthRange *\n (0.5 - calcBouncePercentage(period * 0.9, timingFunctions.ease, frameTime));\n const angleOut =\n deg(p.handleOut.angle) +\n angleRange *\n (0.5 - calcBouncePercentage(period * 0.9, timingFunctions.ease, frameTime));\n const lengthOut =\n p.handleOut.length +\n lengthRange *\n (0.5 - calcBouncePercentage(period * 1.1, timingFunctions.ease, frameTime));\n return point(p.x, p.y, angleIn, lengthIn, locked ? angleIn + 180 : angleOut, lengthOut);\n };\n\n animate((frameTime) => {\n const a = wobbleHandle(\n frameTime,\n period / 2 + (ra * period) / 2,\n point(width * 0.5, height * 0.3, 210, 100, -30, 100),\n false,\n );\n const b = wobbleHandle(\n frameTime,\n period / 2 + (rb * period) / 2,\n point(width * 0.8, height * 0.5, -90, 100, 90, 100),\n true,\n );\n const c = wobbleHandle(\n frameTime,\n period / 2 + (rc * period) / 2,\n point(width * 0.5, height * 0.9, -30, 75, -150, 75),\n false,\n );\n const d = wobbleHandle(\n frameTime,\n period / 2 + (rd * period) / 2,\n point(width * 0.2, height * 0.5, 90, 100, -90, 100),\n true,\n );\n\n drawClosed(ctx, [a, b, c, d], true);\n });\n\n return `Chaining curves together creates closed shapes. When the in/out handles of a point\n form a line, the transition is smooth, and the curve is tangent to the line.`;\n },\n);\n\naddCanvas(2, (ctx, width, height, animate) => {\n const period = Math.PI * Math.E * 1000;\n const start = point(width * 0.3, height * 0.8, 0, 0, -105, width * 0.32);\n const end = point(width * 0.7, height * 0.8, -75, width * 0.25, 0, 0);\n\n animate((frameTime) => {\n const percentage = calcBouncePercentage(period, timingFunctions.ease, frameTime);\n const d = calcFullDetails(percentage, start, end);\n\n tempStyles(\n ctx,\n () => {\n ctx.fillStyle = colors.secondary;\n ctx.strokeStyle = colors.secondary;\n },\n () => {\n drawLine(ctx, d.a0, d.a1, 1);\n drawLine(ctx, d.a1, d.a2, 1);\n drawLine(ctx, d.a2, d.a3, 1);\n drawLine(ctx, d.b0, d.b1, 1);\n drawLine(ctx, d.b1, d.b2, 1);\n drawLine(ctx, d.c0, d.c1, 1);\n\n drawPoint(ctx, d.a0, 1.3, \"a0\");\n drawPoint(ctx, d.a1, 1.3, \"a1\");\n drawPoint(ctx, d.a2, 1.3, \"a2\");\n drawPoint(ctx, d.a3, 1.3, \"a3\");\n drawPoint(ctx, d.b0, 1.3, \"b0\");\n drawPoint(ctx, d.b1, 1.3, \"b1\");\n drawPoint(ctx, d.b2, 1.3, \"b2\");\n drawPoint(ctx, d.c0, 1.3, \"c0\");\n drawPoint(ctx, d.c1, 1.3, \"c1\");\n drawPoint(ctx, d.d0, 1.3, \"d0\");\n },\n );\n\n tempStyles(\n ctx,\n () => (ctx.fillStyle = colors.highlight),\n () => drawPoint(ctx, d.d0, 3),\n );\n\n drawOpen(ctx, start, end, false);\n });\n\n return `Curves are rendered using the four input points (ends + handles). By connecting\n points a0-a3 with a line and then splitting each line by the same percentage, we've reduced\n the number of points by one. Repeating the same process with the new set of points until\n there is only one point remaining (d0) produces a single point on the line. Repeating this\n calculation for many different percentage values will produce a curve.\n

\n Note there is no constant relationship between the\n percentage that \"drew\" the point and the arc lengths before/after it. Uniform motion along\n the curve can only be approximated.`;\n});\n\naddTitle(4, \"Making a blob\");\n\naddCanvas(\n 1.3,\n (ctx, width, height, animate) => {\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n const radius = width * 0.3;\n const minPoints = 3;\n const extraPoints = 6;\n const pointDurationMs = 2000;\n\n animate((frameTime) => {\n const points =\n minPoints + extraPoints + (extraPoints / 2) * Math.sin(frameTime / pointDurationMs);\n const shape = makePoly(points, radius, center);\n\n // Draw lines from center to each point..\n tempStyles(\n ctx,\n () => {\n ctx.fillStyle = colors.secondary;\n ctx.strokeStyle = colors.secondary;\n },\n () => {\n drawPoint(ctx, center, 2);\n forPoints(shape, ({curr}) => {\n drawLine(ctx, center, curr, 1, 2);\n });\n },\n );\n\n drawClosed(ctx, shape, false);\n });\n\n return `Points are first distributed evenly around the center. At this stage the points\n technically have handles, but since they have a length of zero, they have no effect on\n the shape and it looks like a polygon.`;\n },\n (ctx, width, height, animate) => {\n const period = Math.PI * 1500;\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n const radius = width * 0.3;\n const points = 5;\n const randSeed = Math.random();\n const randStrength = 0.5;\n\n const shape = makePoly(points, radius, center);\n\n animate((frameTime) => {\n const percentage = calcBouncePercentage(period, timingFunctions.ease, frameTime);\n const rgen = rand(randSeed + Math.floor(frameTime / period) + \"\");\n\n // Draw original shape.\n tempStyles(\n ctx,\n () => {\n ctx.fillStyle = colors.secondary;\n ctx.strokeStyle = colors.secondary;\n },\n () => {\n drawPoint(ctx, center, 2);\n forPoints(shape, ({curr, next}) => {\n drawLine(ctx, curr, next(), 1, 2);\n });\n },\n );\n\n // Draw randomly shifted shape.\n const shiftedShape = shape.map(\n (p): Point => {\n const randOffset = percentage * (randStrength * rgen() - randStrength / 2);\n return coordPoint(splitLine(randOffset, p, center));\n },\n );\n\n drawClosed(ctx, shiftedShape, true);\n });\n\n return `Points are then randomly moved further or closer to the center. Using a seeded\n random number generator allows repeatable \"randomness\" whenever the blob is generated\n at a different time or place.`;\n },\n);\n\naddCanvas(\n 1.3,\n (ctx, width, height, animate) => {\n const options: BlobOptions = {\n extraPoints: 2,\n randomness: 6,\n seed: \"random\",\n size: width * 0.7,\n };\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n const interval = 2000;\n\n const blob = centeredBlob(options, center);\n const handles = mapPoints(blob, ({curr: p}) => {\n p.handleIn.length = 150;\n p.handleOut.length = 150;\n return p;\n });\n const polyBlob = blob.map(coordPoint);\n const pointCount = polyBlob.length;\n\n animate((frameTime) => {\n const activeIndex = Math.floor(frameTime / interval) % pointCount;\n const opacity = Math.abs(Math.sin((frameTime * Math.PI) / interval));\n\n tempStyles(\n ctx,\n () => {\n ctx.strokeStyle = colors.secondary;\n ctx.globalAlpha = opacity;\n },\n () => {\n forPoints(polyBlob, ({prev, next, index}) => {\n if (index !== activeIndex) return;\n drawLine(ctx, prev(), next(), 1, 2);\n });\n forPoints(handles, ({curr, index}) => {\n if (index !== activeIndex) return;\n drawHandles(ctx, curr, 1);\n });\n },\n );\n\n tempStyles(\n ctx,\n () => {\n ctx.fillStyle = colors.secondary;\n },\n () => {\n drawPoint(ctx, center, 2);\n },\n );\n\n drawClosed(ctx, polyBlob, false);\n });\n\n return `The angle of the handles for each point is parallel with the imaginary line\n stretching between its neighbors. Even when they have length zero, the angle of the\n handles can still be calculated.`;\n },\n (ctx, width, height, animate) => {\n const period = Math.PI * 1500;\n const options: BlobOptions = {\n extraPoints: 2,\n randomness: 6,\n seed: \"random\",\n size: width * 0.7,\n };\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n\n const blob = centeredBlob(options, center);\n\n animate((frameTime) => {\n const percentage = calcBouncePercentage(period, timingFunctions.ease, frameTime);\n\n // Draw original blob.\n tempStyles(\n ctx,\n () => {\n ctx.fillStyle = colors.secondary;\n ctx.strokeStyle = colors.secondary;\n },\n () => {\n drawPoint(ctx, center, 2);\n forPoints(blob, ({curr, next}) => {\n drawLine(ctx, curr, next(), 1, 2);\n });\n },\n );\n\n // Draw animated blob.\n const animatedBlob = mapPoints(blob, ({curr}) => {\n curr.handleIn.length *= percentage;\n curr.handleOut.length *= percentage;\n return curr;\n });\n\n drawClosed(ctx, animatedBlob, true);\n });\n\n return `The blob is then made smooth by extending the handles. The exact length\n depends on the distance between the given point and it's next neighbor. This value is\n multiplied by a ratio that would roughly produce a circle if the points had not been\n randomly moved.`;\n },\n);\n\naddTitle(4, \"Interpolating between blobs\");\n\naddCanvas(2, (ctx, width, height, animate) => {\n const period = Math.PI * 1000;\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n const fadeSpeed = 10;\n const fadeLead = 0.05;\n const fadeFloor = 0.2;\n\n const blobA = centeredBlob(\n {\n extraPoints: 3,\n randomness: 6,\n seed: \"12345\",\n size: height * 0.8,\n },\n center,\n );\n const blobB = centeredBlob(\n {\n extraPoints: 3,\n randomness: 6,\n seed: \"abc\",\n size: height * 0.8,\n },\n center,\n );\n\n animate((frameTime) => {\n const percentage = calcBouncePercentage(period, timingFunctions.ease, frameTime);\n\n const shiftedFrameTime = frameTime + period * fadeLead;\n const shiftedPercentage = calcBouncePercentage(\n period,\n timingFunctions.ease,\n shiftedFrameTime,\n );\n const shiftedPeriodPercentage = mod(shiftedFrameTime, period) / period;\n\n forceStyles(ctx, () => {\n const {pt} = sizes();\n ctx.fillStyle = \"transparent\";\n ctx.lineWidth = pt;\n ctx.strokeStyle = colors.secondary;\n ctx.setLineDash([2 * pt]);\n\n if (shiftedPeriodPercentage > 0.5) {\n ctx.globalAlpha = fadeFloor + fadeSpeed * (1 - shiftedPercentage);\n drawClosed(ctx, blobA, false);\n\n ctx.globalAlpha = fadeFloor;\n drawClosed(ctx, blobB, false);\n } else {\n ctx.globalAlpha = fadeFloor + fadeSpeed * shiftedPercentage;\n drawClosed(ctx, blobB, false);\n\n ctx.globalAlpha = fadeFloor;\n drawClosed(ctx, blobA, false);\n }\n });\n\n drawClosed(ctx, interpolateBetween(percentage, blobA, blobB), true);\n });\n\n return `The simplest way to interpolate between blobs would be to move points 0-N from their\n position in the start blob to their position in the end blob. The problem with this approach\n is that it doesn't allow for all blob to map to all blobs. Specifically it would only be\n possible to animate between blobs that have the same number of points. This means something\n more generic is required.`;\n});\n\naddCanvas(\n 1.3,\n (ctx, width, height, animate) => {\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n const maxExtraPoints = 7;\n const period = maxExtraPoints * Math.PI * 300;\n const {pt} = sizes();\n\n const blob = centeredBlob(\n {\n extraPoints: 0,\n randomness: 6,\n seed: \"flip\",\n size: height * 0.9,\n },\n center,\n );\n\n animate((frameTime) => {\n const percentage = mod(frameTime, period) / period;\n const extraPoints = Math.floor(percentage * (maxExtraPoints + 1));\n drawClosed(ctx, divide(extraPoints + blob.length, blob), true);\n\n forPoints(blob, ({curr}) => {\n ctx.beginPath();\n ctx.arc(curr.x, curr.y, pt * 6, 0, 2 * Math.PI);\n\n tempStyles(\n ctx,\n () => {\n ctx.strokeStyle = colors.secondary;\n ctx.lineWidth = pt;\n },\n () => {\n ctx.stroke();\n },\n );\n });\n });\n\n return `The first step to prepare animation is to make the number of points between the\n start and end shapes equal. This is done by adding points to the shape with least points\n until they are both equal.\n

\n For best animation quality it is important that these points are as evenly distributed\n as possible all around the shape so this is not a recursive algorithm.`;\n },\n (ctx, width, height, animate) => {\n const period = Math.PI ** Math.E * 1000;\n const start = point(width * 0.1, height * 0.6, 0, 0, -45, width * 0.5);\n const end = point(width * 0.9, height * 0.6, 160, width * 0.3, 0, 0);\n\n animate((frameTime) => {\n const percentage = calcBouncePercentage(period, timingFunctions.ease, frameTime);\n const d = calcFullDetails(percentage, start, end);\n\n tempStyles(\n ctx,\n () => {\n ctx.fillStyle = colors.secondary;\n ctx.strokeStyle = colors.secondary;\n },\n () => {\n drawLine(ctx, d.a0, d.a1, 1);\n drawLine(ctx, d.a1, d.a2, 1, 2);\n drawLine(ctx, d.a2, d.a3, 1);\n drawLine(ctx, d.b0, d.b1, 1, 2);\n drawLine(ctx, d.b1, d.b2, 1, 2);\n\n drawPoint(ctx, d.a0, 1.3, \"a0\");\n drawPoint(ctx, d.a1, 1.3, \"a1\");\n drawPoint(ctx, d.a2, 1.3, \"a2\");\n drawPoint(ctx, d.a3, 1.3, \"a3\");\n drawPoint(ctx, d.b1, 1.3, \"b1\");\n },\n );\n\n forceStyles(ctx, () => {\n const {pt} = sizes();\n ctx.fillStyle = colors.secondary;\n ctx.strokeStyle = colors.secondary;\n ctx.lineWidth = pt;\n\n drawOpen(ctx, start, end, false);\n });\n\n tempStyles(\n ctx,\n () => {\n ctx.fillStyle = colors.highlight;\n ctx.strokeStyle = colors.highlight;\n },\n () => {\n drawLine(ctx, d.c0, d.c1, 1);\n drawLine(ctx, d.a0, d.b0, 1);\n drawLine(ctx, d.a3, d.b2, 1);\n\n drawPoint(ctx, d.b0, 1.3, \"b0\");\n drawPoint(ctx, d.b2, 1.3, \"b2\");\n drawPoint(ctx, d.c0, 1.3, \"c0\");\n drawPoint(ctx, d.c1, 1.3, \"c1\");\n },\n );\n\n tempStyles(\n ctx,\n () => (ctx.fillStyle = colors.highlight),\n () => drawPoint(ctx, d.d0, 1.3, \"d0\"),\n );\n });\n\n return `It is only possible to reliably add points to a blob because attempting to\n remove points without modifying the shape is almost never possible and is expensive to\n compute.\n

\n Adding a point is done using the line-drawing geometry. In this example \"d0\" is the new\n point with its handles being \"c0\" and \"c1\". The original points get new handles \"b0\" and\n \"b2\"`;\n },\n);\n\naddCanvas(\n 1.3,\n (ctx, width, height, animate) => {\n const period = (Math.E / Math.PI) * 1000;\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n\n const blob = centeredBlob(\n {\n extraPoints: 3,\n randomness: 6,\n seed: \"shift\",\n size: height * 0.9,\n },\n center,\n );\n\n const shiftedBlob = shift(1, blob);\n\n let prev = 0;\n let count = 0;\n animate((frameTime) => {\n const animationTime = mod(frameTime, period);\n const percentage = timingFunctions.ease(mod(animationTime, period) / period);\n\n // Count animation loops.\n if (percentage < prev) count++;\n prev = percentage;\n\n // Draw lines points are travelling.\n tempStyles(\n ctx,\n () => {\n ctx.fillStyle = colors.secondary;\n ctx.strokeStyle = colors.secondary;\n },\n () => {\n drawPoint(ctx, center, 2);\n forPoints(blob, ({curr, next}) => {\n drawLine(ctx, curr, next(), 1, 2);\n });\n },\n );\n\n // Pause in-place every other animation loop.\n if (count % 2 === 0) {\n drawClosed(ctx, interpolateBetweenSmooth(2, percentage, blob, shiftedBlob), true);\n } else {\n drawClosed(ctx, blob, true);\n }\n });\n\n return `Once both shapes have the same amount of points, an ordering of points which reduces\n the total amount of distance traveled by the points during the transition needs to be\n selected. Because the shapes are closed, points can be shifted by any amount without\n visually affecting the shape.`;\n },\n (ctx, width, height, animate) => {\n const period = Math.PI * Math.E * 1000;\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n\n const blob = centeredBlob(\n {\n extraPoints: 3,\n randomness: 6,\n seed: \"flip\",\n size: height * 0.9,\n },\n center,\n );\n const reversedBlob = mapPoints(blob, ({curr}) => {\n const temp = curr.handleIn;\n curr.handleIn = curr.handleOut;\n curr.handleOut = temp;\n return curr;\n });\n reversedBlob.reverse();\n\n animate((frameTime) => {\n const percentage = calcBouncePercentage(period, timingFunctions.ease, frameTime);\n\n forceStyles(ctx, () => {\n const {pt} = sizes();\n ctx.fillStyle = \"transparent\";\n ctx.lineWidth = pt;\n ctx.strokeStyle = colors.secondary;\n ctx.setLineDash([2 * pt]);\n drawClosed(ctx, blob, false);\n });\n\n drawClosed(ctx, interpolateBetweenSmooth(2, percentage, blob, reversedBlob), true);\n });\n\n return `Points can also be reversed without visually affecting the shape. Then, again can\n be shifted all around. Although reversed ordering doesn't change the shape, it has a\n dramatic effect on the animation as it makes the loop flip over itself.\n

\n In total there are 2 * num_points different orderings of the\n points that can work for transition purposes.`;\n },\n);\n\naddCanvas(\n 1.3,\n (ctx, width, height) => {\n // Only animate in the most recent painter call.\n const animationID = Math.random();\n const wasReplaced = () => (ctx.canvas as any).animationID !== animationID;\n\n const period = Math.PI * 1000;\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n const size = Math.min(width, height) * 0.8;\n\n const canvasBlobGenerator = (keyframe: CanvasKeyframe): Point[] => {\n return mapPoints(genFromOptions(keyframe.blobOptions), ({curr}) => {\n curr.x += center.x - size / 2;\n curr.y += center.y - size / 2;\n return curr;\n });\n };\n\n const animation = statefulAnimationGenerator(\n canvasBlobGenerator,\n (points: Point[]) => drawClosed(ctx, points, true),\n () => {},\n )(Date.now);\n\n const renderFrame = () => {\n if (wasReplaced()) return;\n ctx.clearRect(0, 0, width, height);\n animation.renderFrame();\n requestAnimationFrame(renderFrame);\n };\n requestAnimationFrame(renderFrame);\n\n const loopAnimation = (): void => {\n if (wasReplaced()) return;\n animation.transition(genFrame());\n };\n\n let frameCount = -1;\n const genFrame = (overrides: Partial = {}): CanvasKeyframe => {\n frameCount++;\n return {\n duration: period,\n timingFunction: \"ease\",\n callback: loopAnimation,\n blobOptions: {\n extraPoints: Math.max(0, mod(frameCount, 4) - 1),\n randomness: 4,\n seed: Math.random(),\n size,\n },\n ...overrides,\n };\n };\n\n animation.transition(genFrame({duration: 0}));\n\n ctx.canvas.onclick = () => {\n if (wasReplaced()) return;\n animation.playPause();\n };\n\n (ctx.canvas as any).animationID = animationID;\n\n return `The added points can be removed at the end of a transition when the target shape has\n been reached. However, if the animation is interrupted during interpolation there is no\n opportunity to clean up the extra points.`;\n },\n (ctx, width, height, animate) => {\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n const size = Math.min(width, height) * 0.8;\n\n const drawStar = (rays: number, od: number, id: number): Point[] => {\n const pointCount = 2 * rays;\n const angle = (Math.PI * 2) / pointCount;\n const points: Point[] = [];\n for (let i = 0; i < pointCount; i++) {\n const pointX = Math.sin(i * angle);\n const pointY = Math.cos(i * angle);\n const distanceMultiplier = (i % 2 === 0 ? od : id) / 2;\n points.push({\n x: center.x + pointX * distanceMultiplier,\n y: center.y + pointY * distanceMultiplier,\n handleIn: {angle: 0, length: 0},\n handleOut: {angle: 0, length: 0},\n });\n }\n return points;\n };\n\n const drawPolygon = (sides: number, od: number): Point[] => {\n const angle = (Math.PI * 2) / sides;\n const points: Point[] = [];\n for (let i = 0; i < sides; i++) {\n const pointX = Math.sin(i * angle);\n const pointY = Math.cos(i * angle);\n const distanceMultiplier = od / 2;\n points.push({\n x: center.x + pointX * distanceMultiplier,\n y: center.y + pointY * distanceMultiplier,\n handleIn: {angle: 0, length: 0},\n handleOut: {angle: 0, length: 0},\n });\n }\n return points;\n };\n\n const shapes = [\n drawStar(8, size, size * 0.7),\n smoothBlob(drawPolygon(3, size)),\n smoothBlob(drawStar(10, size, size * 0.9)),\n drawPolygon(4, size),\n smoothBlob(drawStar(3, size, size * 0.6)),\n ];\n\n const animation = canvasPath();\n const genFrame = (index: number) => () => {\n animation.transition({\n points: shapes[index % shapes.length],\n duration: 3000,\n delay: 1000,\n timingFunction: \"ease\",\n callback: genFrame(index + 1),\n });\n };\n animation.transition({\n points: shapes[0],\n duration: 0,\n callback: genFrame(1),\n });\n\n animate(() => {\n drawClosed(ctx, animation.renderPoints(), true);\n });\n\n return `Putting all these pieces together, the blob transition library can also be used to\n tween between non-blob shapes. The more detail a shape has, the more unconvincing the\n animation will look. In these cases, manually creating in-between frames can be a\n helpful tool.`;\n },\n);\n\naddTitle(4, \"Gooeyness\");\n\naddCanvas(\n 1.3,\n (ctx, width, height, animate) => {\n const size = Math.min(width, height) * 0.8;\n const center: Coord = {x: (width - size) * 0.5, y: (height - size) * 0.5};\n\n const animation = canvasPath();\n\n const genFrame = (duration: number) => {\n animation.transition({\n duration: duration,\n blobOptions: {\n extraPoints: 2,\n randomness: 3,\n seed: Math.random(),\n size,\n },\n callback: () => genFrame(3000),\n timingFunction: \"ease\",\n canvasOptions: {offsetX: center.x, offsetY: center.y},\n });\n };\n genFrame(0);\n\n animate(() => {\n drawClosed(ctx, animation.renderPoints(), true);\n });\n\n return `This library uses the keyframe model to define animations. This is a flexible\n approach, but it does not lend itself well to the kind of gooey blob shapes invite.\n

\n When looking at this animation, you may be able to notice the rhythm of the\n keyframes where the points start moving and stop moving at the same time.`;\n },\n (ctx, width, height, animate) => {\n const size = Math.min(width, height) * 0.8;\n const center: Coord = {x: width * 0.5, y: height * 0.5};\n\n const animation = canvasPath();\n\n wigglePreset(\n animation,\n {\n extraPoints: 2,\n randomness: 3,\n seed: Math.random(),\n size,\n },\n {\n offsetX: center.x - size / 2,\n offsetY: center.y - size / 2,\n },\n {\n speed: 2,\n },\n );\n\n animate(() => {\n drawClosed(ctx, animation.renderPoints(), true);\n });\n\n return `In addition to the keyframe API, there is now also pre-built preset which produces a\n gooey animation without much effort and much prettier results.\n

\n This approach uses a noise field instead of random numbers to move individual points\n around continuously and independently. Repeated calls to a noise-field-powered random\n number generator will produce self-similar results.`;\n },\n);\n" }, { "path": "demo/example.ts", "content": "import {CanvasKeyframe, canvasPath, wigglePreset} from \"../public/animate\";\nimport {drawHandles, drawPoint} from \"./internal/canvas\";\nimport {isDebug} from \"./internal/debug\";\nimport {colors} from \"./internal/layout\";\n\n// Fetch reference to example container.\nconst exampleContainer = document.querySelector(\".example\")!;\n\nconst canvas = document.createElement(\"canvas\")!;\nexampleContainer.appendChild(canvas);\n\nlet size = 0;\nconst resize = () => {\n // Set blob size relative to window, but limit to 600.\n const rawSize = Math.min(600, Math.min(window.innerWidth - 64, window.innerHeight / 2));\n canvas.style.width = `${rawSize}px`;\n canvas.style.height = `${rawSize}px`;\n\n // Scale resolution to take into account device pixel ratio.\n size = rawSize * (window.devicePixelRatio || 1);\n\n canvas.width = size;\n canvas.height = size;\n};\n\n// Set blob color and set context to erase intersection of content.\nconst ctx = canvas.getContext(\"2d\")!;\n\n// Create animation and draw its frames in `requestAnimationFrame` callbacks.\nconst animation = canvasPath();\nconst renderFrame = () => {\n ctx.clearRect(0, 0, size, size);\n ctx.fillStyle = colors.highlight;\n ctx.strokeStyle = colors.highlight;\n\n if (isDebug()) {\n const points = animation.renderPoints();\n for (const point of points) {\n drawPoint(ctx, point, 2);\n drawHandles(ctx, point, 1);\n }\n }\n\n ctx.fill(animation.renderFrame());\n requestAnimationFrame(renderFrame);\n};\nrequestAnimationFrame(renderFrame);\n\n// Extra points that increases when blob gets clicked.\nlet extraPoints = 0;\n\nconst genWiggle = (transition: number) => {\n wigglePreset(\n animation,\n {\n extraPoints: 3 + extraPoints,\n randomness: 1.5,\n seed: Math.random(),\n size,\n },\n {},\n {speed: 2, initialTransition: transition},\n );\n};\n\n// Generate a keyframe with overridable default values.\nconst genFrame = (overrides: any = {}): CanvasKeyframe => {\n const blobOptions = {\n extraPoints: 3 + extraPoints,\n randomness: 4,\n seed: Math.random(),\n size,\n ...overrides.blobOptions,\n };\n return {\n duration: 4000,\n timingFunction: \"ease\",\n callback: loopAnimation,\n ...overrides,\n blobOptions,\n };\n};\n\n// Callback for every frame which starts transition to a new frame.\nconst loopAnimation = (): void => {\n extraPoints = 0;\n genWiggle(5000);\n};\n\n// Quickly animate to a new frame when canvas is clicked.\ncanvas.onclick = () => {\n extraPoints++;\n animation.transition(\n genFrame({\n duration: 400,\n timingFunction: \"elasticEnd0\",\n blobOptions: {extraPoints},\n }),\n );\n};\n\n// Immediately show a new frame.\nwindow.addEventListener(\"load\", () => {\n resize();\n genWiggle(0);\n});\n\n// Make blob a circle while window is being resized.\nwindow.addEventListener(\"resize\", () => {\n resize();\n const tempSize = (size * 6) / 7;\n animation.transition(\n genFrame({\n duration: 100,\n timingFunction: \"easeEnd\",\n blobOptions: {\n extraPoints: 0,\n randomness: 0,\n seed: \"\",\n size: tempSize,\n },\n canvasOptions: {\n offsetX: (size - tempSize) / 2,\n offsetY: (size - tempSize) / 2,\n },\n }),\n );\n});\n" }, { "path": "demo/index.html", "content": "\n \n \n \n \n \n \n
\n \n \n
\n
\n
\n
How it works
\n
\n
\n \n \n \n\n" }, { "path": "demo/internal/canvas.ts", "content": "import {TimingFunc} from \"../../internal/animate/timing\";\nimport {Coord, Point} from \"../../internal/types\";\nimport {expandHandle, forPoints, mod, rad} from \"../../internal/util\";\nimport {isDebug} from \"../internal/debug\";\nimport {colors, sizes} from \"../internal/layout\";\n\nexport const forceStyles = (ctx: CanvasRenderingContext2D, fn: () => void) => {\n if (!(ctx as any).forcedStyles) (ctx as any).forcedStyles = 0;\n (ctx as any).forcedStyles++;\n ctx.save();\n fn();\n ctx.restore();\n (ctx as any).forcedStyles--;\n};\n\nexport const tempStyles = (ctx: CanvasRenderingContext2D, style: () => void, fn: () => void) => {\n if ((ctx as any).forcedStyles > 0) {\n fn();\n } else {\n ctx.save();\n style();\n fn();\n ctx.restore();\n }\n};\n\nexport const rotateAround = (\n options: {\n ctx: CanvasRenderingContext2D;\n angle: number;\n cx: number;\n cy: number;\n },\n fn: () => void,\n) => {\n tempStyles(\n options.ctx,\n () => {\n options.ctx.translate(options.cx, options.cy);\n options.ctx.rotate(options.angle);\n },\n () => {\n if (isDebug()) {\n tempStyles(\n options.ctx,\n () => (options.ctx.fillStyle = colors.debug),\n () => {\n options.ctx.fillRect(0, -4, 1, 8);\n options.ctx.fillRect(-32, 0, 64, 1);\n },\n );\n }\n fn();\n },\n );\n};\n\nexport const point = (\n x: number,\n y: number,\n ia: number,\n il: number,\n oa: number,\n ol: number,\n): Point => {\n return {\n x: x,\n y: y,\n handleIn: {angle: rad(ia), length: il},\n handleOut: {angle: rad(oa), length: ol},\n };\n};\n\nexport const drawPoint = (\n ctx: CanvasRenderingContext2D,\n coord: Coord,\n size: number,\n label?: string,\n) => {\n const radius = sizes().pt * size;\n const pointPath = new Path2D();\n pointPath.arc(coord.x, coord.y, radius, 0, 2 * Math.PI);\n ctx.fill(pointPath);\n\n if (label) {\n tempStyles(\n ctx,\n () => (ctx.font = `${6 * radius}px monospace`),\n () => ctx.fillText(label, coord.x + 2 * radius, coord.y - radius),\n );\n }\n};\n\nexport const drawLine = (\n ctx: CanvasRenderingContext2D,\n a: Coord,\n b: Coord,\n size: number,\n dash?: number,\n) => {\n tempStyles(\n ctx,\n () => {\n const width = sizes().pt * size;\n if (dash) ctx.setLineDash([dash * width]);\n },\n () => {\n const width = sizes().pt * size;\n const linePath = new Path2D();\n linePath.moveTo(a.x, a.y);\n linePath.lineTo(b.x, b.y);\n ctx.lineWidth = width;\n ctx.stroke(linePath);\n },\n );\n};\n\nexport const drawClosed = (ctx: CanvasRenderingContext2D, points: Point[], handles?: boolean) => {\n forPoints(points, ({curr, next}) => {\n drawOpen(ctx, curr, next(), handles);\n });\n};\n\nexport const drawDebugClosed = (ctx: CanvasRenderingContext2D, points: Point[], size: number) => {\n forPoints(points, ({curr, next: nextFn}) => {\n drawHandles(ctx, curr, size);\n\n const next = nextFn();\n const currHandle = expandHandle(curr, curr.handleIn);\n const nextHandle = expandHandle(curr, curr.handleOut);\n const curve = new Path2D();\n curve.moveTo(curr.x, curr.y);\n curve.bezierCurveTo(currHandle.x, currHandle.y, nextHandle.x, nextHandle.y, next.x, next.y);\n ctx.lineWidth = sizes().pt * size * 2;\n ctx.stroke(curve);\n\n drawPoint(ctx, curr, size * 1.1);\n });\n};\n\nexport const drawHandles = (ctx: CanvasRenderingContext2D, point: Point, size: number) => {\n const inHandle = expandHandle(point, point.handleIn);\n const outHandle = expandHandle(point, point.handleOut);\n drawLine(ctx, point, inHandle, size);\n drawLine(ctx, point, outHandle, size, 2);\n drawPoint(ctx, inHandle, size * 1.4);\n drawPoint(ctx, outHandle, size * 1.4);\n};\n\nexport const drawOpen = (\n ctx: CanvasRenderingContext2D,\n start: Point,\n end: Point,\n handles?: boolean,\n) => {\n const width = sizes().width;\n const startHandle = expandHandle(start, start.handleOut);\n const endHandle = expandHandle(end, end.handleIn);\n\n // Draw handles.\n if (handles) {\n tempStyles(\n ctx,\n () => {\n ctx.fillStyle = colors.secondary;\n ctx.strokeStyle = colors.secondary;\n },\n () => {\n drawLine(ctx, start, startHandle, 1);\n drawLine(ctx, end, endHandle, 1, 2);\n\n drawPoint(ctx, startHandle, 1.4);\n drawPoint(ctx, endHandle, 1.4);\n },\n );\n }\n\n // Draw curve.\n tempStyles(\n ctx,\n () => {\n const lineWidth = width * 0.003;\n ctx.lineWidth = lineWidth;\n },\n () => {\n const curve = new Path2D();\n curve.moveTo(start.x, start.y);\n curve.bezierCurveTo(\n startHandle.x,\n startHandle.y,\n endHandle.x,\n endHandle.y,\n end.x,\n end.y,\n );\n\n tempStyles(\n ctx,\n () => (ctx.strokeStyle = colors.highlight),\n () => ctx.stroke(curve),\n );\n\n tempStyles(\n ctx,\n () => (ctx.fillStyle = colors.highlight),\n () => {\n drawPoint(ctx, start, 2);\n drawPoint(ctx, end, 2);\n },\n );\n },\n );\n};\n\nexport const calcBouncePercentage = (period: number, timingFunc: TimingFunc, frameTime: number) => {\n const halfPeriod = period / 2;\n const animationTime = mod(frameTime, period);\n if (animationTime <= halfPeriod) {\n return timingFunc(animationTime / halfPeriod);\n } else {\n return timingFunc(1 - (animationTime - halfPeriod) / halfPeriod);\n }\n};\n" }, { "path": "demo/internal/debug.ts", "content": "// If debug is initially set to false it will not be toggleable.\nlet debug = window.location.search.includes(\"debug\") && location.hostname === \"localhost\";\nexport const isDebug = () => debug;\n\nconst debugListeners: ((debug: boolean) => void)[] = [];\nexport const onDebugStateChange = (fn: (debug: boolean) => void) => {\n debugListeners.push(fn);\n fn(debug);\n};\n\nif (debug && document.body) {\n const toggleButton = document.createElement(\"button\");\n toggleButton.innerHTML = \"debug\";\n toggleButton.style.padding = \"2rem\";\n toggleButton.style.position = \"fixed\";\n toggleButton.style.top = \"0\";\n toggleButton.onclick = () => {\n debug = !debug;\n for (const listener of debugListeners) {\n listener(debug);\n }\n };\n document.body.prepend(toggleButton);\n}\n" }, { "path": "demo/internal/layout.ts", "content": "import {tempStyles} from \"./canvas\";\nimport {isDebug, onDebugStateChange} from \"./debug\";\n\nexport const colors = {\n debug: \"green\",\n highlight: \"#ec576b\",\n secondary: \"#555\",\n};\n\ninterface Cell {\n aspectRatio: number;\n canvas: HTMLCanvasElement;\n ctx: CanvasRenderingContext2D;\n painter: CellPainter;\n animationID: number;\n}\n\nexport interface CellPainter {\n (\n ctx: CanvasRenderingContext2D,\n width: number,\n height: number,\n animate: (painter: AnimationPainter) => void,\n ): string | void;\n}\n\nexport interface AnimationPainter {\n (timestamp: number): void;\n}\n\n// Global cell state.\nconst cells = ((window as any).cells as Cell[][]) || [];\n((window as any).cells as Cell[][]) = cells;\n\nconst containerElement = document.querySelector(\".container\");\nif (!containerElement) throw \"missing container\";\n\nconst howItWorksElement = document.querySelector(\".how-it-works\");\nif (!howItWorksElement) throw \"missing container\";\n\nlet animating = false;\nconst reveal = () => {\n containerElement.classList.add(\"open\");\n howItWorksElement.classList.add(\"hidden\");\n animating = true;\n redraw();\n};\nhowItWorksElement.addEventListener(\"click\", reveal);\nif (document.location.hash || isDebug()) setTimeout(reveal);\n\nexport const sizes = (): {width: number; pt: number} => {\n const sectionStyle = window.getComputedStyle(\n (containerElement.lastChild as any) || document.body,\n );\n const sectionWidth = Number(sectionStyle.getPropertyValue(\"width\").slice(0, -2));\n const width = sectionWidth * window.devicePixelRatio;\n return {width, pt: width * 0.002};\n};\n\nconst createSection = (): HTMLElement => {\n const numberLabel = (\"000\" + cells.length).substr(-3);\n\n const sectionElement = document.createElement(\"div\");\n sectionElement.classList.add(\"section\");\n sectionElement.setAttribute(\"id\", numberLabel);\n containerElement.appendChild(sectionElement);\n\n const numberElement = document.createElement(\"a\");\n numberElement.classList.add(\"number\");\n numberElement.setAttribute(\"href\", \"#\" + numberLabel);\n numberElement.appendChild(document.createTextNode(numberLabel));\n sectionElement.appendChild(numberElement);\n\n return sectionElement;\n};\n\n// Adds a section of text to the bottom of the layout.\nexport const addTitle = (heading: number, text: string) => {\n const wrapperElement = document.createElement(`h${heading}`);\n wrapperElement.classList.add(\"title\");\n containerElement.appendChild(wrapperElement);\n\n const textWrapperElement = document.createElement(\"div\");\n textWrapperElement.classList.add(\"text\");\n wrapperElement.appendChild(textWrapperElement);\n\n text = text.replace(\"\\n\", \" \").replace(/\\s+/g, \" \").trim();\n const textElement = document.createTextNode(text);\n textWrapperElement.appendChild(textElement);\n};\n\nconst handleIntersection = (entries: any) => {\n entries.map((entry: any) => {\n entry.target.setAttribute(\"data-visible\", entry.isIntersecting);\n });\n};\n\n// Adds a row of cells to the bottom of the layout.\nexport const addCanvas = (aspectRatio: number, ...painters: CellPainter[]) => {\n const sectionElement = createSection();\n\n if (painters.length == 0) {\n painters = [() => {}];\n }\n\n const cellRow: Cell[] = [];\n for (const painter of painters) {\n const cellElement = document.createElement(\"div\");\n cellElement.classList.add(\"cell\");\n sectionElement.appendChild(cellElement);\n\n const canvas = document.createElement(\"canvas\");\n cellElement.appendChild(canvas);\n\n const labelElement = document.createElement(\"div\");\n labelElement.classList.add(\"label\");\n cellElement.appendChild(labelElement);\n\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) throw \"missing canvas context\";\n\n const cell = {aspectRatio, canvas, ctx, painter, animationID: -1};\n cellRow.push(cell);\n\n new IntersectionObserver(handleIntersection, {\n threshold: 0.1,\n }).observe(canvas);\n }\n cells.push(cellRow);\n\n redraw();\n};\n\n// Lazily redraw canvas cells to match window resolution.\nlet redrawTimeout: undefined | number = undefined;\nconst redraw = () => {\n window.clearTimeout(redrawTimeout);\n redrawTimeout = window.setTimeout(() => {\n for (const cellRow of cells) {\n const cellWidth = sizes().width / cellRow.length;\n for (const cell of cellRow) {\n const cellHeight = cellWidth / cell.aspectRatio;\n\n // Resize canvas;\n cell.canvas.width = cellWidth;\n cell.canvas.height = cellHeight;\n\n // Draw canvas debug info.\n const drawDebug = () => {\n if (isDebug()) {\n tempStyles(\n cell.ctx,\n () => (cell.ctx.strokeStyle = colors.debug),\n () => cell.ctx.strokeRect(0, 0, cellWidth, cellHeight - 1),\n );\n }\n };\n drawDebug();\n\n // Keep track of paused state.\n let pausedAt = 0;\n let pauseOffset = 0;\n cell.canvas.onclick = () => {\n if (pausedAt === 0) {\n pausedAt = Date.now();\n } else {\n pauseOffset += Date.now() - pausedAt;\n pausedAt = 0;\n }\n };\n\n // Cell-specific callback for providing an animation painter.\n const animate = (painter: AnimationPainter) => {\n if (!animating) return;\n\n const animationID = Math.random();\n const startTime = Date.now();\n cell.animationID = animationID;\n\n const drawFrame = () => {\n // Stop animating if cell is redrawn.\n if (cell.animationID !== animationID) return;\n\n const visible = cell.canvas.getAttribute(\"data-visible\") === \"true\";\n if (pausedAt === 0 && visible) {\n const frameTime = Date.now() - startTime - pauseOffset;\n cell.ctx.clearRect(0, 0, cellWidth, cellHeight);\n drawDebug();\n if (isDebug()) {\n tempStyles(\n cell.ctx,\n () => (cell.ctx.fillStyle = colors.debug),\n () => cell.ctx.fillText(String(frameTime), 10, 15),\n );\n }\n painter(frameTime);\n }\n\n requestAnimationFrame(drawFrame);\n };\n drawFrame();\n };\n\n // Redraw canvas contents and replace label if changed.\n const label = cell.painter(cell.ctx, cellWidth, cellHeight, animate);\n if (label) {\n const cellElement = cell.canvas.parentElement;\n if (cellElement) {\n cellElement.style.width = `${100 / cellRow.length}%`;\n const labelElement = cellElement.querySelector(\".label\");\n if (labelElement && labelElement.innerHTML !== label) {\n labelElement.innerHTML = \"\";\n labelElement.innerHTML = label;\n }\n }\n }\n }\n }\n }, 100);\n};\n\nwindow.addEventListener(\"load\", redraw);\nwindow.addEventListener(\"resize\", redraw);\nonDebugStateChange(redraw);\n" }, { "path": "examples/corner-expand.html", "content": "\n \n Expand demo\n \n \n \n \n
\n \n\n \n \n\n" }, { "path": "index.html", "content": "
How it works
" }, { "path": "internal/animate/frames.ts", "content": "import {TimingFunc, timingFunctions} from \"./timing\";\nimport {Point} from \"../types\";\nimport {prepare} from \"./prepare\";\nimport {interpolateBetween} from \"./interpolate\";\n\nexport interface Keyframe {\n delay?: number;\n duration: number;\n timingFunction?: keyof typeof timingFunctions;\n}\n\nexport interface InternalKeyframe {\n id: string;\n timestamp: number;\n timingFunction: TimingFunc;\n initialPoints: Point[];\n transitionSourceFrameIndex: number;\n\n // Synthetic keyframes are generated to represent the current state when\n // a new transition is begun.\n isSynthetic: boolean;\n}\n\nexport interface RenderCache {\n [frameId: string]: {\n preparedEndPoints?: Point[];\n preparedStartPoints?: Point[];\n };\n}\n\nexport interface RenderInput {\n currentFrames: InternalKeyframe[];\n timestamp: number;\n renderCache: RenderCache;\n}\n\nexport interface RenderOutput {\n points: Point[];\n lastFrameId: string | null;\n renderCache: RenderCache;\n}\n\nexport interface TransitionInput extends RenderInput {\n newFrames: T[];\n shapeGenerator: (keyframe: T) => Point[];\n}\n\nexport interface TransitionOutput {\n newFrames: InternalKeyframe[];\n}\n\nconst genId = (): string => {\n return String(Math.random()).substr(2);\n};\n\nexport const renderFramesAt = (input: RenderInput): RenderOutput => {\n const {renderCache, currentFrames} = input;\n\n if (currentFrames.length === 0) {\n return {renderCache, lastFrameId: null, points: []};\n }\n\n // Animation freezes at the final shape if there are no more keyframes.\n if (currentFrames.length === 1) {\n const first = currentFrames[0];\n return {renderCache, lastFrameId: first.id, points: first.initialPoints};\n }\n\n // Find the start/end keyframes according to the timestamp.\n let startKeyframe = currentFrames[0];\n let endKeyframe = currentFrames[1];\n for (let i = 2; i < currentFrames.length; i++) {\n if (endKeyframe.timestamp > input.timestamp) break;\n startKeyframe = currentFrames[i - 1];\n endKeyframe = currentFrames[i];\n }\n\n // Return original end shape when past the end of the animation.\n const endKeyframeIsLast = endKeyframe === currentFrames[currentFrames.length - 1];\n const animationIsPastEndKeyframe = endKeyframe.timestamp < input.timestamp;\n if (animationIsPastEndKeyframe && endKeyframeIsLast) {\n return {\n renderCache,\n lastFrameId: endKeyframe.id,\n points: endKeyframe.initialPoints,\n };\n }\n\n // Use and cache prepared points for current interpolation.\n let preparedStartPoints: Point[] | undefined =\n renderCache[startKeyframe.id]?.preparedStartPoints;\n let preparedEndPoints: Point[] | undefined = renderCache[endKeyframe.id]?.preparedEndPoints;\n if (!preparedStartPoints || !preparedEndPoints) {\n [preparedStartPoints, preparedEndPoints] = prepare(\n startKeyframe.initialPoints,\n endKeyframe.initialPoints,\n {rawAngles: false, divideRatio: 1},\n );\n\n renderCache[startKeyframe.id] = renderCache[startKeyframe.id] || {};\n renderCache[startKeyframe.id].preparedStartPoints = preparedStartPoints;\n\n renderCache[endKeyframe.id] = renderCache[endKeyframe.id] || {};\n renderCache[endKeyframe.id].preparedEndPoints = preparedEndPoints;\n }\n\n // Calculate progress between frames as a fraction.\n const progress =\n (input.timestamp - startKeyframe.timestamp) /\n (endKeyframe.timestamp - startKeyframe.timestamp);\n\n // Keep progress within expected range (ex. division by 0).\n const clampedProgress = Math.max(0, Math.min(1, progress));\n\n // Apply timing function of end frame.\n const adjustedProgress = endKeyframe.timingFunction(clampedProgress);\n\n return {\n renderCache,\n lastFrameId: clampedProgress === 1 ? endKeyframe.id : startKeyframe.id,\n points: interpolateBetween(adjustedProgress, preparedStartPoints, preparedEndPoints),\n };\n};\n\nexport const transitionFrames = (\n input: TransitionInput,\n): TransitionOutput => {\n // Erase all old frames.\n const newInternalFrames: InternalKeyframe[] = [];\n\n // Reset animation when given no keyframes.\n if (input.newFrames.length === 0) {\n return {newFrames: newInternalFrames};\n }\n\n // Add current state as initial frame.\n const currentState = renderFramesAt(input);\n if (currentState.lastFrameId === null) {\n // If there is currently no shape being rendered, use a point in the\n // center of the next frame as the initial point.\n const firstShape = input.shapeGenerator(input.newFrames[0]);\n let firstShapeCenterPoint: Point = {\n x: 0,\n y: 0,\n handleIn: {angle: 0, length: 0},\n handleOut: {angle: 0, length: 0},\n };\n for (const point of firstShape) {\n firstShapeCenterPoint.x += point.x / firstShape.length;\n firstShapeCenterPoint.y += point.y / firstShape.length;\n }\n currentState.points = [firstShapeCenterPoint, firstShapeCenterPoint, firstShapeCenterPoint];\n }\n newInternalFrames.push({\n id: genId(),\n initialPoints: currentState.points,\n timestamp: input.timestamp,\n timingFunction: timingFunctions.linear,\n transitionSourceFrameIndex: -1,\n isSynthetic: true,\n });\n\n // Generate and add new frames.\n let totalOffset = 0;\n for (let i = 0; i < input.newFrames.length; i++) {\n const keyframe = input.newFrames[i];\n\n // Copy previous frame when current one has a delay.\n if (keyframe.delay) {\n totalOffset += keyframe.delay;\n const prevFrame = newInternalFrames[newInternalFrames.length - 1];\n newInternalFrames.push({\n id: genId(),\n initialPoints: prevFrame.initialPoints,\n timestamp: input.timestamp + totalOffset,\n timingFunction: timingFunctions.linear,\n transitionSourceFrameIndex: i - 1,\n isSynthetic: true,\n });\n }\n\n totalOffset += keyframe.duration;\n newInternalFrames.push({\n id: genId(),\n initialPoints: input.shapeGenerator(keyframe),\n timestamp: input.timestamp + totalOffset,\n timingFunction: timingFunctions[keyframe.timingFunction || \"linear\"],\n transitionSourceFrameIndex: i,\n isSynthetic: false,\n });\n }\n\n return {newFrames: newInternalFrames};\n};\n" }, { "path": "internal/animate/interpolate.ts", "content": "import {Point} from \"../types\";\nimport {mapPoints, mod, smooth, split, splitLine} from \"../util\";\n\n// Interpolates between angles a and b. Angles are normalized to avoid unnecessary rotation.\n// Direction is chosen to produce the smallest possible movement.\nconst interpolateAngle = (percentage: number, a: number, b: number): number => {\n const tau = Math.PI * 2;\n let aNorm = mod(a, tau);\n let bNorm = mod(b, tau);\n if (Math.abs(aNorm - bNorm) > Math.PI) {\n if (aNorm < bNorm) {\n aNorm += tau;\n } else {\n bNorm += tau;\n }\n }\n return split(percentage, aNorm, bNorm);\n};\n\n// Interpolates linearly between a and b. Can only interpolate between point lists that have the\n// same number of points. Easing effects can be applied to the percentage given to this function.\n// Percentages outside the 0-1 range are supported.\nexport const interpolateBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {\n if (a.length !== b.length) {\n throw new Error(\"must have equal number of points\");\n }\n\n // Clamped range for use in values that could look incorrect otherwise.\n // ex. Handles that invert if their value goes negative (creates loops at corners).\n const clamped = Math.min(1, Math.max(0, percentage));\n\n const points: Point[] = [];\n for (let i = 0; i < a.length; i++) {\n points.push({\n ...splitLine(percentage, a[i], b[i]),\n handleIn: {\n angle: interpolateAngle(percentage, a[i].handleIn.angle, b[i].handleIn.angle),\n length: split(clamped, a[i].handleIn.length, b[i].handleIn.length),\n },\n handleOut: {\n angle: interpolateAngle(percentage, a[i].handleOut.angle, b[i].handleOut.angle),\n length: split(clamped, a[i].handleOut.length, b[i].handleOut.length),\n },\n });\n }\n return points;\n};\n\n// Interpolates between a and b while applying a smoothing effect. Smoothing effect's strength is\n// relative to how far away the percentage is from either 0 or 1. It is strongest in the middle of\n// the animation (percentage = 0.5) or when bounds are exceeded (percentage = 1.8).\nexport const interpolateBetweenSmooth = (\n strength: number,\n percentage: number,\n a: Point[],\n b: Point[],\n): Point[] => {\n strength *= Math.min(1, Math.min(Math.abs(0 - percentage), Math.abs(1 - percentage)));\n const interpolated = interpolateBetween(percentage, a, b);\n const smoothed = smooth(interpolated, Math.sqrt(strength + 0.25) / 3);\n return mapPoints(interpolated, ({index, curr}) => {\n const sp = smoothed[index];\n curr.handleIn.angle = interpolateAngle(strength, curr.handleIn.angle, sp.handleIn.angle);\n curr.handleIn.length = split(strength, curr.handleIn.length, sp.handleIn.length);\n curr.handleOut.angle = interpolateAngle(strength, curr.handleOut.angle, sp.handleOut.angle);\n curr.handleOut.length = split(strength, curr.handleOut.length, sp.handleOut.length);\n return curr;\n });\n};\n" }, { "path": "internal/animate/prepare.ts", "content": "import {\n angleOf,\n coordEqual,\n distance,\n forPoints,\n insertCount,\n length,\n mapPoints,\n mod,\n reverse,\n shift,\n} from \"../util\";\nimport {Point} from \"../types\";\n\n// Iterate through point ordering possibilities to find an option with the least\n// distance between points. Also reverse the list to try and optimize.\nconst optimizeOrder = (a: Point[], b: Point[]): Point[] => {\n const count = a.length;\n\n let minTotal = Infinity;\n let minOffset = 0;\n let minOffsetBase: Point[] = [];\n\n const setMinOffset = (points: Point[]) => {\n for (let i = 0; i < count; i++) {\n let total = 0;\n for (let j = 0; j < count; j++) {\n total += (100 * distance(a[j], points[mod(j + i, count)])) ** 2;\n if (total > minTotal) break;\n }\n if (total <= minTotal) {\n minTotal = total;\n minOffset = i;\n minOffsetBase = points;\n }\n }\n };\n setMinOffset(b);\n setMinOffset(reverse(b));\n\n return shift(minOffset, minOffsetBase);\n};\n\n// Modify the input shape to be the exact same path visually, but with\n// additional points so that the total number of points is \"count\".\nexport const divide = (count: number, points: Point[]): Point[] => {\n if (points.length < 3) throw new Error(\"not enough points\");\n if (count < points.length) throw new Error(\"cannot remove points\");\n if (count === points.length) return points.slice();\n\n const lengths: number[] = [];\n forPoints(points, ({curr, next}) => {\n lengths.push(length(curr, next()));\n });\n\n const divisors = divideLengths(lengths, count - points.length);\n const out: Point[] = [];\n for (let i = 0; i < points.length; i++) {\n const curr: Point = out[out.length - 1] || points[i];\n const next = points[mod(i + 1, points.length)];\n out.pop();\n out.push(...insertCount(divisors[i], curr, next));\n }\n\n // Remove redundant last point to produce closed shape, but use its incoming \\\n // handle for the first point.\n const last = out.pop();\n out[0] = Object.assign({}, out[0], {handleIn: last!.handleIn});\n\n return out;\n};\n\n// If point has no handle and is on top of the point before or after it, use the\n// angle of the fixer shape's point at the same index. This is especially useful\n// when all the points of the initial shape are concentrated on the same\n// coordinates and \"expand\" into the target shape.\nconst fixAnglesWith = (fixee: Point[], fixer: Point[]): Point[] => {\n return mapPoints(fixee, ({index, curr, prev, next}) => {\n if (curr.handleIn.length === 0 && coordEqual(prev(), curr)) {\n curr.handleIn.angle = fixer[index].handleIn.angle;\n }\n if (curr.handleOut.length === 0 && coordEqual(next(), curr)) {\n curr.handleOut.angle = fixer[index].handleOut.angle;\n }\n return curr;\n });\n};\n\n// If point has no handle, use angle between before and after points.\nconst fixAnglesSelf = (points: Point[]): Point[] => {\n return mapPoints(points, ({curr, prev, next}) => {\n const angle = angleOf(prev(), next());\n if (curr.handleIn.length === 0) {\n curr.handleIn.angle = angle + Math.PI;\n }\n if (curr.handleOut.length === 0) {\n curr.handleOut.angle = angle;\n }\n return curr;\n });\n};\n\n// Split the input lengths into smaller segments to add the target amount of\n// lengths while minimizing the standard deviation of the list of lengths.\nconst divideLengths = (lengths: number[], add: number): number[] => {\n const divisors = lengths.map(() => 1);\n const sizes = lengths.slice();\n for (let i = 0; i < add; i++) {\n let maxSizeIndex = 0;\n for (let j = 1; j < sizes.length; j++) {\n if (sizes[j] > sizes[maxSizeIndex]) {\n maxSizeIndex = j;\n continue;\n }\n if (sizes[j] === sizes[maxSizeIndex]) {\n if (lengths[j] > lengths[maxSizeIndex]) {\n maxSizeIndex = j;\n }\n }\n }\n divisors[maxSizeIndex]++;\n sizes[maxSizeIndex] = lengths[maxSizeIndex] / divisors[maxSizeIndex];\n }\n return divisors;\n};\n\nexport const prepare = (\n a: Point[],\n b: Point[],\n options: {rawAngles: boolean; divideRatio: number},\n): [Point[], Point[]] => {\n const pointCount = options.divideRatio * Math.max(a.length, b.length);\n const aNorm = divide(pointCount, a);\n const bNorm = divide(pointCount, b);\n const bOpt = optimizeOrder(aNorm, bNorm);\n return [\n options.rawAngles ? aNorm : fixAnglesWith(fixAnglesSelf(aNorm), bOpt),\n options.rawAngles ? bOpt : fixAnglesWith(fixAnglesSelf(bOpt), aNorm),\n ];\n};\n" }, { "path": "internal/animate/state.ts", "content": "import {Point} from \"../types\";\nimport {InternalKeyframe, Keyframe, RenderCache, renderFramesAt, transitionFrames} from \"./frames\";\n\ninterface CallbackKeyframe extends Keyframe {\n callback?: () => void;\n}\n\ninterface FrameCallbackStore {\n [frameId: string]: () => void;\n}\n\nexport const statefulAnimationGenerator = (\n generator: (keyframe: K) => Point[],\n renderer: (points: Point[]) => T,\n checker: (keyframe: K, index: number) => void,\n) => (timestampProvider: () => number) => {\n let internalFrames: InternalKeyframe[] = [];\n let renderCache: RenderCache = {};\n let frameCallbackStore: FrameCallbackStore = {};\n\n // Keep track of paused state.\n let pausedAt = 0;\n let pauseOffset = 0;\n const getAnimationTimestamp = () => timestampProvider() - pauseOffset;\n const isPaused = () => pausedAt !== 0;\n\n const play = () => {\n if (!isPaused()) return;\n pauseOffset += getAnimationTimestamp() - pausedAt;\n pausedAt = 0;\n };\n\n const pause = () => {\n if (isPaused()) return;\n pausedAt = getAnimationTimestamp();\n };\n\n const playPause = () => {\n if (isPaused()) {\n play();\n } else {\n pause();\n }\n };\n\n const renderPoints = (): Point[] => {\n const renderOutput = renderFramesAt({\n renderCache: renderCache,\n timestamp: isPaused() ? pausedAt : getAnimationTimestamp(),\n currentFrames: internalFrames,\n });\n\n // Update render cache with returned value.\n renderCache = renderOutput.renderCache;\n\n // Invoke callback if defined and the first time the frame is reached.\n if (renderOutput.lastFrameId && frameCallbackStore[renderOutput.lastFrameId]) {\n setTimeout(frameCallbackStore[renderOutput.lastFrameId]);\n delete frameCallbackStore[renderOutput.lastFrameId];\n }\n\n return renderOutput.points;\n };\n\n const renderFrame = (): T => {\n return renderer(renderPoints());\n };\n\n const transition = (...keyframes: K[]) => {\n // Make sure frame info is valid.\n for (let i = 0; i < keyframes.length; i++) {\n checker(keyframes[i], i);\n }\n\n const transitionOutput = transitionFrames({\n renderCache: renderCache,\n timestamp: getAnimationTimestamp(),\n currentFrames: internalFrames,\n newFrames: keyframes,\n shapeGenerator: generator,\n });\n\n // Reset internal state..\n internalFrames = transitionOutput.newFrames;\n frameCallbackStore = {};\n renderCache = {};\n\n // Populate callback store using returned frame ids.\n for (const newFrame of internalFrames) {\n if (newFrame.isSynthetic) continue;\n const {callback} = keyframes[newFrame.transitionSourceFrameIndex];\n if (callback) frameCallbackStore[newFrame.id] = callback;\n }\n };\n\n return {renderFrame, renderPoints, transition, play, pause, playPause};\n};\n" }, { "path": "internal/animate/testing/index.html", "content": "\n \n \n \n\n \n
\n \n \n
\n \n \n\n" }, { "path": "internal/animate/testing/script.ts", "content": "import {interpolateBetweenSmooth} from \"../interpolate\";\nimport {divide, prepare} from \"../prepare\";\nimport {Coord, Point} from \"../../types\";\nimport {forPoints, insertAt, insertCount, length, mapPoints, mod, rad} from \"../../util\";\nimport {clear, drawClosed, drawInfo} from \"../../render/canvas\";\nimport {genBlob, genFromOptions} from \"../../gen\";\nimport {rand} from \"../../rand\";\nimport * as blobs2 from \"../../../public/blobs\";\nimport * as blobs2Animate from \"../../../public/animate\";\n\nlet animationSpeed = 2;\nlet animationStart = 0.3;\nlet debug = true;\nlet size = 1300;\n\nconst canvas = document.createElement(\"canvas\");\ndocument.body.appendChild(canvas);\ncanvas.height = size;\ncanvas.width = size;\nconst temp = canvas.getContext(\"2d\");\nif (temp === null) throw new Error(\"context is null\");\nconst ctx = temp;\n\nconst toggle = document.getElementById(\"toggle\");\nif (toggle === null) throw new Error(\"no toggle\");\ntoggle.onclick = () => (debug = !debug);\n\nconst interact = document.getElementById(\"interact\") as any;\nif (toggle === null) throw new Error(\"no interact\");\nconst addInteraction = (newOnclick: () => void) => {\n const oldOnclick = interact.onclick || (() => 0);\n interact.onclick = () => {\n oldOnclick();\n newOnclick();\n };\n};\n\nconst point = (x: number, y: number, ia: number, il: number, oa: number, ol: number): Point => {\n return {\n x: x * size,\n y: y * size,\n handleIn: {angle: rad(ia), length: il * size},\n handleOut: {angle: rad(oa), length: ol * size},\n };\n};\n\nconst testSplitAt = (percentage: number) => {\n let points: Point[] = [\n point(0.15, 0.15, 135, 0.1, 315, 0.2),\n point(0.85, 0.15, 225, 0.1, 45, 0.2),\n point(0.85, 0.85, 315, 0.1, 135, 0.2),\n point(0.15, 0.85, 45, 0.1, 225, 0.2),\n ];\n\n const count = points.length;\n const stop = 2 * count - 1;\n for (let i = 0; i < count; i++) {\n const double = i * 2;\n const next = mod(double + 1, stop);\n points.splice(double, 2, ...insertAt(percentage, points[double], points[next]));\n }\n points.splice(0, 1);\n\n let sum = 0;\n forPoints(points, ({curr, next}) => {\n sum += length(curr, next());\n });\n drawInfo(ctx, 1, \"split at lengths sum\", sum);\n\n drawClosed(ctx, debug, points);\n};\n\nconst testSplitBy = () => {\n const count = 10;\n for (let i = 0; i < count; i++) {\n drawClosed(\n ctx,\n debug,\n insertCount(\n i + 1,\n point(0.15, 0.2 + i * 0.06, 30, 0.04, -30, 0.04),\n point(0.25, 0.2 + i * 0.06, 135, 0.04, 225, 0.04),\n ),\n );\n }\n};\n\nconst testDividePoints = () => {\n const count = 10;\n for (let i = 0; i < count; i++) {\n drawClosed(\n ctx,\n debug,\n divide(i + 3, [\n point(0.3, 0.2 + i * 0.05, -10, 0.04, -45, 0.02),\n point(0.35, 0.2 + i * 0.05 - 0.02, 180, 0.02, 0, 0.02),\n point(0.4, 0.2 + i * 0.05, -135, 0.02, 170, 0.04),\n ]),\n );\n }\n};\n\nconst testInterpolateBetween = (percentage: number) => {\n const a = [\n point(0.3, 0.72, 135, 0.05, -45, 0.05),\n point(0.4, 0.72, -135, 0.05, 45, 0.05),\n point(0.4, 0.82, -45, 0.05, 135, 0.05),\n point(0.3, 0.82, 45, 0.05, 225, 0.05),\n ];\n const b = [\n point(0.35, 0.72, 180, 0, 0, 0),\n point(0.4, 0.77, -90, 0, 90, 0),\n point(0.35, 0.82, 360 * 10, 0, 180, 0),\n point(0.3, 0.77, 90, 0, -90, 0),\n ];\n drawClosed(ctx, debug, loopBetween(percentage, a, b));\n};\n\nconst testPrepPointsA = (percentage: number) => {\n const a = blob(\"a\", 6, 0.15, {x: 0.45, y: 0.1});\n const b = blob(\"b\", 10, 0.15, {x: 0.45, y: 0.1});\n drawClosed(\n ctx,\n debug,\n loopBetween(percentage, ...prepare(a, b, {rawAngles: false, divideRatio: 1})),\n );\n};\n\nconst testPrepPointsB = (percentage: number) => {\n const a = blob(\"a\", 8, 0.15, {x: 0.45, y: 0.25});\n const b: Point[] = [\n point(0.45, 0.25, 0, 0, 0, 0),\n point(0.6, 0.25, 0, 0, 0, 0),\n point(0.6, 0.4, 0, 0, 0, 0),\n point(0.45, 0.4, 0, 0, 0, 0),\n ];\n drawClosed(\n ctx,\n debug,\n loopBetween(percentage, ...prepare(a, b, {rawAngles: false, divideRatio: 1})),\n );\n};\n\nconst testPrepPointsC = (percentage: number) => {\n const a = blob(\"c\", 8, 0.15, {x: 0.45, y: 0.45});\n const b: Point[] = [\n point(0.5, 0.45, 0, 0, 0, 0),\n point(0.55, 0.45, 0, 0, 0, 0),\n point(0.55, 0.5, 0, 0, 0, 0),\n point(0.6, 0.5, 0, 0, 0, 0),\n point(0.6, 0.55, 0, 0, 0, 0),\n point(0.55, 0.55, 0, 0, 0, 0),\n point(0.55, 0.6, 0, 0, 0, 0),\n point(0.5, 0.6, 0, 0, 0, 0),\n point(0.5, 0.55, 0, 0, 0, 0),\n point(0.45, 0.55, 0, 0, 0, 0),\n point(0.45, 0.5, 0, 0, 0, 0),\n point(0.5, 0.5, 0, 0, 0, 0),\n ];\n drawClosed(\n ctx,\n debug,\n loopBetween(percentage, ...prepare(b, a, {rawAngles: false, divideRatio: 1})),\n );\n};\n\nconst testPrepPointsD = (percentage: number) => {\n const a = blob(\"d\", 8, 0.15, {x: 0.45, y: 0.65});\n const b: Point[] = [\n point(0.525, 0.725, 0, 0, 0, 0),\n point(0.525, 0.725, 0, 0, 0, 0),\n point(0.525, 0.725, 0, 0, 0, 0),\n ];\n drawClosed(\n ctx,\n debug,\n loopBetween(percentage, ...prepare(a, b, {rawAngles: false, divideRatio: 1})),\n );\n};\n\nconst testPrepLetters = (percentage: number) => {\n const a: Point[] = [\n point(0.65, 0.2, 0, 0, 0, 0),\n point(0.85, 0.2, 0, 0, 0, 0),\n point(0.85, 0.25, 0, 0, 0, 0),\n point(0.7, 0.25, 0, 0, 0, 0),\n point(0.7, 0.4, 0, 0, 0, 0),\n point(0.8, 0.4, 0, 0, 0, 0),\n point(0.8, 0.35, 0, 0, 0, 0),\n point(0.75, 0.35, 0, 0, 0, 0),\n point(0.75, 0.3, 0, 0, 0, 0),\n point(0.85, 0.3, 0, 0, 0, 0),\n point(0.85, 0.45, 0, 0, 0, 0),\n point(0.65, 0.45, 0, 0, 0, 0),\n ];\n const b: Point[] = blob(\"\", 8, 0.25, {x: 0.65, y: 0.2});\n drawClosed(\n ctx,\n debug,\n loopBetween(percentage, ...prepare(a, b, {rawAngles: false, divideRatio: 1})),\n );\n};\n\nconst testGen = () => {\n const cellSideCount = 16;\n const cellSize = size / cellSideCount;\n ctx.save();\n ctx.strokeStyle = \"#fafafa\";\n ctx.fillStyle = \"#f1f1f1\";\n for (let i = 0; i < cellSideCount; i++) {\n for (let j = 0; j < cellSideCount; j++) {\n ctx.strokeRect(i * cellSize, j * cellSize, cellSize, cellSize);\n ctx.fill(\n blobs2.canvasPath(\n {\n extraPoints: j,\n randomness: i,\n seed: i + j - i * j,\n size: cellSize,\n },\n {\n offsetX: i * cellSize,\n offsetY: j * cellSize,\n },\n ),\n );\n }\n }\n ctx.restore();\n};\n\nconst blob = (seed: string, count: number, scale: number, offset: Coord): Point[] => {\n const rgen = rand(seed);\n const points = genBlob(count, () => 0.3 + 0.2 * rgen());\n return mapPoints(points, ({curr}) => {\n curr.x *= scale * size;\n curr.y *= scale * size;\n curr.x += offset.x * size;\n curr.y += offset.y * size;\n curr.handleIn.length *= scale * size;\n curr.handleOut.length *= scale * size;\n return curr;\n });\n};\n\nconst loopBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {\n // Draw before/after shapes + point path.\n ctx.save();\n ctx.strokeStyle = \"#ffaaaa\";\n drawClosed(ctx, false, a);\n ctx.strokeStyle = \"#aaaaff\";\n drawClosed(ctx, false, b);\n ctx.strokeStyle = \"#33ff33\";\n for (let i = 0; i < a.length; i++) {\n ctx.beginPath();\n ctx.moveTo(a[i].x, a[i].y);\n ctx.lineTo(b[i].x, b[i].y);\n ctx.stroke();\n }\n ctx.restore();\n\n if (percentage < 0.5) {\n return interpolateBetweenSmooth(1, 2 * percentage, a, b);\n } else {\n return interpolateBetweenSmooth(1, -2 * percentage + 2, a, b);\n }\n};\n\nconst genBlobAnimation = (\n speed: number,\n offset: number,\n timing: blobs2Animate.CanvasKeyframe[\"timingFunction\"],\n timeWarp: number,\n) => {\n const animation = blobs2Animate.canvasPath(() => Date.now() * timeWarp);\n\n const loopAnimation = () => {\n animation.transition(\n {\n duration: speed,\n delay: speed,\n timingFunction: \"ease\",\n blobOptions: {\n extraPoints: 3,\n randomness: 4,\n seed: Math.random(),\n size: 200,\n },\n canvasOptions: {\n offsetX: offset,\n },\n },\n {\n duration: speed,\n timingFunction: \"ease\",\n blobOptions: {\n extraPoints: 3,\n randomness: 4,\n seed: Math.random(),\n size: 200,\n },\n canvasOptions: {\n offsetX: offset,\n },\n },\n {\n duration: speed,\n delay: speed,\n timingFunction: \"ease\",\n blobOptions: {\n extraPoints: 3,\n randomness: 4,\n seed: Math.random(),\n size: 200,\n },\n canvasOptions: {\n offsetX: offset,\n },\n },\n {\n duration: speed,\n callback: loopAnimation,\n timingFunction: \"ease\",\n blobOptions: {\n extraPoints: 39,\n randomness: 2,\n seed: Math.random(),\n size: 200,\n },\n canvasOptions: {\n offsetX: offset,\n },\n },\n );\n };\n\n animation.transition({\n duration: 0,\n callback: loopAnimation,\n blobOptions: {\n extraPoints: 1,\n randomness: 0,\n seed: 0,\n size: 200,\n },\n canvasOptions: {\n offsetX: offset,\n },\n });\n\n addInteraction(() => {\n animation.transition({\n duration: speed,\n callback: loopAnimation,\n timingFunction: timing,\n blobOptions: {\n extraPoints: 30,\n randomness: 8,\n seed: Math.random(),\n size: 180,\n },\n canvasOptions: {\n offsetX: 10 + offset,\n offsetY: 10,\n },\n });\n });\n\n return animation;\n};\n\nconst genCustomAnimation = (speed: number, offset: number) => {\n const noHandles = {\n handleIn: {angle: 0, length: 0},\n handleOut: {angle: 0, length: 0},\n };\n const animation = blobs2Animate.canvasPath();\n const loopAnimation = (immediate: boolean = false) => {\n const size = 200;\n animation.transition(\n {\n duration: immediate ? 0 : speed,\n delay: 100,\n timingFunction: \"elasticEnd0\",\n blobOptions: {\n extraPoints: 3,\n randomness: 4,\n seed: Math.random(),\n size: size,\n },\n canvasOptions: {offsetX: offset, offsetY: 220},\n },\n {\n duration: speed,\n delay: 100,\n timingFunction: \"elasticEnd0\",\n points: [\n {x: 0, y: 0, ...noHandles},\n {x: 0, y: size, ...noHandles},\n {x: size, y: size, ...noHandles},\n {x: size, y: 0, ...noHandles},\n ],\n canvasOptions: {offsetX: offset, offsetY: 220},\n callback: loopAnimation,\n },\n );\n };\n loopAnimation(true);\n addInteraction(() => animation.playPause());\n return animation;\n};\n\nconst wigglePresetBad = (\n animation: blobs2Animate.Animation,\n config: {\n blobOptions: blobs2.BlobOptions;\n period: number;\n delay?: number;\n timingFunction?: blobs2Animate.CanvasKeyframe[\"timingFunction\"];\n canvasOptions?: {\n offsetX?: number;\n offsetY?: number;\n };\n },\n) => {\n const targetBlob: Point[] = genFromOptions(config.blobOptions);\n const numberOfPoints = 3 + config.blobOptions.extraPoints;\n const mutatesPerPeriod = 1 * numberOfPoints;\n const mutateInterval = config.period / mutatesPerPeriod;\n const mutateRatio = 1 / mutatesPerPeriod;\n\n console.log(\n \"mutatesPerPeriod\",\n mutatesPerPeriod,\n \"mutateInterval\",\n mutateInterval,\n \"mutateRatio\",\n mutateRatio,\n \"config\",\n JSON.stringify(config),\n );\n\n const loopAnimation = () => {\n const newBlob = genFromOptions(Object.assign(config.blobOptions, {seed: Math.random()}));\n for (let i = 0; i < newBlob.length; i++) {\n if (Math.random() < mutateRatio) {\n targetBlob[i] = newBlob[i];\n }\n }\n animation.transition({\n duration: config.period,\n timingFunction: config.timingFunction,\n canvasOptions: config.canvasOptions,\n points: targetBlob,\n });\n };\n animation.transition({\n duration: 0,\n delay: config.delay || 0,\n timingFunction: config.timingFunction,\n canvasOptions: config.canvasOptions,\n points: genFromOptions(config.blobOptions),\n callback: () => setInterval(loopAnimation, mutateInterval),\n });\n addInteraction(() => animation.playPause());\n};\n\nconst genBadWiggle = (period: number, offset: number) => {\n const animation = blobs2Animate.canvasPath();\n wigglePresetBad(animation, {\n blobOptions: {\n extraPoints: 1,\n randomness: 4,\n seed: Math.random(),\n size: 200,\n },\n period,\n timingFunction: \"ease\",\n canvasOptions: {offsetX: offset, offsetY: 220},\n });\n return animation;\n};\n\nconst genWiggle = (offset: number, speed: number) => {\n const animation = blobs2Animate.canvasPath();\n blobs2Animate.wigglePreset(\n animation,\n {\n extraPoints: 4,\n randomness: 2,\n seed: Math.random(),\n size: 200,\n },\n {offsetX: offset, offsetY: 220},\n {speed},\n );\n addInteraction(() => animation.playPause());\n return animation;\n};\n\n(() => {\n let percentage = animationStart;\n\n const animations = [\n genBlobAnimation(500, 0, \"elasticEnd0\", 1),\n genBlobAnimation(500, 200, \"elasticEnd1\", 1),\n genBlobAnimation(500, 400, \"elasticEnd2\", 1),\n genBlobAnimation(500, 600, \"elasticEnd3\", 1),\n genBlobAnimation(500, 800, \"elasticEnd3\", 0.1),\n genCustomAnimation(1000, 0),\n genBadWiggle(200, 200),\n genWiggle(400, 5),\n ];\n\n const renderFrame = () => {\n clear(ctx);\n\n testGen();\n drawInfo(ctx, 0, \"percentage\", percentage);\n testSplitAt(percentage);\n testSplitBy();\n testDividePoints();\n testInterpolateBetween(percentage);\n testPrepPointsA(percentage);\n testPrepPointsB(percentage);\n testPrepPointsC(percentage);\n testPrepPointsD(percentage);\n testPrepLetters(percentage);\n\n for (const animation of animations) {\n ctx.save();\n ctx.strokeStyle = \"orange\";\n ctx.fillStyle = \"rgba(255, 200, 0, 0.5)\";\n const path = animation.renderFrame();\n ctx.stroke(path);\n ctx.fill(path);\n ctx.restore();\n }\n\n percentage += animationSpeed / 1000;\n percentage = mod(percentage, 1);\n if (animationSpeed > 0) requestAnimationFrame(renderFrame);\n };\n renderFrame();\n})();\n" }, { "path": "internal/animate/timing.ts", "content": "export interface TimingFunc {\n (percentage: number): number;\n}\n\nconst linear: TimingFunc = (p) => {\n return p;\n};\n\nconst easeEnd: TimingFunc = (p) => {\n return 1 - (p - 1) ** 2;\n};\n\nconst easeStart: TimingFunc = (p) => {\n return 1 - easeEnd(1 - p);\n};\n\nconst ease: TimingFunc = (p) => {\n return 0.5 + 0.5 * Math.sin(Math.PI * (p + 1.5));\n};\n\nconst elasticEnd = (s: number): TimingFunc => (p) => {\n return Math.pow(2, -10 * p) * Math.sin(((p - s / 4) * (2 * Math.PI)) / s) + 1;\n};\n\n// https://www.desmos.com/calculator/fqisoq1kuw\nexport const timingFunctions = {\n linear,\n easeEnd,\n easeStart,\n ease,\n elasticEnd0: elasticEnd(1),\n elasticEnd1: elasticEnd(0.64),\n elasticEnd2: elasticEnd(0.32),\n elasticEnd3: elasticEnd(0.16),\n};\n\n// @ts-ignore: Type assertion.\nconst _: Record = timingFunctions;\n" }, { "path": "internal/check.ts", "content": "import {timingFunctions} from \"./animate/timing\";\n\nconst typeCheck = (name: string, val: any, expected: string[]) => {\n let actual: string = typeof val;\n if (actual === \"number\" && isNaN(val)) actual = \"NaN\";\n if (actual === \"object\" && val === null) actual = \"null\";\n if (!expected.includes(actual)) {\n throw `\"${name}\" should have type \"${expected.join(\"|\")}\" but was \"${actual}\".`;\n }\n};\n\nexport const checkKeyframeOptions = (keyframe: any) => {\n typeCheck(`keyframe`, keyframe, [\"object\"]);\n const {delay, duration, timingFunction, callback} = keyframe;\n typeCheck(`delay`, delay, [\"number\", \"undefined\"]);\n if (delay && delay < 0) throw `delay is invalid \"${delay}\".`;\n typeCheck(`duration`, duration, [\"number\"]);\n if (duration && duration < 0) throw `duration is invalid \"${duration}\".`;\n typeCheck(`timingFunction`, timingFunction, [\"string\", \"undefined\"]);\n if (timingFunction && !(timingFunctions as any)[timingFunction]) {\n throw `\".timingFunction\" is not recognized \"${timingFunction}\".`;\n }\n typeCheck(`callback`, callback, [\"function\", \"undefined\"]);\n};\n\nexport const checkBlobOptions = (blobOptions: any) => {\n typeCheck(`blobOptions`, blobOptions, [\"object\"]);\n const {seed, extraPoints, randomness, size} = blobOptions;\n typeCheck(`blobOptions.seed`, seed, [\"string\", \"number\"]);\n typeCheck(`blobOptions.extraPoints`, extraPoints, [\"number\"]);\n if (extraPoints < 0) {\n throw `blobOptions.extraPoints is invalid \"${extraPoints}\".`;\n }\n typeCheck(`blobOptions.randomness`, randomness, [\"number\"]);\n if (randomness < 0) {\n throw `blobOptions.randomness is invalid \"${randomness}\".`;\n }\n typeCheck(`blobOptions.size`, size, [\"number\"]);\n if (size < 0) throw `blobOptions.size is invalid \"${size}\".`;\n};\n\nexport const checkCanvasOptions = (canvasOptions: any) => {\n typeCheck(`canvasOptions`, canvasOptions, [\"object\", \"undefined\"]);\n if (canvasOptions) {\n const {offsetX, offsetY} = canvasOptions;\n typeCheck(`canvasOptions.offsetX`, offsetX, [\"number\", \"undefined\"]);\n typeCheck(`canvasOptions.offsetY`, offsetY, [\"number\", \"undefined\"]);\n }\n};\n\nexport const checkSvgOptions = (svgOptions: any) => {\n typeCheck(`svgOptions`, svgOptions, [\"object\", \"undefined\"]);\n if (svgOptions) {\n const {fill, stroke, strokeWidth} = svgOptions;\n typeCheck(`svgOptions.fill`, fill, [\"string\", \"undefined\"]);\n typeCheck(`svgOptions.stroke`, stroke, [\"string\", \"undefined\"]);\n typeCheck(`svgOptions.strokeWidth`, strokeWidth, [\"number\", \"undefined\"]);\n }\n};\n\nexport const checkPoints = (points: any) => {\n if (!Array.isArray(points)) {\n throw `points should be an array but was \"${typeof points}\".`;\n }\n if (points.length < 3) {\n throw `expected more than two points but received \"${points.length}\".`;\n }\n for (const point of points) {\n typeCheck(`point.x`, point.x, [\"number\"]);\n typeCheck(`point.y`, point.y, [\"number\"]);\n typeCheck(`point.handleIn`, point.handleIn, [\"object\"]);\n typeCheck(`point.handleIn.angle`, point.handleIn.angle, [\"number\"]);\n typeCheck(`point.handleIn.length`, point.handleIn.length, [\"number\"]);\n typeCheck(`point.handleOut`, point.handleOut, [\"object\"]);\n typeCheck(`point.handleOut.angle`, point.handleOut.angle, [\"number\"]);\n typeCheck(`point.handleOut.length`, point.handleOut.length, [\"number\"]);\n }\n};\n" }, { "path": "internal/gen.ts", "content": "import {rand} from \"../internal/rand\";\nimport {mapPoints} from \"../internal/util\";\nimport {BlobOptions} from \"../public/blobs\";\nimport {Point} from \"./types\";\nimport {smooth} from \"./util\";\n\nexport const smoothBlob = (blobygon: Point[]): Point[] => {\n // https://math.stackexchange.com/a/873589/235756\n const angle = (Math.PI * 2) / blobygon.length;\n const smoothingStrength = ((4 / 3) * Math.tan(angle / 4)) / Math.sin(angle / 2) / 2;\n return smooth(blobygon, smoothingStrength);\n};\n\nexport const genBlobygon = (pointCount: number, offset: (index: number) => number): Point[] => {\n const angle = (Math.PI * 2) / pointCount;\n const points: Point[] = [];\n for (let i = 0; i < pointCount; i++) {\n const randPointOffset = offset(i);\n const pointX = Math.sin(i * angle);\n const pointY = Math.cos(i * angle);\n points.push({\n x: 0.5 + pointX * randPointOffset,\n y: 0.5 + pointY * randPointOffset,\n handleIn: {angle: 0, length: 0},\n handleOut: {angle: 0, length: 0},\n });\n }\n return points;\n};\n\nexport const genBlob = (pointCount: number, offset: (index: number) => number): Point[] => {\n return smoothBlob(genBlobygon(pointCount, offset));\n};\n\nexport const genFromOptions = (\n blobOptions: BlobOptions,\n r?: (index: number) => number,\n): Point[] => {\n const rgen = r || rand(String(blobOptions.seed));\n\n // Scale of random movement increases as randomness approaches infinity.\n // randomness = 0 -> rangeStart = 1\n // randomness = 2 -> rangeStart = 0.8333\n // randomness = 5 -> rangeStart = 0.6667\n // randomness = 10 -> rangeStart = 0.5\n // randomness = 20 -> rangeStart = 0.3333\n // randomness = 50 -> rangeStart = 0.1667\n // randomness = 100 -> rangeStart = 0.0909\n const rangeStart = 1 / (1 + blobOptions.randomness / 10);\n\n const points = genBlob(\n 3 + blobOptions.extraPoints,\n (index) => (rangeStart + rgen(index) * (1 - rangeStart)) / 2,\n );\n\n const size = blobOptions.size;\n return mapPoints(points, ({curr}) => {\n curr.x *= size;\n curr.y *= size;\n curr.handleIn.length *= size;\n curr.handleOut.length *= size;\n return curr;\n });\n};\n" }, { "path": "internal/rand.ts", "content": "import {createNoise2D} from \"simplex-noise\";\n\n// Seeded random number generator.\n// https://stackoverflow.com/a/47593316/3053361\nexport const rand = (seed: string) => {\n const xfnv1a = (str: string) => {\n let h = 2166136261 >>> 0;\n for (let i = 0; i < str.length; i++) {\n h = Math.imul(h ^ str.charCodeAt(i), 16777619);\n }\n return () => {\n h += h << 13;\n h ^= h >>> 7;\n h += h << 3;\n h ^= h >>> 17;\n return (h += h << 5) >>> 0;\n };\n };\n\n const sfc32 = (a: number, b: number, c: number, d: number) => () => {\n a >>>= 0;\n b >>>= 0;\n c >>>= 0;\n d >>>= 0;\n var t = (a + b) | 0;\n a = b ^ (b >>> 9);\n b = (c + (c << 3)) | 0;\n c = (c << 21) | (c >>> 11);\n d = (d + 1) | 0;\n t = (t + d) | 0;\n c = (c + t) | 0;\n return (t >>> 0) / 4294967296;\n };\n\n const seedGenerator = xfnv1a(seed);\n return sfc32(seedGenerator(), seedGenerator(), seedGenerator(), seedGenerator());\n};\n\n// Simplex noise.\n// TODO(2023-01-08) implement to remove dep\n// TODO(2023-02-16) https://asserttrue.blogspot.com/2011/12/perlin-noise-in-javascript_31.html\n// https://en.wikipedia.org/wiki/Simplex_noise\nexport const noise = (seed: string) => {\n const noise2D = createNoise2D(rand(seed));\n return (x: number, y: number) => {\n return noise2D(x, y);\n };\n};\n" }, { "path": "internal/render/canvas.ts", "content": "import {Coord, Point} from \"../types\";\nimport {expandHandle, forPoints} from \"../util\";\n\nconst pointSize = 2;\nconst infoSpacing = 20;\n\nexport const clear = (ctx: CanvasRenderingContext2D) => {\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n};\n\nexport const drawInfo = (ctx: CanvasRenderingContext2D, pos: number, label: string, value: any) => {\n ctx.fillText(`${label}: ${value}`, infoSpacing, (pos + 1) * infoSpacing);\n};\n\nconst drawLine = (ctx: CanvasRenderingContext2D, a: Coord, b: Coord, style: string) => {\n const backupStrokeStyle = ctx.strokeStyle;\n ctx.beginPath();\n ctx.moveTo(a.x, a.y);\n ctx.lineTo(b.x, b.y);\n ctx.strokeStyle = style;\n ctx.stroke();\n ctx.strokeStyle = backupStrokeStyle;\n};\n\nconst drawPoint = (ctx: CanvasRenderingContext2D, p: Coord, style: string) => {\n const backupFillStyle = ctx.fillStyle;\n ctx.beginPath();\n ctx.arc(p.x, p.y, pointSize, 0, 2 * Math.PI);\n ctx.fillStyle = style;\n ctx.fill();\n ctx.fillStyle = backupFillStyle;\n};\n\nexport const drawClosed = (ctx: CanvasRenderingContext2D, debug: boolean, points: Point[]) => {\n if (points.length < 2) throw new Error(\"not enough points\");\n\n // Draw debug points.\n if (debug) {\n forPoints(points, ({curr, next: getNext}) => {\n const next = getNext();\n\n // Compute coordinates of handles.\n const currHandle = expandHandle(curr, curr.handleOut);\n const nextHandle = expandHandle(next, next.handleIn);\n\n drawPoint(ctx, curr, \"\");\n drawLine(ctx, curr, currHandle, \"#ccc\");\n drawLine(ctx, next, nextHandle, \"#b6b\");\n });\n }\n\n ctx.stroke(renderPath2D(points));\n};\n\nexport const renderPath2D = (points: Point[]): Path2D => {\n const path = new Path2D();\n\n if (points.length < 1) return path;\n path.moveTo(points[0].x, points[0].y);\n\n forPoints(points, ({curr, next: getNext}) => {\n const next = getNext();\n const currHandle = expandHandle(curr, curr.handleOut);\n const nextHandle = expandHandle(next, next.handleIn);\n path.bezierCurveTo(currHandle.x, currHandle.y, nextHandle.x, nextHandle.y, next.x, next.y);\n });\n\n return path;\n};\n" }, { "path": "internal/render/svg.test.ts", "content": "import {XmlElement} from \"./svg\";\n\ndescribe(\"internal/render/svg\", () => {\n describe(\"XmlElement\", () => {\n it(\"should render element tags\", () => {\n const elem = new XmlElement(\"test\");\n expect(elem.render()).toBe(\"\");\n });\n\n it(\"should render element attributes\", () => {\n const elem = new XmlElement(\"test\");\n elem.attributes.a = 1;\n elem.attributes[\"b-c\"] = \"d\";\n expect(elem.render()).toBe('');\n });\n\n it(\"should render nested elements\", () => {\n const a = new XmlElement(\"a\");\n const aa = new XmlElement(\"aa\");\n const ab = new XmlElement(\"ab\");\n const aba = {render: () => \"aba\"};\n a.children.push(aa);\n a.children.push(ab);\n ab.children.push(aba);\n expect(a.render()).toBe(\"aba\");\n });\n });\n});\n" }, { "path": "internal/render/svg.ts", "content": "import {Point} from \"../types\";\nimport {expandHandle, forPoints} from \"../util\";\n\nexport interface RenderOptions {\n // Viewport size.\n width: number;\n height: number;\n\n // Transformation applied to all drawn points.\n transform?: string;\n\n // Declare whether the path should be closed.\n // This option is currently always true.\n closed: true;\n\n // Output path styling.\n fill?: string;\n stroke?: string;\n strokeWidth?: number;\n\n // Option to render guides (points, handles and viewport).\n guides?: boolean;\n boundingBox?: boolean;\n}\n\nexport const renderPath = (points: Point[]): string => {\n // Render path data attribute from points and handles.\n let path = `M${points[0].x},${points[0].y}`;\n forPoints(points, ({curr, next: getNext}) => {\n const next = getNext();\n const currControl = expandHandle(curr, curr.handleOut);\n const nextControl = expandHandle(next, next.handleIn);\n path += `C${currControl.x},${currControl.y},${nextControl.x},${nextControl.y},${next.x},${next.y}`;\n });\n return path;\n};\n\n// Renders the input points to an editable data structure which can be rendered to svg.\nexport const renderEditable = (points: Point[], options: RenderOptions): XmlElement => {\n const stroke = options.stroke || (options.guides ? \"black\" : \"none\");\n const strokeWidth = options.strokeWidth || (options.guides ? 1 : 0);\n\n const xmlRoot = new XmlElement(\"svg\");\n xmlRoot.attributes.width = options.width;\n xmlRoot.attributes.height = options.height;\n xmlRoot.attributes.viewBox = `0 0 ${options.width} ${options.height}`;\n xmlRoot.attributes.xmlns = \"http://www.w3.org/2000/svg\";\n\n const xmlContentGroup = new XmlElement(\"g\");\n xmlContentGroup.attributes.transform = options.transform || \"\";\n\n const xmlBlobPath = new XmlElement(\"path\");\n xmlBlobPath.attributes.stroke = stroke;\n xmlBlobPath.attributes[\"stroke-width\"] = strokeWidth;\n xmlBlobPath.attributes.fill = options.fill || \"none\";\n xmlBlobPath.attributes.d = renderPath(points);\n\n xmlContentGroup.children.push(xmlBlobPath);\n xmlRoot.children.push(xmlContentGroup);\n\n // Render guides if configured to do so.\n if (options.guides) {\n const color = options.stroke || \"black\";\n const size = options.strokeWidth || 1;\n\n // Bounding box.\n if (options.boundingBox) {\n const xmlBoundingRect = new XmlElement(\"rect\");\n xmlBoundingRect.attributes.x = 0;\n xmlBoundingRect.attributes.y = 0;\n xmlBoundingRect.attributes.width = options.width;\n xmlBoundingRect.attributes.height = options.height;\n xmlBoundingRect.attributes.fill = \"none\";\n xmlBoundingRect.attributes.stroke = color;\n xmlBoundingRect.attributes[\"stroke-width\"] = 2 * size;\n xmlBoundingRect.attributes[\"stroke-dasharray\"] = 2 * size;\n xmlContentGroup.children.push(xmlBoundingRect);\n }\n\n // Points and handles.\n forPoints(points, ({curr, next: getNext}) => {\n const next = getNext();\n const currControl = expandHandle(curr, curr.handleOut);\n const nextControl = expandHandle(next, next.handleIn);\n\n const xmlOutgoingHandleLine = new XmlElement(\"line\");\n xmlOutgoingHandleLine.attributes.x1 = curr.x;\n xmlOutgoingHandleLine.attributes.y1 = curr.y;\n xmlOutgoingHandleLine.attributes.x2 = currControl.x;\n xmlOutgoingHandleLine.attributes.y2 = currControl.y;\n xmlOutgoingHandleLine.attributes[\"stroke-width\"] = size;\n xmlOutgoingHandleLine.attributes.stroke = color;\n\n const xmlIncomingHandleLine = new XmlElement(\"line\");\n xmlIncomingHandleLine.attributes.x1 = next.x;\n xmlIncomingHandleLine.attributes.y1 = next.y;\n xmlIncomingHandleLine.attributes.x2 = nextControl.x;\n xmlIncomingHandleLine.attributes.y2 = nextControl.y;\n xmlIncomingHandleLine.attributes[\"stroke-width\"] = size;\n xmlIncomingHandleLine.attributes.stroke = color;\n xmlIncomingHandleLine.attributes[\"stroke-dasharray\"] = 2 * size;\n\n const xmlOutgoingHandleCircle = new XmlElement(\"circle\");\n xmlOutgoingHandleCircle.attributes.cx = currControl.x;\n xmlOutgoingHandleCircle.attributes.cy = currControl.y;\n xmlOutgoingHandleCircle.attributes.r = size;\n xmlOutgoingHandleCircle.attributes.fill = color;\n\n const xmlIncomingHandleCircle = new XmlElement(\"circle\");\n xmlIncomingHandleCircle.attributes.cx = nextControl.x;\n xmlIncomingHandleCircle.attributes.cy = nextControl.y;\n xmlIncomingHandleCircle.attributes.r = size;\n xmlIncomingHandleCircle.attributes.fill = color;\n\n const xmlPointCircle = new XmlElement(\"circle\");\n xmlPointCircle.attributes.cx = curr.x;\n xmlPointCircle.attributes.cy = curr.y;\n xmlPointCircle.attributes.r = 2 * size;\n xmlPointCircle.attributes.fill = color;\n\n xmlContentGroup.children.push(xmlOutgoingHandleLine);\n xmlContentGroup.children.push(xmlIncomingHandleLine);\n xmlContentGroup.children.push(xmlOutgoingHandleCircle);\n xmlContentGroup.children.push(xmlIncomingHandleCircle);\n xmlContentGroup.children.push(xmlPointCircle);\n });\n }\n\n return xmlRoot;\n};\n\n// Structured element with tag, attributes and children.\nexport class XmlElement {\n public attributes: Record = {};\n public children: any[] = [];\n\n public constructor(public tag: string) {}\n\n public render(): string {\n const attributes = this.renderAttributes();\n const content = this.renderChildren();\n if (content === \"\") {\n return `<${this.tag}${attributes}/>`;\n }\n return `<${this.tag}${attributes}>${content}`;\n }\n\n private renderAttributes(): string {\n const attributes = Object.keys(this.attributes);\n if (attributes.length === 0) return \"\";\n let out = \"\";\n for (const attribute of attributes) {\n out += ` ${attribute}=\"${this.attributes[attribute]}\"`;\n }\n return out;\n }\n\n private renderChildren(): string {\n let out = \"\";\n for (const child of this.children) {\n out += child.render();\n }\n return out;\n }\n}\n" }, { "path": "internal/types.ts", "content": "// Position in a coordinate system with an origin in the top left corner.\nexport interface Coord {\n x: number;\n y: number;\n}\n\nexport interface Handle {\n // Angle in radians relative to the 3:00 position going clockwise.\n angle: number;\n // Length of the handle.\n length: number;\n}\n\nexport interface Point extends Coord {\n // Cubic bezier handles.\n handleIn: Handle;\n handleOut: Handle;\n}\n" }, { "path": "internal/util.ts", "content": "import {Coord, Handle, Point} from \"./types\";\n\nexport const copyPoint = (p: Point): Point => ({\n x: p.x,\n y: p.y,\n handleIn: {...p.handleIn},\n handleOut: {...p.handleOut},\n});\n\nexport interface PointIteratorArgs {\n curr: Point;\n index: number;\n sibling: (pos: number) => Point;\n prev: () => Point;\n next: () => Point;\n}\n\nexport const coordPoint = (coord: Coord): Point => {\n return {\n ...coord,\n handleIn: {angle: 0, length: 0},\n handleOut: {angle: 0, length: 0},\n };\n};\n\nexport const forPoints = (points: Point[], callback: (args: PointIteratorArgs) => void) => {\n for (let i = 0; i < points.length; i++) {\n const sibling = (pos: number) => copyPoint(points[mod(pos, points.length)]);\n callback({\n curr: copyPoint(points[i]),\n index: i,\n sibling,\n prev: () => sibling(i - 1),\n next: () => sibling(i + 1),\n });\n }\n};\n\nexport const mapPoints = (\n points: Point[],\n callback: (args: PointIteratorArgs) => Point,\n): Point[] => {\n const out: Point[] = [];\n forPoints(points, (args) => {\n out.push(callback(args));\n });\n return out;\n};\n\nexport const coordEqual = (a: Coord, b: Coord): boolean => {\n return a.x === b.x && a.y === b.y;\n};\n\nexport const angleOf = (a: Coord, b: Coord): number => {\n const dx = b.x - a.x;\n const dy = -b.y + a.y;\n const angle = Math.atan2(dy, dx);\n if (angle < 0) {\n return Math.abs(angle);\n } else {\n return 2 * Math.PI - angle;\n }\n};\n\nexport const expandHandle = (point: Coord, handle: Handle): Coord => ({\n x: point.x + handle.length * Math.cos(handle.angle),\n y: point.y + handle.length * Math.sin(handle.angle),\n});\n\nconst collapseHandle = (point: Coord, handle: Coord): Handle => ({\n angle: angleOf(point, handle),\n length: Math.sqrt((handle.x - point.x) ** 2 + (handle.y - point.y) ** 2),\n});\n\nexport const length = (a: Point, b: Point): number => {\n const aHandle = expandHandle(a, a.handleOut);\n const bHandle = expandHandle(b, b.handleIn);\n const ab = distance(a, b);\n const abHandle = distance(aHandle, bHandle);\n return (ab + abHandle + a.handleOut.length + b.handleIn.length) / 2;\n};\n\nexport const reverse = (points: Point[]): Point[] => {\n return mapPoints(points, ({index, sibling}) => {\n const point = sibling(points.length - index - 1);\n point.handleIn.angle += Math.PI;\n point.handleOut.angle += Math.PI;\n return point;\n });\n};\n\nexport const shift = (offset: number, points: Point[]): Point[] => {\n return mapPoints(points, ({index, sibling}) => {\n return sibling(index + offset);\n });\n};\n\n// Add a control point to the curve between a and b.\n// Percentage [0, 1] from a to b.\n// a: original first point.\n// b: original last point.\n// c: new first point.\n// d: new added point.\n// e: new last point.\n// f: split point between a and b's handles.\n// g: split point between c's handle and f.\n// h: split point between e's handle and f.\nexport const insertAt = (percentage: number, a: Point, b: Point): [Point, Point, Point] => {\n const c = copyPoint(a);\n c.handleOut.length *= percentage;\n\n const e = copyPoint(b);\n e.handleIn.length *= 1 - percentage;\n\n const aHandle = expandHandle(a, a.handleOut);\n const bHandle = expandHandle(b, b.handleIn);\n const cHandle = expandHandle(c, c.handleOut);\n const eHandle = expandHandle(e, e.handleIn);\n const f = splitLine(percentage, aHandle, bHandle);\n const g = splitLine(percentage, cHandle, f);\n const h = splitLine(1 - percentage, eHandle, f);\n const dCoord = splitLine(percentage, g, h);\n\n const d: Point = {\n x: dCoord.x,\n y: dCoord.y,\n handleIn: collapseHandle(dCoord, g),\n handleOut: collapseHandle(dCoord, h),\n };\n return [c, d, e];\n};\n\nexport const insertCount = (count: number, a: Point, b: Point): Point[] => {\n if (count < 2) return [a, b];\n const percentage = 1 / count;\n const [c, d, e] = insertAt(percentage, a, b);\n if (count === 2) return [c, d, e];\n return [c, ...insertCount(count - 1, d, e)];\n};\n\n// Smooths out the path made up of the given points.\n// Existing handles are ignored.\nexport const smooth = (points: Point[], strength: number): Point[] => {\n return mapPoints(points, ({curr, next, prev}) => {\n const angle = angleOf(prev(), next());\n return {\n x: curr.x,\n y: curr.y,\n handleIn: {\n angle: angle + Math.PI,\n length: strength * distance(curr, prev()),\n },\n handleOut: {\n angle,\n length: strength * distance(curr, next()),\n },\n };\n });\n};\n\n// Modulo operation that always produces a positive result.\n// https://stackoverflow.com/q/4467539/3053361\nexport const mod = (a: number, n: number): number => {\n return ((a % n) + n) % n;\n};\n\n// Converts degrees to radians.\nexport const rad = (deg: number) => {\n return (deg / 360) * 2 * Math.PI;\n};\n\n// Converts radians to degrees.\nexport const deg = (rad: number) => {\n return (((rad / Math.PI) * 1) / 2) * 360;\n};\n\n// Calculates distance between two points.\nexport const distance = (a: Coord, b: Coord): number => {\n return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);\n};\n\n// Calculates the angle of the line from a to b in degrees.\nexport const angle = (a: Coord, b: Coord): number => {\n return deg(Math.atan2(b.y - a.y, b.x - a.x));\n};\n\nexport const split = (percentage: number, a: number, b: number): number => {\n return a + percentage * (b - a);\n};\n\nexport const splitLine = (percentage: number, a: Coord, b: Coord): Coord => {\n return {\n x: split(percentage, a.x, b.x),\n y: split(percentage, a.y, b.y),\n };\n};\n" }, { "path": "package.json", "content": "{\n \"name\": \"blobs\",\n \"version\": \"2.3.0\",\n \"description\": \"Random blob generation and animation\",\n \"author\": \"g-harel\",\n \"license\": \"MIT\",\n \"main\": \"index.js\",\n \"module\": \"index.module.js\",\n \"types\": \"index.d.ts\",\n \"scripts\": {\n \"prepack\": \"npm run build\",\n \"postpublish\": \"npm run clean\",\n \"build\": \"npm run clean && rollup -c rollup.config.mjs\",\n \"clean\": \"trash '**/*.js' '**/*.js.map' '**/*.d.ts' '!**/node_modules/**/*' '!rollup.config.mjs'\",\n \"fmt\": \"prettier --list-different --write --ignore-path .gitignore '**/*.{js,ts,md,html}' '!index.html'\",\n \"demo:dev\": \"parcel demo/index.html --open\",\n \"demo:build\": \"parcel build demo/index.html && move-file dist/index.html index.html\",\n \"test\": \"jest\",\n \"test:playground\": \"parcel internal/animate/testing/index.html --open\"\n },\n \"dependencies\": {\n \"simplex-noise\": \"^4.0.1\"\n },\n \"devDependencies\": {\n \"@rollup/plugin-node-resolve\": \"^15.0.1\",\n \"@types/jest\": \"25.1.4\",\n \"jest\": \"29.5.0\",\n \"jest-canvas-mock\": \"2.5.0\",\n \"move-file-cli\": \"2.0.0\",\n \"parcel\": \"1.12.3\",\n \"parcel-plugin-inliner\": \"1.0.14\",\n \"path2d-polyfill\": \"^2.0.1\",\n \"prettier\": \"2.0.2\",\n \"rollup\": \"3.8.1\",\n \"rollup-plugin-copy\": \"3.4.0\",\n \"rollup-plugin-typescript2\": \"0.34.1\",\n \"rollup-plugin-uglify\": \"6.0.1\",\n \"trash-cli\": \"3.0.0\",\n \"ts-jest\": \"29.1.0\",\n \"tslib\": \"2.4.1\",\n \"typescript\": \"4.9.4\"\n },\n \"homepage\": \"https://blobs.dev\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/g-harel/blobs\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/g-harel/blobs/issues\"\n },\n \"keywords\": [\n \"random\",\n \"blob\",\n \"svg\",\n \"path\",\n \"canvas\",\n \"animation\"\n ],\n \"prettier\": {\n \"tabWidth\": 4,\n \"printWidth\": 100,\n \"trailingComma\": \"all\",\n \"bracketSpacing\": false,\n \"arrowParens\": \"always\"\n },\n \"jest\": {\n \"preset\": \"ts-jest\",\n \"setupFiles\": [\n \"jest-canvas-mock\"\n ]\n }\n}\n" }, { "path": "public/__snapshots__/legacy.test.ts.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`fill 1`] = `\"\"`;\n\nexports[`guides 1`] = `\"\"`;\n\nexports[`stroke 1`] = `\"\"`;\n" }, { "path": "public/animate.test.ts", "content": "import {CanvasKeyframe, canvasPath} from \"./animate\";\n\nconst genKeyframe = (): CanvasKeyframe => ({\n duration: 1000 * Math.random(),\n delay: 1000 * Math.random(),\n timingFunction: \"linear\",\n callback: () => {},\n blobOptions: {\n extraPoints: Math.floor(10 * Math.random()),\n randomness: Math.floor(10 * Math.random()),\n seed: Math.random(),\n size: 100 + 200 * Math.random(),\n },\n canvasOptions: {\n offsetX: 100 * Math.random(),\n offsetY: 100 * Math.random(),\n },\n});\n\ndescribe(\"animate\", () => {\n describe(\"canvasPath\", () => {\n describe(\"transition\", () => {\n describe(\"keyframe\", () => {\n it(\"should accept generated keyframe\", () => {\n const animation = canvasPath();\n const keyframe = genKeyframe();\n\n expect(() => animation.transition(keyframe)).not.toThrow();\n });\n\n it(\"should indicate the rejected frame index\", () => {\n const animation = canvasPath();\n const keyframes = [genKeyframe(), null as any, genKeyframe()];\n\n expect(() => animation.transition(...keyframes)).toThrow(/keyframe.*1/g);\n });\n\n interface TestCase {\n name: string;\n edit: (keyframe: CanvasKeyframe) => void;\n error?: RegExp;\n }\n\n const testCases: Array = [\n // duration\n {\n name: \"should accept valid duration\",\n edit: (keyframe) => (keyframe.duration = 100),\n },\n {\n name: \"should accept zero duration\",\n edit: (keyframe) => (keyframe.duration = 0),\n },\n {\n name: \"should reject undefined duration\",\n edit: (keyframe) => delete (keyframe as any).duration,\n error: /duration.*number.*undefined/g,\n },\n {\n name: \"should reject negative duration\",\n edit: (keyframe) => (keyframe.duration = -10),\n error: /duration.*invalid/g,\n },\n {\n name: \"should reject broken duration\",\n edit: (keyframe) => (keyframe.duration = NaN),\n error: /duration.*number.*NaN/g,\n },\n {\n name: \"should reject invalid duration\",\n edit: (keyframe) => (keyframe.duration = \"123\" as any),\n error: /duration.*number.*string/g,\n },\n // delay\n {\n name: \"should accept valid delay\",\n edit: (keyframe) => (keyframe.delay = 200),\n },\n {\n name: \"should accept zero delay\",\n edit: (keyframe) => (keyframe.delay = 0),\n },\n {\n name: \"should accept undefined delay\",\n edit: (keyframe) => delete keyframe.delay,\n },\n {\n name: \"should reject negative delay\",\n edit: (keyframe) => (keyframe.delay = -10),\n error: /delay.*invalid/g,\n },\n {\n name: \"should reject broken delay\",\n edit: (keyframe) => (keyframe.delay = NaN),\n error: /delay.*number.*NaN/g,\n },\n {\n name: \"should reject invalid delay\",\n edit: (keyframe) => (keyframe.delay = \"123\" as any),\n error: /delay.*number.*string/g,\n },\n // timingFunction\n {\n name: \"should accept known timingFunction\",\n edit: (keyframe) => (keyframe.timingFunction = \"ease\"),\n },\n {\n name: \"should accept undefined timingFunction\",\n edit: (keyframe) => delete keyframe.timingFunction,\n },\n {\n name: \"should reject invalid timingFunction\",\n edit: (keyframe) => (keyframe.timingFunction = (() => 0) as any),\n error: /timingFunction.*string.*function/g,\n },\n {\n name: \"should reject unknown timingFunction\",\n edit: (keyframe) => (keyframe.timingFunction = \"unknown\" as any),\n error: /timingFunction.*not recognized.*unknown/g,\n },\n // callback\n {\n name: \"should accept valid callback\",\n edit: (keyframe) => (keyframe.callback = () => console.log(\"test\")),\n },\n {\n name: \"should accept undefined callback\",\n edit: (keyframe) => delete keyframe.callback,\n },\n {\n name: \"should reject invalid callback\",\n edit: (keyframe) => (keyframe.callback = {} as any),\n error: /callback.*function.*object/g,\n },\n // blobOptions\n {\n name: \"should reject undefined blobOptions\",\n edit: (keyframe) => delete (keyframe as any).blobOptions,\n error: /blobOptions.*object.*undefined/g,\n },\n {\n name: \"should reject invalid blobOptions\",\n edit: (keyframe) => (keyframe.blobOptions = null as any),\n error: /blobOptions.*object.*null/g,\n },\n // blobOptions.seed\n {\n name: \"should accept number blobOptions seed\",\n edit: (keyframe) => (keyframe.blobOptions.seed = 123),\n },\n {\n name: \"should accept string blobOptions seed\",\n edit: (keyframe) => (keyframe.blobOptions.seed = \"test\"),\n },\n {\n name: \"should reject undefined blobOptions seed\",\n edit: (keyframe) => delete (keyframe as any).blobOptions.seed,\n error: /seed.*string.*number.*undefined/g,\n },\n {\n name: \"should reject broken blobOptions seed\",\n edit: (keyframe) => (keyframe.blobOptions.seed = NaN),\n error: /seed.*string.*number.*NaN/g,\n },\n // blobOptions.extraPoints\n {\n name: \"should accept valid blobOptions extraPoints\",\n edit: (keyframe) => (keyframe.blobOptions.extraPoints = 4),\n },\n {\n name: \"should reject undefined blobOptions extraPoints\",\n edit: (keyframe) => delete (keyframe as any).blobOptions.extraPoints,\n error: /blobOptions.*extraPoints.*number.*undefined/g,\n },\n {\n name: \"should reject broken blobOptions extraPoints\",\n edit: (keyframe) => (keyframe.blobOptions.extraPoints = NaN),\n error: /blobOptions.*extraPoints.*number.*NaN/g,\n },\n {\n name: \"should reject negative blobOptions extraPoints\",\n edit: (keyframe) => (keyframe.blobOptions.extraPoints = -2),\n error: /blobOptions.*extraPoints.*invalid/g,\n },\n // blobOptions.randomness\n {\n name: \"should accept valid blobOptions randomness\",\n edit: (keyframe) => (keyframe.blobOptions.randomness = 3),\n },\n {\n name: \"should reject undefined blobOptions randomness\",\n edit: (keyframe) => delete (keyframe as any).blobOptions.randomness,\n error: /blobOptions.*randomness.*number.*undefined/g,\n },\n {\n name: \"should reject broken blobOptions randomness\",\n edit: (keyframe) => (keyframe.blobOptions.randomness = NaN),\n error: /blobOptions.*randomness.*number.*NaN/g,\n },\n {\n name: \"should reject negative blobOptions randomness\",\n edit: (keyframe) => (keyframe.blobOptions.randomness = -10),\n error: /blobOptions.*randomness.*invalid/g,\n },\n // blobOptions.size\n {\n name: \"should accept valid blobOptions size\",\n edit: (keyframe) => (keyframe.blobOptions.size = 40),\n },\n {\n name: \"should reject undefined blobOptions size\",\n edit: (keyframe) => delete (keyframe as any).blobOptions.size,\n error: /blobOptions.*size.*number.*undefined/g,\n },\n {\n name: \"should reject broken blobOptions size\",\n edit: (keyframe) => (keyframe.blobOptions.size = NaN),\n error: /blobOptions.*size.*number.*NaN/g,\n },\n {\n name: \"should reject negative blobOptions size\",\n edit: (keyframe) => (keyframe.blobOptions.size = -1),\n error: /blobOptions.*size.*invalid/g,\n },\n // canvasOptions\n {\n name: \"should accept empty canvasOptions\",\n edit: (keyframe) => (keyframe.canvasOptions = {}),\n },\n {\n name: \"should accept undefined canvasOptions\",\n edit: (keyframe) => delete keyframe.canvasOptions,\n },\n {\n name: \"should reject invalid canvasOptions\",\n edit: (keyframe) => (keyframe.canvasOptions = null as any),\n error: /canvasOptions.*object.*null/g,\n },\n // canvasOptions.offsetX\n {\n name: \"should accept valid canvasOptions offsetX\",\n edit: (keyframe) => (keyframe.canvasOptions = {offsetX: 100}),\n },\n {\n name: \"should accept undefined canvasOptions offsetX\",\n edit: (keyframe) => delete keyframe.canvasOptions?.offsetX,\n },\n {\n name: \"should reject broken canvasOptions offsetX\",\n edit: (keyframe) => (keyframe.canvasOptions = {offsetX: NaN}),\n error: /canvasOptions.*offsetX.*number.*NaN/g,\n },\n // canvasOptions.offsetY\n {\n name: \"should accept valid canvasOptions offsetY\",\n edit: (keyframe) => (keyframe.canvasOptions = {offsetY: 222}),\n },\n {\n name: \"should accept undefined canvasOptions offsetY\",\n edit: (keyframe) => delete keyframe.canvasOptions?.offsetY,\n },\n {\n name: \"should reject broken canvasOptions offsetY\",\n edit: (keyframe) => (keyframe.canvasOptions = {offsetY: NaN}),\n error: /canvasOptions.*offsetY.*number.*NaN/g,\n },\n ];\n\n // Run all test cases with a configurable amount of keyframes\n // and index of the keyframe being edited for the tests.\n const runSuite = (keyframeCount: number, editIndex: number) => {\n for (const testCase of testCases) {\n it(testCase.name, () => {\n // Create blank animation.\n const animation = canvasPath();\n\n // Create keyframes to call transition with.\n const keyframes: CanvasKeyframe[] = [];\n for (let i = 0; i < keyframeCount; i++) {\n keyframes.push(genKeyframe());\n }\n\n // Modify selected keyframe.\n testCase.edit(keyframes[editIndex]);\n\n if (testCase.error) {\n // Copy regexp because they are stateful.\n const pattern = new RegExp(testCase.error);\n expect(() => animation.transition(...keyframes)).toThrow(pattern);\n } else {\n expect(() => animation.transition(...keyframes)).not.toThrow();\n }\n });\n }\n };\n\n // Run all cases when given a single test frame and asserting on it.\n describe(\"first\", () => runSuite(1, 0));\n\n // Run all cases when given more than one frame, asserting on last one.\n const lastLength = 2 + Math.floor(4 * Math.random());\n describe(\"last\", () => runSuite(lastLength, lastLength - 1));\n\n // Run all cases when given more than one frame, asserting on a random one.\n const nthLength = 2 + Math.floor(16 * Math.random());\n const nthIndex = Math.floor(nthLength * Math.random());\n describe(`nth (${nthIndex + 1}/${nthLength})`, () => runSuite(nthLength, nthIndex));\n });\n });\n });\n});\n" }, { "path": "public/animate.ts", "content": "import {Point} from \"../internal/types\";\nimport {renderPath2D} from \"../internal/render/canvas\";\nimport {genFromOptions} from \"../internal/gen\";\nimport {mapPoints} from \"../internal/util\";\nimport {statefulAnimationGenerator} from \"../internal/animate/state\";\nimport {\n checkBlobOptions,\n checkCanvasOptions,\n checkKeyframeOptions,\n checkPoints,\n} from \"../internal/check\";\nimport {BlobOptions, CanvasOptions} from \"./blobs\";\nimport {noise} from \"../internal/rand\";\nimport {interpolateBetween} from \"../internal/animate/interpolate\";\nimport {prepare} from \"../internal/animate/prepare\";\n\ninterface Keyframe {\n // Duration of the keyframe animation in milliseconds.\n duration: number;\n // Delay before animation begins in milliseconds.\n // Default: 0.\n delay?: number;\n // Controls the speed of the animation over time.\n // Default: \"linear\".\n timingFunction?:\n | \"linear\"\n | \"easeEnd\"\n | \"easeStart\"\n | \"ease\"\n | \"elasticEnd0\"\n | \"elasticEnd1\"\n | \"elasticEnd2\"\n | \"elasticEnd3\";\n // Called after keyframe end-state is reached or passed.\n // Called exactly once when the keyframe end-state is rendered.\n // Not called if the keyframe is preempted by a new transition.\n callback?: () => void;\n // Standard options, refer to \"blobs/v2\" documentation.\n canvasOptions?: {\n offsetX?: number;\n offsetY?: number;\n };\n}\n\nexport interface CanvasKeyframe extends Keyframe {\n // Standard options, refer to \"blobs/v2\" documentation.\n blobOptions: {\n seed: number | string;\n randomness: number;\n extraPoints: number;\n size: number;\n };\n}\n\nexport interface CanvasCustomKeyframe extends Keyframe {\n // List of point coordinates that produce a single, closed shape.\n points: Point[];\n}\n\nexport interface Animation {\n // Renders the current state of the animation.\n renderFrame: () => Path2D;\n // Renders the current state of the animation as points.\n renderPoints: () => Point[];\n // Immediately begin animating through the given keyframes.\n // Non-rendered keyframes from previous transitions are cancelled.\n transition: (...keyframes: (CanvasKeyframe | CanvasCustomKeyframe)[]) => void;\n // Resume a paused animation. Has no effect if already playing.\n play: () => void;\n // Pause a playing animation. Has no effect if already paused.\n pause: () => void;\n // Toggle between playing and pausing the animation.\n playPause: () => void;\n}\n\n// Function that returns the current timestamp. This value will be used for all\n// duration/delay values and will be used to interpolate between keyframes. It\n// must produce values increasing in size.\n// Default: `Date.now`.\nexport interface TimestampProvider {\n (): number;\n}\n\nexport interface WiggleOptions {\n // Speed of the wiggle movement. Higher is faster.\n speed: number;\n // Length of the transition from the current state to the wiggle blob.\n // Default: 0\n initialTransition?: number;\n}\n\nconst canvasPointGenerator = (keyframe: CanvasKeyframe | CanvasCustomKeyframe): Point[] => {\n let points: Point[];\n if (\"points\" in keyframe) {\n points = keyframe.points;\n } else {\n points = genFromOptions(keyframe.blobOptions);\n }\n return mapPoints(points, ({curr}) => {\n curr.x += keyframe?.canvasOptions?.offsetX || 0;\n curr.y += keyframe?.canvasOptions?.offsetY || 0;\n return curr;\n });\n};\n\nconst canvasKeyframeChecker = (keyframe: CanvasKeyframe | CanvasCustomKeyframe, index: number) => {\n try {\n if (\"points\" in keyframe) return checkPoints(keyframe.points);\n checkBlobOptions(keyframe.blobOptions);\n checkCanvasOptions(keyframe.canvasOptions);\n checkKeyframeOptions(keyframe);\n } catch (e) {\n throw `(blobs2): keyframe ${index}: ${e}`;\n }\n};\n\nexport const canvasPath = (timestampProvider?: () => number): Animation => {\n let actualTimestampProvider = Date.now;\n\n // Make sure timestamps are always increasing.\n if (timestampProvider !== undefined) {\n let lastTimestamp = 0;\n actualTimestampProvider = () => {\n const currentTimestamp = timestampProvider();\n if (currentTimestamp < lastTimestamp) {\n throw `timestamp provider generated decreasing value: ${lastTimestamp} then ${currentTimestamp}.`;\n }\n lastTimestamp = currentTimestamp;\n return currentTimestamp;\n };\n }\n\n return statefulAnimationGenerator(\n canvasPointGenerator,\n renderPath2D,\n canvasKeyframeChecker,\n )(actualTimestampProvider);\n};\n\nexport const wigglePreset = (\n animation: Animation,\n blobOptions: BlobOptions,\n canvasOptions: CanvasOptions,\n wiggleOptions: WiggleOptions,\n) => {\n // Interval at which a new sample is taken.\n // Multiple of 16 to do work every N frames.\n const intervalMs = 16 * 10;\n const leapSize = 0.01 * wiggleOptions.speed;\n const noiseField = noise(String(blobOptions.seed));\n\n const transitionFrameCount = Math.min((wiggleOptions.initialTransition || 0) / intervalMs);\n let transitionStartFrame = animation.renderPoints();\n\n let count = 0;\n const loopAnimation = () => {\n count++;\n\n // Constantly changing blob.\n const noiseBlob = genFromOptions(blobOptions, (index) => {\n return noiseField(leapSize * count, index);\n });\n\n if (count < transitionFrameCount) {\n // Create intermediate frame between the current state and the\n // moving noiseBlob target.\n const [preparedStartPoints, preparedEndPoints] = prepare(\n transitionStartFrame,\n noiseBlob,\n {\n rawAngles: true,\n divideRatio: 1,\n },\n );\n const progress = Math.min(1, 2 / (transitionFrameCount - count));\n const targetPoints = interpolateBetween(\n progress,\n preparedStartPoints,\n preparedEndPoints,\n );\n transitionStartFrame = targetPoints;\n\n animation.transition({\n duration: intervalMs,\n delay: 0,\n timingFunction: \"linear\",\n canvasOptions,\n points: targetPoints,\n callback: loopAnimation,\n });\n } else {\n animation.transition({\n duration: intervalMs,\n delay: 0,\n timingFunction: \"linear\",\n canvasOptions,\n points: noiseBlob,\n callback: loopAnimation,\n });\n }\n };\n loopAnimation();\n};\n" }, { "path": "public/blobs.test.ts", "content": "import {BlobOptions, CanvasOptions, canvasPath, svg, SvgOptions, svgPath} from \"./blobs\";\n\n// @ts-ignore\nimport {Path2D, polyfillPath2D} from \"path2d-polyfill\";\nglobal.Path2D = Path2D;\n\nconst genBlobOptions = (): BlobOptions => ({\n extraPoints: Math.floor(10 * Math.random()),\n randomness: Math.floor(10 * Math.random()),\n seed: Math.random(),\n size: 100 + 200 * Math.random(),\n});\n\nconst genSvgOptions = (): SvgOptions => ({\n fill: String(Math.random()),\n stroke: String(Math.random()),\n strokeWidth: 4 * Math.random(),\n});\n\nconst genCanvasOptions = (): CanvasOptions => ({\n offsetX: 100 * Math.random(),\n offsetY: 100 * Math.random(),\n});\n\ninterface TestCase {\n name: string;\n edit: (options: T) => void;\n error?: RegExp;\n}\n\nconst runSuite = (t: {\n optionsGenerator: () => T;\n functionBeingTested: (options: any) => void;\n}) => (testCases: TestCase[]) => {\n for (const testCase of testCases) {\n it(testCase.name, () => {\n const options = t.optionsGenerator();\n testCase.edit(options);\n\n if (testCase.error) {\n // Copy regexp because they are stateful.\n const pattern = new RegExp(testCase.error);\n expect(() => t.functionBeingTested(options)).toThrow(pattern);\n } else {\n expect(() => t.functionBeingTested(options)).not.toThrow();\n }\n });\n }\n};\n\nconst testBlobOptions = (functionBeingTested: (options: any) => void) => {\n it(\"should accept generated blobOptions\", () => {\n expect(() => svgPath(genBlobOptions())).not.toThrow();\n });\n\n it(\"should reject undefined blobOptions\", () => {\n expect(() => svgPath(undefined as any)).toThrow(/blobOptions.*object.*undefined/g);\n });\n\n it(\"should reject invalid blobOptions\", () => {\n expect(() => svgPath(null as any)).toThrow(/blobOptions.*object.*null/g);\n });\n\n runSuite({\n functionBeingTested,\n optionsGenerator: genBlobOptions,\n })([\n // seed\n {\n name: \"should accept number blobOptions seed\",\n edit: (blobOptions) => (blobOptions.seed = 123),\n },\n {\n name: \"should accept string blobOptions seed\",\n edit: (blobOptions) => (blobOptions.seed = \"test\"),\n },\n {\n name: \"should reject undefined blobOptions seed\",\n edit: (blobOptions) => delete (blobOptions as any).seed,\n error: /seed.*string.*number.*undefined/g,\n },\n {\n name: \"should reject broken blobOptions seed\",\n edit: (blobOptions) => (blobOptions.seed = NaN),\n error: /seed.*string.*number.*NaN/g,\n },\n // extraPoints\n {\n name: \"should accept valid blobOptions extraPoints\",\n edit: (blobOptions) => (blobOptions.extraPoints = 4),\n },\n {\n name: \"should reject undefined blobOptions extraPoints\",\n edit: (blobOptions) => delete (blobOptions as any).extraPoints,\n error: /blobOptions.*extraPoints.*number.*undefined/g,\n },\n {\n name: \"should reject broken blobOptions extraPoints\",\n edit: (blobOptions) => (blobOptions.extraPoints = NaN),\n error: /blobOptions.*extraPoints.*number.*NaN/g,\n },\n {\n name: \"should reject negative blobOptions extraPoints\",\n edit: (blobOptions) => (blobOptions.extraPoints = -2),\n error: /blobOptions.*extraPoints.*invalid/g,\n },\n // randomness\n {\n name: \"should accept valid blobOptions randomness\",\n edit: (blobOptions) => (blobOptions.randomness = 3),\n },\n {\n name: \"should reject undefined blobOptions randomness\",\n edit: (blobOptions) => delete (blobOptions as any).randomness,\n error: /blobOptions.*randomness.*number.*undefined/g,\n },\n {\n name: \"should reject broken blobOptions randomness\",\n edit: (blobOptions) => (blobOptions.randomness = NaN),\n error: /blobOptions.*randomness.*number.*NaN/g,\n },\n {\n name: \"should reject negative blobOptions randomness\",\n edit: (blobOptions) => (blobOptions.randomness = -10),\n error: /blobOptions.*randomness.*invalid/g,\n },\n // size\n {\n name: \"should accept valid blobOptions size\",\n edit: (blobOptions) => (blobOptions.size = 40),\n },\n {\n name: \"should reject undefined blobOptions size\",\n edit: (blobOptions) => delete (blobOptions as any).size,\n error: /blobOptions.*size.*number.*undefined/g,\n },\n {\n name: \"should reject broken blobOptions size\",\n edit: (blobOptions) => (blobOptions.size = NaN),\n error: /blobOptions.*size.*number.*NaN/g,\n },\n {\n name: \"should reject negative blobOptions size\",\n edit: (blobOptions) => (blobOptions.size = -1),\n error: /blobOptions.*size.*invalid/g,\n },\n ]);\n};\n\ndescribe(\"blobs\", () => {\n describe(\"canvasPath\", () => {\n describe(\"blobOptions\", () => {\n testBlobOptions((blobOptions) => canvasPath(blobOptions, genCanvasOptions()));\n });\n\n describe(\"canvasOptions\", () => {\n it(\"should accept generated canvasOptions\", () => {\n expect(() => canvasPath(genBlobOptions(), genCanvasOptions())).not.toThrow();\n });\n\n it(\"should accept undefined canvasOptions\", () => {\n expect(() => canvasPath(genBlobOptions(), undefined as any)).not.toThrow();\n });\n\n it(\"should reject invalid canvasOptions\", () => {\n expect(() => canvasPath(genBlobOptions(), null as any)).toThrow(\n /canvasOptions.*object.*null/g,\n );\n });\n\n runSuite({\n functionBeingTested: (canvasOptions) => canvasPath(genBlobOptions(), canvasOptions),\n optionsGenerator: genCanvasOptions,\n })([\n // offsetX\n {\n name: \"should accept valid canvasOptions offsetX\",\n edit: (canvasOptions) => (canvasOptions.offsetX = 100),\n },\n {\n name: \"should accept undefined canvasOptions offsetX\",\n edit: (canvasOptions) => delete canvasOptions?.offsetX,\n },\n {\n name: \"should reject broken canvasOptions offsetX\",\n edit: (canvasOptions) => (canvasOptions.offsetX = NaN),\n error: /canvasOptions.*offsetX.*number.*NaN/g,\n },\n // offsetY\n {\n name: \"should accept valid canvasOptions offsetY\",\n edit: (canvasOptions) => (canvasOptions.offsetY = 222),\n },\n {\n name: \"should accept undefined canvasOptions offsetY\",\n edit: (canvasOptions) => delete canvasOptions?.offsetY,\n },\n {\n name: \"should reject broken canvasOptions offsetY\",\n edit: (canvasOptions) => (canvasOptions.offsetY = NaN),\n error: /canvasOptions.*offsetY.*number.*NaN/g,\n },\n ]);\n });\n });\n\n describe(\"svg\", () => {\n describe(\"blobOptions\", () => {\n testBlobOptions((blobOptions) => svg(blobOptions, genSvgOptions()));\n });\n\n describe(\"svgOptions\", () => {\n it(\"should accept generated svgOptions\", () => {\n expect(() => svg(genBlobOptions(), genSvgOptions())).not.toThrow();\n });\n\n it(\"should accept undefined svgOptions\", () => {\n expect(() => svg(genBlobOptions(), undefined as any)).not.toThrow();\n });\n\n it(\"should reject invalid svgOptions\", () => {\n expect(() => svg(genBlobOptions(), null as any)).toThrow(\n /svgOptions.*object.*null/g,\n );\n });\n\n runSuite({\n functionBeingTested: (svgOptions) => svg(genBlobOptions(), svgOptions),\n optionsGenerator: genSvgOptions,\n })([\n // fill\n {\n name: \"should accept valid svgOptions fill\",\n edit: (svgOptions) => (svgOptions.fill = \"red\"),\n },\n {\n name: \"should accept undefined svgOptions fill\",\n edit: (svgOptions) => delete svgOptions?.fill,\n },\n {\n name: \"should reject broken svgOptions fill\",\n edit: (svgOptions) => (svgOptions.fill = null as any),\n error: /svgOptions.*fill.*string.*null/g,\n },\n // stroke\n {\n name: \"should accept valid svgOptions stroke\",\n edit: (svgOptions) => (svgOptions.stroke = \"red\"),\n },\n {\n name: \"should accept undefined svgOptions stroke\",\n edit: (svgOptions) => delete svgOptions?.stroke,\n },\n {\n name: \"should reject broken svgOptions stroke\",\n edit: (svgOptions) => (svgOptions.stroke = null as any),\n error: /svgOptions.*stroke.*string.*null/g,\n },\n // strokeWidth\n {\n name: \"should accept valid svgOptions strokeWidth\",\n edit: (svgOptions) => (svgOptions.strokeWidth = 222),\n },\n {\n name: \"should accept undefined svgOptions strokeWidth\",\n edit: (svgOptions) => delete svgOptions?.strokeWidth,\n },\n {\n name: \"should reject broken svgOptions strokeWidth\",\n edit: (svgOptions) => (svgOptions.strokeWidth = NaN),\n error: /svgOptions.*strokeWidth.*number.*NaN/g,\n },\n ]);\n });\n });\n\n describe(\"svgPath\", () => {\n describe(\"blobOptions\", () => {\n testBlobOptions(svgPath);\n });\n });\n});\n" }, { "path": "public/blobs.ts", "content": "import {genFromOptions} from \"../internal/gen\";\nimport {renderPath} from \"../internal/render/svg\";\nimport {renderPath2D} from \"../internal/render/canvas\";\nimport {mapPoints} from \"../internal/util\";\nimport {checkBlobOptions, checkCanvasOptions, checkSvgOptions} from \"../internal/check\";\n\nexport interface BlobOptions {\n // A given seed will always produce the same blob.\n // Use `Math.random()` for pseudorandom behavior.\n seed: string | number;\n // Actual number of points will be `3 + extraPoints`.\n extraPoints: number;\n // Increases the amount of variation in point position.\n randomness: number;\n // Size of the bounding box.\n size: number;\n}\n\nexport interface CanvasOptions {\n // Coordinates of top-left corner of the blob.\n offsetX?: number;\n offsetY?: number;\n}\n\nexport interface SvgOptions {\n fill?: string; // Default: \"#ec576b\".\n stroke?: string; // Default: \"none\".\n strokeWidth?: number; // Default: 0.\n}\n\nexport const canvasPath = (blobOptions: BlobOptions, canvasOptions: CanvasOptions = {}): Path2D => {\n try {\n checkBlobOptions(blobOptions);\n checkCanvasOptions(canvasOptions);\n } catch (e) {\n throw `(blobs2): ${e}`;\n }\n return renderPath2D(\n mapPoints(genFromOptions(blobOptions), ({curr}) => {\n curr.x += canvasOptions.offsetX || 0;\n curr.y += canvasOptions.offsetY || 0;\n return curr;\n }),\n );\n};\n\nexport const svg = (blobOptions: BlobOptions, svgOptions: SvgOptions = {}): string => {\n try {\n checkBlobOptions(blobOptions);\n checkSvgOptions(svgOptions);\n } catch (e) {\n throw `(blobs2): ${e}`;\n }\n const path = svgPath(blobOptions);\n const size = Math.floor(blobOptions.size);\n const fill = svgOptions.fill === undefined ? \"#ec576b\" : svgOptions.fill;\n const stroke = svgOptions.stroke === undefined ? \"none\" : svgOptions.stroke;\n const strokeWidth = svgOptions.strokeWidth === undefined ? 0 : svgOptions.strokeWidth;\n return `\n\n \n`.trim();\n};\n\nexport const svgPath = (blobOptions: BlobOptions): string => {\n try {\n checkBlobOptions(blobOptions);\n } catch (e) {\n throw `(blobs2): ${e}`;\n }\n return renderPath(genFromOptions(blobOptions));\n};\n" }, { "path": "public/legacy.test.ts", "content": "import blobs, {BlobOptions} from \"./legacy\";\n\nconst genMinimalOptions = (): BlobOptions => ({\n size: 1000 * Math.random(),\n complexity: 1 - Math.random(),\n contrast: 1 - Math.random(),\n color: \"#fff\",\n});\n\ndescribe(\"legacy\", () => {\n it(\"should return a different result when seed is not provided\", () => {\n const options = genMinimalOptions();\n\n const a = blobs(options);\n const b = blobs(options);\n\n expect(a).not.toEqual(b);\n });\n\n it(\"should return the same result when the seed is provided\", () => {\n const options = genMinimalOptions();\n\n options.seed = \"abcde\";\n const a = blobs(options);\n const b = blobs(options);\n\n expect(a).toEqual(b);\n });\n\n it(\"should require options be provided\", () => {\n expect(() => (blobs as any)()).toThrow(\"options\");\n });\n\n it(\"should require a size be provided\", () => {\n const options = genMinimalOptions();\n\n delete (options as any).size;\n expect(() => blobs(options)).toThrow(\"size\");\n });\n\n it(\"should reject out of range complexity values\", () => {\n const options = genMinimalOptions();\n\n options.complexity = 1234;\n expect(() => blobs(options)).toThrow(\"complexity\");\n\n options.complexity = 0;\n expect(() => blobs(options)).toThrow(\"complexity\");\n });\n\n it(\"should reject out of range contrast values\", () => {\n const options = genMinimalOptions();\n\n options.contrast = 999;\n expect(() => blobs(options)).toThrow(\"contrast\");\n\n options.contrast = -1;\n expect(() => blobs(options)).toThrow(\"contrast\");\n });\n\n it(\"should reject options without stroke or color\", () => {\n const options = genMinimalOptions();\n\n delete options.stroke;\n delete options.color;\n expect(() => blobs(options)).toThrow(\"stroke\");\n expect(() => blobs(options)).toThrow(\"color\");\n });\n});\n\ndescribe(\"editable\", () => {\n it(\"should reflect changes when edited\", () => {\n const options = genMinimalOptions();\n\n const out = blobs.editable(options);\n const initial = out.render();\n out.attributes.id = \"test\";\n const modified = out.render();\n\n expect(modified).not.toBe(initial);\n });\n});\n\n// Sanity checks to ensure the output remains consistent\n// across changes to the source.\nconst testCases: Record = {\n fill: {\n size: 109,\n complexity: 0.1,\n contrast: 0.331,\n color: \"red\",\n seed: \"fill\",\n },\n stroke: {\n size: 226,\n complexity: 0.91,\n contrast: 0.6,\n stroke: {\n color: \"#ff00bb\",\n width: 3.8,\n },\n seed: \"stroke\",\n },\n guides: {\n size: 781,\n complexity: 1,\n contrast: 0.331,\n color: \"yellow\",\n guides: true,\n seed: \"guides\",\n },\n};\n\nfor (const testCase of Object.keys(testCases)) {\n test(testCase, () => {\n expect(blobs(testCases[testCase])).toMatchSnapshot();\n });\n}\n" }, { "path": "public/legacy.ts", "content": "import {rand} from \"../internal/rand\";\nimport {renderEditable, XmlElement as InternalXmlElement} from \"../internal/render/svg\";\nimport {genBlob} from \"../internal/gen\";\nimport {mapPoints} from \"../internal/util\";\n\nconst isBrowser = new Function(\"try {return this===window;}catch(e){ return false;}\");\nconst isLocalhost = () => location.hostname === \"localhost\" || location.hostname === \"127.0.0.1\";\nconst isFile = () => location.protocol === \"file:\";\nif (!isBrowser() || isLocalhost() || isFile()) {\n console.warn(\"You are using the legacy blobs API!\\nPlease use 'blobs/v2' instead.\");\n}\n\nexport interface PathOptions {\n // Bounding box dimensions.\n size: number;\n\n // Number of points.\n complexity: number;\n\n // Amount of randomness.\n contrast: number;\n\n // Value to seed random number generator.\n seed?: string;\n}\n\nexport interface BlobOptions extends PathOptions {\n // Fill color.\n color?: string;\n\n stroke?: {\n // Stroke color.\n color: string;\n\n // Stroke width.\n width: number;\n };\n\n // Render points, handles and stroke.\n guides?: boolean;\n}\n\n// Generates an svg document string containing a randomized blob.\nconst blobs = (options: BlobOptions): string => {\n return blobs.editable(options).render();\n};\n\n// Generates a randomized blob as an editable data structure which can be rendered to an svg document.\nblobs.editable = (options: BlobOptions): XmlElement => {\n if (!options) {\n throw new Error(\"no options specified\");\n }\n\n // Random number generator.\n const rgen = rand(options.seed || String(Math.random()));\n\n if (!options.size) {\n throw new Error(\"no size specified\");\n }\n\n if (!options.stroke && !options.color) {\n throw new Error(\"no color or stroke specified\");\n }\n\n if (options.complexity <= 0 || options.complexity > 1) {\n throw new Error(\"complexity out of range ]0,1]\");\n }\n\n if (options.contrast < 0 || options.contrast > 1) {\n throw new Error(\"contrast out of range [0,1]\");\n }\n\n const count = 3 + Math.floor(14 * options.complexity);\n const offset = (): number => (1 - 0.8 * options.contrast * rgen()) / Math.E;\n\n const points = mapPoints(genBlob(count, offset), ({curr}) => {\n // Scale.\n curr.x *= options.size;\n curr.y *= options.size;\n curr.handleIn.length *= options.size;\n curr.handleOut.length *= options.size;\n\n // Flip around x-axis.\n curr.y = options.size - curr.y;\n curr.handleIn.angle *= -1;\n curr.handleOut.angle *= -1;\n\n return curr;\n });\n\n return renderEditable(points, {\n closed: true,\n width: options.size,\n height: options.size,\n fill: options.color,\n transform: `rotate(${rgen() * (360 / count)},${options.size / 2},${options.size / 2})`,\n stroke: options.stroke && options.stroke.color,\n strokeWidth: options.stroke && options.stroke.width,\n guides: options.guides,\n });\n};\n\nexport interface XmlElement {\n tag: string;\n attributes: Record;\n children: XmlElement[];\n render(): string;\n}\n\n// Shortcut to create an XmlElement without \"new\";\nblobs.xml = (tag: string): XmlElement => new InternalXmlElement(tag);\n\nexport default blobs;\n" }, { "path": "rollup.config.mjs", "content": "import typescript from \"rollup-plugin-typescript2\";\nimport { uglify } from \"rollup-plugin-uglify\";\nimport copy from \"rollup-plugin-copy\";\nimport { nodeResolve } from \"@rollup/plugin-node-resolve\";\n\nconst bundles = [\n {\n name: \"blobs\",\n entry: \"public/legacy.ts\",\n types: \"public/legacy.d.ts\",\n output: \".\",\n },\n {\n name: \"blobs\",\n entry: \"public/legacy.ts\",\n types: \"public/legacy.d.ts\",\n output: \"v1\",\n },\n {\n name: \"blobs2\",\n entry: \"public/blobs.ts\",\n types: \"public/blobs.d.ts\",\n output: \"v2\",\n },\n {\n name: \"blobs2Animate\",\n entry: \"public/animate.ts\",\n types: \"public/animate.d.ts\",\n output: \"v2/animate\",\n },\n];\n\nexport default [\"es\", \"umd\"].flatMap((format) =>\n bundles.map((bundle) => ({\n input: bundle.entry,\n output: {\n file: bundle.output + `/index${format == \"es\" ? \".module\" : \"\"}.js`,\n format: format,\n name: bundle.name,\n sourcemap: true,\n },\n plugins: [\n nodeResolve(),\n typescript({ cacheRoot: \"./node_modules/.cache/rpt2\" }),\n uglify(),\n copy({\n hook: \"writeBundle\",\n targets: [{\n src: bundle.types,\n dest: bundle.output,\n rename: \"index.d.ts\",\n }],\n verbose: true,\n }),\n ],\n }))\n);\n" }, { "path": "tsconfig.json", "content": "{\n \"exclude\": [\n \"example\",\n \"test\",\n \"node_modules\"\n ],\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"es2015\",\n \"moduleResolution\": \"node\",\n \"esModuleInterop\": true,\n \"lib\": [\n \"es2018\",\n \"dom\"\n ],\n \"sourceMap\": true,\n \"removeComments\": true,\n \"declaration\": true,\n \"strict\": true,\n \"noImplicitAny\": true,\n \"strictNullChecks\": true,\n \"strictFunctionTypes\": true,\n \"strictPropertyInitialization\": true,\n \"alwaysStrict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"allowSyntheticDefaultImports\": true,\n \"stripInternal\": true\n }\n}\n" } ]