Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Apr 22, 2024

Conversation

kaiserarg
Copy link
Contributor

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

kaiserarg and others added 2 commits March 26, 2024 22:09
pInst._lastRealFrameTime; does not exist. Fixes
gif animation on graphic issue.
Copy link

welcome bot commented Apr 3, 2024

🎉 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!

@Qianqianye Qianqianye requested a review from davepagurek April 3, 2024 02:42
@@ -344,7 +344,7 @@ p5.Image = class {
*/
_animateGif(pInst) {
const props = this.gifProperties;
const curTime = pInst._lastRealFrameTime;
const curTime = pInst._lastRealFrameTime || window.performance.now();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this makes sense. At first I was worried that this wouldn't be as robust as grabbing the time from the main canvas, but there's also the chance that the graphic is being used for fully offscreen rendering and the main canvas never updates, so this is probably the best compromise for now. We can always revisit this later, I'll merge this PR!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Gifs don't animate when drawing to p5.Graphics
2 participants