@@ -870,24 +870,50 @@ addCanvas(
870870 return points ;
871871 } ;
872872
873- const pointy = drawStar ( 8 , size , size * 0.4 ) ;
874- const wobblyGerm = smoothBlob ( drawStar ( 12 , size , size * 0.9 ) ) ;
875- const shapes = [ pointy , wobblyGerm ] ;
873+ const drawPolygon = ( sides : number , od : number ) : Point [ ] => {
874+ const angle = ( Math . PI * 2 ) / sides ;
875+ const points : Point [ ] = [ ] ;
876+ for ( let i = 0 ; i < sides ; i ++ ) {
877+ const pointX = Math . sin ( i * angle ) ;
878+ const pointY = Math . cos ( i * angle ) ;
879+ const distanceMultiplier = od / 2 ;
880+ points . push ( {
881+ x : center . x + pointX * distanceMultiplier ,
882+ y : center . y + pointY * distanceMultiplier ,
883+ handleIn : { angle : 0 , length : 0 } ,
884+ handleOut : { angle : 0 , length : 0 } ,
885+ } ) ;
886+ }
887+ return points ;
888+ } ;
889+ 890+ const shapes = [
891+ drawStar ( 8 , size , size * 0.7 ) ,
892+ smoothBlob ( drawPolygon ( 3 , size ) ) ,
893+ smoothBlob ( drawStar ( 10 , size , size * 0.9 ) ) ,
894+ drawPolygon ( 4 , size ) ,
895+ smoothBlob ( drawStar ( 3 , size , size * 0.6 ) ) ,
896+ ] ;
876897
877898 const animation = canvasPath ( ) ;
899+ const genFrame = ( index : number ) => ( ) => {
900+ animation . transition ( {
901+ points : shapes [ index % shapes . length ] ,
902+ duration : 3000 ,
903+ delay : 1000 ,
904+ timingFunction : "ease" ,
905+ callback : genFrame ( index + 1 ) ,
906+ } ) ;
907+ } ;
878908 animation . transition ( {
879- points : pointy ,
880- duration : 1000 ,
881- callback : ( ) =>
882- animation . transition ( {
883- points : wobblyGerm ,
884- duration : 4000 ,
885- } ) ,
909+ points : shapes [ 0 ] ,
910+ duration : 0 ,
911+ callback : genFrame ( 1 ) ,
886912 } ) ;
887913
888- animate ( ( ) => drawClosed ( ctx , animation . renderPoints ( ) , true ) ) ;
889- 890- drawClosed ( ctx , pointy , true ) ;
914+ animate ( ( ) => {
915+ drawClosed ( ctx , animation . renderPoints ( ) , true ) ;
916+ } ) ;
891917
892918 return `Putting all these pieces together, the blob transition library can also be used to
893919 tween between non-blob shapes. The more detail a shape has, the more unconvincing the
0 commit comments