@@ -554,19 +554,19 @@ addCanvas(2, (ctx, width, height, animate) => {
554554 drawClosed ( ctx , interpolateBetween ( percentage , blobA , blobB ) , true ) ;
555555 } ) ;
556556
557- return `The simplest way to interpolate between blobs would be to move the points that make up
558- the blob between the two shapes while running the smoothing pass every frame . The problem
559- with this approach is that it doesn't allow for any blob to map to any blob . Specifically it
560- would only be possible to animate between blobs that have the same number of points. This
561- means something more generic is required.` ;
557+ return `The simplest way to interpolate between blobs would be to move points 0-N from their
558+ position in the start blob to their position in the end blob . The problem with this approach
559+ is that it doesn't allow for all blob to map to all blobs . Specifically it would only be
560+ possible to animate between blobs that have the same number of points. This means something
561+ more generic is required.` ;
562562} ) ;
563563
564564addCanvas (
565565 1.3 ,
566566 ( ctx , width , height , animate ) => {
567567 const center : Coord = { x : width * 0.5 , y : height * 0.5 } ;
568568 const maxExtraPoints = 7 ;
569- const period = maxExtraPoints * Math . PI * 400 ;
569+ const period = maxExtraPoints * Math . PI * 300 ;
570570 const { pt} = sizes ( ) ;
571571
572572 const blob = centeredBlob (
@@ -625,18 +625,16 @@ addCanvas(
625625 } ,
626626 ( ) => {
627627 drawLine ( ctx , d . a0 , d . a1 , 1 ) ;
628- drawLine ( ctx , d . a1 , d . a2 , 1 ) ;
628+ drawLine ( ctx , d . a1 , d . a2 , 1 , 2 ) ;
629629 drawLine ( ctx , d . a2 , d . a3 , 1 ) ;
630- drawLine ( ctx , d . b0 , d . b1 , 1 ) ;
631- drawLine ( ctx , d . b1 , d . b2 , 1 ) ;
632- 633- drawPoint ( ctx , d . a0 , 1.3 ) ;
634- drawPoint ( ctx , d . a1 , 1.3 ) ;
635- drawPoint ( ctx , d . a2 , 1.3 ) ;
636- drawPoint ( ctx , d . a3 , 1.3 ) ;
637- drawPoint ( ctx , d . b0 , 1.3 ) ;
638- drawPoint ( ctx , d . b1 , 1.3 ) ;
639- drawPoint ( ctx , d . b2 , 1.3 ) ;
630+ drawLine ( ctx , d . b0 , d . b1 , 1 , 2 ) ;
631+ drawLine ( ctx , d . b1 , d . b2 , 1 , 2 ) ;
632+ 633+ drawPoint ( ctx , d . a0 , 1.3 , "a0" ) ;
634+ drawPoint ( ctx , d . a1 , 1.3 , "a1" ) ;
635+ drawPoint ( ctx , d . a2 , 1.3 , "a2" ) ;
636+ drawPoint ( ctx , d . a3 , 1.3 , "a3" ) ;
637+ drawPoint ( ctx , d . b1 , 1.3 , "b1" ) ;
640638 } ,
641639 ) ;
642640
@@ -657,24 +655,30 @@ addCanvas(
657655 } ,
658656 ( ) => {
659657 drawLine ( ctx , d . c0 , d . c1 , 1 ) ;
660- drawPoint ( ctx , d . c0 , 1.3 ) ;
661- drawPoint ( ctx , d . c1 , 1.3 ) ;
658+ drawLine ( ctx , d . a0 , d . b0 , 1 ) ;
659+ drawLine ( ctx , d . a3 , d . b2 , 1 ) ;
660+ 661+ drawPoint ( ctx , d . b0 , 1.3 , "b0" ) ;
662+ drawPoint ( ctx , d . b2 , 1.3 , "b2" ) ;
663+ drawPoint ( ctx , d . c0 , 1.3 , "c0" ) ;
664+ drawPoint ( ctx , d . c1 , 1.3 , "c1" ) ;
662665 } ,
663666 ) ;
664667
665668 tempStyles (
666669 ctx ,
667670 ( ) => ( ctx . fillStyle = colors . highlight ) ,
668- ( ) => drawPoint ( ctx , d . d0 , 2 ) ,
671+ ( ) => drawPoint ( ctx , d . d0 , 1.3 , "d0" ) ,
669672 ) ;
670673 } ) ;
671674
672675 return `It is only possible to reliably <i>add</i> points to a blob because attempting to
673676 remove points without modifying the shape is almost never possible and is expensive to
674677 compute.
675-
676- Curve splitting uses the innermost line from the cubic bezier curve drawing demo and
677- makes either side of the final point the handles.` ;
678+ <br><br>
679+ Adding a point is done using the line-drawing geometry. In this example "d0" is the new
680+ point with its handles being "c0" and "c1". The original points get new handles "b0" and
681+ "b2"` ;
678682 } ,
679683) ;
680684
0 commit comments