* @name Basic Shader

 * @description This is a basic example showing how to load shaders in p5.js.

 * <br> To learn more about using shaders in p5.js: <a href="https://itp-xstory.github.io/p5js-shaders/">p5.js Shaders</a>

 */

​

// this variable will hold our shader object

let theShader;

let maskImage

​

let sourceImage;

​

function preload(){

  // load the shader

  theShader = loadShader('assets/basic.vert', 'assets/fade.frag');

  sourceImage = loadImage('Killer-whale.jpeg');

}

​

function setup() {

  // shaders require WEBGL mode to work

  createCanvas(500, 500, WEBGL);

 // setAttributes("alpha", true) // SHOULD BE OFF otherwise the result gets greyish!!!

  fadedImage = createGraphics(500, 500, WEBGL); //size of mask

  fadedImage.setAttributes("alpha", true)

  maskImage = createGraphics(500, 500, WEBGL); //size of mask

  maskImage.setAttributes("alpha", true)

  maskImage.noStroke();

  maskImage.fill(255)

//  fadedImage.clear()

//  maskImage.clear()

​

}

​

function draw() {

//  clear()

  background(100)

  //fadedImage.clear()

  //maskImage.clear()

​

  maskImage.image(fadedImage,-width/2,-height/2)

  maskImage.ellipse(mouseX-width/2, mouseY-height/2, 100)

​

  theShader.setUniform('u_texture', maskImage);

  theShader.setUniform('u_sourceTexture', sourceImage);

​

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

  fadedImage.shader(theShader);

​

  // rect gives us some geometry on the screen

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

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

  image(fadedImage,0,0)

  //image(maskImage,0,0)

//  rect(0,0,width, height);

}

​