processing / processing/p5.js

setFrame() under WEBGL environment not rendering correct frame

Open
#7,370 5 comments 0 reactions 1 assignee View on GitHub

@rishabhs-rizz is already working on this.

Since Dec 20, 2024.

Area:Image Area:WebGL Bug
Dominant language
JavaScript
Stars
24k
Forks
3.8k
Avg merge
3d 16h
Merged PRs (30d)
25

Description

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);
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.