CODEWITHSUNDEEP
p5.js
dirkk0
dirkk0

Reputation: 2570

Animated PNG frame rate in p5js

I tried an animated PNG with p5 and it seems to work:

https://editor.p5js.org/dirkk0/sketches/q4Y5HzOYC

Is there a way to control the frame rate?

Upvotes: 1

Views: 1723

Answers (1)

Luke Garrigan
Luke Garrigan

Reputation: 5021

P5 has a frameRate() function but this changes the framerate of the canvas not of your gif, so I assume you don't want that.

I think it would be a good idea to take a look at the p5.play library - it has a tonne of functionality you could use, including a loadAnimation() which takes in your gif and creates an animation object - whose frame rate you can change by using animation.frameDelay.

So your example - with the p5.play library - would look like this:

var anim;
var sprite;

function preload() {
  // loads all the image files
  anim = loadAnimation('test.png');
}

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

  // change how many frames (of draw loop) each animation frame is
  // visible for. bigger #s = slower speed
  anim.frameDelay = 2;

  // create a sprite from a single image
  sprite = createSprite(300, 150);
  sprite.addAnimation("test", anim);
}

function draw() { 
  background(220);
  drawSprites();
}

here's a really good example https://editor.p5js.org/kjhollen/sketches/BJ1a_DIkM

Upvotes: 2

Related Questions