Read Open Sourcing the Origin Stories: The ml5.js Model and Data Provenance Project by Ellen Nickles and reflect on the following questions:

Ellen Nickles' research raises important questions about the diversity and biases in the datasets used to train machine learning models, particularly regarding the backgrounds of those who collected and annotated the data. Adding more transparency about who selected the datasets, why they were chosen, and the ethical considerations behind them would make a model's biography more complete. These questions focus on understanding the diversity and potential biases within the datasets and the motivations behind dataset selection. Knowing the model's origin helps me make smarter, ethical choices in my creative work, allowing me to anticipate biases and use the model more thoughtfully and intentionally in my creative projects.

Pick one of the models above (BodyPose or BodySegmentation), following the examples above and ml5.js documentation, and experiment with controlling elements of a p5.js sketch (color, geometry, sound, text, etc) with the output of the model.

I started with these three drawings that brought back memories from my childhood, and I want to turn them into an interactive game where you can draw using your nose.

let dots = [];
let randoImg;

function preload() {
  let dot1 = loadImage('dots1.jpeg');
  let dot2 = loadImage('dots2.jpeg');
  let dot3 = loadImage('dots3.jpeg');
  dots = [dot1, dot2, dot3];
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  randoImg = random(dots); 
}

At first, it was hard to track the position of my nose because there was no video display, making it difficult to draw accurately. I also noticed that the direction of my nose didn't align properly with the cursor. So, I made some adjustments, and while the final result was much better, it’s still a bit challenging to control.

https://editor.p5js.org/yh4069/sketches/Fi-oMFU_Q

let dots = [];
let bodyPose;
let video;
let poseResults;
let noseHistory = [];
let diameter = 20;
let randoImg;

function preload() {
  let dot1 = loadImage('dots1.jpeg');
  let dot2 = loadImage('dots2.jpeg');
  let dot3 = loadImage('dots3.jpeg');
  dots = [dot1, dot2, dot3];
  
  bodyPose = ml5.bodyPose();
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  video = createCapture(VIDEO);
  video.size(windowWidth, windowHeight);
  video.hide(); 
  bodyPose.detectStart(video, gotPose);
  randoImg = random(dots); 
}

function gotPose(results) {
  if (results && results[0]) {
    poseResults = results;
    const newNose = results[0].nose;
    let noseX = map(newNose.x, 0, video.width, width, 0); 
    let noseY = map(newNose.y, 0, video.height, 0, height); 
    
    noseHistory.push({ x: noseX, y: noseY });
    if (noseHistory.length > 500) {
      noseHistory.shift();
    }
  }
}

function draw() {
  push(); 
  translate(width, 0); 
  scale(-1, 1); 
  image(video, 0, 0, width, height); 
  pop(); 
  tint(255, 150); 
  imageMode(CENTER);
  image(randoImg, width / 2, height / 2, width, height); 

  noTint();
  
  fill(255, 0, 0);
  noStroke();
  for (let i = 0; i < noseHistory.length; i++) {
    circle(noseHistory[i].x, noseHistory[i].y, diameter);
  }
}