Implementing code as a shader in Processing 3

Question

I recently created a simple program in Processing 3 to set each pixel to its position as a color.

void setup()
{
  size(960,960);
}

void draw()
{
  for(int j = 0;j < height;j++)
  {
    for(int i = 0;i < width;i++)
    {
      set(i,j,color(map(i,0,width,0,255),map(j,0,height,0,255),0));
    }
  }
}

How would I be able to implement this as a shader?

Note: I've already looked online and couldn't really find an answer for this.

Answer 1

If you're not very familiar with shaders yet, you should first take a look at this page: https://processing.org/tutorials/pshader/

What you'll probably want is to draw a rectangle that covers the entire screen, and use the built-in GLSL variable gl_FragCoord, which gives you the index of the current pixel in x and y much like your loop variables i and j. See https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/gl_FragCoord.xhtml for full documentation

Also keep in mind that the values output by the fragment shader are in the range 0 to 1 instead of 0 to 255. So in the end the relevant shader code might look something like:

uniform vec2 windowSize; //the shader doesn't know this automatically, so you'll need to pass it in yourself
void main() {
  gl_FragColor = vec4(gl_FragCoord / windowSize, 0, 1);
}