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:3277

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
(
  • frame
)

Defined in lib/p5.play.js:3665

Changes the current frame.

Parameters:

  • frame Number

    Frame number (starts from 0).

clone () Animation

Defined in lib/p5.play.js:3509

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
  • r=0
)

Defined in lib/p5.play.js:3534

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

Parameters:

  • x Number

    x coordinate

  • y Number

    y coordinate

  • [r=0] Number optional

    rotation

getFrame () Number

Defined in lib/p5.play.js:3733

Returns the current frame number.

Returns:

Number:

Current frame (starts from 0)

getFrameImage () p5.Image

Defined in lib/p5.play.js:3753

Returns the current frame image as p5.Image.

Returns:

p5.Image:

Current frame image

getHeight () Number

Defined in lib/p5.play.js:3792

Returns the current frame height in pixels. If there is no image loaded, returns 1.

Returns:

Number:

Frame height

getImageAt
(
  • frame
)
p5.Image

Defined in lib/p5.play.js:3763

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:3743

Returns the last frame number.

Returns:

Number:

Last frame number (starts from 0)

getWidth () Number

Defined in lib/p5.play.js:3774

Returns the current frame width in pixels. If there is no image loaded, returns 1.

Returns:

Number:

Frame width

goToFrame
(
  • toFrame
)

Defined in lib/p5.play.js:3713

Plays the animation forward or backward toward a target frame.

Parameters:

  • toFrame Number

    Frame number destination (starts from 0)

nextFrame ()

Defined in lib/p5.play.js:3681

Goes to the next frame and stops.

play ()

Defined in lib/p5.play.js:3637

Plays the animation.

previousFrame ()

Defined in lib/p5.play.js:3697

Goes to the previous frame and stops.

rewind ()

Defined in lib/p5.play.js:3656

Rewinds the animation to the first frame.

stop ()

Defined in lib/p5.play.js:3647

Stops the animation.

Properties

frameChanged

Boolean

Defined in lib/p5.play.js:3380

True if frame changed during the last draw cycle

frameDelay

Number

Defined in lib/p5.play.js:3342

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

Default: 4

images

Array

Defined in lib/p5.play.js:3327

Array of frames (p5.Image)

looping

Boolean

Defined in lib/p5.play.js:3371

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

Default: true

playing

Boolean

Defined in lib/p5.play.js:3353

True if the animation is currently playing.

Default: true

visible

Boolean

Defined in lib/p5.play.js:3362

Animation visibility.

Default: true