//Whistle in different pitches and particles bounces around in varying speeds!

​

//My Teachable Machine Model: 

const myModelURL = 'https://teachablemachine.withgoogle.com/models/EWkyx0Nmf/';

let myModel;

let myResults;

let MLText = "Welcome to Whistle Maniac!";

let particleWindowHeight;

let speedScale = 0;      //Speed scale of shape by whistle

let ParticleCnt = 100;   //Number of particles

let particles = [];      //Array of particles

​

//Preloads the model to myModel 

function preload() {

  myModel = ml5.soundClassifier(myModelURL + 'model.json', gotModel);

}

​

//Logs the model onto the console when loaded. 

function gotModel() {

  console.log(myModel);

}

​

//Creates a canvas, sets parameters and classifies the results of the model.

function setup() {

  createCanvas(700, 600);

  textSize(30);

  textAlign(CENTER);

  colorMode(HSB,100);

  noStroke();

  //Adds particles to the array

  for (let i = 0; i < ParticleCnt; i++) {

    append(particles, new Particle()); 

  }

  myModel.classify(gotResults);

}

​

//Displays the results

function gotResults(error, results) {

  //If an error has occured, it will print out in the console. 

  if (error) {

    console.error(error);

  }

  //If we have results it will print out the results onto the console and depending on the pitch of the whistle, the speed of the shape changes. 

  if (results) {

    // console.log(results);

    myResults = results;

    //If it's only background noise, the shape moves very slowly

    if (myResults[0].label === 'Background Noise') {

      console.log("BG");

      speedScale = 0.25 * myResults[0].confidence;

      MLText = "Background Noise - Slow...";

    } 

    //If it's a low whistle, the shape moves a little faster. 

    else if (myResults[0].label === 'Low Whistle') {

      console.log("LW");

      speedScale = 1 * myResults[0].confidence;

      MLText = "Low Whistle - Ok decent speed";

    }

    //If it's a medium whistle, the shape moves even faster. 

    else if (myResults[0].label === 'Medium Whistle') {

      console.log("MW");

      speedScale = 3 * myResults[0].confidence;

      MLText = "Medium Whistle - Pretty Fast!";

    }

    //If it's a high whistle, the shape moves extremely fast. 

    else if (myResults[0].label === 'High Whistle') {

      console.log("HW");

      speedScale = 5 * myResults[0].confidence;

      MLText = "High Whistle - OH MY TOO FAST!";

    }

  }

}

​

function draw() {

  //Adding an alpha value to the background for cool effects. 

  background('rgba(0,0,0, 0.08)');

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

    stroke(i%100,i%100,95);  //Sets a colour depending on the particle

    particles[i].update();   //Updates particles details

  }

  fill(255);

  noStroke();

  text(MLText, width/2, height-15);

}

​

​

//Class which determines each particles behaviour

class Particle {    

  constructor() {

    this.init();

  }

  //Function to initialize particle parameters

  init() {

    this.size = random(2,8);   //Random size

    this.vx = random(-3,3);    //Initial x velocity

    this.vy = random(-3,3);    //Initial y velocity

    this.x = random(width - this.size);  //Initial x position

    this.y = random(height-50 - this.size); //Initial y position

    //Previous x and y (for smoothing shapes during movement)

    this.px = this.x;

    this.py = this.y; 

  }

  //Function for the particle to move depending on the speed

  move() {

    this.px = this.x;

    this.py = this.y;

    this.x += this.vx * speedScale; 

    this.y += this.vy * speedScale;

    //Prevents particles from escaping the screen by bouncing back 

    if (this.x > width - this.size/2) {

      this.x = width - this.size/2;

      this.vx = -this.vx; 

    }

    else if (this.x < 0 + this.size/2) {

      this.x = this.size/2;

      this.vx = abs(this.vx);

    }

    if (this.y > height-50 - this.size/2) {

      this.y = height-50 - this.size/2;

      this.vy = -abs(this.vy);

    } 

    else if (this.y < 0 + this.size/2) {

      this.y = this.size/2;

      this.vy = abs(this.vy);

    }

  }

  //This function updates the move function and redraws the particle. 

  update() {

    this.move(); 

    this.draw(); 

  }

  //Draws a line from the particle and it's previous position for an effect.

  draw() {

    strokeWeight(this.size);

    line(this.x,this.y,this.px,this.py);

  }

}

​