//43, 45, 66  -dark-grey

  //141, 153, 174 -medium-grey

  //237, 242, 244 -light-grey

  //239, 35, 60 -bright-red

  //217, 4, 41 -dark-red

*/

​

let xoff = 0.0;

​

let upDown = 200;

let goStop = 200;

let label = '';

let notes = [];

let counter = 0;

​

let options = {

  probabilityThreshold: 0.9

};

​

let classifier = ml5.soundClassifier('SpeechCommands18w', options, modelReady);

​

function modelReady() {

  classifier.classify(gotResult);

  console.log('ready');

}

​

function gotResult(error, result) {

  if (error) {

    console.log(error);

    return;

  }

​

  let label = result[0].label;

  let confidence = result[0].confidence;

  console.log(label);

​

  switch (label) {

    case 'one':

      upDown -= 10;

      break;

    case 'two':

      upDown -= 20;

      break;

    case 'three':

      upDown -= 30;

      break;

    case 'four':

      upDown -= 40;

      break;

    case 'five':

      upDown -= 50;

      break;

    case 'six':

      upDown += 10;

      break;

    case 'seven':

      upDown += 20;

      break;

    case 'eight':

      upDown += 30;

      break;

    case 'nine':

      upDown += 40;

      break;

    case 'zero':

      upDown += 50;

      break;

    case 'go':

      goStop += 30;

      break;

    case 'stop':

      goStop -= 30;

      break;

  }

}

​

class Note {

  constructor() {

    this.posX = random(500, 1000);

    this.posY = random(50, 350);

    this.circleFill = color(141, 153, 174);

    this.circleSize = 40;

    this.speed = random(1,2);

  }

  show() {

    xoff = xoff + 0.01;

    let n = noise(xoff) * this.circleSize;

    let noteSize = random(10, 30);

    textSize(n);

    fill(this.circleFill);

    circle(this.posX, this.posY, this.circleSize);

    text('🎵', this.posX, this.posY);

  }

  move() {

    this.posX -= this.speed;

  }

  collide(otherX, otherY) {

    let d = dist(this.posX, this.posY, otherX, otherY);

    if (d < this.circleSize) {

      this.circleFill = color(217, 4, 41);

      this.circleSize += 1;

    }

  }

}

​

function setup() {

  createCanvas(400, 400);

  background(43, 45, 66);

}

​

function drawCircle() {

  let x = constrain(goStop, 50, 350);

  let y = constrain(upDown, 50, 350);

  fill(237, 242, 244);

  noStroke();

  circle(x, y, 50);

  textSize(25);

  textAlign(CENTER, CENTER);

  text('🎹', x, y);

}

​

function showLabel() {

  fill(239, 35, 60);

  textSize(30);

  text(label, 40, 20);

}

​

function draw() {

  counter++;

  background(43, 45, 66, 40);

  showLabel();

  if (counter % 150 === 0) {

    notes.push(new Note());

  }

  notes.forEach(i => {

    i.show();

    i.move();

    i.collide(goStop, upDown)

  })

  if (notes.length > 5) {

    notes.shift();

  }

  drawCircle();

}