p5jsShaderExamples | A collection of heavily commented WebGL shaders | Graphics library

I am trying to use a glsl shader with p5js to create a simulation like the game of life. To do that I want to create a shader which will take a texture as uniform and which will draw a new texture based on this previous texture. In a next iteration this new texture will be used as uniform and that should allow me create a simulation following the idea exposed here. I am experienced with p5.js but I'm completely new to shader programming so I'm probably missing something.

For now my code is as straightforward as possible:

• In the preload() function, I create a texture using the createImage() function and setup some pixels to be white and the others to be black.
• In the setup() function I use this texture to run the shader a first time to create a new texture. I also set a timer to run the shader at regular intervals and draw the result in a buffer.
• In the draw() function I draw the buffer in the canvas.
• To keep things simple I keep the canvas and the texture the same size.

My issue is that at some point the y coordinates in my code seems to get inverted and I don't understand why. My understanding is that my code should show a still image but each time I run the shader the image is inverted. Here is what I mean:

I am not sure if my issue comes from how I use glsl or how I use p5 or a mix of both. Can someone explain to me where this weird y inversion comes from?

Here is my minimal reproducible example (which is also in the p5 editor here):

The sketch file: