warme & kalte Farben - OpenProcessing

mySketch.js
style.css
index.html
xxxxxxxxxx
 
// First train image model:
// https://teachablemachine.withgoogle.com/train/image
​
 
// Classifier Variable 
let classifier;
// Your Model URL from Teachable Machine
let imageModelURL = 'https://teachablemachine.withgoogle.com/models/HYWuZCK0B/';
​
// Video
let video;
// To store the classification
let label = "";
let confidence;
​
let hot_before = false; 
let cold_before = false;
let start_millis = 0;
​
// Load the model first
function preload() {
  classifier = ml5.imageClassifier(imageModelURL + 'model.json');
}
​
function setup() {
  createCanvas(640, 480);
  // Create the video
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide();
  
  // Set Google Font
  textFont("Roboto Mono");
​
  // Start classifying
  classifyVideo();
}
​
function draw() {
  background(0);
  // Draw the video
  image(video, 0, 0);
  
  
  //tint(255, 0, 100);
  //image(video, 0, 0);
  //noTint();
​
  textSize(100);
  textAlign(CENTER);
  
  let delta=millis()-start_millis;
  
  if (label == "Warme Farben" && confidence >= 0.85 && hot_before){
    textFont("Impact");
    fill(255,85,17);
    text("SO HOT!🔥", width/2, height/2);   
  
    let r=50;
    let g=9.81 //Fallbeschleunigung
    let y0=0 //Starthöhe in px
​
    for (let posX = 1; posX <= 50; posX += 1) {
    let amplitude=map(sin(delta/10000*posX/2),-1,1,0,1);
    let y=height-r/2-(height-r)*amplitude*sqrt(sin(delta/1000+posX*0.5)*sin(delta/1000+posX*0.5));
    let x=map(sin(pow(-1,posX)*delta/10000*sqrt(posX)),-1,1,r/2,width-r/2)-posX*100;
    translate(posX*100+x,y);
    textSize(25);
    text("🔥",0,0);
    translate(-posX*100-x,-y);
    }
  } else if (label == "Warme Farben" && confidence >=0.85 && hot_before==false){
    hot_before=true;
    start_millis=millis();
  } else if (label == "Kalte Farben" && confidence >= 0.85 && cold_before){
    textFont("Baskerville");
    fill(17,230,255);
    text("SO COOL!❄️", width/2, height/2);
    
    let r=50;
    let g=0.1 //Fallbeschleunigung
    
    for (let i = 1; i <= random(50,300); i += 1) {
    let y=-width*2/3+y0[i]+1/2*g*delta^2;
    if (y>width*2/3){
      y=y-width;
    }
    let x=sin(delta/1000+i)/100*width+x0[i];
    translate(x,y);
    textSize(25);
    text("❄️",0,0);
    translate(-x,-y);     
    
    }   
  } else if (label == "Kalte Farben" && confidence >= 0.85 && cold_before==false){
    cold_before=true;
    start_millis=millis();
    
    y0=[]
    for (let i=1; i<=300;i+=1){
      y0[i]=random(height)
    }
    x0=[]
    for (let i=1; i<=300; i+=1){
      x0[i]=random(width)
    }
    
  } else {
    hot_before=false;
    cold_before=false;
  }
  
  // Draw the debug label
  fill(255);
  textSize(16);
  textAlign(CENTER);
  text(label + "\n" + confidence, width / 2, height - 20);
}
​
// Get a prediction for the current video frame
function classifyVideo() {
  let flippedVideo = ml5.flipImage(video)
  classifier.classify(flippedVideo, gotResult);
  flippedVideo.remove();
}
​
// 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;
  confidence = nf(results[0].confidence, 0, 2);
  // Classifiy again!
  classifyVideo();
}