​

let img;

​

function preload() {

  // Load the shader

  simpleShader = loadShader("basic.vert", "basic.frag");

​

  // Load the image

  img = loadImage("mountain.jpg");

}

​

function setup() {

  // shaders require WEBGL mode to work

  createCanvas(400, 400, WEBGL);

​

  // Resize our image

  //img.resize(width, height);

}

​

function draw() {

  background(255, 100, 255);

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

​

  texture(img);

  textureMode(NORMAL);

  // shader() sets the active shader with our shader

  shader(simpleShader);

​

  // Send the image to the shader

  simpleShader.setUniform("uTexture", img);

​

  beginShape(TRIANGLE_STRIP);

​

  vertex(20, 20, 10, 0, 0);

  vertex(20, 200, 10, 0, 1);

  vertex(200, 20, 10, 1, 0);

  vertex(200, 200, 10, 1, 1);

​

  endShape();

  // rect gives us some geometry on the sc

  resetShader();

  fill(160, 160, 255);

  stroke(0);

  strokeWeight(3);

  rect(width - 60, height - 60, 50, 50);

}

​