Commit 3c0cbd4

committed

add debug path to example

1 parent bea6899 commit 3c0cbd4Copy full SHA for 3c0cbd4

File tree

+48

-0

lines changed

+48

-0

lines changed

Lines changed: 15 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import {CanvasKeyframe, canvasPath, wigglePreset} from "../public/animate";`
	`2`	`+import { drawDebugClosed, drawPoint } from "./internal/canvas";`
`2`	`3`	`import {colors} from "./internal/layout";`
`3`	`4`
`4`	`5`	`// Fetch reference to example container.`
`@@ -29,6 +30,20 @@ const animation = canvasPath();`
`29`	`30`	`const renderFrame = () => {`
`30`	`31`	`ctx.clearRect(0, 0, size, size);`
`31`	`32`	`ctx.fillStyle = colors.highlight;`
	`33`	`+ ctx.strokeStyle = colors.highlight;`
	`34`	`+`
	`35`	`+ // Debug`
	`36`	`+ if (false) {`
	`37`	`+ const p = (animation as any).renderPoints();`
	`38`	`+`
	`39`	`+ drawDebugClosed(ctx, p, 60);`
	`40`	`+ if (p.length) drawPoint(ctx, p[0], 400);`
	`41`	`+`
	`42`	`+ const fps = 5;`
	`43`	`+ setTimeout(() => requestAnimationFrame(renderFrame), 1000/fps);`
	`44`	`+ return;`
	`45`	`+ }`
	`46`	`+`
`32`	`47`	`ctx.fill(animation.renderFrame());`
`33`	`48`	`requestAnimationFrame(renderFrame);`
`34`	`49`	`};`

Lines changed: 27 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -116,6 +116,33 @@ export const drawClosed = (ctx: CanvasRenderingContext2D, points: Point[], handl`
`116`	`116`	`});`
`117`	`117`	`};`
`118`	`118`
	`119`	`+export const drawDebugClosed = (ctx: CanvasRenderingContext2D, points: Point[], size: number) => {`
	`120`	`+ forPoints(points, ({curr, next: nextFn}) => {`
	`121`	`+ const next = nextFn();`
	`122`	`+ const currHandle = expandHandle(curr, curr.handleOut);`
	`123`	`+ const nextHandle = expandHandle(next, next.handleIn);`
	`124`	`+`
	`125`	`+ drawLine(ctx, curr, currHandle, size);`
	`126`	`+ drawLine(ctx, next, nextHandle, size, 2);`
	`127`	`+ drawPoint(ctx, currHandle, size * 1.4);`
	`128`	`+ drawPoint(ctx, nextHandle, size * 1.4);`
	`129`	`+ const curve = new Path2D();`
	`130`	`+ curve.moveTo(curr.x, curr.y);`
	`131`	`+ curve.bezierCurveTo(`
	`132`	`+ currHandle.x,`
	`133`	`+ currHandle.y,`
	`134`	`+ nextHandle.x,`
	`135`	`+ nextHandle.y,`
	`136`	`+ next.x,`
	`137`	`+ next.y,`
	`138`	`+ );`
	`139`	`+ ctx.lineWidth = sizes().pt * size*2;`
	`140`	`+ ctx.stroke(curve);`
	`141`	`+ drawPoint(ctx, curr, size * 1.1);`
	`142`	`+ drawPoint(ctx, next, size * 1.1);`
	`143`	`+ });`
	`144`	`+}`
	`145`	`+`
`119`	`146`	`export const drawOpen = (`
`120`	`147`	`ctx: CanvasRenderingContext2D,`
`121`	`148`	`start: Point,`

Lines changed: 6 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,8 @@ import {`
`12`	`12`	`} from "../util";`
`13`	`13`	`import {Point} from "../types";`
`14`	`14`
	`15`	`+// Iterate through point ordering possibilities to find an option with the least`
	`16`	`+// distance between points. Also reverse the list to try and optimize.`
`15`	`17`	`const optimizeOrder = (a: Point[], b: Point[]): Point[] => {`
`16`	`18`	`const count = a.length;`
`17`	`19`
`@@ -39,6 +41,8 @@ const optimizeOrder = (a: Point[], b: Point[]): Point[] => {`
`39`	`41`	`return shift(minOffset, minOffsetBase);`
`40`	`42`	`};`
`41`	`43`
	`44`	`+// Modify the input shape to be the exact same path visually, but with`
	`45`	`+// additional points so that the total number of points is "count".`
`42`	`46`	`export const divide = (count: number, points: Point[]): Point[] => {`
`43`	`47`	`if (points.length < 3) throw new Error("not enough points");`
`44`	`48`	`if (count < points.length) throw new Error("cannot remove points");`
`@@ -93,6 +97,8 @@ const fixAnglesSelf = (points: Point[]): Point[] => {`
`93`	`97`	`});`
`94`	`98`	`};`
`95`	`99`
	`100`	`+// Split the input lengths into smaller segments to add the target amount of`
	`101`	`+// lengths while minimizing the standard deviation of the list of lengths.`
`96`	`102`	`const divideLengths = (lengths: number[], add: number): number[] => {`
`97`	`103`	`const divisors = lengths.map(() => 1);`
`98`	`104`	`const sizes = lengths.slice();`

Comments

(0)