2019-06-01 / Sebastian Morr / CC BY-SA 4.0 / art

An animation Winston and I made at the Recurse Center. Out of appreciation of the fabulous @beesandbombs, we internally called this project wasps and (gre)nades. :P

I learned a lot about easing functions and about how to plan and structure this kind of multi-step animation! Also, publishing this as a GIF on Twitter was a pain in the ass, we got the best result when exporting all frames individually, opening them as layers in GIMP, and then exporting them as a GIF. Even though, in the resulting tweet, every looks a bit blurry.

As for actually making the animation happen: we don’t store any state, but have formulas in place that give us the transformations we want. You can peek at the p5.js source code here, if you want.

Fun fact: we actually had another movement pattern in mind, but a bug produced this, so we decided to keep it!


Send a tweet to @blinry or drop me a mail at sebastian@morr.cc. Also, you can support me on Patreon or subscribe to my newsletter !