Spiegel_final_gesp

let video, flippedVideo;

let movie;

let poseNet;

let poses = [];

let bodypix;

let segmentation;

​

var audio_bm;

let gif_bm;

let start;

let start_2;

let back;

let back_2;

let info_bm;

let sc;

let mode = 0;

​

const options = {

  outputStride: 8, // 8, 16, or 32, default is 16

  segmentationThreshold: 0.5, // 0 - 1, defaults to 0.5

};

​

function preload() {

  bodypix = ml5.bodyPix(options);

​

  audio_bm = loadSound("audio_blaumeise.mp3"); //Gezwitscher Blaumeise

  gif_bm = loadImage("Blaumeise_Schulter.gif"); //GIF Flug auf Schulter

  info_bm = loadImage("merkmale_blaumeise.gif"); //GIF Blaumeise mit Merkmalen

  back = loadImage("back_styleguide_all_blur.jpg"); //Background

  back_2 = loadImage("baum_baumstumpf.png"); //PNG mit Baum & Baumstamm

}

​

function setup() {

  //audio_bm.play();

  //audio_bm.loop();

  createCanvas(1080, 1080);

  movie = createVideo("video_start_kompr.mp4");

  movie.hide();

  movie.loop();

  //video = createCapture(VIDEO);

  video = createCapture(VIDEO, videoReady);

  //video.size(1280, 720);

  let constraints = {

    video: {

      mandatory: {

        minWidth: 780,

        minHeight: 220,

        maxWidth: 780,

        maxHeight: 220

      }

    },

    audio: false

  };

​

  //video = createCapture(constraints, videoReady);

  video.hide();

  //pixelDensity(1);

​

  sc = 1080 / video.height;

​

  flippedVideo = ml5.flipImage(video);

  poseNet = ml5.poseNet(video, {flipHorizontal: true }, modelLoaded);

​

  poseNet.on("pose", function(results) {

    poses = results;

  });

​

  // Delay für letzten GIF Frame

  gif_bm.delay(10000, gif_bm.numFrames() - 1);

}

​

function draw() {

  background(0);

  imageMode(CORNER);

  image(back, 0, 0);

​

  // Draw all joints

  drawKeypoints();

​

​

  if (segmentation) {

    image(segmentation.backgroundMask, 0, 0, 1440, 1080);

  }

​

​

  if (poses.length > 0) {

    let pose = poses[0].pose;

​

    let distance = dist(pose.rightShoulder.x, pose.rightShoulder.y, pose.leftWrist.x, pose.leftWrist.y);

    fill(255);

    //text(distance, 520, 20);

​

    // Hand nicht an Schulter

    if (distance < 150) {

      mode = 1;

      setTimeout(function() {

        mode = 0;

      }, 5000); // Nach 5 Sekunden zurücksetzen

    }

​

    // Vogel Schulter Intro

    if (mode == 0) {

      //ellipse(pose.rightShoulder.x * sc - 200, pose.rightShoulder.y * sc - 50, 20, 20);

​

      imageMode(CENTER);

      image(gif_bm, pose.rightShoulder.x * sc + 50, pose.rightShoulder.y * sc + 140, 1080, 1080);

      image(back_2, 540, 540);

    }

    // Hand bei Schulter (Reset nach x Sekunden)

    else if (mode == 1) {

      // ... Information Overlay

      //imageMode(CENTER);

      fill(255, 0, 100);

      image(back_2, 0, 0);

      image(info_bm, 0, 0);

    }

  } else {

    // Keine Person, Hintergrundanimation

    image(movie, 0, 0);

  }

​

  // Baumstamm Vordergrund

  //image(back_2, 540, 540);

}

​

function mousePressed() {

​

}

​

function modelLoaded() {

  print("Model Loaded");

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  // Loop through all the poses detected

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

    // For each pose detected, loop through all the keypoints

    const pose = poses[i].pose;

    for (let j = 0; j < pose.keypoints.length; j += 1) {

      // A keypoint is an object describing a body part (like rightArm or leftShoulder)

      const keypoint = pose.keypoints[j];

      // Only draw an ellipse is the pose probability is bigger than 0.2

      if (keypoint.score > 0.2) {

        noFill();

        stroke(200);

        ellipse(keypoint.position.x * sc, keypoint.position.y * sc, 5, 5);

      }

    }

  }

}

​

function videoReady() {

  print("Video ready:");

  print(video.width, video.height);

  sc = 1080 / video.height;

  flippedVideo = ml5.flipImage(video);

  bodypix.segment(flippedVideo, gotSegmentations);

}

​

function gotSegmentations(error, result) {

  segmentation = result;

  flippedVideo = ml5.flipImage(video);

  bodypix.segment(flippedVideo, gotSegmentations);

}