​

let sh;

let tex;

​

function preload(){

  if (!useCreateShader) {

    sh = loadShader('shader.vert', 'shader.frag');

  }

}

​

function setup() {

  createCanvas(400, 400, WEBGL);

  noStroke();

  if (useCreateShader) {

    sh = createShader(

      `

// vert

#ifdef GL_ES

precision mediump float;

#endif

​

attribute vec3 aPosition;

​

void main() {

  vec4 positionVec4 = vec4(aPosition, 1.0);

  positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 

  gl_Position = positionVec4;

}

  `,

      `

// frag

#ifdef GL_ES

precision mediump float;

#endif

​

uniform vec2 u_resolution;

​

void main() {

  vec2 st = gl_FragCoord.xy/u_resolution.xy; 

  gl_FragColor = vec4(st.x,0.0,1.0,1.0); // R,G,B,A

}

  `

    );

  }

  tex = createGraphics(width, height, WEBGL);

  tex.noStroke();

}

​

function draw() {

  background(255, 0, 0);

  sh.setUniform('u_resolution', [width, height]);

​

  tex.shader(sh);

  tex.rect(0, 0, width, height);

  texture(tex);

  translate(-width/2, -height/2);

  rect(0,0,width, height);

}