​

​

// let vid;

​

// function setup() {

//   createCanvas(800, 800, WEBGL);

//   vid = createCapture(VIDEO);

//   vid.hide();

// }

​

// function draw() {

//   background(100);

//   push();

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

//   image(vid, 200, 200, 400, 400);

//   pop();

​

//   texture(vid);

//   textureMode(NORMAL);

//   noStroke();

//   beginShape();

//   vertex(0, 0, 0, 0);

//   vertex(100, -100, 1, 0);

//   vertex(100, 200, 1, 1);

//   vertex(0, 100, 0, 1);

//   endShape();

​

//   beginShape();

//   vertex(-200, -200, 0, 0);

//   vertex(-100, -200, 1, 0);

//   vertex(-100, -100, 1, 1);

//   vertex(-200, -100, 0, 1);

//   endShape();

// }

​

​

////######SECOND OPTION############

​

let vid;

​

function setup() {

  createCanvas(800, 800);

​

  pg = createGraphics(800, 800, WEBGL);

  vid = createCapture(VIDEO);

  vid.hide();

}

​

function draw() {

  background(100);

  pg.push();

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

  pg.image(vid, 0, 0, width, height);

  pg.pop();

​

  pg.texture(vid);

  pg.textureMode(NORMAL);

  pg.noStroke();

  pg.beginShape();

  pg.vertex(0, 0, 0, 0);

  pg.vertex(2 * 100, 2 * -100, 1, 0);

  pg.vertex(2 * 100, 2 * 200, 1, 1);

  pg.vertex(0, 2 * 100, 0, 1);

  pg.endShape();

​

  pg.beginShape();

  pg.vertex(2 * -200, 2 * -200, 0, 0);

  pg.vertex(2 * -100, 2 * -200, 1, 0);

  pg.vertex(2 * -100, 2 * -100, 1, 1);

  pg.vertex(2 * -200, 2 * -100, 0, 1);

  pg.endShape();

​

  image(pg, 200, 200, 400, 400);

}

​