let input;

let analyzer;

let volume = 0;

let eyeX;

let eyeY;

let lookUP;

let myFont;

​

let sceneNum = 0;

​

let brush = "Let's brush and sing along!"

let sad = "I think it's time to brush my teeth"

let happy = "I feel fresh and amazing!"

​

let organics = [];

let change, colorsPalette;

​

function preload(){

  myFont = loadFont('myFont.ttf');

  achoo = loadSound('achoo.mp3');

  wow = loadSound('wow.mp3');

  cough = loadSound('cough.mp3');

  help = loadSound('help.mp3');

  yo = loadSound('yo.mp3');

  laugh = loadSound('laugh.mp3')

}

​

function setup() {

  createCanvas(600, 650);

  textAlign(CENTER, CENTER);

  textFont(myFont);

  colorMode(RGB);

​

  mic = new p5.AudioIn();

  mic.start();

​

  change = 0;

  colorsPalette = [color(146, 167, 202,30),

            color(129, 197, 252,30),

            color(131, 242, 252,30),

            color(120, 250, 196,30),

            color(179, 218, 255,30),

            color(38, 154, 255,30),

            color(28, 77, 255,30),

            color(18, 174, 252,30),];

​

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

    organics.push(new Organic(0.1+1*i,width/2,height/2,i*5,i*random(90),colorsPalette[floor(random(8))]));

  } 

}

​

function draw() {

  let v = mic.getLevel();

  // "Smooth" the volume variable with an easing function

  volume += (v - volume) / 3;

​

  let mouthSize = map(volume, 0, 1, 20, 300);

​

  print(mouthSize);

​

  if (mouthSize < 26)

    mouthSize = 0;

    mouthSize = constrain(mouthSize, 0, 300);

​

  switch (sceneNum) {

    case 0:

      scene0();

      break;

​

    case 1:

      scene1();

      break;

​

    case 2:

      scene2();

      break;

​

    case 3:

      scene3();

      break;

    case 4:

      scene4();

      break;

    case 5:

      scene5();

      break;

    case 6:

      scene6();

      break;

  }

  push();

  textAlign(CENTER, CENTER);

  textSize(13);

  fill(255, 255, 0);

  rect(100, 600, 50, 30, 5, 5, 5, 5);

  fill(0);

  text('happy', 100, 600, 50, 30);

​

  fill(145, 105, 255);

  rect(500, 600, 50, 30, 5, 5, 5, 5);

  fill(0);

  text('upset', 500, 600, 50, 30);

​

  fill(255, 105, 185);

  rect(300, 600, 65, 30, 5, 5, 5, 5);

  fill(0);

  text('worried', 300, 600, 50, 30);

​

  fill(255, 215, 105);

  rect(300, 50, 50, 30, 5, 5, 5, 5);

  fill(0);

  text('brush!', 300, 50)

  fill(182, 255, 105);

  rect(100, 50, 50, 30, 5, 5, 5, 5);

  fill(0);

  text('time', 100, 50, 50, 30);

  fill(255, 132, 105);

  rect(500, 50, 50, 30,5,5,5,5);

  fill(0);

  textSize(13);

  text('elated', 500, 50)

  pop();

}

​

function mousePressed() {

  if (275 < mouseX && mouseX < 325 && 585 < mouseY && mouseY < 615) { //bot mid

    sceneNum = 2;

    cough.play();

  }

  if (75 < mouseX && mouseX < 125 && 585 < mouseY && mouseY < 615) { //bot lft //happy

    sceneNum = 5;

    laugh.play();

  }

  if (475 < mouseX && mouseX < 525 && 585 < mouseY && mouseY < 615) { //bot right

    sceneNum = 6;

    achoo.play();

  }

  if (275 < mouseX && mouseX < 325 && 35 < mouseY && mouseY < 65 ){ //top mid

    sceneNum =1;

  }

  if (75 < mouseX && mouseX < 125 && 35 < mouseY && mouseY < 65 ){ //top left time

    sceneNum =4;

    yo.play();

  }

   if (475 < mouseX && mouseX < 525 && 35 < mouseY && mouseY < 65 ){ //top right so happy

    sceneNum =3;

    wow.play();

  }

}

function scene0() { //START HI 

  background(97, 223, 255);

  //body

  rectMode(CENTER);

  fill(255);

  rect(300, 320, 370, 380, 80, 80, 80, 80);

  //legs

  rect(200, 490, 65, 150, 50, 50, 50, 50);

  rect(400, 490, 65, 150, 50, 50, 50, 50);

  //head

  fill(255, 234, 0);

  rect(300, 280, 300, 150, 35, 35, 35, 35);

  //eyes

  fill(255);

  ellipse(230, 250, 60);

  ellipse(370, 250, 60);

  //eyes big

  noStroke();

  fill(0);

  lookUP = map(mouseY, 0, 600, 240, 260);

  lookUP = constrain(lookUP, 240, 260);

  eyeY = map(mouseX, 0, 600, 200 - 10, 200 + 10);

  eyeY = constrain(eyeY, 200 - 10, 200 + 10);

  ellipse(eyeY + 30, lookUP, 30);

  eyeX = map(mouseX, 0, 600, 400 - 10, 400 + 10);

  eyeX = constrain(eyeX, 400 - 10, 400 + 10);

  ellipse(eyeX - 30, lookUP, 30);

​

  push();

  noFill();

  stroke(255, 31, 117);

  strokeWeight(3);

  arc(300, 260, 50, 30, TWO_PI, PI);

  pop();

​

  textAlign(CENTER, CENTER);

  textSize(16);

  text("Hi, I'm the Tooth Fairy!", width / 2, height / 2 + 65);

}

​

function scene1() { //BRUSH

  background(173, 233, 255,40);

  for(var i=0; i<organics.length;i++){

      organics[i].show(change);

  }

  change+=0.01;

  // background(245, 224, 64);

  // background(129, 197, 252);

  rectMode(CENTER);

  fill(255);

  rect(300, 320, 370, 380, 80, 80, 80, 80);

  //legs

  rect(200, 490, 65, 150, 50, 50, 50, 50);

  rect(400, 490, 65, 150, 50, 50, 50, 50);

  //head

  fill(255, 234, 0);

  rect(300, 280, 300, 150, 35, 35, 35, 35);

  //eyes

  fill(255);

  ellipse(230, 250, 60);

  ellipse(370, 250, 60);

  //blush

  fill(255, 115, 159);

  ellipse(200, 300, 50, 40);

  ellipse(400, 300, 50, 40);

  //eyes big

  noStroke();

  fill(0);

  lookUP = map(mouseY, 0, 600, 240, 260);

  lookUP = constrain(lookUP, 240, 260);

  eyeY = map(mouseX, 0, 600, 200 - 10, 200 + 10);

  eyeY = constrain(eyeY, 200 - 10, 200 + 10);

  ellipse(eyeY + 30, lookUP, 30);

  eyeX = map(mouseX, 0, 600, 400 - 10, 400 + 10);

  eyeX = constrain(eyeX, 400 - 10, 400 + 10);

  ellipse(eyeX - 30, lookUP, 30);

​

  mouthSize = map(volume, 0, 1, 10, 300);

  push();

  fill(255, 31, 117);

  arc(300, 255, mouthSize + 30, mouthSize + 20, TWO_PI, PI);

  pop();

​

  fill(0);

  textSize(16);

  text(brush, width / 2, height / 2 + 65);

  // console.log('scene1');

}

​

function scene2() { //SAD

  background(186, 212, 188);

  //body

  rectMode(CENTER);

  push();

  fill(220, 222, 250);

  rect(300, 320, 370, 380, 80, 80, 80, 80);

  pop();

  //legs

  fill(220, 222, 250);

  rect(200, 490, 65, 150, 50, 50, 50, 50);

  rect(400, 490, 65, 150, 50, 50, 50, 50);

  //head

  fill(155, 177, 209);

  rect(300, 280, 300, 150, 35, 35, 35, 35);

  //eyes

  fill(255);

  ellipse(230, 250, 60);

  ellipse(370, 250, 60);

  //eyes big

  noStroke();

  fill(0);

  lookUP = map(mouseY, 0, 600, 240, 260);

  lookUP = constrain(lookUP, 240, 260);

  eyeY = map(mouseX, 0, 600, 200 - 10, 200 + 10);

  eyeY = constrain(eyeY, 200 - 10, 200 + 10);

  ellipse(eyeY + 30, lookUP, 30);

  eyeX = map(mouseX, 0, 600, 400 - 10, 400 + 10);

  eyeX = constrain(eyeX, 400 - 10, 400 + 10);

  ellipse(eyeX - 30, lookUP, 30);

​

  push();

  noFill();

  stroke(67, 79, 97);

  strokeWeight(4);

  arc(300, 270, 50, 10, PI, TWO_PI);

  // arc(205, 215, 70, 3, TWO_PI, HALF_PI);

  // arc(395, 215, 70, 3, HALF_PI, PI);

  pop();

​

  fill(0);

  textSize(16);

  text(sad, width / 2, height / 2 + 65);

  // console.log('scene1');

}

​

function scene3() { //v happy

   background(255, 232, 128);

  for(var i=0; i<organics.length;i++){

      organics[i].show(change);

  }

  change+=0.015;

  //body

  rectMode(CENTER);

  fill(255);

  rect(300, 320, 370, 380, 80, 80, 80, 80);

  //legs

  rect(200, 490, 65, 150, 50, 50, 50, 50);

  rect(400, 490, 65, 150, 50, 50, 50, 50);

  //head

  fill(255, 234, 0);

  rect(300, 280, 300, 150, 35, 35, 35, 35);

  //eyes  

  noStroke();

  push();

  noFill();

  stroke(0);

  strokeWeight(4);

  arc(370, 260, 50, 20, PI, TWO_PI); //R

  arc(392, 260, 95, 40, PI, PI+HALF_PI);

  arc(230, 260, 50, 20, PI, TWO_PI); //L

  arc(207, 260, 95, 40, PI+HALF_PI, TWO_PI);

  pop();

  //blush

  fill(255, 3, 87, 100);

  ellipse(200, 290, 50, 40);

  ellipse(400, 290, 50, 40);

  //mouth

  mouthSize = map(volume, 0, 1, 10, 300);

  push();

  fill(255,31,117);

  arc(300, 255, mouthSize + 30, mouthSize + 50, TWO_PI, PI);

  pop();

​

  fill(0);

  textSize(16);

  text('I feel so fresh and relaxed!', width / 2, height / 2 + 65);

  // console.log('scene3');

}

​

function scene4(){ //CLOCK

  background(197, 242, 165);

  //body

  rectMode(CENTER);

  fill(255);

  rect(300, 320, 370, 380, 80, 80, 80, 80);

  //legs

  rect(200, 490, 65, 150, 50, 50, 50, 50);

  rect(400, 490, 65, 150, 50, 50, 50, 50);

  //head

  fill(247, 228, 244);

  rect(300, 280, 300, 150, 35, 35, 35, 35);

  //eyes

  fill(255);

  ellipse(230, 250, 60);

  ellipse(370, 250, 60);

  //eyes big

  noStroke();

  fill(0);

  lookUP = map(mouseY, 0, 600, 240, 260);

  lookUP = constrain(lookUP, 240, 260);

  eyeY = map(mouseX, 0, 600, 200 - 10, 200 + 10);

  eyeY = constrain(eyeY, 200 - 10, 200 + 10);

  ellipse(eyeY + 30, lookUP, 30);

  eyeX = map(mouseX, 0, 600, 400 - 10, 400 + 10);

  eyeX = constrain(eyeX, 400 - 10, 400 + 10);

  ellipse(eyeX - 30, lookUP, 30);

​

  push();

  noFill();

  stroke(255, 31, 117);

  strokeWeight(3);

  arc(300, 260, 50, 30, TWO_PI, PI);

  pop();

  clock();

}

​

function scene5(){ //okhappy

  background(162, 213, 242);

  //body

  rectMode(CENTER);

  fill(255);

  rect(300, 320, 370, 380, 80, 80, 80, 80);

  //legs

  rect(200, 490, 65, 150, 50, 50, 50, 50);

  rect(400, 490, 65, 150, 50, 50, 50, 50);

  //head

  fill(255, 234, 0);

  rect(300, 280, 300, 150, 35, 35, 35, 35);

  //eyes

  fill(255);

  ellipse(230, 250, 60);

  ellipse(370, 250, 60);

  //eyes big

  noStroke();

  fill(0);

  lookUP = map(mouseY, 0, 600, 240, 260);

  lookUP = constrain(lookUP, 240, 260);

  eyeY = map(mouseX, 0, 600, 200 - 10, 200 + 10);

  eyeY = constrain(eyeY, 200 - 10, 200 + 10);

  ellipse(eyeY + 30, lookUP, 30);

  eyeX = map(mouseX, 0, 600, 400 - 10, 400 + 10);

  eyeX = constrain(eyeX, 400 - 10, 400 + 10);

  ellipse(eyeX - 30, lookUP, 30);

​

  push();

  noFill();

  stroke(255, 31, 117);

  strokeWeight(3);

  arc(300, 260, 50, 20, TWO_PI, PI);

  pop();

​

  textAlign(CENTER, CENTER);

  textSize(16);

  text("I feel good and happy!", width / 2, height / 2 + 65);

}

​

function scene6(){

  background(149, 160, 191);

  //body

  rectMode(CENTER);

  push();

  fill(227, 232, 230);

  rect(300, 320, 370, 380, 80, 80, 80, 80);

  pop();

  //legs

  fill(227, 232, 230);

  rect(200, 490, 65, 150, 50, 50, 50, 50);

  rect(400, 490, 65, 150, 50, 50, 50, 50);

  //head

  fill(193, 207, 186);

  rect(300, 280, 300, 150, 35, 35, 35, 35);

  //eyes

  fill(255);

  ellipse(230, 250, 60);

  ellipse(370, 250, 60);

  //eyes big

  noStroke();

  fill(0);

  lookUP = map(mouseY, 0, 600, 240, 260);

  lookUP = constrain(lookUP, 240, 260);

  eyeY = map(mouseX, 0, 600, 200 - 10, 200 + 10);

  eyeY = constrain(eyeY, 200 - 10, 200 + 10);

  ellipse(eyeY + 30, lookUP, 30);

  eyeX = map(mouseX, 0, 600, 400 - 10, 400 + 10);

  eyeX = constrain(eyeX, 400 - 10, 400 + 10);

  ellipse(eyeX - 30, lookUP, 30);

​

  push();

  noFill();

  stroke(67, 79, 97);

  strokeWeight(4);

  arc(300, 270, 40, 15, PI, TWO_PI);

  arc(205, 215, 70, 3, TWO_PI, HALF_PI);

  arc(395, 215, 70, 3, HALF_PI, PI);

  pop();

​

  fill(0);

  textSize(16);

  text('I really want to brush my teeth', width / 2, height / 2 + 65);

  // console.log('scene1');

}

​

function Organic(radius,xpos,ypos,roughness,angle,color){

  this.radius = radius; 

  this.xpos = xpos; 

  this.ypos = ypos; 

  this.roughness = roughness; 

  this.angle = angle; 

  this.color = color; 

​

  this.show = function(change){

​

    noStroke(); // no stroke for the circle

    fill(this.color); 

​

    push(); 

    translate(xpos, ypos); 

    rotate(this.angle+change); 

    beginShape(); 

    let off = 0;

    for (var i = 0; i < TWO_PI; i += 0.1) {

      let offset = map(noise(off, change), 0, 1, -this.roughness, this.roughness);

      let r = this.radius + offset;

      let x = r * cos(i);

      let y = r * sin(i);

      vertex(x, y);

      off += 0.1;

    }

    endShape(); //end and create the shape

    pop();

    }

}

​

function clock(){

  push()

  fill(0);

  textAlign(CENTER, CENTER);

  textSize(20);

  let Hour = hour();

  let min = minute();

  let secs = second()

  let noon = Hour >= 12? " PM" : " AM"

  if(min < 10)

    min = "0"+min

  Hour%=12

  text(Hour+":"+min+":"+secs+noon, width / 2, height / 2 + 65);

  pop();

}