p5.animS

p5.animS is a library that animates p5.js shapes by rendering their drawing processes.

Get Started

Download the JavaScript bundle file p5.anims.js or p5.anims.min.js from the build dir.

Or, clone the source code and rebuild p5.anims.js:

npm install
npm run build

Or, install p5.animS with npm:

npm install p5.anims --save

In your HTML code, put p5.anims.js right after p5.js or p5.min.js, followed by your sketch code:

<body>
    <main>
    </main>
    <script src="p5.min.js"></script>
    <script src="p5.anims.js"></script>
    <script src="sketch.js"></script>
</body>

p5.animS functions have very similar interfaces as p5.js functions do. For example, animS.circle() renders the creation animation of a circle:


      
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.

      
Here is the sketch rendered by the above code:
        Click the canvas to replay
      

      
      
The frame rate of p5.js can be used to set the duration of animations. For example,
        you can set the frame rate to FRAME_RATE
        then use FRAME_RATE * 3 to create a three-second animation.
      

      

      
The line is displayed in three seconds:
        Click the canvas to replay
      

      
    


    

      
      
More Examples

      
The sketch
        to animate basic shapes:
        Click the canvas to replay
      

      

      
The sketch
        to draw circles while filling them:
        Click the canvas to replay
      

      

      
The sketch
        to render p5.animS animations in multiple canvases, together with the
        instance mode of p5.js:

        

    


    

      
      
Quick Reference

      

/**
 * Activates the "instance mode" and associates a new animS instance with the
 *     specified p5 object. See p5() of p5.js for more details.
 * @param {Object} p5obj The instance of the p5 object.
 * @returns {Object} The animS instance.
 */
animS.newAnimS(p5obj);

/**
 * Removes all the cached shape animation instances so that new shape
 *     creations result in new animations.
 */
animS.reset();

/**
 * Draws an arc while playing its creation animation. The arc mode is always
 *     OPEN. The elipse mode is always CENTER.
 * @param {!string} id A unique string ID to identify the shape animation.
 * @param {!number} duration The duration of the creation animation, in
 *     number of frames.
 * @param {!Number} x The x-coordinate of the arc's ellipse.
 * @param {!Number} y The y-coordinate of the arc's ellipse.
 * @param {!Number} w The width of the arc's ellipse by default.
 * @param {!Number} h The height of the arc's ellipse by default.
 * @param {!Number} start The angle to start the arc, in radians.
 * @param {!Number} stop The angle to stop the arc, in radians.
 */
animS.arc(id, duration, x, y, w, h, start, stop);

/**
 * Draws an elipse (oval) while playing its creation animation. The elipse
 *     mode is always CENTER.
 * @param {!string} id A unique string ID to identify the shape animation.
 * @param {!number} duration The duration of the creation animation, in
 *     number of frames.
 * @param {!number} x The x-coordinate of the center of ellipse.
 * @param {!number} y The y-coordinate of the center of ellipse.
 * @param {!number} w The width of the ellipse.
 * @param {!number} h The height of the ellipse.
 */
animS.ellipse(id, duration, x, y, w, h);

/**
 * Draws a circle while playing its creation animation.
 * @param {!string} id A unique string ID to identify the shape animation.
 * @param {!number} duration The duration of the creation animation, in
 *     number of frames.
 * @param {!number} x The x-coordinate of the centre of the circle.
 * @param {!number} y The y-coordinate of the centre of the circle.
 * @param {!number} d The diameter of the circle.
*/
animS.circle(id, duration, x, y, d);

/**
 * Draws a line while playing its creation animation.
 * @param {!string} id A unique string ID to identify the shape animation.
 * @param {!number} duration The duration of the creation animation, in
 *     number of frames.
 * @param {!number} x1 The x-coordinate of the first point.
 * @param {!number} y1 The y-coordinate of the first point.
 * @param {!number} x2 The x-coordinate of the second point.
 * @param {!number} y2 The y-coordinate of the second point.
 */
animS.line(id, duration, x1, y1, x2, y2);

/**
 * Draws a quad while playing its creation animation.
 * @param {!string} id A unique string ID to identify the shape animation.
 * @param {!number} duration The duration of the creation animation, in
 *     number of frames.
 * @param {!number} x1 The x-coordinate of the first point.
 * @param {!number} y1 The y-coordinate of the first point.
 * @param {!number} x2 The x-coordinate of the second point.
 * @param {!number} y2 The y-coordinate of the second point.
 * @param {!number} x3 The x-coordinate of the third point.
 * @param {!number} y3 The y-coordinate of the third point.
 * @param {!number} x4 The x-coordinate of the fourth point.
 * @param {!number} y4 The y-coordinate of the fourth point.
 */
animS.quad(id, duration, x1, y1, x2, y2, x3, y3, x4, y4);

/**
 * Draws a rectangle while playing its creation animation.
 * @param {!string} id A unique string ID to identify the shape animation.
 * @param {!number} duration The duration of the creation animation, in
 *     number of frames.
 * @param {!number} x The x-coordinate of the rectangle.
 * @param {!number} y The y-coordinate of the rectangle.
 * @param {!number} w The width of the rectangle.
 * @param {!number} h The height of the rectangle.
 */
animS.rect(id, duration, x, y, w, h);

/**
 * Draws a square while playing its creation animation.
 * @param {!string} id A unique string ID to identify the shape animation.
 * @param {!number} duration The duration of the creation animation, in
 *     number of frames.
 * @param {!number} x The x-coordinate of the square.
 * @param {!number} y The y-coordinate of the square.
 * @param {!number} s The side size of the square.
 */
animS.square(id, duration, x, y, s);

/**
 * Draws a triangle while playing its creation animation.
 * @param {!string} id A unique string ID to identify the shape animation.
 * @param {!number} duration The duration of the creation animation, in
 *     number of frames.
 * @param {!number} x1 The x-coordinate of the first point.
 * @param {!number} y1 The y-coordinate of the first point.
 * @param {!number} x2 The x-coordinate of the second point.
 * @param {!number} y2 The y-coordinate of the second point.
 * @param {!number} x3 The x-coordinate of the third point.
 * @param {!number} y3 The y-coordinate of the third point.
 */
animS.triangle(id, duration, x1, y1, x2, y2, x3, y3);

/**
 * Draws a shape while playing its creation animation. The shape is always
 *     OPEN unless the first vertex and the last vertex are equal.
 * @param {!string} id A unique string ID to identify the shape animation.
 * @param {!number} duration The duration of the creation animation, in
 *     number of frames.
 * @param {!Array<Array<number>>} vertices The vertices that define the
 *     shape. Each element of the array may contain eithr two coordinate
 *     numbers (for simple vertices) or six coordinate numbers (for Bezier
 *     vertices).
 */
animS.shape(id, duration, vertices);
      

    


    

      
      
Source Code

      
See the source code of p5.animS at GitHub.