let step = 10;

let sW = 4;

​

function setup() {

  createCanvas(windowWidth, windowWidth*.75);

  cam = createCapture(VIDEO); // HTML video tag created

  cam.hide(); //HTML video tag hidden;

}

function draw() {

  cam.loadPixels();

​

  let backgroundX = frameCount % height;

  let randomPix = (backgroundX + cam.height * (cam.height)) * 4;

​

  background(cam.pixels[randomPix], cam.pixels[randomPix + 1], cam.pixels[randomPix + 2]);

​

  background(255);

​

​

  for (let y = 0; y < cam.height; y += step) { // for every row

    for (let x = 0; x < cam.width; x += step) { // go through every column

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

​

      let r = cam.pixels[index];

      let g = cam.pixels[index + 1];

      let b = cam.pixels[index + 2];

      let a = cam.pixels[index + 3];

      let mappedX = Math.floor(map(x, cam.width, 0, 0, width));

      let mappedY = map(y, 0, cam.height, 0, height);

​

      let newC = 50;

      for (let i = 0; i < 255; i+=newC) {

        if (r<i && r> i-newC){

          r = i-newC/2;

        }

        if (g<i && g> i-newC){

          g = i-newC/2;

        }

        if (b<i && b> i-newC){

          b = i-newC/2;

        }

      }

      stroke(r, g, b);

      strokeWeight(width/150);

      strokeJoin(ROUND);

​

      push();

​

      translate(mappedX, mappedY);

      let stitch = new Stitch(0, 0);

      stitch.place();

      pop();

    }

  }

  noFill();

  stroke(250);

  strokeWeight(height/2);

  ellipse(width/2,height/2,height*1.25);

  stroke(150,100,150);

  strokeWeight(height/30);

  ellipse(width/2,height/2,height*.75);

  stroke(150,150,150);

  line(width*17/40,height/12,width*18/40,height/12);

  strokeWeight(sW*1.6);

  line(width*17/40,height/12,width*22/40,height/12);

​

  stroke(100,50,100);

  line(width*19/40,height/15,width*19/40,height*7/50);

  line(width*21/40,height/15,width*21/40,height*7/50);

​

}

​

class Stitch {

  constructor(x, y, r = step) { //I'm using the default value for d here

    this.x = x; // x position

    this.y = y; // y position

    this.r = r;

  }

  place() {

    line(this.x+sW/2, this.y+sW/2, this.x+this.r-sW/2,this.y+this.r-sW/2);

    line(this.x+this.r-sW/2, this.y+sW/2, this.x+sW/2,this.y+this.r-sW/2);

  }

}

​

function mousePressed() {

  saveCanvas('self_portrait.jpg');

}

​

​

function windowResized() {

  resizeCanvas(windowWidth, windowWidth*.75);

​

}