createCanvas(640, 400);

  pixelDensity(1);

​

  //create webcam capture

  capture = createCapture(VIDEO);

  capture.hide();

​

  cg = createGraphics(width, height);

  cg.pixelDensity(1);

​

​

}

​

function draw() {

  //background(220);

​

  //mirror

  translate(width, 0);

  scale(-1, 1);

​

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

​

  cg.loadPixels();

​

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

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

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

​

      //change the darkness if you move beyond width = 20.  looking for a better way to do this but want the canvas to remain natural until the mouse moves across the canvas

      if (mouseX < 20) {

​

        // no change before width < 20

        cg.pixels[index + 3] = 0;

​

        // darker side

      } else if (x < width / 2) {

        cg.pixels[index] = y - mouseX; //r

        cg.pixels[index + 1] = y - mouseX; //g

        cg.pixels[index + 2] = y - mouseX; //b

        cg.pixels[index + 3] = mouseX / 3;

​

        //lighter side

      } else if (x >= width / 2) {

        cg.pixels[index] = y + mouseX; //r

        cg.pixels[index + 1] = y + mouseX; //g

        cg.pixels[index + 2] = y + mouseX; //b

        cg.pixels[index + 3] = mouseX / 3;

​

      // } else if (x >= width) {

      //   fill(255, 0, 0);

      //   ellipse(mirrorLineW, mirrorLineH, 150, 190);

  }

}

}

​

cg.updatePixels();

​

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

​

personSpace();

​

​

}

​

//put your face in the ellipse

​

function personSpace() {

​

  let mirrorLineW = width / 2;

  let mirrorLineH = height / 2;

  noFill();

  ellipse(mirrorLineW, mirrorLineH, 150, 190);

​

}

​

​

​

//pseudoCode

​

// createCapture()

​

// personSpace()

//   draw ellipse

​

// draw ()

​

// for x -> width

// for y -> height

//   if left space

//     darken pixels

//   else if right space

//     lighten pixels

​

// change array of pixels