PCD Porto 2023

// p5.disableFriendlyErrors = true;

// noprotect

var faceapi;

var video;

var detection;

var button;

​

var parts = [];

var img;

var count = false;

var first_second;

var mouseEnable = true;

var photo_error = 0;

​

class Part {

  constructor(image, position) {

    this.id = int(random(0, 999999));

    let contrast = 80;

    let factor = (259 * (contrast + 255)) / (255 * (259 - contrast));

​

    this.img = image;

    this.img.loadPixels();

​

    for (let i = 0; i < 4 * (this.img.width * this.img.height); i += 4) {

      let x = (i/4)%this.img.width;

      let y = Math.floor((i/4)/this.img.width);

​

      if (y%1.5!=0){

        let contrast = 100;

        let factor = (259 * (contrast + 255)) / (255 * (259 - contrast));

        // let bright = (0.9 * this.img.pixels[i]) + (0.7152 * this.img.pixels[i + 1] ) + (0.0722 * this.img.pixels[i + 2]);

        let bright = (constrain(factor*(this.img.pixels[i]-128) + 128, 0, 255) + constrain(factor*(this.img.pixels[i+1]-128) + 128, 0, 255) + constrain(factor*(this.img.pixels[i+2]-128) + 128, 0, 255));

        this.img.pixels[i] = bright;

        this.img.pixels[i + 1] = bright;

        this.img.pixels[i + 2] = bright;

      }else{

        this.img.pixels[i] = 0;

        this.img.pixels[i + 1] =0;

        this.img.pixels[i + 2] = 0;

      }

   }

    this.img.updatePixels();

    this.position = position;

    this.width = image.width;

    this.height = image.height;

    this.direction = createVector(random(-5, 5), random(-5, 5));

    this.direction.normalize();

    this.direction.mult(3);

    this.interval = setInterval(this.delete, 50000, this.id);

  }

  delete(id){

    if(parts.length > 4){

      for(let i=0;i<parts.length;i++){

        if(parts[i].id == id){

          parts.splice(i,1);

          return;

        }

      }

      clearInterval(this);

    }

  }

  update(){

    this.position = p5.Vector.add(this.position, this.direction);

    if ((this.position.x + this.width) > width || this.position.x < 0){

      this.direction.x *= -1;

    }

    if ((this.position.y + this.height) > height || this.position.y < 0){

      this.direction.y *= -1;

    }

  }

  draw(){

    image(this.img, this.position.x, this.position.y);

  }

}

​

// by default all options are set to true

const detection_options = {

    withLandmarks: true,

    withDescriptors: false,

}

​

​

function setup() {

    createCanvas(1440,880);//1920,1080);//1080, 720);

    // load up your video

    video = createCapture(VIDEO);

    video.size(width, height);

    video.hide(); // Hide the video element, and just show the canvas

    faceapi = ml5.faceApi(video, detection_options, modelReady)

    textAlign(RIGHT);

  background(0);

  strokeWeight(0.5);

  overAllTexture=createGraphics(1920,1080);

  overAllTexture.loadPixels();

  for(var i=0;i<1920+50;i++){

    for(var o=0;o<1080+50;o++){

      overAllTexture.set(i,o,color(100,noise(i/3,o/3,i*o/50)*random([0,50,100])));

    }

  }

  overAllTexture.updatePixels();

}

​

function draw(){

  background(10, 20)

  for(let i=0;i<parts.length;i++){

    parts[i].update();

    parts[i].draw();

  }

  push();

    blendMode(MULTIPLY);

    image(overAllTexture,0,0);

  pop();

  if (count){

    counter();

  }

  if (photo_error>0){

    fill(255); 

    textSize(30);

    textAlign(CENTER);

    text("Não foram detetadas caras.",width/2,height/2+50);

    photo_error--;

  }

}

​

function mousePressed(){

  if (mouseEnable){

    if(mouseButton === LEFT) {

      count = true;

      first_second = second();

      mouseEnable = false;

    }

    if(mouseButton === RIGHT) {

      let fs = fullscreen();

      fullscreen(!fs);

    }

    console.log("mouse enable");

  }else{

    console.log("mouse disable");

  }

}

​

​

function counter(){   

  fill(255); 

  textSize(100);

  background(24,200);

  var value = 3 - positive_modulo((second() - first_second), 60);

  if (value==0){

    takesnap();

    count = false;

    mouseEnable = true;

    textSize(80);

    textAlign(CENTER);

    text("📸",width/2,height/2);

  } else {

    textAlign(CENTER);

    text(value,width/2,height/2);

  }

}

​

function positive_modulo(i, n){

  return (i % n + n) % n;

}

​

function takesnap() {

  img = video.get(0, 0, width, height);

  faceapi.detectSingle(img, gotResults);

}

​

function modelReady() {

    // console.log('ready!')

    // console.log(faceapi)

    // faceapi.detect(gotResults)

}

​

function get_part(info, expand_w, expand_h){

  let x_pos = 0.0;

  let y_pos = 0.0;

  let min_x = 9999.0;

  let min_y = 9999.0;

  let max_x = -9999.0;

  let max_y = -9999.0;

  info.forEach(item => {

    x_pos += item._x;

    y_pos += item._y;

    if (min_x > item._x)

      min_x = item._x;

    if (min_y > item._y)

      min_y = item._y;

    if (max_x < item._x)

      max_x = item._x;

    if (max_y < item._y)

      max_y = item._y;

  });

​

  x_pos /= info.length;

  y_pos /= info.length;

  let w_box = (max_x - min_x) * expand_w;

  let h_box = (max_y - min_y) * expand_h;

​

  // console.log(x_pos, y_pos, w_box, h_box);

​

  let part_img = img.get(x_pos - (w_box/2), y_pos - (h_box/2), w_box, h_box);

  // image(part_img, width / 2, height / 2);

  return new Part(part_img , createVector(random(0, width-w_box), random(0, height-h_box)));

}

​

function gotResults(err, result) {

    if (err) {

      photo_error = 60;

       return;

    }

    detection = result;

​

    if (detection != undefined) {

          let left_eye_part = get_part(detection.parts.leftEye, 3, 4);

          let left_right_part = get_part(detection.parts.rightEye, 3, 4);

          let mouth_part = get_part(detection.parts.mouth, 1.5, 2);

          parts.push(left_eye_part, left_right_part, mouth_part);

    }

}