rasagy / loopimation

Loop-imation is a short set of examples of building looping geometric animations in p5.js

➰ loop-imation ➰

Loop-imation is a set of examples of building looping geometric animations in p5.js, first used for a short workshop by Rasagy Sharma at Processing Community Day 2020 in Bengaluru (India).

Slides

Available on Google Slides

Evaluating other looping animations

1. Why is this a loop?
2. When does it loop?
3. How does it loop?

Code examples (Opens in P5.js Web Editor)

You can find all the starter codes in this neat P5 collection. Built using the delightful p5.createLoop library.

1. Start from nothing, make something & eventually fade to nothing

Fade & grow

Fade & grow with a sin() function

2. Enter & Exit [the canvas]

Enter & Exit

3. Anchor frame

One Circle revolving

Lots of circles

References

1. Golan Levin’s lecture with historical context
2. Dan Shiffman’s Coding Train video on making looping animations
3. Bees and bombs by Dr. Dave Whyte
4. Saskia Freeke’s daily art

Contribute

Have an idea? Made some interesting loops using p5.createLoop? Add an issue/send a PR!