Category: Project-10-Sonic-Story

Project 10 – Sonic Story

In this project, I’ve created a story of a journey of birds flying across the sky in different weathers. I’ve used sounds of snow, rain, birds, and cars to show different weathers and scenes of the story. Each scene shifts to different weathers when keys ‘0’ ‘1’ and ‘2’ are pressed. The sun rises and falls with mouse Y.

sketch
//Stefanie Suk
//15-104 Section D

//This stroy is about a journey of birds flying through different scenes of weather.
//Journey of birds flying in a sunny day, snowy day, and rainy day. 

var story = "start"; //scene of story initially set to "start"

var winterSnow = []; // array to hold snowflake objects

var rainFalls = [];

var cloudX = 0;

var birdImage = [];
var birdFrame = 0;
var birdx = 0;
var birdTime = 0;

var snowbirdImage = [];
var snowbirdFrame = 0;
var snowbirdx = 0;
var snowbirdTime = 0;

var car = [];
var carNum = 10; //number of cars

var sun;

function preload() {
  rainSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rain-3.wav");
  snowstormSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/snowstorm.wav");
  birdSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bird-3.wav");
  carSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/car-2.wav");
  birdchirpSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birdchirp.wav");

  //Bird images, for rain scene
  birdImage[0] = loadImage("https://i.imgur.com/tg67EJp.png");
  birdImage[1] = loadImage("https://i.imgur.com/NzqZdC6.png");
  birdImage[2] = loadImage("https://i.imgur.com/PoLXRp1.png");
  birdImage[3] = loadImage("https://i.imgur.com/RR23waU.png");
  birdImage[4] = loadImage("https://i.imgur.com/bomc4zU.png");
  birdImage[5] = loadImage("https://i.imgur.com/yvMEopS.png");
  birdImage[6] = loadImage("https://i.imgur.com/NNqLSfZ.png");
  birdImage[7] = loadImage("https://i.imgur.com/JgASL5k.png");
  birdImage[8] = loadImage("https://i.imgur.com/yDRvXLi.png");
  birdImage[9] = loadImage("https://i.imgur.com/sH0IWH2.png");

  //Bird images with snow on top, for snow scene
  snowbirdImage[0] = loadImage("https://i.imgur.com/9UBa9S7.png");
  snowbirdImage[1] = loadImage("https://i.imgur.com/P13A1Gj.png");
  snowbirdImage[2] = loadImage("https://i.imgur.com/WLn63gv.png");
  snowbirdImage[3] = loadImage("https://i.imgur.com/rYCLLmV.png");
  snowbirdImage[4] = loadImage("https://i.imgur.com/65hbFvj.png");
  snowbirdImage[5] = loadImage("https://i.imgur.com/ifH75Di.png");
  snowbirdImage[6] = loadImage("https://i.imgur.com/8ER6XPt.png");
  snowbirdImage[7] = loadImage("https://i.imgur.com/AXF0fpu.png");
  snowbirdImage[8] = loadImage("https://i.imgur.com/ONvchFq.png");
  snowbirdImage[9] = loadImage("https://i.imgur.com/W0Wu9Ou.png");


}

function setup() {
  createCanvas(400, 600);

  //snow
  fill(240);
  noStroke();

  //rain
  for (var i = 0; i < 400; i++) {
    rainFalls[i] = new drawRain();
  }

  //car
  for (let i = 0; i < carNum; i++) {
    car[i] = new Car(random(height),
      random(width),
      color(random(255), random(255), random(255)), //random car color
      random(1, 8), //random car speed
      random(20, 90) //random car size
    );
    print(car[i]);
  }

  birdSound.loop(); //looping bird sound 

  rectMode(CENTER);
  useSound();

}

function soundSetup(){
  rainSound.setVolume(0.5);
  snowstormSound.setVolume(0.7);
  birdSound.setVolume(0.5)
  birdchirpSound.setVolume(0.8);
}

function draw() {

  if (frameCount == 1) {
    birdchirpSound.play();
  }

  //snow
  let snowT = frameCount/10; //time for snow falling

  //each scene
  if (story == "start") { //starting scene

    //sun
    //background color change, mouse Y
    //sun move up and down
    sun = map(mouseY, 0, 600, 200, 0); //map background color
    background(0, sun/2, sun);
    noStroke();
    fill(255, 255, 0);
    ellipse(300,mouseY,60,60);

    fill(255);
    textSize(10);
    text("Press keys '1' and '2' to change scene", 40, height/2-40);
    text("Press key '0' to reset", 40, height/2-20);

    drawCloud();

    drawBird();

	} else if (story == "frame1") { //snowing scene
    
    //sun
    //background color change, mouse Y
    //sun move up and down
    sun = map(mouseY, 0, 500, 100, 0);
    background(0, sun/2, sun);
    fill(255, 255, 0);
    ellipse(300,mouseY,60,60);

    //snow
    fill(250);
    for (let i = 0; i < random(6); i++) { // drawing random snows
	   winterSnow.push(new drawSnow());
    }
  	for (let snowParticles of winterSnow) {
      snowParticles.display(); //looping, display snow
  	  snowParticles.update(snowT); // updating snow
  	}

    //cars
    for (let i = 0; i < 10; i++) {
      car[i].move();
      car[i].display(); //making cars show
    }

    //cloud
    drawCloud();

    //bird with snow
    drawSnowbird();

  } else if (story == "frame2") { //raining scene
    
    //sun
    //background color change, mouse Y
    //sun move up and down
  	sun = map(mouseY, 0, 600, 50, 0); //map background color
    background(0, sun/2, sun);
    noStroke();
    fill(255, 255, 0);
    ellipse(300,mouseY,60,60);

    //rain
  	for (var i = 0; i < rainFalls.length; i++) {
    rainFalls[i].rainMove();
    rainFalls[i].rainShow();
  	}

    //cars
    for (let i = 0; i < 10; i++) {
      car[i].move();
      car[i].display(); //making cars show
    }

    //bird
    drawBird();
  }

}

function drawSnow() {
  this.snowX = 0; //position X of snow
  this.snowY = random(-70, 10); //position Y of snow
  this.snowstartAngle = random(0, PI*3); //starting angle of snow
  this.snowSize = random(1, 5.5);

  //radius of snow
  //make snow spread evenly throught canvas
  this.snowRadius = sqrt(random(pow(width, 2)));

  this.update = function(snowTime) {
    // snow fall spiral, like wind blowing
    var snowSpeed = 0.5; // angled speed
    var snowAngle = snowSpeed * snowTime + this.snowstartAngle;
    this.snowX = this.snowRadius * cos(snowAngle) + width/2;

    // various sizes of snow falling at different speeds
    this.snowY += pow(this.snowSize, 0.5);

  }

  this.display = function() {
    ellipse(this.snowX, this.snowY, this.snowSize);
  }



}

function drawRain() {
  this.rainX = random(width); //pos X, rain falling randomly throughout canvas
  this.rainY = random(-400, -100); //pos Y
  this.rainS = random(0, 15); //rain size
  this.rainLength = map(this.rainS, 0, 5, 10, 15); //rain length
  this.rainSpeed = map(this.rainS, 0, 15, 5, 25); //map rain speed

  this.rainMove = function() {
    this.rainY = this.rainSpeed + this.rainY;
    var rainFalling = map(this.rainS, 0, 15, 0, 0.3); //falling speed of rain
    this.rainSpeed = this.rainSpeed + rainFalling;

    //keeping rain fall
    if (this.rainY > height) {
      this.rainY = random(-300, -50);
      this.rainSpeed = map(this.rainS, 0, 15, 5, 10);
    }
  }

  this.rainShow = function() {
    var rainSize = map(this.rainS, 0, 15, 0.5, 2); //map rain size
    strokeWeight(rainSize);
    stroke(205, 235, 244);
    line(this.rainX, this.rainY, this.rainX, this.rainY+this.rainLength);
  }
}

function drawCloud(){

  //translate cloud
  translate(cloudX, 0);
  
  // draw cloud
  fill(255);
  noStroke();
  ellipse(100,100,50);
  ellipse(110,110,50);
  ellipse(120,95,50,60);
  ellipse(130,105,50);

  ellipse(200,200,50);
  ellipse(210,210,50);
  ellipse(220,195,50,60);
  ellipse(230,205,50);

  ellipse(-100,250,50);
  ellipse(-110,260,50);
  ellipse(-120,245,50,60);
  ellipse(-130,255,50);

  //make cloud appear canvas again
  if (cloudX -200> width){
    cloudX = -300;
  }
  cloudX++;

}

function drawBird() {
  image(birdImage[birdFrame], birdx, height/2);
  image(birdImage[birdFrame], birdx-300, height/2+50);

  if (birdTime > 20) { //change position, every 20 frames
    birdx += 5; //moving bird image
    birdFrame += 1; //next index of array
    if (birdFrame >= birdImage.length) {
      birdFrame = 0; //keep frame index within image length array
    }
    birdTime = 0; //frame time reset
  }
  birdTime++;
}

function drawSnowbird() {
  image(snowbirdImage[snowbirdFrame], snowbirdx, height/2);
  image(snowbirdImage[snowbirdFrame], snowbirdx-300, height/2+50);

  if (snowbirdTime > 20) { //change position, every 20 frames
    snowbirdx += 1; //moving bird image
    snowbirdFrame += 1; //next index of array
    if (snowbirdFrame >= snowbirdImage.length) {
      snowbirdFrame = 0; //keep frame index within image length array
    }
    snowbirdTime = 0; //frame time reset
  }
  snowbirdTime++;
}


class Car {
  constructor(x, y, c, s, l) {
    this.carX = x;
    this.carY = y;
    this.carC = c; //color of car
    this.carL = l; //length of car
    this.carSpeed = s; //speed of car
  }
  
  move() {
    this.carX = this.carX + this.carSpeed; //cars move
    if (this.carX > width) {
      this.carX = 0; //initial pos X of cars
    }
  }

  display() {
    noStroke();
    fill(this.carC);
    rect(this.carX, 600, this.carL, 35, 20); //position of cars, different shapes of cars 
  }
}



function keyPressed() {
	if (key == "0") {
		story = "start";
    birdSound.play();
    rainSound.stop();
    snowstormSound.stop();
    carSound.stop();
	} else if (key == "1") {
		story = "frame1";
    snowstormSound.play();
    birdSound.play();
    carSound.play();
    rainSound.stop();
	} else if (key == "2") {
		story = "frame2";
    snowstormSound.stop();
    birdSound.play();
    rainSound.play();
    carSound.play();
	} 
}

Project 10 – Sonic Story

This story is about a magician who performs a couple of tricks in front of an audience. However, the ending does not go as planned, and the girl that he made disappear doesn’t come back.

sketch
var count = 0;
var stage;
var magician;
var smoke;
var bunny;
var girl;
var blanket;
var tear;
var walking;
var cheering;
var hop;
var clapping;
var gasping;
var poof;

var magicianX = 500;
var magicianY = 150;
var bunnyX = 110;
var bunnyY = 320;
var girlX = 500;
var girlY = 290;

function preload() {
    //Load images
    stage = loadImage("https://i.imgur.com/nboGOqA.jpg");
    magician = loadImage("https://i.imgur.com/eAj8gmY.png");
    smoke = loadImage("https://i.imgur.com/6QloW3v.png");
    bunny = loadImage("https://i.imgur.com/FVDd9HE.png");
    girl = loadImage("https://i.imgur.com/3umyhtS.png");
    blanket = loadImage("https://i.imgur.com/FIlojGn.png");
    tear = loadImage("https://i.imgur.com/ie45BVh.png");
    //Load sounds
    walking = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/walking.wav");
    cheering = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cheering.wav");
    hop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/hop.wav");
    clapping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clapping.wav")
    gasping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gasping.wav");
    poof = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/poof.wav");
}

function setup() {
    createCanvas(500, 400);
    useSound();
    frameRate(3);
}

function soundSetup() {
    cheering.setVolume(0.2);
    gasping.setVolume(0.2);
    walking.setVolume(0.3);
    poof.setVolume(0.5);
    hop.setVolume(0.2);
}

function draw() {
    background(200);
    //Stage
    image(stage, 0, 0, width, height);
    //Magician
    image(magician, magicianX, magicianY, width * 0.3, height * 0.5);
    //Magician enters as audience cheers
    if (count == 0) {
        cheering.play();
    }
    if (count < 8) {
        magicianX -= 40;
        walking.play();
    }
    //Bunny hops away
    if (count > 18 & count < 30) {
        image(bunny, bunnyX, bunnyY, width * 0.1, height * 0.1);
        bunnyX += 30;
        hop.play();
    }
    //Cloud of smoke before bunny appears
    if (count > 14 & count < 20) {
        image(smoke, 60, 270, width * 0.3, height * 0.3);
    }
    if (count == 15) {
        poof.play();
    }
    //Girl enters
    if (count < 65) {
        image(girl, girlX, girlY, width * 0.12, height * 0.2);
        if (count > 34 & count < 48) {
            girlX -= 10;
            walking.play();
        }
    }
    //Blanket makes girl disappear
    if (count > 58 & count < 66) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 62) {
        poof.play();
    }
    if (count == 67) {
        clapping.play();
    }
    if (count > 75 & count < 83) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 79) {
        poof.play();
    }
    if (count > 90 & count < 98) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 94) {
        poof.play();
    }
    if (count > 100) {
        image(tear, 255, 225, width * 0.01, height * 0.03);
    }
    //Girl does not reappear and crowd gasps
    if (count == 99) {
        gasping.play();
    }
    count++;
}

The sound effects (cheering, clapping, walking, hopping, gasping, poofs) match each step that a character takes or a certain action that occurs.

PROJECT-10 (sonic story)

sketch
// 15-104
// SEAN CHEN
// A person running in the rain rushes toward a gathering indoors
// and suddenly the person busts through the window causing panic.

var rain, running, panting, group, intrain, scream, glass;
var note = 0;
var walkImage = [];
var filenames = [];


// various sounds
function preload() {
    rain = loadSound ('http://127.0.0.1:5500/handin10/seanc1-10-project/sounds/-combo.wav');
    group = loadSound ('http://127.0.0.1:5500/handin10/seanc1-10-project/sounds/-combo-group.wav');
    scream = loadSound ('http://127.0.0.1:5500/handin10/seanc1-10-project/sounds/-group-scream.wav');
    glass = loadSound ('http://127.0.0.1:5500/handin10/seanc1-10-project/sounds/-glass-smash.wav');
}

function setup() {
    createCanvas(600, 300);
    frameRate(15);
}

function soundSetup() {}

// apartment building
function house() {
    push();
    fill(150);
    rect(525, 50, 100, 250);
    fill(244,202,41);
    rect(550, 75, 50, 50);
    rect(550, 150, 50, 50);
    rect(550, 225, 50, 50);
    pop();
}

// rain
function rainfall() {
    stroke(255);
    strokeWeight(0.5);
    for (var x = 0; x < width; x += 5) {
        for (var y = 0; y < height; y += 10) {
            line(x, y, x, y+5);
        }
    }
}

// shadowy figure
function figure(x, y) {
    push();
    fill(0);
    rect(x, y+275, 10, 50);
    ellipse(x+5, 265, 10, 10);
    pop();
}

function draw() {
    background(50);
    // drawing shadowy figure running through rain, into the 1F window
    house();
    if (frameCount < 170) {
        var xpos = map(frameCount, 0, 170, 0, 550);
        figure(xpos, 0);
    }
    push();
    if (frameCount % 3 == 0) {
        translate(random(0, 3), 5);
    }
    rainfall();
    pop();


    var seq = [rain, group, rain, group, rain, group] // event sequence
    var dur = [5, 48, 45, 30, 15, 15]; // event duration

    if (frameCount % dur[note] == 0) { // play time based on frames
        if (note > 0) {
            seq[note-1].stop();
            seq[note].play();  
        }
        seq[note].play();
        note++;
    }
    if (note == seq.length) { // final glass smash
        glass.play(1);
        scream.play(1.3);
        seq[note-1].stop(1.5);
        var totalFrames = frameCount;
        note++;
    }

    if (frameCount == totalFrames+30) {
        noLoop();
    }
    print(frameCount);
}

Project-10-Sonic-Story

I was browsing on freesound.org and found the splash sound that I thought was pretty versatile in terms of story telling and after I picked out a few more sounds I cam up with the story of watching a man skydive into the ocean.

sketch>

// Xander Fann xmf Section B
// it is a nice day out as a plane is flying into the air. You feel the size and heft of the play as it flys by. A man sky dives from that plane into the ocean.
var count = 0;
var airplanex = 0;
var airplaney = 100;
var airplanebx = 500;

var noiseParam = 0;
var noiseStep = .03;
var y = 0;
var wy = 250;

function preload() {
    //images
    airplane = loadImage("https://i.imgur.com/bnGrcCO.png")
    airplanebelly = loadImage("https://i.imgur.com/g6yOr9u.png")
    pman = loadImage("https://i.imgur.com/IQzArq5.png")
    ocean = loadImage("https://i.imgur.com/PZiDoUi.png")

    //sounds
    planeengine = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/airplane-flying.wav")
    door = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/creaking-door-04.wav")
    falling = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/falling.wav")
    splash = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/_splash-jumnping-a.wav")
}
function setup() {
    createCanvas(400, 200);
    frameRate(20);
    useSound();
}
function soundSetup() {
    planeengine.setVolume(.4);
    door.setVolume(.4);
    splash.setVolume(.5);
    falling.setVolume(.5);
    planeengine.play();
}

function draw() {
    print(count)
    background(200,250,255); //sky
    count++;
    if (count >= 0){
        image(airplane,airplanex,airplaney,100,100);
        airplanex+=3;
        airplaney-=1;
        noStroke();
        for (opac = 50; opac>0; opac-=5){ // sun opacity ot create gradient
            for (dia = 100; dia < 200; dia+=10){ // expanding diameter
                fill(255,255,200,opac);
                ellipse(0,0,dia,dia);
            }
        }
    }
    if (airplanex >= width){
        background(200,250,255);
        image(airplanebelly,airplanebx,-270,500,500); // bottom of big plane
        airplanebx-=3;
        planeengine.play();
     }
     if(count=460){ // door opens
         door.play();
     }
     if(count=500){ // starts falling
         falling.play();
     }
     if(count=500){ // hits water
         splash.play();
     }
     if (count>=475&count<=650){ // man falls and water comes up
         planeengine.stop();
         var n = noise(noiseParam);
         var x = map(n,0,1,0,width/2);
         noiseParam+=noiseStep;
         image(pman,x,y,70,70); //parachute man
         y++;
         image(ocean,0,wy,400,200);
         wy-=1;
     }
     else if (count==650) { // ned
         background(0);
          falling.stop();
          splash.stop();
          noLoop();
     }
}

Project 10 – Sonic Story

sketchDownload
//Carson Michaelis
//Section B

var frameCount = 0;
var rackTime = 0;
var pinsTime = 0;
var ballTime = 0;
var ballColor = 0;
var knockedTime = 0;
var pinsX = [100, 77, 100, 55, 32, 77, 133, 145, 158, 133];
var pinsY = [40, 30, 18, 18, 6, 6, 30, 18, 6, 6];
var pinsAngles = [];
var rollSound;
var strikeSound;
var backgroundSound;
var cheerSound;

function preload() {
//    NAME OF SOUND = loadSound("web address");
    rollSound = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/CarsonRoll.wav");
    strikeSound = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/CarsonStrike.wav");
    backgroundSound = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/CarsonBackground.wav");
    cheerSound = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/CarsonCheer.wav");


    //image loading
    bowlingLane = loadImage("https://i.imgur.com/58QdPGi.jpg");
}

function setup() {
    createCanvas(200, 400);
    frameRate(20);
    background(220);
    ballColor = color(random(100,200),75,75);
    for (let i = 0; i < 10; i ++) {
        pinsAngles[i] = random(360);
    }

    useSound();
}

function soundSetup() {
    rollSound.setVolume(1);
    strikeSound.setVolume(.5);
    backgroundSound.setVolume(.25);
    cheerSound.setVolume(.25);
}

function draw() {
    background(220);
    bowlingLane.resize(160,400);
    image(bowlingLane,20,0);

    rack(rackTime);
    bowlingPins(pinsTime);
    bowlingBall(ballTime);
    pinsKnocked(knockedTime);

    frameCount++;

    if (frameCount > 50 & frameCount < 175) {rackTime++; pinsTime++;}
    if (frameCount > 225) {rackTime = 0;}
    if (frameCount > 250) {ballTime -= 1;}
    if (frameCount > 330 & frameCount < 350) {knockedTime++; pinsTime = -100;}

    backgroundSound.play();
    if (frameCount > 250 & frameCount < 330) {rollSound.play();}
    if (frameCount > 330 & frameCount < 360) {strikeSound.play();}
    if (frameCount > 360 & frameCount < 500) {cheerSound.play();}
}

function rack(t) {
    push();
      noStroke();
      fill(100);
      rect(15,0+t,170,-10);
      fill(50);
      rect(15,-10+t,5,-100);
      rect(180,-10+t,5,-100);
    pop();
}

function bowlingBall (t) {
    push();
      noStroke();
      fill(ballColor);
      circle(100,height+20+(t*9),30);
    pop();

}

function bowlingPins(t) {
    push();
      fill(255);
      noStroke();
      circle(100,40-64+t,15);
      circle(77,30-64+t,15);
      circle(100,18-64+t,15);
      circle(55,18-64+t,15);
      circle(32,6-64+t,15);
      circle(77,6-64+t,15);
      circle(100+(100-77),30-64+t,15);
      circle(100+(100-100),18-64+t,15);
      circle(100+(100-55),18-64+t,15);
      circle(100+(100-32),6-64+t,15);
      circle(100+(100-77),6-64+t,15);
      strokeWeight(1);
      stroke(255,0,0);
      circle(100,40-64+t,9);
      circle(77,30-64+t,9);
      circle(100,18-64+t,9);
      circle(55,18-64+t,9);
      circle(32,6-64+t,9);
      circle(77,6-64+t,9);
      circle(100+(100-77),30-64+t,9);
      circle(100+(100-100),18-64+t,9);
      circle(100+(100-55),18-64+t,9);
      circle(100+(100-32),6-64+t,9);
      circle(100+(100-77),6-64+t,9);
    pop();
}

function bowlingGutter() {
    push();
    noStroke();
    fill();
    rect(0,0,20,height);
    rect(width-20,0,20,height);
}

function pinsKnocked(t) {
    if (t > 1) {
        for (let i = 0; i < 10; i++) {
            push();
              translate(pinsX[i],pinsY[i]);
              if (frameCount < 350) {
                  rotate(radians(random(360)));
              } else if (frameCount >= 350) {
                  rotate(radians(pinsAngles[i]));
              }
              pinSide();
            pop();

        }
    }
}

function pinSide() {
    push();
      noStroke();
      fill(255);
      ellipse(0,0,5,15);
      circle(0,-7,9);
      strokeWeight(3);
      stroke(255,0,0);
      line(-4,-7,4,-7);
    pop();
}

In my short story I decided to create a sonic scene of a bowling alley, since this week I watched The Big Lebowski to relieve some election stress.

10: Sonic Story

The sonic story is a person sleeping throughout the day. He never wakes up, despite the sounds of the day and night. During the daytime, birds chirp and others are awake, and during the nighttime, the person is snoring and crickets are chirping.

sketchDownload="">
var sun;
var moon;
var crow;
var awake;
var nightSounds;
var snores;
var frameCounter = 0;
var sunset = 0;
var x = -200;
function preload () {
    moon = loadImage("https://i.imgur.com/jmfcmVw.png");
    sun = loadImage("https://i.imgur.com/on477my.png");
    morning = loadImage("https://i.imgur.com/xGVPDr2.png");
    night = loadImage("https://i.imgur.com/3XAUSES.png");

    crow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/435507__benjaminnelan__rooster-crow-2.wav")
    awake = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/401338__ckvoiceover__yawning.wav");
    chirp = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birdsound-1.wav");
    nightSounds = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/200167__ebonny__cicadas.wav");
    snores = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/409015__marisca16__old-man-snoring.wav");

}

function setup() {
    createCanvas(600, 400);
    frameRate(15);
    useSound();
}

function soundSetup() {
        crow.setVolume(0.3);
        awake.setVolume(0.4);
        chirp.setVolume(0.5);
        nightSounds.setVolume(0.9);
        snores.setVolume(0.5);
}


function draw() {
    imageMode(CENTER);

    if (sunset % 2 == 0) { //sunrise
        background(190, 230, 244);
        push();
        translate(115 + x, -50);
        image(sun, 200, 200, 600, 400);
        pop();
        image(morning, 300, 200, 600, 400);
    } else {

        background(46, 38, 86); //nighttime
        push();
        translate(115 + x, -50);
        image(moon, 200, 200, 600, 400);
        pop();
        image(night, 300, 200, 600, 400);
    }

    if (x == 300) {
        x = -200;
        sunset ++;
    }

    x += 5;


//morning
    if (x == -100 & sunset % 2 == 0) {
        crow.play();
    }
    if (x == -100 & sunset % 2 == 0) {
        chirp.play();
    }
    if (x == -100 & sunset % 2 == 0) {
        awake.play();
    }
//night
    if (x == -100 & sunset % 2 == 1) {
        nightSounds.play();
    }
    if (x == -100 & sunset % 2 == 1) {
        snores.play();
    }
}

I used 6 sounds. I used crowing, birds chirping, and someone yawning for the daytime sounds, and used snoring and crickets for the nighttime sounds. The biggest challenge was finding a way to align the sounds with the daytime and nighttime, and ended up using the x width and a counter to track if it is daytime or nighttime.

Project 10- Sonic Story

I wanted to create a story that was fun and easy to understand. I took a typical camping scary story and turned it into a visual piece of code. I left the story open ended where the viewer can guess what happens next.

sketchDownload
/*There is man at a camp fire telling ghost stories. The flashlight is the
trope of holding a flashlight under one's chin. A ghost then appears but cannot
move past the fire. The wind then blows out the fire and the screen goes dark.
The next part is up to the viewer's imagination.*/

function setup() {
    createCanvas(480, 480);
    createDiv("p5.dom.js library is loaded.");
    frameRate(1);
    useSound();
}

//loads all audio files before running the code
function preload(){
    ghostSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Ghost.wav");
    fireCrackling=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Fire.wav");
    flashlightClick=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Flashlight.wav");
    windWoosh=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Wind.wav");
}

//sets the volume for all the sounds
function soundSetup(){
    ghostSound.setVolume(1);
    fireCrackling.setVolume(1);
    flashlightClick.setVolume(1);
    windWoosh.setVolume(1);
}

function draw() {
    background(26, 27, 71);
    fill(0, 255, 0);
    //creates the grass
    rect(0, 200, 480, height-200);


    translate(100, 100);
    push();
    //if frameCount is even it will display one fire, if odd it will display
    //the other
    //the secondary ifs make the fire stop when the wind blows past
    if(frameCount % 2 == 0){
        translate(115, 110);
        scale(.8);
        fill(255, 0, 0);
    //One version of the fire
        if(frameCount < 32){ //stops the fire when the wind blows by
            beginShape();
            curveVertex(84, 70);
            curveVertex(84, 70);
            curveVertex(95, 19);
            curveVertex(87, 5);
            curveVertex(75, 25);
            curveVertex(60, -30);
            curveVertex(40, 25);
            curveVertex(32, -10);
            curveVertex(21, 17);
        curveVertex(32, 70);
        curveVertex(84, 70);
        curveVertex(84, 70);
        endShape();
    //pop();
        }
    }
    else{
        if(frameCount < 32){ //stops fire when the wind blows by
    //Second version of the fire
            push();
            translate(115, 110);
            scale(.8);
            fill(255, 0, 0);
            beginShape();
            curveVertex(84, 70);
            curveVertex(84, 70);
            curveVertex(32, 70);
            curveVertex(21, 17);
            curveVertex(32, 0);
            curveVertex(40, 25);
            curveVertex(50, -25);
            curveVertex(75, 25);
            curveVertex(80, 5);
            curveVertex(90, -5);
            curveVertex(84, 70);
            curveVertex(84, 70);
            endShape();
        }
    }
    pop();

    //downward sloping log under the fire
    fill(165, 42, 42);
    push();
    translate(125, 150);
    rotate(radians(25));
    rect(0, 0, 80, 20);
    pop();
    //upward sloping log under the fire
    push();
    translate(125, 150);
    rotate(radians(-25));
    rect(-20, 30, 80, 20);
    pop();

    //if statement makes the face light up with the flashlight
    if(frameCount>12){
        fill(253, 217, 181);
    }
    else{
        fill(0);
    }
    //head
    circle(0, 5, 50);
    //body
    line(0, 30, 0, 100);
    //legs
    line(0, 100, -15, 150);
    line(0, 100, 15, 150);
    //arms
    line(-15, 60, 15, 60);
    line(15, 60, 0, 70);

    //flashlight
    fill(255);
    rect(-2.5, 60, 5, 20);
    quad(-2.5, 60, 2.5, 60, 7.5, 50, -7.5, 50)


    //flashlight beam that lights up face
    if(frameCount > 12){
        push();
        noStroke();
        fill(255, 255, 0, 60);
        quad(-7.5, 50, 7.5, 50, 25, 0, -25, 0);
        pop();
    }
    //moves the ghost from right to left
    push();
    if(frameCount > 17 & frameCount < 27){
        translate(frameCount*-5, 0);
        ghost();
    }
    pop();

    //wind
    //if moves the wind from right to left
    if(frameCount > 27){
        push();
        translate(200+frameCount*-10, 0);
        stroke(255);
        line(250, 50, 300, 50);
        line(275, 70, 325, 70);
        line(290, 30, 340, 30);
        pop();
    }
    //stops the animation and creates a black screen
    if(frameCount > 32){
        background(0);
        noLoop();
    }
    //when the flashlight turns on, the sound is made
    if(frameCount == 13){
        flashlightClick.play();
    }
    //fire sounds starts at 5 and ends prior to the flashlight
    else if(frameCount == 5){
        fireCrackling.play();
            if(frameCount == 10){
                fireCrackling.stop();
            }
    }
    //ghost sound starts when it is created
    else if(frameCount == 18){
        ghostSound.play();
    }
    //wind sound plays when the wind appears on screen
    else if(frameCount == 28){
        windWoosh.play();
    }
}
//function to create the ghost
function ghost(){
    push();
    beginShape();
    noStroke();
    arc(300, 50, 40, 100, PI, 0);
    triangle(300, 50, 305, 65, 310, 50);
    triangle(310, 50, 315, 65, 320, 50);
    triangle(290, 50, 295, 65, 300, 50);
    triangle(280, 50, 285, 65, 290, 50);
    fill(0);
    ellipse(295, 20, 5, 10);
    ellipse(305, 20, 5, 10);
    pop();
}

Project 10: Sonic Story

For this project, I reintroduce three characters from a cartoon TV show called We Bare Bears. With images I used online, I created a story of the three bears enjoying the company of each other. In the first scene, the Panda is alone and on his phone. Once Grizzly comes into the second scene, the music begins to play with birds chirping in the background. Then for the rest of the story, Ice (polar bear) also joins and has fun with the two other bears by taking selfies.

sketch – Copy
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 10


//NOTE
//when submitting to autolab use ideate links
//to test sounds on your own computer put in local server

//images
var grizzlyBearWave;
    var grizzlyX1 = 600;
    var grizzlyY1 = 200;

var polarBear;
    var iceX1 = 600;
    var iceY1 = 200;

var pandaBear;
var phonePanda;
var selfiePanda;

var tree;
var cloud;
    var cloudX = 3.0;
    var cloudX1 = 230;
    var cloudY1 = 50;
    var cloudX2 = 420;
    var cloudY2 = 90;
    var cloudX3 = 20;
    var cloudY3 = 3;

var bird;
    var birdX = 3.0;
    var birdX1 = 200;
    var birdY1 = 80;

//sounds
var morningTune;

//extra
var frameCount = 0;
var grizzlyWalking = true;
var iceGliding = true;



function preload() {
    //images of characters
    pandaBear = loadImage("https://i.imgur.com/QZ4Xc1z.png"); 
    phonePanda = loadImage("https://i.imgur.com/6uzoWNj.png");
    selfiePanda = loadImage("https://i.imgur.com/Nf2uQ1H.png");
    
    grizzlyBearWave = loadImage("https://i.imgur.com/c7NYxSP.png"); 
    posingGrizzly = loadImage("https://i.imgur.com/PEW3RSR.png");

    iceBear = loadImage("https://i.imgur.com/tg3n57a.png"); 
    glidingIce = loadImage("https://i.imgur.com/05dhxMV.png");
    posingIce = loadImage("https://i.imgur.com/MCEiihm.png");


    //images of extras
    tree = loadImage("https://i.imgur.com/cRiGrz5.png");
    cloud = loadImage("https://i.imgur.com/UjxNnu7.png");
    bird = loadImage("https://i.imgur.com/me1Zdik.png");

    //sounds in story for submission
    morningTune = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/morningsong-1.wav");
    
    //sounds in story for self testing --- localserver
    //morningTune = loadSound("sounds/morningsong.wav");
}


function setup() {
    createCanvas(600, 420);
    useSound();
    frameRate(10);
}


function soundSetup() { 
    morningTune.setVolume(0.5);

}


function draw() {
    
    frameCount++;

    switch (frameCount) {
        case 61: morningTune.play(); break; //to start playing song when panda is no longer alone
    }

    //story frames
    //partA
    if (frameCount >= 0 & frameCount < 60) {
        pandaOnPhone();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

    }

    //partB
    if (frameCount >= 60 & frameCount < 130) {
        grizzlySaysHi();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //grizzly says hi
        if (grizzlyWalking) {
            grizzlyX1 -= 5;
        } else if (grizzlyX1 <= width/2 + 50) {
            grizzlyWalking = false; 
        }

    }


    //partC
    if (frameCount >= 130 & frameCount < 180) {
        selfieTimeA();
        
        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }
    }


    //partD
    if (frameCount >= 180 & frameCount < 240) {
        iceBearStares();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }

    }

    //partE
    if (frameCount >= 240 & frameCount < 410) {
        iceBearJoins();

        //movement of clouds 
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }

        //ice bear joins by gliding
        if (iceGliding) {
            iceX1 -= 5;
        } else if (iceX1 <= 200) {
            iceGliding = false;
        }

    }

    //partF
    if (frameCount >= 410 & frameCount < 460) {
        selfieTimeB();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }
              
    }

    if (frameCount >= 460) {
        background("black");
        fill(255);
        textSize(50);
        textFont('Georgia');
        text('The End', 300, 300);
    } 

}


//separate functions for each scene
//PART A
function pandaOnPhone() {
    background(175, 206, 255); 
    sun();  
    grass(); 
    
    clouds();

    image(tree, 5, 5, 350, 350);

    image(phonePanda, 150, 240, 150, 150); 
}

//PART B
function grizzlySaysHi() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();

    image(tree, 5, 5, 350, 350);

    image(pandaBear, 150, 200, 150, 230);
    image(grizzlyBearWave, grizzlyX1, grizzlyY1, 150, 200); 
}

//PART C
function selfieTimeA() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);
}

//PART D
function iceBearStares() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);
    image(iceBear, 550, 200, 85, 130);

}

//PART E
function iceBearJoins() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(glidingIce, iceX1, iceY1, 170, 150);
    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);     
}

//PART F
function selfieTimeB() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(posingIce, 50, 200, 150, 200); 
    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);    
}



//EXTRA --- "background"
function sun() { //yellow circle in partA
    strokeWeight(1);
    stroke(0);
    fill(255, 242, 147);
    circle(500, 70, 80);
}

function grass() { //green rectangle in partA
    strokeWeight(1);
    stroke(0);
    fill(133, 182, 57);
    rect(0, 250, 600, 170);
}

function clouds() { //clouds in partA
    image(cloud, cloudX1, cloudY1, 150, 80);
    image(cloud, cloudX2, cloudY2, 150, 80);
    image(cloud, cloudX3, cloudY3, 150, 80);
    cloudX1 += cloudX; //speed of clouds
    cloudX2 += cloudX;
    cloudX3 += cloudX;
}

function birdie() { //bird in partA
    image(bird, birdX1, birdY1, 150, 150);
    birdX1 += birdX; //speed of bird
}

Project-10-Sonic-Story

sketch
// Jasmin Kim
//Section D
      
var mouseSound;       
var mouseeX=250;
var mouseeY=100;
var x;
var y;


function preload() { //preloading sounds
//loading sounds
mouseSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rat.wav");
}

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


function soundSetup() { //setup for audio generation
    mouseSound.setVolume(0.3);
}

function draw(){
    console.log(frameRate);
    background(230);
    drawCheese();
    mouseSound.play();
    //plateSlide.play();
    if(frameCount >=2 & frameCount <=4){
        translate(0,-80);
        drawMouse(x,y);
    }
    if(frameCount > 4 & frameCount <=6){
        translate(0,0);
        drawMouse(x,y);
        translate(100,-50);
        drawMouse(x,y);
    }
    if(frameCount > 6 & frameCount <=8){
        translate(0,60);
        drawMouse(x,y);
        translate(100,-30);
        drawMouse(x,y);
        translate(-200,-60);
        drawMouse(x,y);
    }
    if(frameCount > 8 & frameCount <=10){
        translate(0,120);
        drawMouse(x,y);
        translate(100,0);
        drawMouse(x,y);
        translate(-200,-50);
        drawMouse(x,y);
    }
    if(frameCount > 10 & frameCount <=12){
        push();
        circle(302,342,62);
        pop();
        translate(0,130);
        drawMouse(x,y);
        rotate(PI/10);
        translate(100,60);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,-30);
        drawMouse(x,y);
    }
    if(frameCount >12 & frameCount <=14){
        push();
        circle(276,357,110);
        pop();
        translate(0,180);
        drawMouse(x,y);
        rotate(PI/10);
        translate(100,120);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,0);
        drawMouse(x,y);
    }
    if(frameCount >14 & frameCount <=16){
        push();
        circle(276,357,110);
        circle(193,367,79);
        pop();
        translate(0,190);
        rotate(PI/10);
        drawMouse(x,y);
        translate(100,130);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,60);
        drawMouse(x,y);
    }
    if(frameCount >16 & frameCount <=18){
        push();
        circle(276,357,110);
        circle(193,367,79);
        pop();
        translate(0,250);
        rotate(PI/10);
        drawMouse(x,y);
        translate(0,180);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,80);
        drawMouse(x,y);
    }
    if (frameCount>18 & frameCount <20){
        fill(255);
        circle(249,379,181);
    } else if(frameCount >= 20){
        fill(255);
        circle(249,379,181);
        mouseSound.disconnect();
        textSize(30);
        fill(0);
        text("Your cheese is gone.", width/2-100,200);
        noLoop();
    }

}

function drawCheese(x,y){
    fill(255);
    noStroke();
    circle(249,387,234);    //white plate
    push();
    noFill();
    strokeWeight(1);
    stroke(49,51,73);
    circle(249,387,220);        //navy plate
    pop();
    fill(253,222,85);
    noStroke();
    triangle(323,334,241,471,167,363);      //cheese
    fill(255);
    circle(200,357,20);
    circle(270,346,11);
    circle(236,391,11);
    circle(189,395,12);
    circle(222,436,20);
    circle(247,459,11);
    circle(277,413,20);
    circle(315,349,11);
}


function drawMouse(){
    fill(127,84,41);        //brown
    stroke(0);
    strokeWeight(1);
    ellipse(mouseeX,mouseeY,98,103);            //body
    arc(mouseeX, mouseeY+45, 52, 52, 0, PI);       //face
    push();
    //eyes
    fill(0);                                    
    ellipse(mouseeX-10,mouseeY+52,7,8); //left
    ellipse(mouseeX+10,mouseeY+52,7,8); //right
    ellipse(mouseeX,mouseeY+66,5,5);
    fill(255);
    ellipse(mouseeX-10,mouseeY+51,3.7,4.7);
    ellipse(mouseeX+10,mouseeY+51,3.7,4.7);
    noFill();
    stroke(0);
    line(mouseeX-30,mouseeY+61,mouseeX-7,mouseeY+65);  //left
    line(mouseeX-30,mouseeY+69,mouseeX-7,mouseeY+67);
    line(mouseeX-23,mouseeY+78,mouseeX-5,mouseeY+69);
    line(mouseeX+30,mouseeY+61,mouseeX+8,mouseeY+65);  //right
    line(mouseeX+7,mouseeY+67,mouseeX+30,mouseeY+69);
    line(mouseeX+6,mouseeY+69,mouseeX+24,mouseeY+78);
    pop();
    stroke(127,84,41);
    strokeWeight(4);
    line(mouseeX,mouseeY-50,mouseeX-23,mouseeY-69);     //tail
    noStroke();

    push();
    fill(0);
    arc(mouseeX+24, mouseeY+30, 37, 39, -PI,TWO_PI);  //right ear black
    arc(mouseeX-24, mouseeY+30, 37, 39,PI, TWO_PI);  //left ear black
    pop();
    ellipse(mouseeX+25, mouseeY+31, 37, 39);  //right ear brown
    ellipse(mouseeX-25, mouseeY+31, 37, 39);  //left ear brown
   
    push();
    fill(247,168,170);      //pink
    ellipse(mouseeX+25,mouseeY+30,31,31);
    ellipse(mouseeX-25,mouseeY+30,31,31);
    pop();
    ellipse(mouseeX+22,mouseeY+34,31,28);       //left ear cover
    ellipse(mouseeX-22,mouseeY+34,32,28);       //right ear cover
}

For this project, I tried to show a short animation of mice eating all of my cheese. As frameCount increases, mouse appears and the mouse sound increases. I also tried to show how the cheese gradually disappears throughout the frame.

Project 10: Sonic Story

sketchDownload
//Nicholas Wong
//Section A
//nwong1@andrew.cmu.edu
//Assignment 10

var angle = 0; //Angle for clock
var catEyes = 0; //Cat eye size
var mousePos = 0; //Mouse position
var mousedx = 5; //Mouse speed

function preload() 
{
    //For use in web upload
   catSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cat.wav");
   mouseSound =loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/mouse1.wav"); 
   clockSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clock.wav");
   thunderSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/thunder-2.wav"); 

    //For use in localhost
    /*
    catSound = loadSound("cat.wav");
    clockSound = loadSound("clock.wav");
    mouseSound = loadSound("mouse1.wav");
    thunderSound = loadSound("thunder.wav");
    */
}

function soundSetup() 
{ // setup for audio generation
    catSound.setVolume(0.5);
    mouseSound.setVolume(0.4);
    clockSound.setVolume(0.7);
    thunderSound.setVolume(1);
}

function setup() {
    // you can change the next 2 lines:
    createCanvas(480, 480);
    createDiv("p5.dom.js library is loaded.");
    useSound();
    frameRate(1);
    angleMode(DEGREES);
}




function draw() 
{
    background(140,90,50);

    //Backdrop (window, room)
    drawBackdrop();

    //Frame dependant events
    if(frameCount % 7 == 0)
    {
        clockSound.play();
    }

    if(frameCount % 12 == 0)
    {
        drawLightning() //Draw lightning for 1 frame
        catEyes = 6; //Cat eyes are wide open
        mousedx *= -1; //Mouse reverses direction
        thunderSound.play(); //Thunder sound
        catSound.play(); //Meow
    }


    //Window
    windowLines(95,200);
    windowLines(95,260);

    //Objects
    drawDrawer(330,height/2+100);
    drawPainting(400,270);
    drawClock(width/2 + 20,height/2);

    //Cat
    drawCat(340,310);

    //Mouse
    drawMouse(mousePos,430);



}

function drawCat(x,y)
{
    //Cat artwork
    push();
    noStroke();
    ellipseMode(CENTER);
    fill(40);
    ellipse(x+13,y+17,50,30);
    ellipse(x-2,y+25,17,15);
    ellipse(x+30,y+25,15,15);
    fill(40);
    ellipse(x,y,35,30);
    triangle(x-15,y-8,x-5,y-10,x-10,y-23)
    translate(18,0);
    triangle(x-15,y-8,x-5,y-10,x-10,y-23)
    fill(255)

    //Cat eyes
    ellipse(x-10,y,7,catEyes);
    ellipse(x-26,y,7,catEyes);
    pop();

    //Cats eyes decrease in size every frame
    catEyes -= 1;
    

    //Cat eyes minimum size is 1;
    if(catEyes <= 0)
    {
        catEyes = 1;
    }

}

function drawMouse(x,y)
{
    //Mouse artwork
    push();
    noStroke();
    ellipse(x,y,20,10);
    ellipse(x+8,y-3,4);
    triangle(x+5,y-4,x+15,y,x+5,y+4);
    stroke(255);
    strokeWeight(2);
    line(x,y+2,x-20,y+2);
    stroke(0);
    strokeWeight(2);
    point(x+15,y);
    strokeWeight(1.5);
    point(x+9,y-1);
    pop();

    //Play squeak when mouse reaches x=0;
    if(mousePos == 0)
    {
        mouseSound.play();
    }

    //Make mouse stop moving left after x=-15
    if(mousePos <= -15)
    {
        mousePos = -15
    }
    //Add dx to mouse position
    mousePos += mousedx;

}

function drawLightning()
{
    //Lightning artwork
    push();
    translate(random(25,-25),0);
    stroke(0,100,255);
    strokeWeight(3);
    line(90,142,107,160);
    line(107,160,90,190);
    line(90,190,105,220);
    line(105,220,95,250);
    line(95,250,107,280);
    line(90,317,107,280);
    stroke(255);
    strokeWeight(1);
    line(90,141,107,160);
    line(107,160,90,190);
    line(90,190,105,220);
    line(105,220,95,250);
    line(95,250,107,280);
    line(90,317,107,280);
    pop();
}

function drawPainting(x,y)
{   
    //Painting artwork
    push();
    noStroke();
    rectMode(CENTER);
    fill(120,60,0)
    rect(x,y,120,75);
    fill(220);
    rect(x,y,110,65);
    fill(0,170,190);
    circle(x,y,30)
    fill(180,0,150);
    circle(x+30,y+10,20)
    pop();
}

function drawBackdrop()
{
    push();
    noStroke();
    //Floor
    fill(120,70,10);
    rect(0,400,width,80);

    //Ceiling
    fill(120,60,0)
    rect(0,0,width,80);

    //Window
    rect(15,125,160,210);
    fill(170,100,0);
    rect(20,130,150,200);

    //Sky
    fill(52, 49, 69);
    rect(30,140,130,180)
    pop();
}

function windowLines(x,y)
{
    //Window frame stuff
    push();
    noStroke();
    fill(170,100,0);
    rectMode(CENTER);
    rect(x,y,150,7);
    fill(100,50,0);
    rect(x,y+3,130,2)
    pop();
}

function drawDrawer(x,y)
{
    push();
    noStroke();
    fill(170,100,0);
    rect(x,y,143,70);

    //Shadow
    fill(115,65,0)
    rect(x,y+70,143,70)

    //Back
    fill(190,120,0);
    rect(x+7,y+12,130,20);
    rect(x+7,y+40,130,20);

    //Drawers
    fill(220,150,0);
    circle(x+35,y+22,10);
    circle(x+105,y+22,10);
    circle(x+35,y+50,10);
    circle(x+105,y+50,10);
    pop();
}


function drawClock(x,y)
{
    push();
    noStroke();

    //Shadow
    fill(115,65,0);
    rect(x-25,y+150,52,100)

    //Light
    fill(220,150,0);
    circle(x+3,y+70,50);
    rect(x-22,y+70,50,100)
    circle(x+3,y+55,35)

    //Base
    fill(200,120,0);
    circle(x,y+70,50);
    rect(x-25,y+70,50,100)
    circle(x,y+55,35)


    //Shades
    fill(170,100,0);
    circle(x,y+55,25);
    circle(x,y+70,40);
    rect(x-15,y+100,30,65);
    ellipse(x,y+100,30,15);

    //Clock face
    fill(255);
    circle(x,y+70,34);
    fill(0);
    circle(x,y+70,2);

    //Clock Static Hand
    stroke(100);
    strokeWeight(1);
    line(x,y+70,x,y+60)
    
    //Clock Second Hand

    angle+= 6 //Add 6 degrees every frame (second)
    stroke(0);
    strokeWeight(0.5);
    let ax = x+cos(angle) * 14; //Polar x coordinates
    let ay = y+sin(angle) * 14; //Polar y coordinates
    line(x,y+70, ax, ay+70); //Draw clock hand

    //Detail
    stroke(235,180,0);
    strokeWeight(2);

    //Pendulum chime things
    line(x,y+94,x,y+120+abs(10*sin(angle)));
    line(x+4,y+94,x+4,y+100+abs(20*sin(angle)));

    pop();
}

A mouse tries to sneak past a sleeping cat, but the lightning keeps waking the cat up.