@@ -319,45 +319,55 @@ addCanvas(
319319 size : width * 0.7 ,
320320 } ;
321321 const center : Coord = { x : width * 0.5 , y : height * 0.5 } ;
322- const interval = 1000 ;
322+ const interval = 2000 ;
323323
324324 const blob = centeredBlob ( options , center ) ;
325325 const handles = mapPoints ( blob , ( { curr : p } ) => {
326- p . handleIn . length = 75 ;
327- p . handleOut . length = 75 ;
326+ p . handleIn . length = 150 ;
327+ p . handleOut . length = 150 ;
328328 return p ;
329329 } ) ;
330330 const polyBlob = blob . map ( coordPoint ) ;
331331 const pointCount = polyBlob . length ;
332332
333333 animate ( ( frameTime ) => {
334334 const activeIndex = Math . floor ( frameTime / interval ) % pointCount ;
335+ const opacity = Math . abs ( Math . sin ( frameTime * Math . PI / interval ) ) ;
335336
336337 tempStyles (
337338 ctx ,
338339 ( ) => {
339- ctx . fillStyle = colors . secondary ;
340340 ctx . strokeStyle = colors . secondary ;
341+ ctx . globalAlpha = opacity ;
341342 } ,
342343 ( ) => {
343- drawPoint ( ctx , center , 2 ) ;
344- forPoints ( polyBlob , ( { prev , next } ) => {
344+ forPoints ( polyBlob , ( { prev , next , index } ) => {
345+ if ( index !== activeIndex ) return ;
345346 drawLine ( ctx , prev ( ) , next ( ) , 1 , 2 ) ;
346347 } ) ;
347- forPoints ( handles , ( { curr} ) => {
348+ forPoints ( handles , ( { curr, index} ) => {
349+ if ( index !== activeIndex ) return ;
348350 drawHandles ( ctx , curr , 1 ) ;
349351 } ) ;
350- drawPoint ( ctx , polyBlob [ activeIndex ] , 10 ) ;
351- 352+ } ,
353+ ) ;
354+ 355+ tempStyles (
356+ ctx ,
357+ ( ) => {
358+ ctx . fillStyle = colors . secondary ;
359+ } ,
360+ ( ) => {
361+ drawPoint ( ctx , center , 2 ) ;
352362 } ,
353363 ) ;
354364
355365 drawClosed ( ctx , polyBlob , false ) ;
356366 } ) ;
357367
358368 return `The angle of the handles for each point is parallel with the imaginary line
359- stretching between the points before and after the point. A polygon's points have zero
360- length handles.` ;
369+ stretching between its neighbors. Technically, a polygon's points have zero
370+ length handles, but the angle can still be calculated .` ;
361371 } ,
362372 ( ctx , width , height , animate ) => {
363373 const period = Math . PI * 1000 ;
0 commit comments