From 700552868ebd38b77fc7b9057c7416211c5b2131 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Thu, 29 Jan 2026 16:45:41 -0500 Subject: [PATCH 1/3] Fix broken gifs in WebGL mode --- src/webgl/utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/webgl/utils.js b/src/webgl/utils.js index 2b9829818e..c45485df50 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); @@ -290,7 +290,7 @@ export function setWebGLUniformValue(shader, uniform, data, getTexture, gl) { uniform.texture = data instanceof Texture ? data : getTexture(data); gl.uniform1i(location, uniform.samplerIndex); if (uniform.texture.src.gifProperties) { - uniform.texture.src._animateGif(this._pInst); + uniform.texture.src._animateGif(shader._renderer._pInst); } } break; From e50a1cae5acb096288faf67d85102bb5f30de4f0 Mon Sep 17 00:00:00 2001 From: Dave Pagurek Date: Thu, 29 Jan 2026 16:59:55 -0500 Subject: [PATCH 2/3] Add tests --- test/unit/visual/cases/webgl.js | 9 +++++++++ .../WebGL/media assets/drawing gifs/000.png | Bin 0 -> 828 bytes .../WebGL/media assets/drawing gifs/metadata.json | 3 +++ 3 files changed, 12 insertions(+) create mode 100644 test/unit/visual/screenshots/WebGL/media assets/drawing gifs/000.png create mode 100644 test/unit/visual/screenshots/WebGL/media assets/drawing gifs/metadata.json diff --git a/test/unit/visual/cases/webgl.js b/test/unit/visual/cases/webgl.js index 6febdfb698..5ab55b5669 100644 --- a/test/unit/visual/cases/webgl.js +++ b/test/unit/visual/cases/webgl.js @@ -1203,4 +1203,13 @@ 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(); + }); + }); }); 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 0000000000000000000000000000000000000000..8088aba23d5df866dbf0dd84220922400bc5aba0 GIT binary patch literal 828 zcmV-C1H=4@P)Ogg(w zY{j@UHA0mWr$EDu6KN#hC5(XDL2qx@X!JeW+UNPqjzUfrb(p(&JNMR#_*$mRi>VcQ zI7}on(YNL0_WhSY+Zlz#ycaWPBY%zGDsmQrRfMZ*;v}B=i5I?%LcUwXVeaBRan+_4Aya&Df1~56NSjV=Ke<}mW1|pXVZE3+ z3vU7s04ytwB3z=Tuc+2+lRLfjsjzWG|C61VF`Ob~@WM_cZ9*0?MNeqlmB0gi3?k=;#59T@ z&Vx`aa)CdJ7+{SB_yC^Tcgn&3gTUI6g#7#^;_$?rb#BedX?&N}zW<9~h-rXN$+1vg zpB6X{ZZ3j&5`yEX6_>}Ho7->yt{)>P1~F^EITW}CH4*GDgb;iWP!#9*gAoQiMm&Nz zd4Nw2%NpQ&3_nK_^7XHXBPZ0>&dn`c1OWW_U}7M~;5dkr2elY^kJoGx5)*lGwRPl2 zpNB)Hl=5s$mTwEA)8ya^M*c=og2LQ_&$-%E!%lR zpUBP)-h6zTh^mU}>jKsP0RRC1|MMGH^Z)<=21!IgR09A#=wneqZj%fE0000 Date: Fri, 30 Jan 2026 09:15:14 -0500 Subject: [PATCH 3/3] Fix gifs not animating, add another test --- src/dom/p5.MediaElement.js | 2 +- src/webgl/p5.Texture.js | 3 +++ src/webgl/utils.js | 3 --- test/unit/visual/cases/webgl.js | 12 ++++++++++++ .../drawing gifs after a time delay/000.png | Bin 0 -> 805 bytes .../drawing gifs after a time delay/metadata.json | 3 +++ 6 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 test/unit/visual/screenshots/WebGL/media assets/drawing gifs after a time delay/000.png create mode 100644 test/unit/visual/screenshots/WebGL/media assets/drawing gifs after a time delay/metadata.json 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 c45485df50..c5c6e3d7c9 100644 --- a/src/webgl/utils.js +++ b/src/webgl/utils.js @@ -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(shader._renderer._pInst); - } } break; case gl.SAMPLER_CUBE: diff --git a/test/unit/visual/cases/webgl.js b/test/unit/visual/cases/webgl.js index 5ab55b5669..e4c0c5f4b9 100644 --- a/test/unit/visual/cases/webgl.js +++ b/test/unit/visual/cases/webgl.js @@ -1211,5 +1211,17 @@ visualSuite('WebGL', function() { 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 0000000000000000000000000000000000000000..e564f5f0b1ae97830ab02fed6306ae7ef39d0fc4 GIT binary patch literal 805 zcmV+=1KRwFP)BApt0_pxIlcek!n zV%LeNs;IsXx9Z*sv5W0?*@d*fR8^*5*LOoz+m{(53xVt~XY+AxWmU~0mUDieM2=!k zrWvYjFEM@_S8uf4Tg&tKYTXLC7^4NF6rQciizyX)I=%9v{pyu8#kk+G zvyfQ$4tWVhe#u^lvr#K_4zuW41z<}_cnXMpbd6Vd)v^%zzh4NrUatbMr6OEa6DRS^ zj#Y1ke6w&1MtRq>)A3ZKO=o?+Y8J8f`#uYag?nUgjr@|mmrJbDaYDewFdhAJ#+4?K zjLNqxq!Rq6?wu)=?mjW)gFP4Nv@?qOVP&_E+T46*hzopuYJZRffGE^~OexK<`~GBV&iVB6*KJu83*7J?aBNG#l(&Bys` z;>DT(-2Zw0F(ej$!-QyvA5pVC?rRp}yQ8ZW%|$@WE~X=9r}*hQ3He9{eg;0ko)usN zcxs=c$^MGK9&CjC_$kr?i3={PDa--?_djhBvjcv@jfL|1)WCUgryv4f5)uo?*+S&6 zZMo$Cfhhzrw?gcT0&l@ugr)ZX`-oqPFub9g!vy9bf;5v=I3v z+q>$QvbwLtcVCHD@;N`QNk}X_25WZYuWc@N#C-R$M*rF-?(mrJS>3l@laRIZ8TUiT zqfPBmCvvz?L&)Klbxs%)>D=JM$B&5|ZdvDqF_F#