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.

Sign up for GitHub

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

Jump to bottom

setFrame() under WEBGL environment not rendering correct frame #7370

Open
2 of 17 tasks
pacpapapa opened this issue Nov 9, 2024 · 5 comments · May be fixed by #7611
Open
2 of 17 tasks

setFrame() under WEBGL environment not rendering correct frame #7370

pacpapapa opened this issue Nov 9, 2024 · 5 comments · May be fixed by #7611
Assignees
@rishabhs-rizz
Labels
Area:Image Area:WebGL Bug

Comments

@pacpapapa
Copy link

pacpapapa commented Nov 9, 2024 •
edited
Loading

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)

p5.js version

1.11.1

Web browser and version

Arc 130.0.6723.117

Operating system

macOS 13.2.1

Steps to reproduce this

Steps:

  1. Here is an example: https://editor.p5js.org/a25811342/sketches/ctcrkd_71
  2. gif.getCurrentFrame() shows that it does apply assigned frame to the object.
  3. However, when using image() to render the image, the one in WEBGL environment is still, but the other one works fine with default renderer. (object be placed in another layer without WEBGL using createGraphics())

Snippet:

let gif;
let layer2d;

function preload() {
  gif = loadImage('Rotating_earth_(large).gif');
}

function setup() {
  createCanvas(400, 400, WEBGL);
  layer2d = createGraphics(width, height);
}

function draw() {
  background(220);
  
  let gifFrame = frameCount % (gif.numFrames());
  gif.setFrame(gifFrame);
  print(gif.getCurrentFrame());
  
  // setFrame() cannot apply to WEBGL environment.
  image(gif, -200, -200, 200, 200);
  
  // but work fine with default renderer.
  layer2d.image(gif, 0, 0, 200, 200);
  image(layer2d, 0, 0);
}
@pacpapapa pacpapapa added the Bug label Nov 9, 2024
@welcome Welcome
Copy link

welcome bot commented Nov 9, 2024

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

@rishabhs-rizz
Copy link

good issue, could you please assign this issue to me

@davepagurek
Copy link
Contributor

Hey @rishabhs-rizz, sorry I missed this, I'll assign it to you!

@swastikCommits
Copy link

I m willing to work in this, since there has been inactivity.

@davepagurek
Copy link
Contributor

I'll assign it to you @swastikCommits, @rishabhs-rizz if you're still interested in working on this maybe you two can collaborate and help review code?

Another note: We are close to releasing p5 2.0. Its development is taking place on the dev-2.0 branch. In addition to fixing this on main, it would also be beneficial to check if this problem exists in 2.0 (there's a CDN link for a beta build here: https://github.com/processing/p5.js/releases/tag/v2.0.0-beta.3) and making an additional PR into dev-2.0 if so.

@swastikCommits swastikCommits linked a pull request Mar 8, 2025 that will close this issue
Open
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rishabhs-rizz rishabhs-rizz

Labels
Area:Image Area:WebGL Bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: setFrame() under WebGL environment renders the correct frame swastikCommits/p5.js
4 participants
@davepagurek @pacpapapa @rishabhs-rizz @swastikCommits