@@ -219,35 +219,42 @@ addCanvas(2, (ctx, width, height, animate) => {
219219 <br><br>
220220 <i>Note there is no constant relationship between the
221221 percentage that "drew" the point and the arc lengths before/after it. Uniform motion along
222- the curve can only be approximated.`
222+ the curve can only be approximated.` ;
223223} ) ;
224224
225225addTitle ( 4 , "Making a blob" ) ;
226226
227227addCanvas (
228228 1.3 ,
229- ( ctx , width , height ) => {
229+ ( ctx , width , height , animate ) => {
230230 const center : Coord = { x : width * 0.5 , y : height * 0.5 } ;
231231 const radius = width * 0.3 ;
232- const points = 5 ;
233- const shape = makePoly ( points , radius , center ) ;
232+ const minPoints = 3 ;
233+ const extraPoints = 6 ;
234+ const pointDurationMs = 2000 ;
234235
235- // Draw lines from center to each point..
236- tempStyles (
237- ctx ,
238- ( ) => {
239- ctx . fillStyle = colors . secondary ;
240- ctx . strokeStyle = colors . secondary ;
241- } ,
242- ( ) => {
243- drawPoint ( ctx , center , 2 ) ;
244- forPoints ( shape , ( { curr} ) => {
245- drawLine ( ctx , center , curr , 1 , 2 ) ;
246- } ) ;
247- } ,
248- ) ;
236+ animate ( ( frameTime ) => {
237+ const points =
238+ minPoints + extraPoints + ( extraPoints / 2 ) * Math . sin ( frameTime / pointDurationMs ) ;
239+ const shape = makePoly ( points , radius , center ) ;
240+ 241+ // Draw lines from center to each point..
242+ tempStyles (
243+ ctx ,
244+ ( ) => {
245+ ctx . fillStyle = colors . secondary ;
246+ ctx . strokeStyle = colors . secondary ;
247+ } ,
248+ ( ) => {
249+ drawPoint ( ctx , center , 2 ) ;
250+ forPoints ( shape , ( { curr} ) => {
251+ drawLine ( ctx , center , curr , 1 , 2 ) ;
252+ } ) ;
253+ } ,
254+ ) ;
249255
250- drawClosed ( ctx , shape , false ) ;
256+ drawClosed ( ctx , shape , false ) ;
257+ } ) ;
251258
252259 return `Distribute blob points evenly around a center.` ;
253260 } ,
0 commit comments