let video;

let memeBtn;

let memeImage;

​

​

let url = "https://api.imgflip.com/get_memes";

​

// array for memes 

let imgs = [];

​

​

function gotData(data) {

  // get data 

  let memes = data.data.memes;

​

  // load each image 

  // https://p5js.org/reference/#/p5/loadImage

  for (let j = 0; j < memes.length; j++) {

    imgs[j] = loadImage(memes[j].url);

    // console.log(imgs[2]);

  }

}

​

function preload() {

  loadJSON(url, gotData);

}

​

function setup() {

  createCanvas(854, 480);

  imageMode(CENTER);

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide();

​

  // poseNet method

  const poseNet = ml5.poseNet(video, modelLoaded);

​

  // Listen to new 'pose' events

  poseNet.on('pose', (results) => gotPose(results));

​

  memeBtn = createButton('new meme');

  memeBtn.mousePressed(newMeme);

​

  memeImage = imgs[1];

}

​

​

function draw() {

  background(255);

  // image(imgs[2], 350, 50, 50, 50);

​

  // draw all the images every 50 pixels 

  // for (let j = 0; j < 5; j++) {

  //   image(imgs[j], j * 50, 0, 50, 50);

  // }

​

​

  if (poses.length === 0) {

    console.log('waiting for pose');

    return;

  }

​

  // debugger; // what is debugger?  Is that just part of ml5?

​

  // console.log(imgs.length);

​

  // if (frameCount % 240 == 0){

  //   console.log("its been " + millis() + " milliseconds");

  //   memeImage = imgs[floor(random(1,10))];

​

  // } 

  const nose = poses[0].pose.nose;

​

  // image(imgs[2], nose.x, nose.y, 100, 100);

  image(memeImage, nose.x, nose.y, 150, 150);

  //  image(imgs[10], 500, 10, 100, 100);

​

  // fill("pink");

  // ellipse(nose.x, nose.y, 100);

​

  drawKeypoints();

  drawSkeleton();

  drawWrists();

  topMost();

​

  push();

  scale(0.25, 0.25)

  image(video, 350, 200, width, height);

  pop();

​

  // image(imgs[10], nose.x, nose.y, 100, 100);

​

​

}

​

function gotPose(results) {

  poses = results;

​

}

​

function modelLoaded() {

  console.log('Model Loaded!');

}

​

​

function drawKeypoints() {

  const keypoints = poses[0].pose.keypoints;

​

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

    const keypoint = keypoints[i];

​

    noStroke();

    fill("red");

    ellipse(keypoint.position.x, keypoint.position.y, 15);

  }

​

}

​

function drawSkeleton() {

  const bones = poses[0].skeleton;

​

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

​

    const jointA = bones[i][0].position;

    const jointB = bones[i][1].position;

​

    strokeWeight(5);

    stroke("green");

    line(jointA.x, jointA.y, jointB.x, jointB.y);

​

    poses[0].skeleton[0][0].position.x

    poses[0].skeleton[0][1].position.x

  }

}

​

function drawWrists() {

  const rightHand = poses[0].pose.rightWrist;

  const leftHand = poses[0].pose.leftWrist;

​

  noStroke();

  fill('blue');

  rect(rightHand.x, rightHand.y, 20);

​

  fill('orange');

  rect(leftHand.x, leftHand.y, 20);

​

}

​

function topMost() {

  //find topmost keypoint

  let topMost = {};

  topMost.y = height;

​

  const keypoints = poses[0].pose.keypoints;

​

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

    const keypoint = keypoints[i].position;

    if (keypoint.y < topMost.y) {

      topMost.x = keypoint.x;

      topMost.y = keypoint.y;

​

    }

​

​

​

  }

​

  fill("black");

  ellipse(topMost.x, topMost.y, 20);

​

}

​

​

let newMeme = () => {

    // memeImage = imgs[random(0,100)];

    memeImage = imgs[floor(random(1, 100))];

    console.log("memeImage = " + memeImage);

}

​

​

​