diff --git a/demo/content.ts b/demo/content.ts index 8e661ae..01c2bfb 100644 --- a/demo/content.ts +++ b/demo/content.ts @@ -554,11 +554,11 @@ addCanvas(2, (ctx, width, height, animate) => { drawClosed(ctx, interpolateBetween(percentage, blobA, blobB), true); }); - return `The simplest way to interpolate between blobs would be to move the points that make up - the blob between the two shapes while running the smoothing pass every frame. The problem - with this approach is that it doesn't allow for any blob to map to any blob. Specifically it - would only be possible to animate between blobs that have the same number of points. This - means something more generic is required.`; + return `The simplest way to interpolate between blobs would be to move points 0-N from their + position in the start blob to their position in the end blob. The problem with this approach + is that it doesn't allow for all blob to map to all blobs. Specifically it would only be + possible to animate between blobs that have the same number of points. This means something + more generic is required.`; }); addCanvas( @@ -566,7 +566,7 @@ addCanvas( (ctx, width, height, animate) => { const center: Coord = {x: width * 0.5, y: height * 0.5}; const maxExtraPoints = 7; - const period = maxExtraPoints * Math.PI * 400; + const period = maxExtraPoints * Math.PI * 300; const {pt} = sizes(); const blob = centeredBlob( @@ -625,18 +625,16 @@ addCanvas( }, () => { drawLine(ctx, d.a0, d.a1, 1); - drawLine(ctx, d.a1, d.a2, 1); + drawLine(ctx, d.a1, d.a2, 1, 2); drawLine(ctx, d.a2, d.a3, 1); - drawLine(ctx, d.b0, d.b1, 1); - drawLine(ctx, d.b1, d.b2, 1); - - drawPoint(ctx, d.a0, 1.3); - drawPoint(ctx, d.a1, 1.3); - drawPoint(ctx, d.a2, 1.3); - drawPoint(ctx, d.a3, 1.3); - drawPoint(ctx, d.b0, 1.3); - drawPoint(ctx, d.b1, 1.3); - drawPoint(ctx, d.b2, 1.3); + drawLine(ctx, d.b0, d.b1, 1, 2); + drawLine(ctx, d.b1, d.b2, 1, 2); + + drawPoint(ctx, d.a0, 1.3, "a0"); + drawPoint(ctx, d.a1, 1.3, "a1"); + drawPoint(ctx, d.a2, 1.3, "a2"); + drawPoint(ctx, d.a3, 1.3, "a3"); + drawPoint(ctx, d.b1, 1.3, "b1"); }, ); @@ -657,24 +655,30 @@ addCanvas( }, () => { drawLine(ctx, d.c0, d.c1, 1); - drawPoint(ctx, d.c0, 1.3); - drawPoint(ctx, d.c1, 1.3); + drawLine(ctx, d.a0, d.b0, 1); + drawLine(ctx, d.a3, d.b2, 1); + + drawPoint(ctx, d.b0, 1.3, "b0"); + drawPoint(ctx, d.b2, 1.3, "b2"); + drawPoint(ctx, d.c0, 1.3, "c0"); + drawPoint(ctx, d.c1, 1.3, "c1"); }, ); tempStyles( ctx, () => (ctx.fillStyle = colors.highlight), - () => drawPoint(ctx, d.d0, 2), + () => drawPoint(ctx, d.d0, 1.3, "d0"), ); }); return `It is only possible to reliably add points to a blob because attempting to remove points without modifying the shape is almost never possible and is expensive to compute. - - Curve splitting uses the innermost line from the cubic bezier curve drawing demo and - makes either side of the final point the handles.`; +

+ Adding a point is done using the line-drawing geometry. In this example "d0" is the new + point with its handles being "c0" and "c1". The original points get new handles "b0" and + "b2"`; }, );