@@ -311,42 +311,49 @@ addCanvas(
311311
312312addCanvas (
313313 1.3 ,
314- ( ctx , width , height ) => {
314+ ( ctx , width , height , animate ) => {
315315 const options : BlobOptions = {
316316 extraPoints : 2 ,
317317 randomness : 6 ,
318318 seed : "random" ,
319319 size : width * 0.7 ,
320320 } ;
321321 const center : Coord = { x : width * 0.5 , y : height * 0.5 } ;
322+ const interval = 1000 ;
322323
323324 const blob = centeredBlob ( options , center ) ;
324325 const handles = mapPoints ( blob , ( { curr : p } ) => {
325- p . handleIn . length = 50 ;
326- p . handleOut . length = 50 ;
326+ p . handleIn . length = 75 ;
327+ p . handleOut . length = 75 ;
327328 return p ;
328329 } ) ;
329330 const polyBlob = blob . map ( coordPoint ) ;
331+ const pointCount = polyBlob . length ;
330332
331- // Draw polygon blob.
332- tempStyles (
333- ctx ,
334- ( ) => {
335- ctx . fillStyle = colors . secondary ;
336- ctx . strokeStyle = colors . secondary ;
337- } ,
338- ( ) => {
339- drawPoint ( ctx , center , 2 ) ;
340- forPoints ( polyBlob , ( { prev, next} ) => {
341- drawLine ( ctx , prev ( ) , next ( ) , 1 , 2 ) ;
342- } ) ;
343- forPoints ( handles , ( { curr} ) => {
344- drawHandles ( ctx , curr , 1 ) ;
345- } ) ;
346- } ,
347- ) ;
333+ animate ( ( frameTime ) => {
334+ const activeIndex = Math . floor ( frameTime / interval ) % pointCount ;
335+ 336+ tempStyles (
337+ ctx ,
338+ ( ) => {
339+ ctx . fillStyle = colors . secondary ;
340+ ctx . strokeStyle = colors . secondary ;
341+ } ,
342+ ( ) => {
343+ drawPoint ( ctx , center , 2 ) ;
344+ forPoints ( polyBlob , ( { prev, next} ) => {
345+ drawLine ( ctx , prev ( ) , next ( ) , 1 , 2 ) ;
346+ } ) ;
347+ forPoints ( handles , ( { curr} ) => {
348+ drawHandles ( ctx , curr , 1 ) ;
349+ } ) ;
350+ drawPoint ( ctx , polyBlob [ activeIndex ] , 10 ) ;
351+ 352+ } ,
353+ ) ;
348354
349- drawClosed ( ctx , polyBlob , false ) ;
355+ drawClosed ( ctx , polyBlob , false ) ;
356+ } ) ;
350357
351358 return `The angle of the handles for each point is parallel with the imaginary line
352359 stretching between the points before and after the point. A polygon's points have zero
0 commit comments