search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.11k stars 3.22k forks source link

Fix for gif not animating when drawing to p5.graphics #6935

Closed kaiserarg closed 2 months ago

kaiserarg commented 3 months ago

Resolves #6925

Changes:

From: const curTime = pInst._lastRealFrameTime To: const curTime = pInst._lastRealFrameTime || window.performance.now(); In /image/p5.Image.js under the _animateGif(pInst) helper function

_lastRealFrameTime in main.js is set to window.performance.now() which starts the browser timer, however like the issue poster mentioned pInst._lastRealFrameTime exists on the main canvas but not graphics if you attach a gif to a graphic like below then only the first frame of the gif will animate since the helper function sets curTime to pInst._lastRealFrameTime.

`let cnv; function preload() { gif = loadImage('test.gif) }

function setup() { createCanvas(100, 100); cnv = createGraphics(100, 100); }

function draw() { cnv.background(255); cnv.image(gif, 0, 0); image(cnv, 0, 0); }`

In /image/p5.Image.js then under the _animateGif(pInst) curTime which is set to pInst._lastRealFrameTime will not exist (undefined) thus adding || window.performance.now(); will start the timer again allowing the gif to animate beyond the first frame.

Screenshots of the change:

image image

PR Checklist

welcome[bot] commented 3 months ago

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already. And be sure to add yourself to the list of contributors on the readme page!