@@ -166,6 +166,8 @@ addCanvas(2, (ctx, width, height, animate) => {
166166 at either of the points.` ;
167167} ) ;
168168
169+ // TODO smooth closed shapes & sharp corners
170+ 169171addCanvas ( 2 , ( ctx , width , height , animate ) => {
170172 const period = Math . PI * Math . E * 1000 ;
171173 const start = point ( width * 0.3 , height * 0.8 , 0 , 0 , - 105 , width * 0.32 ) ;
@@ -256,21 +258,23 @@ addCanvas(
256258 drawClosed ( ctx , shape , false ) ;
257259 } ) ;
258260
259- return `Distribute blob points evenly around a center.` ;
261+ return `Points are first distributed evenly around the center. At this stage the points
262+ technically have handles, but since they have a length of zero, they have no effect on
263+ the shape and it looks like a polygon.` ;
260264 } ,
261265 ( ctx , width , height , animate ) => {
262- const period = Math . PI * 1000 ;
266+ const period = Math . PI * 1500 ;
263267 const center : Coord = { x : width * 0.5 , y : height * 0.5 } ;
264268 const radius = width * 0.3 ;
265269 const points = 5 ;
266- const randSeed = "abcd" ;
270+ const randSeed = Math . random ( ) ;
267271 const randStrength = 0.5 ;
268272
269273 const shape = makePoly ( points , radius , center ) ;
270274
271275 animate ( ( frameTime ) => {
272276 const percentage = calcBouncePercentage ( period , timingFunctions . ease , frameTime ) ;
273- const rgen = rand ( randSeed ) ;
277+ const rgen = rand ( randSeed + Math . floor ( frameTime / period ) + "" ) ;
274278
275279 // Draw original shape.
276280 tempStyles (
@@ -298,7 +302,9 @@ addCanvas(
298302 drawClosed ( ctx , shiftedShape , true ) ;
299303 } ) ;
300304
301- return `Move each point a random amount towards or away from the center.` ;
305+ return `Points are then randomly moved further or closer to the center. Using a seeded
306+ random number generator allows repeatable "randomness" whenever the blob is generated
307+ at a different time or place.` ;
302308 } ,
303309) ;
304310
0 commit comments