Project 10: Sonic Story

var my=270;
var mdy=1;
var windowOpen=true;
var star;
var monster;
var windowSound;
var clock;
var fr=0;

function preload(){
    clock=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clockticksound.wav");
    star=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/star.wav");
    windowSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/window.wav");
    monster=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/growl-1.wav");
}

function setup() {
    createCanvas(480, 480);
    useSound();
    frameRate(1);
}

function soundSetup() {
    clock.setVolume(0.5);
    star.setVolume(0.2);
    windowSound.setVolume(0.5);
    monster.setVolume(1);
}

function draw() {
    background(38, 39, 59);
    drawStatic();
    //monster
    fill(0);
    if (fr>7 & fr<=17){
        monster.play();
        ellipse(260, my, 80, 60);
        rect(220, my, 80, 300-my);
        fill(255, 0, 0);
        triangle(235, my-13, 255, my-10, 245, my-5);
        triangle(285, my-13, 265, my-10, 275, my-5);
        //claws
        for (var i=0; i<3; i++){
            fill(0);
            quad(175+(i*10), 300, 180+(i*10), 295, 185+(i*10), 300, 180+(i*10), 330);
          }
        if (fr>8 & fr<=12){
            my-=5;
        }
        if (fr>12 & fr<=16){
            my+=5;
        }
    }

    //clock
    clock.play();
    push();
    translate(355, 40);
    scale(0.22);
    drawClock();
    pop();

    //star
    push();
    if (fr<5){
        star.play();
    }
    switch(fr){
        case 0: translate(290, 100); scale(0.05); break;
        case 1: translate(280, 105); scale(0.2); break;
        case 2: translate(260, 110); scale (0.3); break;
        case 3: translate(240, 115); scale(0.2); break
        case 4: translate(220, 120); scale(0.05); break;
        case 5: translate(200, 125); scale(0); break;
        default: scale(0); break;
    }

    noStroke();
    fill(255);
    drawStar();
    pop();

    //windowPane
    drawWindow();
    if (fr>6 & fr<=16){
        windowOpen=false;
    }
    if (fr==7){
        windowSound.play();
    }
    if (fr>16){
        windowOpen=true;
    }
    if (fr==17){
        windowSound.play
    }

    fr++;
    if (fr>=22){
        fr=0;
    }
}

function drawClock(){
  //from https://p5js.org/examples/input-clock.html
  var cx;
  var cy;
  var secR;
  var minR;
  var hrR;
  var cD;

  var radius=width/2;
  secR=radius*0.71;
  minR=radius*0.6;
  hrR=radius*0.5;
  cD=radius*1.7

  cx=width/2;
  cy=height/2;

  noStroke();
  fill(15);
  ellipse(cx, cy, cD+25, cD+25);
  fill(200);
  ellipse(cx, cy, cD, cD);

  var s=map(second(), 0, 60, 0, TWO_PI)-HALF_PI;
  var m=map(minute()+norm(second(), 0, 60), 0, 60, 0, TWO_PI)-HALF_PI;
  var h=map(hour()+norm(minute(), 0, 60), 0, 24, 0, TWO_PI*2)-HALF_PI;

  stroke(0);
  strokeWeight(1);
  line(cx, cy, cx+cos(s)*secR, cy+sin(s)*secR);
  strokeWeight(2);
  line(cx, cy, cx+cos(m)*minR, cy+sin(m)*minR);
  strokeWeight(4);
  line(cx, cy, cx+cos(h)*hrR, cy+sin(h)*hrR);

  strokeWeight(2);
  beginShape(POINTS);
  for(var i=0; i<360; i+=6){
      var angle=radians(i);
      var x=cx+cos(angle)*secR;
      var y=cy+sin(angle)*secR;
      vertex(x, y);
  }
  endShape();
}

function drawStatic(){
  //window
  noStroke();
  fill(64, 65, 90);
  square(25, 25, 300);
  fill(12, 13, 42);
  square(50, 50, 250);
  //bed frame and mattress
  fill(55, 34, 26);
  strokeWeight(3);
  stroke(32, 17, 11);
  rect(240, 375, 240, 105);
  rect(240, 350, 25, 130);
  noStroke();
  fill(192, 157, 167);
  quad(270, 400, 480, 400, 480, 480, 300, 480);
  fill(120, 82, 93);
  triangle(270, 480, 270, 400, 300, 480);
  //moon
  fill(248, 216, 8);
  ellipse(100, 100, 60, 60);
}

function drawStar(){
    //same code as star example from arrays lecture
    var starX=[50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var starY=[18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints=starX.length;
    beginShape();
    for (var i=0; i<nPoints; i++){
        vertex(starX[i], starY[i]);
    }
    endShape(CLOSE);

}

function drawWindow(){
    stroke(64, 65, 90);
    strokeWeight(10);
    noFill();
    if (windowOpen==true){
        line(175, 30, 175, 320);
        line(30, 175, 320, 175);
    }
    if (windowOpen==false){
        line(175, 30, 175, 320);
        line(30, 175, 170, 175);
        line(210, 80, 320, 40);
        line(210, 80, 210, 360);
        line(210, 360, 320, 320);
        line(210, 220, 320, 180);

    }

}