Simple Processing Shader Template

shaderHelloWorld.frag

#ifdef GL_ES
precision mediump float;
#endif

#define PROCESSING_COLOR_SHADER

uniform vec2  u_resolution;
uniform vec2  u_mouse;
uniform float u_time;

void main() {
    vec2 uv = gl_FragCoord.st/u_resolution;

    float r = uv.x;
    float b = 0.5 + 0.5 * sin(u_time + 30.0*uv.y);

    float dx = u_mouse.x / u_resolution.x - uv.x; 
    float dy = 1.0 - (u_mouse.y / u_resolution.y) - uv.y; 
    float dh = sqrt(dx*dx + dy*dy); 
    float g = 1.0 - dh;

    gl_FragColor = vec4(r,g,b, 1.0);
}

shaderHelloWorld.pde

// Simple shader demo for Processing 3.5.4
// Helpful resources: 
// The Book of Shaders, by Patricio Gonzalez Vivo and Jen Lowe
//    https://thebookofshaders.com/
// Shaders (Processing Shader Tutorial), by Andres Colubri
//    https://processing.org/tutorials/pshader/

PShader myShader;

void setup() {
  size(540, 720, P2D);
  noStroke();
  myShader = loadShader("shaderHelloWorld.frag"); // must be in 'data' folder
}

void draw() {
  float mx = float(mouseX)/ (float)width;
  float my = float(mouseY)/ (float)height;

  // Pass in data from the main Processing app, such as mouseX, 
  // time, particle locations, etc, into the shader
  myShader.set("u_resolution", float(width), float(height));
  myShader.set("u_mouse", float(mouseX), float(mouseY));
  myShader.set("u_time", (float)millis()/1000.0);

  shader(myShader);
  rect(0, 0, width, height);
}

Should look something like this: