FRI | Machine Learning with ml5.js

<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

// Open up your console - if everything loaded properly you should see the version number
// corresponding to the latest version of ml5 printed to the console and in the p5.js canvas.
console.log("ml5 version:", ml5.version);

function setup() {
  createCanvas(640, 480);
}

function draw() {
  background(200);
}

// Open up your console - if everything loaded properly you should see the version number
// corresponding to the latest version of ml5 printed to the console and in the p5.js canvas.
console.log("ml5 version:", ml5.version);

let cam;

function setup() {
  createCanvas(640, 480);
  cam = createCapture(VIDEO, videoLoaded);
  cam.hide();
}

function draw() {
  background(200);
  image(cam, 0, 0);
}

function videoLoaded() {
  // resize the canvas to be the same size as you camera resolution
  resizeCanvas(cam.width, cam.height);
}

/*

MORE INFO

https://w3c.github.io/mediacapture-main/getusermedia.html#dom-constraindouble
https://www.folkstalk.com/tech/how-to-force-a-16-9-ratio-with-getusermedia-on-all-devices-solution/
https://calculateaspectratio.com/16-9-calculator

*/

let video; // or cam

const cameraWidth = 960;
const cameraHeight = 540;

function setup() {
  // canvas and other p5 functions HERE

  const constraints = {
    video: { width: cameraWidth, height: cameraHeight, facingMode: "user" },
  };
  // Dont remove or change anything from the function below. This is what you need to set any ratio
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => (video.srcObject = stream))
    .then(() => new Promise((resolve) => (video.onloadedmetadata = resolve)))
    .then(() => log(video.videoWidth + "x" + video.videoHeight))
    .catch((e) => {});

  // Shows video
  video = createCapture(constraints);
  // video.hide()
}

// Open up your console - if everything loaded properly you should see the version number
// corresponding to the latest version of ml5 printed to the console and in the p5.js canvas.
console.log("ml5 version:", ml5.version);

let cam;
let posenet;
// create an empty array to store the data from the posenet tracking
let poses = [];

function setup() {
  createCanvas(640, 480);
  cam = createCapture(VIDEO, videoLoaded);
  cam.hide();

  // Create a new poseNet method with a single detection
  // modelReady function is called when the model has been loaded
  poseNet = ml5.poseNet(cam, modelReady);

  // This sets up an event that fills the global variable "poses"
  // with an array every time new poses are detected
  poseNet.on("pose", poseResults);
}

function draw() {
  background(200);
  image(cam, 0, 0);
}

function videoLoaded() {
  // resize the canvas to be the same size as you camera resolution
  resizeCanvas(cam.width, cam.height);
}

function modelReady() {
  console.log("model loaded!");
}

function poseResults(results) {
  poses = results;
}

function mousePressed() {
  console.log(poses);
}

// Open up your console - if everything loaded properly you should see the version number
// corresponding to the latest version of ml5 printed to the console and in the p5.js canvas.
console.log("ml5 version:", ml5.version);

let cam;
let posenet;
// create an empty array to store the data from the posenet tracking
let poses = [];

function setup() {
  createCanvas(640, 480);
  cam = createCapture(VIDEO, videoLoaded);
  cam.hide();

  // Create a new poseNet method with a single detection
  // modelReady function is called when the model has been loaded
  poseNet = ml5.poseNet(cam, modelReady);

  // This sets up an event that fills the global variable "poses"
  // with an array every time new poses are detected
  poseNet.on("pose", poseResults);
}

function draw() {
  background(200);
  image(cam, 0, 0);

  // check that there is at least one person
  if (poses.length > 0) {
    // get the first pose (person) in the array
    let person = poses[0].pose;
    fill(255);
    noStroke();
    // loop through all of the keypoints in the pose
    for (let i = 0; i < person.keypoints.length; i++) {
      let x = person.keypoints[i].position.x;
      let y = person.keypoints[i].position.y;
      circle(x, y, 10);
    }
  }
}

function videoLoaded() {
  // resize the canvas to be the same size as you camera resolution
  resizeCanvas(cam.width, cam.height);
}

function modelReady() {
  console.log("model loaded!");
}

function poseResults(results) {
  poses = results;
}

function mousePressed() {
  // print the poses in the console when the mouse is pressed
  console.log(poses);
}

// Open up your console - if everything loaded properly you should see the version number
// corresponding to the latest version of ml5 printed to the console and in the p5.js canvas.
console.log("ml5 version:", ml5.version);

let cam;
let posenet;
// create an empty array to store the data from the posenet tracking
let poses = [];
let noseEmoji = "👃🏻";
let eyeEmoji = "👁️";

function setup() {
  createCanvas(640, 480);
  cam = createCapture(VIDEO, videoLoaded);
  cam.hide();

  // Create a new poseNet method with a single detection
  // modelReady function is called when the model has been loaded
  poseNet = ml5.poseNet(cam, modelReady);

  // This sets up an event that fills the global variable "poses"
  // with an array every time new poses are detected
  poseNet.on("pose", poseResults);
}

function draw() {
  background(200);
  image(cam, 0, 0);

  // check that there is at least one person
  if (poses.length > 0) {
    // get the first pose (person) in the array
    let person = poses[0].pose;
    fill(255);
    noStroke();
    // loop through all of the keypoints in the pose
    for (let i = 0; i < person.keypoints.length; i++) {
      let x = person.keypoints[i].position.x;
      let y = person.keypoints[i].position.y;
      circle(x, y, 10);
    }

    // set the text size and alignment for drawing the emojis
    textAlign(CENTER, CENTER);
    textSize(50);

    // get the nose point and draw the nose emoji in that location
    let nosePoint = person.nose;
    text(noseEmoji, nosePoint.x, nosePoint.y);

    // get the eye points
    let leftEyePoint = person.leftEye;
    let rightEyePoint = person.rightEye;
    text(eyeEmoji, leftEyePoint.x, leftEyePoint.y);
    text(eyeEmoji, rightEyePoint.x, rightEyePoint.y);
  }
}

function videoLoaded() {
  // resize the canvas to be the same size as you camera resolution
  resizeCanvas(cam.width, cam.height);
}

function modelReady() {
  console.log("model loaded!");
}

function poseResults(results) {
  poses = results;
}

function mousePressed() {
  // print the poses in the console when the mouse is pressed
  console.log(poses);
}