let woodframeImg;

let fancyframeImg;

let flowerframeImg;

​

let blocksize = 20

​

function preload() {

  woodframeImg=loadImage("woodenframe.png")

  fancyframeImg=loadImage("fancyframe.png")

  flowerframeImg=loadImage("flowerframe.png")

}

​

function setup() {

  createCanvas(400, 400);

​

  capture = createCapture(VIDEO);

  capture.hide();

  noStroke()

}

​

function draw() {

  image(capture, windowWidth, windowHeight);

}

​

function keyReleased() {

  if (key == 's' || key == 'S') saveCanvas("you!","jpg")

  if (key == '1') loadImage(woodframeImg,windowHeight,windowWidth)

  if (key == '2') loadImage(fancyframeImg,windowHeight,windowWidth)

  if (key == '3') loadImage(flowerframeImg,windowHeight,windowWidth)

  if (key == '5') image(capture,0, windowWidth, windowHeight)

  if (key == '6') capture.loadPixels()

  for (let y=0; y<height;y+=blocksize){

    for (let x=0; x<width; x+=blocksize){

      let index = ((y*capture.width) + x ) * 4;

      let r = capture.pixels[index]

      let g = capture.pixels[index+1]

      let b = capture.pixels[index+2]

      fill(r,g,b);

      rect(x,y,blocksize,blocksize)

    }

  }

  if (key == '7') capture.loadPixels()

  for (let y=0; y<height;y+=blocksize){

    for (let x=0; x<width; x+=blocksize){

      let index = ((y*capture.width) + x ) * 4;

      let r = capture.pixels[index]

      let g = capture.pixels[index+1]

      let b = capture.pixels[index+2]

      fill(r,g,b);

      ellipse(x,y,blocksize,blocksize)

    }

  }

}