Show:
Module: p5.play
Parent Module: p5.play

An Animation object contains a series of images (p5.Image) that can be displayed sequentially.

All files must be png images. You must include the directory from the sketch root, and the extension .png

A sprite can have multiple labeled animations, see Sprite.addAnimation and Sprite.changeAnimation, however an animation can be used independently.

An animation can be created either by passing a series of file names, no matter how many or by passing the first and the last file name of a numbered sequence. p5.play will try to detect the sequence pattern.

For example if the given filenames are "data/file0001.png" and "data/file0005.png" the images "data/file0003.png" and "data/file0004.png" will be loaded as well.

Constructor

Animation
(
  • fileName1
  • fileName2
  • fileNameN
)

Defined in lib/p5.play.js:2960

Parameters:

  • fileName1 String

    First file in a sequence OR first image file

  • fileName2 String

    Last file in a sequence OR second image file

  • [fileNameN] String optional multiple

    Any number of image files after the first two

Example:

var sequenceAnimation;
var glitch;

function preload() {
sequenceAnimation = loadAnimation("data/walking0001.png", "data/walking0005.png");
glitch = loadAnimation("data/dog.png", "data/horse.png", "data/cat.png", "data/snake.png");
}

function setup() {
createCanvas(800, 600);
}

function draw() {
background(0);
animation(sequenceAnimation, 100, 100);
animation(glitch, 200, 100);
}

Methods

changeFrame ()

Defined in lib/p5.play.js:3354

Goes to the next frame and stops.

changeFrame ()

Defined in lib/p5.play.js:3338

Goes to the next frame and stops.

changeFrame
(
  • frame
)

Defined in lib/p5.play.js:3322

Changes the current frame.

Parameters:

  • frame Number

    Frame number (starts from 0).

clone () Animation

Defined in lib/p5.play.js:3176

Objects are passed by reference so to have different sprites using the same animation you need to clone it.

Returns:

Animation:

A clone of the current animation

draw
(
  • x
  • y
)

Defined in lib/p5.play.js:3198

Draws the animation at coordinate x and y. Updates the frames automatically.

Parameters:

  • x Number

    x coordinate

  • y Number

    y coordinate

getFrame () Number

Defined in lib/p5.play.js:3386

Returns the current frame number.

Returns:

Number:

Current frame (starts from 0)

getFrameImage () p5.Image

Defined in lib/p5.play.js:3406

Returns the current frame image as p5.Image.

Returns:

p5.Image:

Current frame image

getHeight () Number

Defined in lib/p5.play.js:3437

Returns the current frame height in pixels.

Returns:

Number:

Frame height

getImageAt
(
  • frame
)
p5.Image

Defined in lib/p5.play.js:3416

Returns the frame image at the specified frame number.

Parameters:

  • frame Number

    Frame number

Returns:

p5.Image:

Frame image

getLastFrame () Number

Defined in lib/p5.play.js:3396

Returns the last frame number.

Returns:

Number:

Last frame number (starts from 0)

getWidth () Number

Defined in lib/p5.play.js:3427

Returns the current frame width in pixels.

Returns:

Number:

Frame width

goToFrame
(
  • targetFrame
)

Defined in lib/p5.play.js:3370

Plays the animation forward or backward toward a target frame.

Parameters:

  • targetFrame Number

    Frame number destination (starts from 0)

play ()

Defined in lib/p5.play.js:3294

Plays the animation.

rewind ()

Defined in lib/p5.play.js:3313

Rewinds the animation to the first frame.

stop ()

Defined in lib/p5.play.js:3304

Stops the animation.

Properties

frameChanged

Boolean

Defined in lib/p5.play.js:3059

True if frame changed during the last draw cycle

frameDelay

Number

Defined in lib/p5.play.js:3021

Delay between frames in number of draw cycles. If set to 4 the framerate of the anymation would be the sketch framerate divided by 4 (60fps = 15fps)

Default: 2

images

Array

Defined in lib/p5.play.js:3006

Array of frames (p5.Image)

looping

Boolean

Defined in lib/p5.play.js:3050

If set to false the animation will stop after reaching the last frame

Default: true

playing

Boolean

Defined in lib/p5.play.js:3032

True if the animation is currently playing.

Default: true

visible

Boolean

Defined in lib/p5.play.js:3041

Animation visibility.

Default: true