Project 10: Sonic Story

project 10 sketch copy

var windowOpen = true;
var pane;
var bird;
var windowNoise;
var alarm;
var framee = 0;
var cx;
var cy;
var secRadius;
var minRadius;
var hrRadius;
var cDiam;


function preload() {
    alarm=loadSound("http://localhost:8000/clock-ticking.wav");
    pane=loadSound("http://localhost:8000/star.wav");
    windowNoise=loadSound("http://localhost:8000/creaking.wav");
    bird=loadSound("http://localhost:8000/bird.wav");
}

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

function soundSetup() {
    alarm.setVolume(0.2);
    pane.setVolume(0.2);
    windowNoise.setVolume(0.3);
    bird.setVolume(0.2);
}

function draw() {
    background(225,207,166);
    drawScene();
    
    if (framee>7 & framee<=10) {
        drawBird();
        bird.play();
    }

    if (framee>1 & framee <=2) {
        alarm.play();
    }
    
    push();
    translate(354, 315);
    scale(0.15);
    drawAlarm();
    
    if (framee>1 & framee <=2) {
        pane.play();
    }

    noStroke();
    fill(255);
    drawPane();
    pop();

    //when window noises occur
    drawWindow();
    if (framee>6 & framee<=12){
        windowOpen=false;
    }
    if (framee==7){
        windowNoise.play();
    }
    if (framee>11){
        windowOpen=true;
    }
    if (framee==14){
        windowNoise.play;
    }

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

function drawAlarm() {
  
    //this alarm clock is from the p5js ref website
    var radius = min(width, height) / 2;
    secRadius=radius*0.71;
    minRadius=radius*0.6;
    hrRadius=radius*0.5;
    cDiam=radius*1.7;
  
    cx=width/2;
    cy=height/2;
  
    noStroke();
    fill(0);
    ellipse(cx, cy, cDiam+25, cDiam+25);
    fill(220);
    ellipse(cx, cy, cDiam, cDiam);
  
    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)*secRadius, cy+sin(s)*secRadius);
    strokeWeight(2);
    line(cx, cy, cx+cos(m)*minRadius, cy+sin(m)*minRadius);
    strokeWeight(4);
    line(cx, cy, cx+cos(h)*hrRadius, cy+sin(h)*hrRadius);
  
    strokeWeight(2);
    beginShape(POINTS);
    for (var i=0; i<360; i+=6){
         var angle=radians(i);
         var x=cx+cos(angle)*secRadius;
         var y=cy+sin(angle)*secRadius;
         vertex(x, y);
  }
  
  endShape();
}

function drawScene() {
    //window
    noStroke();
    fill(51,0,25);
    square(25, 25, 300);
    fill(153,204,255);
    square(50, 50, 250);
    
    //table
    fill(181,137,34);
    rect(330,390,150,50);
    
    //alarm clock stand
    fill(0);
    triangle(370,390,410,390,390,370);
  
    //cloud
    fill(255);
    ellipse(100, 100, 70, 60);
    ellipse(125, 125, 70, 50);
    ellipse(140, 110, 60, 55); 
    ellipse(160, 115, 60, 50); 

}

function drawPane() {
    var paneX = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var paneY = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints = paneX.length;

}

function drawBird() {
    fill(153,0,0);
    circle(227,175,20);
    rect(226,168,20,7);
    rect(226,175,20,7);    
}

function drawWindow() {
    stroke(51,0,25);
    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);
  }

}

The fours sounds I used were the clock ticking, the alarm ringing, the window opening and the birds chirping. I wanted to create a scene of how my mornings go, as I’m always awaken by an alarm clock and hear a lot of birds outside my window.