https://github.com/rasagy/loopimation
Loop-imation is a short set of examples of building looping geometric animations in p5.js
https://github.com/rasagy/loopimation
Last synced: 5 months ago
JSON representation
Loop-imation is a short set of examples of building looping geometric animations in p5.js
- Host: GitHub
- URL: https://github.com/rasagy/loopimation
- Owner: rasagy
- License: gpl-3.0
- Created: 2020-02-05T14:27:18.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-04-05T04:31:11.000Z (over 5 years ago)
- Last Synced: 2025-06-30T07:48:13.191Z (about 1 year ago)
- Size: 1.61 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ➰ 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](https://docs.google.com/presentation/d/e/2PACX-1vQJ2FKo1CLBtGffSHj2aE4EBIf03Ypnez-5IFmkS1d3HTPRUNG1xWNm89dZWwrwg8izVesFusXBuzhf/pub?start=false&loop=false&delayms=60000)
# 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](https://editor.p5js.org/rasagy/collections/DRw2rbHnP).
Built using the delightful [p5.createLoop library](https://www.npmjs.com/package/p5.createloop).
## 1. Start from nothing, make something & eventually fade to nothing
[Fade & grow
](https://editor.p5js.org/rasagy/sketches/GuP-GQRo)
--
[Fade & grow with a sin() function
](https://editor.p5js.org/rasagy/sketches/kTup9G63)
--
## 2. Enter & Exit [the canvas]
[Enter & Exit
](https://editor.p5js.org/rasagy/sketches/w4oJFLRJ)
--
## 3. Anchor frame
[One Circle revolving
](https://editor.p5js.org/rasagy/sketches/WNB4e4mB)
--
[Lots of circles
](https://editor.p5js.org/rasagy/sketches/-dTQTaf0)
--
# References
1. [Golan Levin’s lecture with historical context](https://github.com/golanlevin/lectures/blob/master/lecture_loops/README.md)
2. [Dan Shiffman’s Coding Train video on making looping animations](https://youtu.be/nBKwCCtWlUg)
3. [Bees and bombs by Dr. Dave Whyte](https://beesandbombs.tumblr.com/)
4. [Saskia Freeke’s daily art](https://sasj.tumblr.com/)
# Contribute
Have an idea? Made some interesting loops using p5.createLoop? Add an issue/send a PR!