p5-animation
A lightweight library which offers prebuild animation functions for your P5 sketches
Install
yarn add p5-animation
Quick start
import p5 from "p5";
import animation, { ease } from "p5-animation";
// Define general animation properties
const { play, inProgress, progress } = animation({
// Choose an easing function for animation
// Refer to the `Animation functions` section for details
animation: ease,
// Set the duration of the animation in milliseconds
duration: 1000,
});
let x = 0;
const sketch = (p5: p5) => {
p5.setup = (p5: p5) => {
p5.createCanvas(500, 500);
};
p5.draw = () => {
p5.background("#fff");
// Update the x value using the animation progress
// The parameter of `progress` is the default value
// returned when the animation is not in progress
// Call `progress` each frame to animate smoothly
x = progress(x);
p5.rect(x, 0, 100, 100);
};
// Initiate animation on mouse click
p5.mousePressed = () => {
// Ensure that another animation is not already in progress
if (!inProgress()) {
// Define the start and end values for the animation
// You can override previously defined general properties
play({
from: x,
to: x + 100,
});
}
};
};
// use the sketch
new p5(sketch);
When you call play
function, it returns a promise which resolves when animation is finished, you can use await based on your logic
Animation Properties
These properties can be applied either as general settings or tailored for a specific animation, giving you flexibility in defining animations.
If you choose to provide these properties at a general level, they will serve as default values for all animations unless specified otherwise.
Required Properties
You must define these properties either as general settings, or if omitted, they must be specified each time you initiate an animation.
Property | Type |
---|---|
duration | number |
animation | (x: number) => number |
Optional Properties
Enhance your animation control by utilizing these optional properties.
Property | Type |
---|---|
delay | number |
Animation functions
Easing functions specify the rate of change of a parameter over time.
We have some build in animation functions, but you can build your own functions
Build in functions:
- ease
- easeInSine
- easeOutSine
- easeInOutSine
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuint
- easeOutQuint
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInOutQuint
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInExpo
- easeOutExpo
- easeInOutExpo
Check out cheat sheet for easing functions