test - OpenProcessing

mySketch
faceTracker
xxxxxxxxxx
 
// Tracks points on a single face in the webcam. 
// (The microphone is also enabled for easy access.) 
// Uses p5.js v.1.11.3, and ml5 v.1.2.1 (12/2024):
// Documentation: https://docs.ml5js.org/#/reference/facemesh
//
// Make sure that the following URL is included 
// in the LIBRARIES field of the SKETCH tab:
// https://unpkg.com/ml5@1/dist/ml5.js
​
let myWebcam;
let myFaceTracker;
let faces = [];
let theFace = null;
let trackerOptions = { flipHorizontal: true };
​
// Here's a selection of 13 important face landmarks. 
// See FACE_LANDMARKS_33 in faceTracker tab if you want more. 
let nosePt, eyeLeftPt, eyeRightPt, browLeftPt, browRightPt;
let mouthLeftPt, mouthRightPt, mouthTopPt, mouthBottomPt;
let chinPt, foreheadPt, faceLeftPt, faceRightPt;
​
​
function setup() {
  print("setup");
  createCanvas(640, 480);
  initializeWebcamAndFaceTracker();
  colors = random(colorPalette);
}
​
​
//----------------------------
function preload(){
  preloadTracker();
  print("Preload");
}
​
​
//----------------------------
function drawnose(){
  if (theFace != null){
    noStroke(); 
    fill('black');
    circle(nosePt.x, nosePt.y, 10);
    fill('black');
    circle(nosePt.x+10, nosePt.y-10, 10);
  }
}
​
//----------------------------
function drawNamedFaceLandmarks(){
  // Always check to see that the face exists, first!
  if (theFace != null){
    
    noStroke(); 
    fill('black');
    let Diam = 5; 
    circle(nosePt.x, nosePt.y, Diam);
    circle(eyeLeftPt.x, eyeLeftPt.y, Diam);
    circle(eyeRightPt.x, eyeRightPt.y, Diam);
    circle(mouthLeftPt.x, mouthLeftPt.y, Diam);
    circle(mouthRightPt.x, mouthRightPt.y, Diam);
    circle(mouthBottomPt.x, mouthBottomPt.y, Diam);
    circle(mouthTopPt.x, mouthTopPt.y, Diam);
    circle(foreheadPt.x, foreheadPt.y, Diam);
    circle(chinPt.x, chinPt.y, Diam);
    circle(faceLeftPt.x, faceLeftPt.y, Diam);
    circle(faceRightPt.x, faceRightPt.y, Diam);
    circle(browLeftPt.x, browLeftPt.y, Diam);
    circle(browRightPt.x, browRightPt.y, Diam);
    
    function drawline(){
      line(eyeLeftPt, eyeLeftPt)
    }
  }
}
let colors;
let colorPalette = [
  ['#002FA7', '#DA291C', '#FFD700', '#000000', '#FF8C00', '#FFFFFF'],
  ['#A52A2A', '#FF4500', '#FFD700', '#4682B4', '#708090', '#FFFFFF'],
  ['#6A0DAD', '#DC143C', '#32CD32', '#FFD700', '#000000', '#FFFFFF']
];
let currentVariation = 0;
let strokeWeights = [2, 4, 6, 8];
let hairStyles = ['spiky', 'curly', 'bald', 'hat', 'beret'];
let currentHairStyle = 0;
let frameStyles = ['simple', 'abstract', 'bold', 'cubist'];
let currentFrameStyle = 0;
​
​
​
function draw() {
  background('#F0EAD6'); // Picasso-like background
  drawWebcamVideo(60);
  if (theFace != null) {
    drawPicassoFace();
    drawHairOrHat();
    drawPicassoFrame();
  }
}
​
function drawPicassoFace() {
  noFill();
  stroke(colors[0]);
  strokeWeight(random(strokeWeights));
​
  let features = [eyeLeftPt, eyeRightPt, browLeftPt, browRightPt, nosePt, mouthTopPt, mouthBottomPt, faceLeftPt, faceRightPt, chinPt];
  for (let i = 0; i < features.length - 1; i++) {
    let pt1 = features[i];
    let pt2 = features[i + 1];
    line(pt1.x, pt1.y, pt2.x, pt2.y);
  }
  
  fill(colors[1]);
  ellipse(nosePt.x, nosePt.y, 20 + currentVariation * 5, 30 - currentVariation * 5);
  
  // Expressive Eyes
  strokeWeight(random(strokeWeights));
  if (currentVariation === 0) {
    fill(colors[2]);
    ellipse(eyeLeftPt.x, eyeLeftPt.y, 40, 15);
    ellipse(eyeRightPt.x, eyeRightPt.y, 40, 15);
  } else if (currentVariation === 1) {
    fill(colors[3]);
    triangle(eyeLeftPt.x - 15, eyeLeftPt.y, eyeLeftPt.x + 15, eyeLeftPt.y - 15, eyeLeftPt.x + 15, eyeLeftPt.y + 15);
    triangle(eyeRightPt.x - 15, eyeRightPt.y, eyeRightPt.x + 15, eyeRightPt.y - 15, eyeRightPt.x + 15, eyeRightPt.y + 15);
  } else {
    fill(colors[4]);
    rect(eyeLeftPt.x - 15, eyeLeftPt.y - 5, 30, 20);
    rect(eyeRightPt.x - 15, eyeRightPt.y - 5, 30, 20);
  }
  
  // Expressive Mouth
  strokeWeight(random(strokeWeights));
  stroke(colors[2]);
  if (currentVariation === 0) {
    arc(mouthLeftPt.x, mouthBottomPt.y, mouthRightPt.x - mouthLeftPt.x, 30, 0, PI);
  } else if (currentVariation === 1) {
    beginShape();
    vertex(mouthLeftPt.x, mouthTopPt.y);
    vertex(mouthRightPt.x, mouthBottomPt.y);
    vertex(mouthLeftPt.x + 10, mouthBottomPt.y + 10);
    endShape(CLOSE);
  } else {
    arc(mouthLeftPt.x, mouthTopPt.y, mouthRightPt.x - mouthLeftPt.x, 30, PI, 0);
  }
}
​
function drawHairOrHat() {
  stroke(colors[5]);
  strokeWeight(random(strokeWeights));
  noFill();
  
  if (hairStyles[currentHairStyle] === 'spiky') {
    for (let i = 0; i < 5; i++) {
      line(foreheadPt.x - 20 + i * 10, foreheadPt.y - 20, foreheadPt.x - 10 + i * 10, foreheadPt.y - 40);
    }
  } else if (hairStyles[currentHairStyle] === 'curly') {
    for (let i = 0; i < 4; i++) {
      arc(foreheadPt.x - 20 + i * 15, foreheadPt.y - 20, 15, 15, PI, 0);
    }
  } else if (hairStyles[currentHairStyle] === 'hat') {
    fill(colors[3]);
    rect(foreheadPt.x - 30, foreheadPt.y - 40, 60, 20);
  } else if (hairStyles[currentHairStyle] === 'beret') {
    fill(colors[2]);
    ellipse(foreheadPt.x, foreheadPt.y - 30, 50, 25);
  }
}
​
function drawPicassoFrame() {
  stroke(colors[5]);
  strokeWeight(random(strokeWeights));
  noFill();
  
  if (frameStyles[currentFrameStyle] === 'simple') {
    rect(10, 10, width - 20, height - 20);
  } else if (frameStyles[currentFrameStyle] === 'abstract') {
    for (let i = 0; i < 4; i++) {
      line(random(10, width - 10), 10, random(10, width - 10), height - 10);
    }
  } else if (frameStyles[currentFrameStyle] === 'bold') {
    strokeWeight(10);
    rect(5, 5, width - 10, height - 10);
  } else if (frameStyles[currentFrameStyle] === 'cubist') {
    for (let i = 0; i < 6; i++) {
      line(random(10, width - 10), random(10, height - 10), random(10, width - 10), random(10, height - 10));
    }
  }
}
​
function mousePressed() {
  colors = random(colorPalette);
  currentVariation = (currentVariation + 1) % 3;
  currentHairStyle = (currentHairStyle + 1) % hairStyles.length;
  currentFrameStyle = (currentFrameStyle + 1) % frameStyles.length;
}
​