Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wixette/p5.anims
p5.animS animates p5.js shapes by rendering their drawing processes.
https://github.com/wixette/p5.anims
Last synced: about 5 hours ago
JSON representation
p5.animS animates p5.js shapes by rendering their drawing processes.
- Host: GitHub
- URL: https://github.com/wixette/p5.anims
- Owner: wixette
- License: lgpl-2.1
- Created: 2021-04-10T00:45:53.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-13T08:28:27.000Z (10 months ago)
- Last Synced: 2025-01-07T06:08:24.315Z (6 days ago)
- Language: JavaScript
- Homepage: https://wixette.github.io/p5.animS/
- Size: 1.55 MB
- Stars: 25
- Watchers: 1
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# p5.animS
p5.animS animates p5.js shapes by rendering their drawing processes.
![Demo](examples/images/demo.gif)
See https://wixette.github.io/p5.animS/ for the documentation and the examples.
Or
```
npm install
npm run build
npx http-server
```then visit http://127.0.0.1:8080 to read the documentation.
## Getting Started
In your HTML code, put `p5.anims.js` right after `p5.js` or `p5.min.js`, followed by your sketch code:
```
```
`p5.animS` functions have very similar interfaces as `p5.js` functions do. For example, `animS.circle()` renders the creation animation of a circle:
```
function setup() {
createCanvas(960, 240);
colorMode(HSB, 360, 100, 100, 1);
}function draw() {
background(190, 30, 100);
noFill();
stroke(0, 0, 100);
strokeWeight(5);
animS.circle('c1', 60, 480, 120, 120, 100);
}function mouseClicked() {
animS.reset();
}
```The first parameter of `animS.circle()` is a unique instance ID so that the animation state can be kept across frames. The second parameter is the total frame number that the animation last.
`animS.reset()` is used to replay the creation animation.
Read more at [https://wixette.github.io/p5.animS/](https://wixette.github.io/p5.animS/).