@@ -780,72 +780,81 @@ addCanvas(
780780 } ,
781781) ;
782782
783- addCanvas ( 1.8 , ( ctx , width , height ) => {
784- // Only animate in the most recent painter call.
785- const animationID = Math . random ( ) ;
786- const wasReplaced = ( ) => ( ctx . canvas as any ) . animationID !== animationID ;
787- 788- const period = Math . PI * 1000 ;
789- const center : Coord = { x : width * 0.5 , y : height * 0.5 } ;
790- const size = Math . min ( width , height ) * 0.8 ;
783+ addCanvas (
784+ 1.3 ,
785+ ( ctx , width , height ) => {
786+ // Only animate in the most recent painter call.
787+ const animationID = Math . random ( ) ;
788+ const wasReplaced = ( ) => ( ctx . canvas as any ) . animationID !== animationID ;
791789
792- const canvasBlobGenerator = ( keyframe : CanvasKeyframe ) : Point [ ] => {
793- return mapPoints ( genFromOptions ( keyframe . blobOptions ) , ( { curr} ) => {
794- curr . x += center . x - size / 2 ;
795- curr . y += center . y - size / 2 ;
796- return curr ;
797- } ) ;
798- } ;
790+ const period = Math . PI * 1000 ;
791+ const center : Coord = { x : width * 0.5 , y : height * 0.5 } ;
792+ const size = Math . min ( width , height ) * 0.8 ;
799793
800- const animation = statefulAnimationGenerator (
801- canvasBlobGenerator ,
802- ( points : Point [ ] ) => drawClosed ( ctx , points , true ) ,
803- ( ) => { } ,
804- ) ( Date . now ) ;
794+ const canvasBlobGenerator = ( keyframe : CanvasKeyframe ) : Point [ ] => {
795+ return mapPoints ( genFromOptions ( keyframe . blobOptions ) , ( { curr} ) => {
796+ curr . x += center . x - size / 2 ;
797+ curr . y += center . y - size / 2 ;
798+ return curr ;
799+ } ) ;
800+ } ;
805801
806- const renderFrame = ( ) => {
807- if ( wasReplaced ( ) ) return ;
808- ctx . clearRect ( 0 , 0 , width , height ) ;
809- animation . renderFrame ( ) ;
802+ const animation = statefulAnimationGenerator (
803+ canvasBlobGenerator ,
804+ ( points : Point [ ] ) => drawClosed ( ctx , points , true ) ,
805+ ( ) => { } ,
806+ ) ( Date . now ) ;
807+ 808+ const renderFrame = ( ) => {
809+ if ( wasReplaced ( ) ) return ;
810+ ctx . clearRect ( 0 , 0 , width , height ) ;
811+ animation . renderFrame ( ) ;
812+ requestAnimationFrame ( renderFrame ) ;
813+ } ;
810814 requestAnimationFrame ( renderFrame ) ;
811- } ;
812- requestAnimationFrame ( renderFrame ) ;
813815
814- const loopAnimation = ( ) : void => {
815- if ( wasReplaced ( ) ) return ;
816- animation . transition ( genFrame ( ) ) ;
817- } ;
816+ const loopAnimation = ( ) : void => {
817+ if ( wasReplaced ( ) ) return ;
818+ animation . transition ( genFrame ( ) ) ;
819+ } ;
818820
819- let frameCount = - 1 ;
820- const genFrame = ( overrides : Partial < CanvasKeyframe > = { } ) : CanvasKeyframe => {
821- frameCount ++ ;
822- return {
823- duration : period ,
824- timingFunction : "ease" ,
825- callback : loopAnimation ,
826- blobOptions : {
827- extraPoints : Math . max ( 0 , mod ( frameCount , 4 ) - 1 ) ,
828- randomness : 4 ,
829- seed : Math . random ( ) ,
830- size,
831- } ,
832- ...overrides ,
821+ let frameCount = - 1 ;
822+ const genFrame = ( overrides : Partial < CanvasKeyframe > = { } ) : CanvasKeyframe => {
823+ frameCount ++ ;
824+ return {
825+ duration : period ,
826+ timingFunction : "ease" ,
827+ callback : loopAnimation ,
828+ blobOptions : {
829+ extraPoints : Math . max ( 0 , mod ( frameCount , 4 ) - 1 ) ,
830+ randomness : 4 ,
831+ seed : Math . random ( ) ,
832+ size,
833+ } ,
834+ ...overrides ,
835+ } ;
833836 } ;
834- } ;
835837
836- animation . transition ( genFrame ( { duration : 0 } ) ) ;
838+ animation . transition ( genFrame ( { duration : 0 } ) ) ;
837839
838- ctx . canvas . onclick = ( ) => {
839- if ( wasReplaced ( ) ) return ;
840- animation . playPause ( ) ;
841- } ;
840+ ctx . canvas . onclick = ( ) => {
841+ if ( wasReplaced ( ) ) return ;
842+ animation . playPause ( ) ;
843+ } ;
842844
843- ( ctx . canvas as any ) . animationID = animationID ;
845+ ( ctx . canvas as any ) . animationID = animationID ;
844846
845- return `Points can be removed at the end of animations as the target shape has been reached.
846- However if the animation is interrupted during interpolation there is no opportunity to
847- clean up the extra points.` ;
848- } ) ;
847+ return `The added points can be removed at the end of a transition when the target shape has
848+ been reached. However if the animation is interrupted during interpolation there is no
849+ opportunity to clean up the extra points.` ;
850+ } ,
851+ ( ctx , width , height ) => {
852+ return `Putting all these pieces together, the blob transition library can also be used to
853+ tween between non-blob shapes. The more detail a shape has, the more unconvincing the
854+ animation will look. In these cases, manually creating in-between frames can be a helpful
855+ tool.` ;
856+ } ,
857+ ) ;
849858
850859addCanvas ( 1.8 , ( ctx , width , height , animate ) => {
851860 const size = Math . min ( width , height ) * 0.8 ;
0 commit comments