.-----.   .----.   .-----.  .-----.           .----.  .--------.       .---..--------. 
/ ,-.   \ /  ..  \ / ,-.   \/ ,-.   \  .-')   /  ..  \ |   __   ' .-') /_   ||   __   ' 
'-'  |  |.  /  \  .'-'  |  |'-'  |  |_(  OO) .  /  \  .`--' .  /_(  OO) |   |`--' .  /  
   .'  / |  |  '  |   .'  /    .'  /(,------.|  |  '  |    /  /(,------.|   |    /  /   
 .'  /__ '  \  /  ' .'  /__  .'  /__ '------''  \  /  '   .  /  '------'|   |   .  /    
|       | \  `'  / |       ||       |         \  `'  /   /  /           |   |  /  /     
`-------'  `---''  `-------'`-------'          `---''   `--'            `---' `--'      

blob

Blobs used to be big back in the demo days.

Making a CPU intensive blob isn't all that hard; you define a bunch of circles and have them bounce around, but instead of drawing the circles, you calculate this formula for every pixel on the screen:

The above algorithm will get you a nice black and white blob, but I wanted color, so I used the blobs as a mask to an image that was just a gradient.

To create the animation loop, I used https://www.npmjs.com/package/p5.createloop.
I don't know why It took me so long to figure out that the easiest way to create clean loops is to just lock your rendering to the time in your loop; p5.createloop makes it very easy to do that, and it plops out a .gif at the end.

👈 Prev Day - Home - Next Day 👉