Category: SectionB

CLICK ON CANVAS TO START!

var pan1; // pan
var pan2; // pan with flame
var egg1; // whole egg
var egg2; // cracked egg 
var egg3; // raw egg
var egg4; // cooked egg 
var bacon1; // raw bacon
var bacon2; // cooked bacon
var plate; 

var pansound;
var stove;
var fridge;
var crackegg;
var fryegg;
var bacon;
var tada;

var counter = false;
var count = 0;

function preload() {
    // images
    pan1 = loadImage("https://i.imgur.com/k8FOFKN.png");
    pan2 = loadImage("https://i.imgur.com/A5D1YD7.png");
    egg1 = loadImage("https://i.imgur.com/bTLCEPN.png");
    egg2 = loadImage("https://i.imgur.com/W6aWzCk.png");
    egg3 = loadImage("https://i.imgur.com/ptjZjee.png");
    egg4 = loadImage("https://i.imgur.com/f0iTWaq.png");
    bacon1 = loadImage("https://i.imgur.com/JllJSKp.png");
    bacon2 = loadImage("https://i.imgur.com/KaqJr4l.png");
    plate = loadImage("https://i.imgur.com/OKZWSey.png");

    // sounds 
    pansound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/pansound.wav");
    stove = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/stove.wav");
    fridge = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/fridge.wav");
    crackegg = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/crackegg.wav");
    fryegg = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/fryegg.wav");
    bacon = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/bacon.wav");
    tada = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/tada.wav");
}


function setup() {
    createCanvas(400, 400);
    frameRate(1);
    pan1.resize(200, 0);
    pan2.resize(200, 0);
    egg1.resize(40, 0);
    egg2.resize(80, 0);
    egg3.resize(80, 0);
    egg4.resize(80, 0);
    bacon1.resize(40, 0);
    bacon2.resize(90, 0);
    plate.resize(200, 0);
    useSound();
}

function soundSetup() { 
    pansound.setVolume(5);
    stove.setVolume(5);
    fridge.setVolume(5);
    crackegg.setVolume(5);
    fryegg.setVolume(5);
    bacon.setVolume(5);
    tada.setVolume(5);
}


function draw() {
    background(247, 220, 224); // light pink background 
    // story line: this is basically a short clip of making breakfast. There are a lot of kitchen and cooking sounds incorporated to show each step of frying an egg and bacon. 

    if (counter == true) {
        count += 1;
    }

    // taking out pan 
    if (count > 0 & count <= 2) {
        image(pan1, 110, 230);
        pansound.play();
    }

    // turn on stove 
    if (count >= 2 & count < 4) {
        pansound.stop();
        image(pan2, 110, 230); // switch to pan with flames 
        stove.play();
    }

    // taking out egg
    if (count >= 4 & count < 5) {
        stove.stop();
        image(pan2, 110, 230);
        image(egg1, 170, 200);
        fridge.play();
    }

    // cracking egg 
    if (count >= 5 & count < 6) {
        fridge.stop();
        image(pan2, 110, 230);
        image(egg2, 150, 200);
        crackegg.play();

    }

    // raw egg in pan 
    if (count >= 6 & count < 9) {
        crackegg.stop();
        image(pan2, 110, 230);
        image(egg3, 155, 285);
        fryegg.play();
    }

    // egg sizzling -> cooked 
    if (count >= 9 & count < 12) {
        image(pan2, 110, 230);
        image(egg4, 155, 285);
    }

    // taking out bacon 
    if (count >= 12 & count < 13) {
        fryegg.stop();
        fridge.play();
        image(pan2, 110, 230);
        image(bacon1, 170, 200);
    }

    // bacon sizzling -> cooked
    if (count >= 13 & count < 15) {
        bacon.play();
        image(pan2, 110, 230);
        image(bacon2, 150, 285);
    }

    // bacon in plate w/ egg + TADA 
    if (count >= 15 & count < 16) {
        bacon.stop();
        tada.play();
        image(plate, 100, 230);
        image(bacon2, 130, 260);
        image(egg4, 180, 260);
    }
}

function mousePressed() {
    counter = true; // starts counting once click screen 
}

My sonic story is quite simple. It basically shows a breakfast of eggs and bacon being made. I drew all the graphics for the food, pan, flame, and plate. I used sounds like the fridge opening to represent taking out the ingredients. Other sounds like cracking the egg and the bacon sizzling are all to represent the cooking.

sketchDownload

//Yanina Shavialenka
//Section B

var walkImage = [];   // an array to store the images
var flying = []; //bird flying array images
var characters = [];
var birds = [];
var bg; //background image
var lightning; //lighting picture
var thunder; //thunder sound
var amb; //ambient sound
var chirp; //bird sound

function preload(){
    // These URLs are for the individual walk cycle images
    var filenames = [];
    filenames[0] = "https://i.imgur.com/14ifmej.png";
    filenames[1] = "https://i.imgur.com/r9GhjWn.png";
    filenames[2] = "https://i.imgur.com/A0L2KVp.png";
    filenames[3] = "https://i.imgur.com/JFE5CBm.png";
    filenames[4] = "https://i.imgur.com/14ifmej.png";
    filenames[5] = "https://i.imgur.com/r9GhjWn.png";
    filenames[6] = "https://i.imgur.com/A0L2KVp.png";
    filenames[7] = "https://i.imgur.com/JFE5CBm.png";
    filenames[8] = "https://i.imgur.com/14ifmej.png";
    filenames[9] = "https://i.imgur.com/r9GhjWn.png";
    filenames[10] = "https://i.imgur.com/A0L2KVp.png";
    filenames[11] = "https://i.imgur.com/JFE5CBm.png";

    // These URLs are for the individual bird cycle images
    var file = [];
    file[0] = "https://i.imgur.com/82McfxQ.png";
    file[1] = "https://i.imgur.com/OMNJ7z2.png";
    file[2] = "https://i.imgur.com/ZP2mduv.png";
    file[3] = "https://i.imgur.com/2ly1P4T.png";
    file[4] = "https://i.imgur.com/5VNmIMy.png";
    file[5] = "https://i.imgur.com/KjJmaEd.png";
    file[6] = "https://i.imgur.com/036LD8g.png";
    file[7] = "https://i.imgur.com/OPD7VfW.png";
    file[8] = "https://i.imgur.com/Rt8p00H.png";

    // These for loops change the images to create a walking and flying effect
    for (var i = 0; i < filenames.length; i++) {
        walkImage[i] = loadImage(filenames[i]);
    }

    for (var i = 0; i < file.length; i++) {
        flying[i] = loadImage(file[i]);
    }

    //loads the images and sounds
    bg = loadImage("https://i.imgur.com/nqIhKWP.png");
    lightning = loadImage("https://i.imgur.com/6kvwrHw.gif");
    lightning.resize(150,0);
    thunder = loadSound("http://localhost:8000/thunder.wav");
    amb = loadSound("http://localhost:8000/amb.wav");
    chirp = loadSound("http://localhost:8000/bird.wav");
}

// Constructor for each walking character
function makeCharacter(cx, cy, cdx, cdy) {
    var c = { x: cx, y: cy, dx: cdx, dy: cdy,
             imageNum: 0,
             stepFunction: stepCharacter,
             drawFunction: drawCharacter
        }
    return c;
}

// Constructor for each blying bird
function makeBird(cx, cy, cdx, cdy) {
    var c = { x: cx, y: cy, dx: cdx, dy: cdy,
             imageNum: 0,
             stepFun: stepBird,
             drawFun: drawBird
        }
    return c;
}

function stepCharacter() {
    this.imageNum++;
    if(this.imageNum >= walkImage.length) {
       this.imageNum = 0;
    }
     
    this.x += this.dx; 
}

function stepBird() {
    this.imageNum++;
    if(this.imageNum >= flying.length) {
       this.imageNum = 0;
    }
     
    this.x += this.dx; 
}

//This function draws the corresponding image
function drawCharacter() {
    image(walkImage[this.imageNum],this.x,this.y);
}

function drawBird() {
    image(flying[this.imageNum],this.x,this.y);
}

//This function creates the canvas and makes the character
function setup() {
    createCanvas(612,408);
    frameRate(15);
    for (var i = 0; i < walkImage.length; i++) {
        walkImage[i].resize(150,0);
    }
    for (var i = 0; i < flying.length; i++) {
        flying[i].resize(50,0);
    }
    characters.push(makeCharacter(0,125,1,0));
    birds.push(makeBird(0,50,3,0));
    useSound(0);
}

function soundSetup() {
    thunder.setVolume(0.5);
    amb.setVolume(0.2);
    chirp.setVolume(0.1);
}

function draw() {
    background(bg);
    if(frameCount >= 100) {
        image(lightning,425,-10);
        image(lightning,-20,-10);
        thunder.play();
        tint(100);
        characters[0].stepFunction();
        characters[0].drawFunction();
        birds[0].stepFun();
        birds[0].drawFun();
        characters[0].dx = 4;
        birds[0].dx = 6;
    }
    else {
        characters[0].stepFunction();
        characters[0].drawFunction();
        birds[0].stepFun();
        birds[0].drawFun();
        amb.play();
        chirp.play();
    }
}

For me, this assignment was really challenging considering the fact that we did not spend a lot of time on the sound topic so I was really struggling and tried to come up with something interesting and easy at the same time. In my code I made a girl walk and a bird fly: I used a sound effect to represent the chirping of a bird and sounds of an outside world. Then, the lightning strikes and the thunder sound comes off with dark background.

I could not upload the file properly here because the thunder sound is more than WordPress accepts and thus the file was not able to get loaded onto here.

My code wasn’t running properly on my own computer so I’m not going to try to get it to run here 🙁

The premise of my story is that a hungry cat meows, and notices the water rippling in a fishbowl. The cat hisses at the fish and then walks over to investigate. There is a splashing noise, and then the fish mysteriously disappears…

//Patrick Fisher wpf@andrew.cmu.edu Assignment-10-project
var fireSound;
var earthSound;
var windSound;
var waterSound;
var rockxarray = []; //array for falling rocks
var rockyarray = [];
var dy = 12; //drop rate for rocks
var fireYPoints = []; //array for the points for drawing the fire 
var noiseParam = 0; //variable for noise function
var noiseStep = 0.05; //variable to change noiseParam
var windx = []; //wind sweep x array
var windy = []; //wind swee y array
var wind2x = [];
var wind2y = [];
var waterPoints = []; //array for the points for drawing the river
var oppoWaterPoints = [];
var framesC = 0; //frame count variable 

function preload() {
    fireSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/fireedit.wav");
    earthSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/earthedit.wav");
    windSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/windedit.wav");
    waterSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/wateredit.wav");
}


function setup() {
    createCanvas(500, 300);
    for(var i = 0; i <= 19; i++){ //establish rocks
        rockxarray[i] = random(0,500);
        rockyarray[i] = random(0,20);
    }
    for(var i = 0; i <= 120; i++){ //establishes fire
        fireYPoints[i] = map(noise(noiseParam),0,1,100,300);
        noiseParam += noiseStep
    }
    for(var i = 0; i <= 120; i++){ //establsihes water
        waterPoints[i] = map(noise(noiseParam),0,1,0,height/2);
        oppoWaterPoints[i] = map(waterPoints[i],0,height/2,height,height/2)
        noiseParam += noiseStep
    }

    for(var i = 0; i <= 19; i++){ //establish wind 1 array
        windy[i] = map(noise(noiseParam),0,1,100,300);
        windx[i] = map(noise(noiseParam),0,1,100,500);
        noiseParam += noiseStep
    }

    for(var i = 0; i <= 19; i++){ //establishes wind 2 array
        wind2y[i] = map(noise(noiseParam),0,1,100,300);
        while(wind2y[i] == windy[i]){
            wind2y[i] = map(noise(noiseParam),0,1,100,300);
        }
        wind2x[i] = map(noise(noiseParam),0,1,100,500);
        while(wind2x[i] == windx[i]){
            wind2x[i] = map(noise(noiseParam),0,1,100,300);
        }

        noiseParam += noiseStep
    }

    createDiv("p5.dom.js library is loaded.");
    //======== call the following to use sound =========
    useSound();
    frameRate(4);

}


function soundSetup() { // setup for audio generation
    fireSound.setVolume(0.5);
    earthSound.setVolume(0.5);
    waterSound.setVolume(0.5);
    windSound.setVolume(0.5);
}


function draw() {
    background(40);
    if(framesC == 0){ //does the earth section
        earthSound.play();

    }
    if(framesC < 28){
        earthDraw();

    }

    if(framesC == 28){ //does the fire section
        fireSound.play();

    }
    if(framesC >= 28 & framesC < 56){
        fireDraw();
    }

    if(framesC == 56){ //does the wind section
        windSound.play();
    }
    
    if(framesC >= 56 & framesC < 84){ 
        windDraw();
    }

    

    if(framesC == 84){ //does the water section
        background(40);
        waterSound.play();
    }
    if(framesC >= 84 & framesC < 112){

        waterDraw();
    }

    if(framesC == 112){ //ends the program
        background(0);
        noLoop();
    }



    framesC ++;
} 

function waterDraw() { // draws the water
    
    push();
    noStroke();
    fill(158,196,226);
    waterPoints.shift(); //removes the last entry in the array to make room for the next one
    waterPoints.push(map(noise(noiseParam),0,1,0,height/2));
    oppoWaterPoints.shift();
    oppoWaterPoints.push(map(waterPoints[120],0,height/2,height,height/2))
    beginShape(); //begins drawing the mountain
    for(i = 0; i <= 120; i++){    //for loop that makes the peaks     
        vertex(i*5,waterPoints[i]);
        vertex(i*5,oppoWaterPoints[i]);
    }
    endShape(CLOSE);
    noiseParam += noiseStep;
    pop();

}

function fireDraw() { //draws the fire

    push();
    noStroke();
    fill(248,103,19);
    beginShape(); //begins drawing the fire
    vertex(0,height);
    for(i = 0; i <= 120; i++){    //for loop that makes the fire     
        vertex(i*5,fireYPoints[i]);
    }
    vertex(width,height);
    endShape(CLOSE);

    for(var i = 0; i <= 120; i++){ //for loop that initrially fills the array
        fireYPoints[i] = map(noise(noiseParam),0,1,100,300);
        noiseParam += noiseStep
    }
    pop();

}

function earthDraw() { //draws the rocks

    for(var i = 0; i <= 19; i++){
        fill(87,64,52);
        ellipse(rockxarray[i],rockyarray[i],random(5,10,random(5,10))); //draws the rocks, the randomness makes them "tumble"
        rockyarray[i] += dy; //moves the rocks down
    }   
}

function windDraw() { //draws the wind

    push();
    strokeWeight(5);
    stroke(190,239,143);

    for(var i = 0; i <= 9; i++) {
        line(windx[i],windy[i],windx[i+1],windy[i+1]); //draws the wind
    }
    windx.push(random(100,500)); //shifts the array and adds new points
    windy.push(random(100,300));
    windx.shift();
    windy.shift();

    for(var i = 0; i <= 9; i++) {
        line(wind2x[i],wind2y[i],wind2x[i+1],wind2y[i+1]);
    }
    wind2x.push(random(100,500));
    wind2y.push(random(100,300));
    wind2x.shift();
    wind2y.shift();
    
}

I was inspired by the intro to a certain children’s cartoon. My sounds are earth, fire, air, and water. It was surprisingly difficult to find quality sounds of some of these, and I had a lot of trouble with the web server stuff.

My Project

//Chuong Truong;
//cbtruong;
//cbtruong@andrew.cmu.edu;
//Section B;

//The Overall Story of this program is that of fall;
//Leaves are falling off of trees, the sun is getting whiter;
//The air is getting frostier;
//And the birds are seen more actively flying;
//I included no custom sound and instead wanted to portray a scene;
//That was described with a song;


//initial empty array that will hold leaf objects;
var leaves = [];
//variables for the sun's green and blue values which change;
var sunG = 238;
var sunB = 82;
//initial empty array for birds;
var birds = [];

//function of the leaf object that allows it to fall;
function leafFall (){
    //stops each leaf from falling off the canvas;
    //if it has not reached that point, it will continue to fall until it does;
    if (this.f == true){
        if (this.y > height-17){
            this.y = height-5;
        }
        else {
            this.y += random(30, 60);
        }
    }
    //if met, this condition causes the leaf to fall;
    //this randomization occurs to allow for the tree and leaves to be more lifelike;
    //as not all leaves fall off immediately;
    else if (floor(random(200)) == 25){
            this.y += random(30);
            this.x += random(-15, 15);
            this.f = true;

        }
    return this.y;
}

//function that draws the leaves;
function drawLeaf(){
    //this switch and case allows for color variance for the leaves;
    //the colors are those of fall;
    switch(this.col){
      case 0: fill(237, 164, 23); break;
      case 1: fill(167, 159, 15); break;
      case 2: fill(233, 134, 4); break;
      case 3: fill(223, 57, 8); break;
      case 4: fill(201, 30, 10); break;
    }
    rectMode(CENTER);
    push();
    translate(this.x, this.y);
    rotate(radians(45));
    rect(0, 0, 15, 15);
    pop();
}

//function that makes leaves;
function leaf(lx, ly, cPreset){
    //the leaf object constructor;
    l = {x: lx, y: ly, orgY: ly, col: cPreset, f: false, 
        drawFunction: drawLeaf, fallFunction: leafFall};
    return l;
}

function makeLeavesOnTrees (x, y){
    //for loops create the leaves on the trees themselves;
    //the leaves' x and y are dependent on the tree's x and y;
    //the first row is 17 and then decreases by 1 as the row gets closer to the tree's x;
    //as the row gets closer, the leaves' initial x and y increase;

    //this variable allows the leaves to center as each row of them becomes less;
    //it is initalized again to allow for the top row to be centered correctly;
    //like it was before the nested for loops below change it;
    var centeringX = 80;

    //the starting number of leaves for each row
    var leavesRowNum = 17;

    //these nested for loops creates the leaves and gives them their inital x and y;
    //the inner loop creates the leaves for each row, giving them the x, y, and colorPreset;
    //the outer loop controls the leaves' y, as it decreases, a new row will not only be drawn;
    //but that row's total number of leaves decreases, and the centering of them is centered;
    //the loops repeat until only 5 leaves are left and they are closest to the tree's x and y;
    for (var j = 120; j > -10; j-= 10){
        for (var i = 0; i < leavesRowNum; i++){
        var l = leaf(x-centeringX + i*10, y-j, floor(random(5)));
        leaves.push(l);
    }
    //the leaves row number decreases to make each row have less leaves;
    leavesRowNum--;
    //the centering is decreased to make sure the row, as it becomes less in number;
    //is centered correctly to the tree's x;
    centeringX -= 5;
    }
}

//this function creates bird objects;
function bird (bx, by){
    //bird object constructor;
    b = {x: bx, y: by, orgY: by, flyFunction: birdFly, drawFunction: drawBird};
    return b;
}

//function that allows the bird to fly;
function birdFly (){
    this.x -= 10;
    if (this.x < 0){
        this.x = width - 20;
    }
    if (this.y > this.orgY + 20 ){
        this.y -= 5;
    }
    else {
        this.y += 5;
    }
}

//this draws the bird;
function drawBird(){
    fill(36, 143, 190);
    circle(this.x, this.y, 20);
    fill(30);
    circle(this.x, this.y, 5);
    fill(131, 67, 51);
    triangle(this.x-15, this.y, this.x - 10, this.y - 2, this.x - 10, this.y+2);
    stroke(0);
    line(this.x - 15, this.y, this.x - 10, this.y);
    fill(16, 123, 170);
    push();
    rectMode(CORNER);
    translate(this.x, this.y);
    rotate(270);
    rect(0+5, 0 - 12, 15, 10);
    rect(0+5, 0 + 4, 15, 10);
    pop();
}


function setup() {
    createCanvas(700, 500);
    frameRate(10);
    useSound();
    frameRate(3);

    //calls the makeLeavesOnTree function to create the leaves pattern;
    //on each tree dependent on the trees' location;
    makeLeavesOnTrees(125, 390);
    makeLeavesOnTrees(350, 390);
    makeLeavesOnTrees(575, 390);

    //calls the bird function and creates the bird objects;
    for (var i = 0; i < 7; i++){
         var bD = bird(random(100, 600), random(70, 120));
         birds.push(bD);
    }
}
//I kept the same sound setup from the assignment because I liked the sounds;
function soundSetup() { 
    osc = new p5.Oscillator();
    osc.amp(0.25);
    osc.setType('sine');
    osc.start();
}


function draw() {
    //this creates the background of a blue sky and  green grass;
    background(154, 211, 222);
    noStroke();
    rectMode(CORNER);
    fill(24, 136, 39);
    rect(0, 475, 700, 5);
    fill(14, 146, 49);
    rect(0, 480, 700, 20);

    //calls the drawTree function to draw trees;
    drawTree(125, 390);
    drawTree(350, 390);
    drawTree(575, 390);
    
    //this for loop updates and draws each leaf in the leaves array;
    for (var i = 0; i < leaves.length; i++){
        var l = leaves[i];
        l.fallFunction();
        l.drawFunction();
    }
    
    //calls the clouds function to make clouds;
    drawClouds(125, 80);
    drawClouds(325, 130);
    drawClouds(525, 105);

    //draws the sun;
    //this if statement allows for the sun to slowly change colors;
    if (!(sunG == 250 & sunB == 193)){
        sunG += 1.2/5;
        sunB += 11.1/5;
    }
    noStroke();
    fill(255, sunG, sunB);
    circle(600, 75, 100);
    print(leaves.length);

    //draws the birds;
    for (var o = 0; o < birds.length; o++){
        var b = birds[o];
        b.flyFunction();
        b.drawFunction();
    }

    //I turned the code from the assignment into a function;
    musicPlayer(pitches, durations);
}

//function that draws the trees without the leaves;
function drawTree (x, y){
    fill(191, 75, 25);
    rectMode(CENTER);
    rect(x, y, 20, 205);
    push();
    translate(x - 40, y - 40);
    rotate(radians(-30));
    rect(0, 0, 10, 150);
    pop();
    push();
    translate(x + 40, y - 40);
    rotate(radians(30));
    rect(0, 0, 10, 150);
    pop();
    push();
    translate(x - 30, y - 70);
    rotate(radians(-30));
    rect(0, 0, 8, 100);
    pop();
    push();
    translate(x + 30, y - 70);
    rotate(radians(30));
    rect(0, 0, 8, 100);
    pop();
    push();
    translate(x - 20, y - 90);
    rotate(radians(-30));
    rect(0, 0, 5, 80);
    pop();
    push();
    translate(x + 20, y - 90);
    rotate(radians(30));
    rect(0, 0, 5, 80);
    pop();
    push();
    translate(x - 5, y - 100);
    rotate(radians(-30));
    rect(0, 0, 3, 60);
    pop();
    push();
    translate(x + 5, y - 100);
    rotate(radians(30));
    rect(0, 0, 3, 60);
    pop();
    rect(x, y - 105, 2, 40);
}

//this function creates the clouds and draws them;
function drawClouds (x, y){
    fill(243, 242, 231);
    ellipse(x, y, 80, 50);
    ellipse(x + 20, y + 10, 80, 40);
    ellipse(x - 40, y + 10, 80, 30);
    ellipse(x - 10, y + 20, 70, 50);
}

//I used the same code from the assignments to make the music;

//arrays for the pitches and durations;
//also count variables for the index and frameCount;
//finally, the boolean rest is added to account for rests in the music;

//I changed the pitches and went with a simple 1 beat per note;
var pitches = [ 64, 64, 62, 64, 64, 62, 0, 62, 64, 66, 65, 67, 65, 0,
  60, 60, 62, 66, 65, 64, 62, 68, 68, 65, 64, 62, 62 ];
var durations = [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var indexTracker = 0;
var frameCount = 0;
var rest = false;

//I turned the code that creates the music with different notes and beat durations into a function;
//the function takes a note array and a corresponding note duration array;
function musicPlayer (noteArray, noteDurationArray){

    //code for the piano to play;
    //this sets the frequencies of the oscillator to the MIDI pitches;
    osc.freq(midiToFreq(noteArray[indexTracker]));
    
    //checks for when the note's duration is over and acts accordingly;
    if (frameCount > noteDurationArray[indexTracker]){
        //this checks for whether the tune has been completely played;
        //if it has been, then the program and oscillator ends;
        if (indexTracker + 1 == noteArray.length) {
            //print(frameCount);
            //print(indexTracker);
            osc.stop();
            noLoop();
        }
        //if it has not been completely played, then the next note will play;
        //with the frameCount reset to 0;
        else {
        print(frameCount);
        indexTracker++;
        //after the indexTracker is increased;
        //it checks to see if the new note is a rest;
        //if it is, then it deals according;
        //it also turns on the oscillator after a rest;
        if (noteArray[indexTracker] != 0){
            if (rest == true) {
            osc.start();
            rest = false;
                }
            }
        else if (noteArray[indexTracker] == 0){
            rest = true;
            osc.stop();
            }
        }
        frameCount = 0;
    }
    else {
        frameCount++;
    }
    print(noteArray[indexTracker]);
}

Instead of making 4 sounds, I used the same code from the assignments to make a song that I felt fit what I wanted to show, a scene of Fall. That scene has birds flying, leaves falling, and a sun that becomes whiter and whiter to fit the upcoming Winter.