diff --git a/src/dom/p5.MediaElement.js b/src/dom/p5.MediaElement.js index b51eeb2765..2969c49258 100644 --- a/src/dom/p5.MediaElement.js +++ b/src/dom/p5.MediaElement.js @@ -66,7 +66,7 @@ class MediaElement extends Element { source.src = newValue; elt.appendChild(source); self.elt.src = newValue; - self.modified = true; + self._modified = true; } }); diff --git a/src/webgl/p5.Texture.js b/src/webgl/p5.Texture.js index 43a356edb8..b211ed200f 100644 --- a/src/webgl/p5.Texture.js +++ b/src/webgl/p5.Texture.js @@ -225,6 +225,9 @@ class Texture { data.setModified && data.setModified(true); } } else if (this.isSrcP5Image) { + if (data.gifProperties) { + data._animateGif(this._renderer._pInst); + } // for an image, we only update if the modified field has been set, // for example, by a call to p5.Image.set if (data.isModified()) { diff --git a/src/webgl/utils.js b/src/webgl/utils.js index 2b9829818e..c5c6e3d7c9 100644 --- a/src/webgl/utils.js +++ b/src/webgl/utils.js @@ -281,7 +281,7 @@ export function setWebGLUniformValue(shader, uniform, data, getTexture, gl) { "You're trying to use a number as the data for a texture." + "Please use a texture.", ); - return this; + return; } gl.activeTexture(data); gl.uniform1i(location, data); @@ -289,9 +289,6 @@ export function setWebGLUniformValue(shader, uniform, data, getTexture, gl) { gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex); uniform.texture = data instanceof Texture ? data : getTexture(data); gl.uniform1i(location, uniform.samplerIndex); - if (uniform.texture.src.gifProperties) { - uniform.texture.src._animateGif(this._pInst); - } } break; case gl.SAMPLER_CUBE: diff --git a/test/unit/visual/cases/webgl.js b/test/unit/visual/cases/webgl.js index 6febdfb698..e4c0c5f4b9 100644 --- a/test/unit/visual/cases/webgl.js +++ b/test/unit/visual/cases/webgl.js @@ -1203,4 +1203,25 @@ visualSuite('WebGL', function() { }); }); + visualSuite('media assets', function() { + visualTest('drawing gifs', async function(p5, screenshot) { + p5.createCanvas(50, 50, p5.WEBGL); + const gif = await p5.loadImage('/test/unit/assets/nyan_cat.gif'); + p5.imageMode(p5.CENTER); + p5.image(gif, 0, 0); + screenshot(); + }); + + visualTest('drawing gifs after a time delay', async function(p5, screenshot) { + p5.createCanvas(50, 50, p5.WEBGL); + const gif = await p5.loadImage('/test/unit/assets/nyan_cat.gif'); + p5.imageMode(p5.CENTER); + p5.image(gif, 0, 0); + p5.clear() + // Simulate waiting for successive draw calls + p5._lastRealFrameTime += 300; + p5.image(gif, 0, 0); + screenshot(); + }); + }); }); diff --git a/test/unit/visual/screenshots/WebGL/media assets/drawing gifs after a time delay/000.png b/test/unit/visual/screenshots/WebGL/media assets/drawing gifs after a time delay/000.png new file mode 100644 index 0000000000..e564f5f0b1 Binary files /dev/null and b/test/unit/visual/screenshots/WebGL/media assets/drawing gifs after a time delay/000.png differ diff --git a/test/unit/visual/screenshots/WebGL/media assets/drawing gifs after a time delay/metadata.json b/test/unit/visual/screenshots/WebGL/media assets/drawing gifs after a time delay/metadata.json new file mode 100644 index 0000000000..2d4bfe30da --- /dev/null +++ b/test/unit/visual/screenshots/WebGL/media assets/drawing gifs after a time delay/metadata.json @@ -0,0 +1,3 @@ +{ + "numScreenshots": 1 +} \ No newline at end of file diff --git a/test/unit/visual/screenshots/WebGL/media assets/drawing gifs/000.png b/test/unit/visual/screenshots/WebGL/media assets/drawing gifs/000.png new file mode 100644 index 0000000000..8088aba23d Binary files /dev/null and b/test/unit/visual/screenshots/WebGL/media assets/drawing gifs/000.png differ diff --git a/test/unit/visual/screenshots/WebGL/media assets/drawing gifs/metadata.json b/test/unit/visual/screenshots/WebGL/media assets/drawing gifs/metadata.json new file mode 100644 index 0000000000..2d4bfe30da --- /dev/null +++ b/test/unit/visual/screenshots/WebGL/media assets/drawing gifs/metadata.json @@ -0,0 +1,3 @@ +{ + "numScreenshots": 1 +} \ No newline at end of file