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