// Coding Challenge

// The Coding Train / Daniel Shiffman

// https://thecodingtrain.com/CodingChallenges/157-zoom-annotations.html

// https://youtu.be/

​

// Basic: https://editor.p5js.org/codingtrain/sketches/EaioB_iJs

// Final: https://editor.p5js.org/codingtrain/sketches/ELpl_VAqs

​

​

//Para este codigo cambié Todas la palabra "question" por "Hola",  "No" y "Nada", y subí a los sketch files imagenes personalizadas para usar.

​

​

//2 Las anotaciones que empiecen con el numero 2 son anotaciones hechas despues de haber creado el modelo basado en el video de "The coding Train"; son notas indicativas de lo que voy a hacer para mejorar el sketch mediante audio

​

//2 El codigo para randomizar el audio es tomado de este sketch: https://editor.p5js.org/jeremycricchus@gmail.com/sketches/QXyTvVePV

​

//2

let song = [];

let pick;

let pickone;

let times;

​

​

// Classifier Variable

let classifier;

// Model URL

let imageModelURL = 'https://teachablemachine.withgoogle.com/models/DfLFyleKt/';

​

// Video

let video;

let flippedVideo;

// To store the classification

let label = '';

​

let Hola;

let HolaFade = 0;

​

//El codigo solo viene preparado para 1 estado, agrego otras 2 variantes 

​

let No;

let NoFade = 0;

​

let Nada;

let NadaFade = 0;

​

// Load the model first

function preload() {

  classifier = ml5.imageClassifier(imageModelURL + 'model.json');

  Hola = loadImage('Hola.png');

  No = loadImage('No.png');

  Nada = loadImage('Nada.jpg');

}

​

function setup() {

  createCanvas(1280, 720);

  // Create the video

  video = createCapture(VIDEO);

  video.size(width, height);  

  //Cambié el video size para que sea del mismo tamaño que el canvas

  // video.hide();

​

  flippedVideo = ml5.flipImage(video);

  // Start classifying

  classifyVideo();

  //2 Añadí varios audios más que en el ejemplo original

  song[0]=createAudio("Hello1.mp3");

  song[1]=createAudio("Hello2.mp3");

  song[2]=createAudio("Nada1.mp3");

  song[3]=createAudio("Nada2.mp3");

  song[4]=createAudio("No1.mp3");

  song[5]=createAudio("No2.mp3");

  song[6]=createAudio("No3.mp3");

  play();

}

​

function draw() {

  background(255,255,255);

  //Cambio el bg a blanco para que se vea mejor las imagenes

  imageMode(CORNER);

​

  // Draw the video

  // tint(255);

  // image(flippedVideo, 0, 0);

​

    //Personalizo el codigo a mi modelo

  if (label == 'Hola') {

    HolaFade = 255;

  }

  if (HolaFade > 0) {

    tint(255, HolaFade);

    image(Hola, 0, 0);

    HolaFade -= 10;

  }

  //Añado estados "Nada" y "No" para mayor variedad

   if (label == 'Nada') {

    NadaFade = 255;

  }

  if (NadaFade > 0) {

    tint(255, NadaFade);

    image(Nada, 0, 0);

    NadaFade -= 10;

  }

   if (label == 'No') {

    NoFade = 255;

  }

  if (NoFade > 0) {

    tint(255, NoFade);

    image(No, 0, 0);

    NoFade -= 10;

  }

  }

​

​

  //2

  function play(){

  song[0].stop();

  song[1].stop();

  song[2].stop();

  song[3].stop();

  song[4].stop();

  song[5].stop();

  song[6].stop();

  pick=random(0,5.9);

  times=random(5000,20000);

  pickone=floor(pick);

  song[pickone].play();

  setTimeout(play,times);

}

  //2 Me di cuenta que debia cambiar el numero dentro de la funcion pick=random(0,5.9) originalmente era (0, 2.9)

  //Tras testear me doy cuenta de que se superponen por momentos las imagenes, pero me hace gracia como se ve asi que lo dejaré así

​

​

// Get a prediction for the current video frame

function classifyVideo() {

  flippedVideo = ml5.flipImage(video);

  classifier.classify(flippedVideo, gotResult);

}

​

// When we get a result

function gotResult(error, results) {

  // If there is an error

  if (error) {

    console.error(error);

    return;

  }

  // The results are in an array ordered by confidence.

  // console.log(results[0]);

  label = results[0].label;

  // Classifiy again!

  classifyVideo();

}

​