Based on code from beginContour() reference

https://p5js.org/reference/#/p5/beginContour

*/

​

​

let revealSize =40;

let art;

​

​

function preload(){

  art = createVideo('fightv.mp4');

  // art = createImage('fight.gif');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noStroke();

}

​

​

​

function draw() {

  //remove wdth hight and width to not adjust to screen

  image (art, 0, 0, width, height);

  art.loop();

  translate(mouseX, mouseY);

  beginShape();

  // Exterior part of shape, clockwise winding

  vertex(-width, -height);

  vertex(width, -height);

  vertex(width, height);

  vertex(-width, height);

  // Interior part of shape, counter-clockwise winding

  beginContour();

  vertex(-revealSize, -revealSize);

  vertex(-revealSize, revealSize);

  vertex(revealSize, revealSize);

  vertex(revealSize, -revealSize);

  endContour();

  endShape(CLOSE);

}