Project-10: Sonic Story

For this project, I created a scenery of life under ocean. The four elements in my drawing are a starfish, which makes a sound every 25 frames; a fish, which spits bubbles and make the bubble spitting sound every 15 frames; an octopus, which swimming in up-left direction and makes tentacle sound every 10 frames when it shrinks before the push to swim forward; and the beach on the soft moving ocean floor accompanied by the mysterious sound starting from the beginning of this animation. During the process, I struggled with matching the sound effects with the animation changes, but I made it working eventually.

sketchDownload
/*Name:Camellia(Siyun) Wang; 
Section: C; 
Email Address: siyunw@andrew.cmu.edu;
Assignment-10;*/
//This is a normal day of underocean life
//Violet little fish is spitting bubbles,
//octopus is swimming left upwards,
//and the starfish is just lying on the soft
//moving beach on the ocean floor  
var x = 300;
var dir = 1;
var speed = 5;
var boing;
var xfish;
var yfish;
var dxfish;
var xoct;
var yoct;
var dyoct;
//setup the underwater beach
var marketvalue = [];
var noiseParam = 0;
var noiseStep=0.005;
var count;
//2 arrays to form the starfish
var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
//sounds
var ocean;
//variables to change the background
var R = 102;
var G = 178;
var B = 255;

function preload(){
    ocean = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/ocean.wav");
    star = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/star.wav");
    bubble = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/bubble.wav");
    oct = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/oct.wav");
}

function setup() {
    frameRate(3);
    createCanvas(600, 400);
    useSound();
    count = 1;
    //fish setup
    xfish = 200;
    yfish = 250;
    dxfish = 15;
    //oct setup
    xoct = 0;
    yoct = 0;
    dyoct = 3;
    //beach setup
    for(var i = 0; i < 50*width; i++){
        var n = noise(noiseParam);
        var value = map(n,0,1,height / 1.5,height);
        marketvalue.push(value);
        noiseParam+=noiseStep;
    }   
}
function soundSetup(){
    ocean.setVolume(0.1);
    star.setVolume(0.3);
    bubble.setVolume(0.5);
    oct.setVolume(1);
}

function draw() {
    ocean.play();
    background(R,G,B);
    //change background color
    //from light blue to dim blue 
    //to show the change of time
    //from day to night
    R -= 3;
    G -= 5;
    B -= 2;
    //draw the beach
    draw_beach();
    
    //draw fish
    draw_fish();
    xfish += dxfish;
    if (xfish > width-25 || xfish < 25) {
        dxfish = -dxfish;
    }

    //draw octopus
    draw_oct();
    yoct -= dyoct;

    //draw starfish
    draw_starfish();
    

    count += 1;

//end of the short animation
    if(count == 90){
        background(0);
        fill(255);
        textSize(32);
        text('The End', 250, 200);
        noLoop();
        ocean.stop();
        star.stop();
        bubble.stop();
        oct.stop();
    }
}

function draw_beach(){
    marketvalue.shift();
    var n = noise(noiseParam);
    var value = map(n,0,1,height / 1.5,height);
    marketvalue.push(value);
    noiseParam+=noiseStep;
    stroke(255,215,0);
    fill(255,215,0);
    beginShape();
    for(var i = 0; i < 50*width; i++){
        vertex(i*5,height);
        vertex( i*5 ,marketvalue[i]);
        vertex( i*5+5 ,marketvalue[i+1]);
        vertex(i*5+5,height);
    };
    endShape();
    noStroke();
}

function draw_fish() {
    fill(127,0,255);
    ellipse(xfish, yfish, 35, 20);
    if (dxfish < 0) {
        triangle(xfish+15, yfish, xfish+25, yfish-5, xfish+25, yfish+5);
    } else {
        triangle(xfish-15, yfish, xfish-25, yfish-5, xfish-25, yfish+5);
    }
     //bubles every 15 frames
     //small first one
    if(count % 15 == 0){
        bubble.play();
        if(dxfish > 0){
            fill(224,255,255);
            ellipse(xfish + 25, yfish - 5, 5, 5);
        }
        
        if(dxfish < 0){
            fill(224,255,255);
            ellipse(xfish - 25, yfish - 5, 5, 5);
        }
    }
    //middle second one
    if(count % 15 == 1){
        bubble.play();
        if(dxfish > 0){
            fill(224,255,255);
            ellipse(xfish + 25, yfish - 5, 5, 5);
            ellipse(xfish + 35, yfish - 15, 10, 10);
        }
        if(dxfish < 0){
            fill(224,255,255);
            ellipse(xfish - 25, yfish - 5, 5, 5);
            ellipse(xfish - 35, yfish - 15, 10, 10);
        }
    }
    //large last one
    if(count % 15 == 2){
        bubble.play();
        if(dxfish > 0){
            fill(224,255,255);
            ellipse(xfish + 25, yfish - 5, 5, 5);
            ellipse(xfish + 35, yfish - 15, 10, 10);
            ellipse(xfish + 45, yfish - 25, 15, 15);
        }
        if(dxfish < 0){
            fill(224,255,255);
            ellipse(xfish - 25, yfish - 5, 5, 5);
            ellipse(xfish - 35, yfish - 15, 10, 10);
            ellipse(xfish - 45, yfish - 25, 15, 15);
        }
    }
}

function draw_oct(){
    if(count % 10 == 1){
        //make sound when shrink to push
        oct.play();
        push();
        translate(400,150);
        rotate(-PI / 3);
        fill(216,191,216);
        strokeWeight(5);
        stroke(216,191,216);
        line(xoct-10,yoct+10,xoct-20,yoct+30);
        line(xoct-20,yoct+30,xoct-10,yoct+50);
        line(xoct+10,yoct+10,xoct+20,yoct+30);
        line(xoct+20,yoct+30,xoct+10,yoct+50);
        line(xoct,yoct+15,xoct,yoct+50);
        ellipse(xoct,yoct,45,35);
        noStroke();
        pop();
    }
    else{
        push();
        translate(400,150);
        rotate(-PI / 3);
        fill(238,130,238);
        stroke(238,130,238);
        strokeWeight(5);
        ellipse(xoct,yoct,30,50);
        line(xoct-10,yoct+10,xoct-30,yoct+50);
        line(xoct,yoct+15,xoct,yoct+55);
        line(xoct+10,yoct+10,xoct+30,yoct+50);
        noStroke();
        pop();
    }
}

function draw_starfish(){
    push();
    translate(450,300);
    var nPoints = x.length;
    fill(244,164,96);
    if(count % 25 == 1){
        fill(255,140,0);
        star.play();
    }
    if(count % 25 == 2){
        fill(255,140,0);
    }
    if(count % 25 == 3){
        fill(255,140,0);
    }
    if(count % 25 == 4){
        fill(255,140,0);
    }
    if(count % 25 == 5){
        fill(255,140,0);
    }
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex( x[i] + random(-3,3), y[i] + random(-3,3) );
    }
    endShape(CLOSE);
    pop();
}

Project 10: Sonic Story

sketch
//Christy Zo
//Section C

var cricketSound;
var roosterSound;
var cowSound;
var pigSound;
var sunHue;

function preload() {
    cricketSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/cricketSound.wav");
    roosterSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/roosterSound.wav");
    cowSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/cowSound.wav");
    pigSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/pigSound.wav")
 }

function soundSetup() {
    osc = new p5.TriOsc();
}
function setup() {
    createCanvas(600, 300);
    useSound();
    frameRate(30);
}



function barn(x) {
    stroke(255);
    strokeWeight(2);
    fill(50);
    rect(x, 100, 200, 150);
    fill(255);
    rect(x+10, 110, 180, 80);
    fill(50);
    rect(x+10, 200, 180, 40);
    line(x+10, 200, x+190, 240);
    line(x+10, 240, x+190, 200);
    triangle(x, 100, x+200, 100, x+100, 30);
    triangle(x+15, 100, x+185, 100, x+100, 40);
}

function rooster(x) {
    stroke(0);
    fill(255);
    line(x, 150, x-30, 190); 
    line(x, 150, x+30, 190);
    circle(x, 150, 50); 
    fill(220);
    circle(x, 180, 20);
    triangle(x, 140, x-10, 110, x+10, 110); 
    fill(150);
    triangle(x, 150, x-10, 160, x+10, 160);
    triangle(x, 170, x-10, 160, x+10, 160);
    fill(255);
    circle(x-10, 145, 5);
    circle(x+10, 145, 5);

}

function cow(x) {
    fill(255);
    stroke(0);
    rect(x, 125, 50, 50);
    fill(200);
    ellipse(x+25, 170, 52, 30); //nose
    fill(255);
    circle(x+12, 170, 10);
    circle(x+37, 170, 10);
    circle(x+15, 145, 5);
    circle(x+35, 145, 5);
    ellipse(x-10, 125, 25, 10); //ears
    ellipse(x+55, 125, 25, 10);
    line(x, 150, x-30, 190);
    line(x+50, 150, x+80, 190);

}

function pig(x) {
    line(x, 150, x-30, 190);
    line(x, 150, x+30, 190);
    circle(x, 150, 60);
    circle(x-10, 145, 5);
    circle(x+10, 145, 5);
    fill(150);
    ellipse(x, 160, 30, 15);
    fill(255);
    circle(x-5, 160, 5);
    circle(x+5, 160, 5);
    fill(100);
    triangle(x-20, 120, x-25, 130, x-15, 125);
    triangle(x+20, 120, x+25, 130, x+15, 125);

    

}

var light = 0;
var position = 255;
function draw() {
    
    background(light);
    fill(light);
    rect(0, 0, 600, 300);

    sunHue = map(position, 0, height, 255, 0);
    fill(sunHue, 150, 0);
    ellipse(200, position, 50, 50);
    if (position < -50) {
        position = 300;
        light = 0;
        frameCount = 0;

    }
    fill(220);
    noStroke();
    rect(0, 200, 600, 300);
    barn(0);
    barn(200);
    barn(400);



    rooster(100);
    cow(275);
    pig(500);

    light = light + 1;
    position = position - 1;
    if (frameCount == 30) {
        cricketSound.play();
    }
    if (frameCount == 80) {
        roosterSound.play();

    } else if (frameCount == 140) {
        cowSound.play();
    } else if (frameCount == 200) {
        pigSound.play();
    }

    if (roosterSound.isPlaying()) {
        fill(255,0,0);
        circle(100, 180, 20);
        triangle(100, 140, 90, 110, 110, 110);
        fill(255,255,0);
        triangle(100, 150, 100-10, 160, 100+10, 160);
        triangle(100, 170, 100-10, 160, 100+10, 160);
    } else if (cowSound.isPlaying()) {
        fill(165,42,42);
        ellipse(275+25, 170, 52, 30);
        fill(255);
        circle(275+12, 170, 10);
        circle(275+37, 170, 10);
    } else if (pigSound.isPlaying()) {
        fill(255, 192, 203);
        triangle(500-20, 120, 500-25, 130, 500-15, 125);
        triangle(500+20, 120, 500+25, 130, 500+15, 125);
        ellipse(500, 160, 30, 15);
        fill(255);
        circle(500-5, 160, 5);
        circle(500+5, 160, 5);

    }

}


I was reminded of the story Animal Farm, and wanted to create a simple yet cute! I wanted to make everything greyscale, but emphasize the colors when each of the animals sound play!

Project 10: Sonic-Story

sketch

// Yash Mittal
// Section D
//I made a basic 1v1 fighting game where two figures are fighting with swords
//The health bar of the two figures is shown at the bottom of the screen 

var count = 0; //variable for tracking frame count

function preload(){
    pimg = loadImage ("https://i.imgur.com/Fn5pkxI.jpg"); //background arena image
    thunderimg = loadImage ("https://i.imgur.com/VAJWvZZ.png"); //thunder image
    countdownThree = loadSound("http://localhost:8000/countdown_three.wav");
    countdownTwo = loadSound("http://localhost:8000/countdown_two.wav");
    countdownOne = loadSound("http://localhost:8000/countdown_one.wav");
    countdownFight = loadSound("http://localhost:8000/countdown_fight.wav");
    thunder = loadSound("http://localhost:8000/thunder_1.wav");
    sword = loadSound("http://localhost:8000/sword_1.wav");
    ouch = loadSound("http://localhost:8000/ouch_1.wav");
}

function soundSetup () {
    countdownThree.setVolume(0.5);
    countdownTwo.setVolume(0.5);
    countdownOne.setVolume(0.5);
    countdownFight.setVolume(0.5);
    thunder.setVolume(0.5);
    sword.setVolume(0.5);
    ouch.setVolume(0.9);
}

function setup () {
    createCanvas (480, 300);
    frameRate (10); 
    pimg.resize (480, 300); //resizing background image to canvas
    thunderimg.resize(480,300);
    useSound();
}

function draw () {

    image(pimg,0,0,width,height); //drawing background

    if (count>0 & count<9) { //countdown
        textSize(100);
        fill(255);
        stroke(255);
        text("3",width/2-40,height/2)
    }

    if (count>1 & count<3) {
        countdownThree.play();
    }

    if (count>=10 & count<19) { //countdown
        text("2",width/2-40,height/2)
    }

    if (count>10 && count < 12) {
        countdownTwo.play();
    }

    if (count>19 & count<28) { //countdown
        text("1",width/2-40,height/2)
    }

    if (count>19 && count<21) {
        countdownOne.play();
    }

    if (count>28 & count <38) { //fight
        text("FIGHT!",width/2-170,height/2)
    }

    if (count>28 && count<30) {
        countdownFight.play();
    }

    if (count>56 & count<=60) { //thunder
        image(thunderimg,45,-55,400,400)
    }

    if (count>56 && count <=58) {
        thunder.play();
    }

    if (count>=43) { //UI bars appear
        leftCharacterUI(0,0)
        rightCharaterUI(0,0)
    }
 
    if (count>=43 & count<=65) { //left player appears
        leftPlayer(160,122)
        swordLeft(0,0)
    }

    if (count>=43 && count<=75) { //right player appears
        rightPlayer(300,122)
        swordRight(0,0)
    }

    if (count>=43 && count<75) { //right player health bar shows up
        push();
        strokeWeight(0);
        fill (0,255,0)
        rect(320,270,70,5)
        pop();
    }

    if (count>=43 & count<105) { //left player health bar shows up 
        push();
        strokeWeight(0);
        fill(255,0,0);
        rect(90,270,70,5);
        pop();
    }

    if (count>=66 & count<=105) { //left player moves  right
        leftPlayer(245,122)
        swordLeft(60,60)
    }

    if (count>=75 && count<=105) { //right player moves right & health decreases
        rightPlayer(380,122)
        swordRight(-57,-57)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
    }

    if (count>70 && count<76) {
        sword.play();
    }

    if (count>=105 & count<=120) { //right & left player move left
        rightPlayer(280,122)
        swordRight(14,14)
        leftPlayer(145,122)
        swordLeft(-10,-10)
        fill(255,0,0)
        rect(90,270,70,5) //red health bar
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
    }

    if (count>=121 && count<=145) { //right player moves left and hits left player
        rightPlayer(203,122)
        swordRight(69,69)
        leftPlayer(145,122)
        swordLeft(-10,-10)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
        fill(255,0,0)
        rect(90,270,30,5) //red health bar decreases
        sword.play();
    }

    if (count>=146 & count<=170) { // players move to bottom floor
        rightPlayer(300,196)
        swordRight(-54,52)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
        leftPlayer(230,192)
        swordLeft(0,100)
        fill(255,0,0)
        rect(90,270,30,5)
    }

    if (count>=171 && count<=195) { //left player kills right player
        rightPlayer(300,196)
        swordRight(-54,52)
        leftPlayer(271,192)
        swordLeft(28,128)
        fill(255,0,0)
        rect(90,270,30,5) //red health bar
    }

    if (count>169 && count<171) {
        sword.play();
    }

    if (count>196 & count<198) {
        ouch.play();
    }

    if (count>=196 & count<=270) { //player falls on ground and text appears
        leftPlayer(271,192)
        swordLeft(28,128)
        fill(255,0,0) 
        rect(90,270,30,5) //red health bar
        rightPlayerDead(330,220);
        textSize(13)
        fill(0)
        stroke(0)
        strokeWeight(0.5)
        text("Winner",100,287)
        text("Loser",335,287)
    }

    count++;
}

function leftPlayer(x,y) {

    noStroke();
    fill(232,190,172); //light head fill
    circle(x,y,20); //head of left character

    fill(200,0,0); //body fill
    beginShape(); //main body of left character
    curveVertex(x,y+22);
    curveVertex(x-10,y+8);
    curveVertex(x,y+13);
    curveVertex(x+10,y+8);
    endShape(CLOSE);

    fill(0,0,200); //feet fill
    beginShape(); //lower body of left character
    vertex(x,y+20);
    vertex(x-8,y+35);
    vertex(x,y+30);
    vertex(x+8,y+35);
    endShape(CLOSE);
}

function rightPlayer(x,y) {

    noStroke();
    fill(68,59,49); //dark head fill
    circle(x,y,20); //head of right character

    fill(255,215,0); //body fill
    beginShape(); //main body of right character
    curveVertex(x,y+22);
    curveVertex(x-10,y+8);
    curveVertex(x,y+13);
    curveVertex(x+10,y+8);
    endShape(CLOSE);

    fill(192,96,168); //feet fill
    beginShape(); //lower body of right character
    vertex(x,y+20);
    vertex(x-8,y+35);
    vertex(x,y+30);
    vertex(x+8,y+35);
    endShape(CLOSE);
}

function rightPlayerDead(x,y) {

    noStroke();
    fill(68,59,49); //dark head fill
    circle(x,y,20); // head of right character

    fill(255,215,0); //body fill
    beginShape(); //main body of right character
    curveVertex(x-22,y);
    curveVertex(x-8,y+10);
    curveVertex(x-13,y);
    curveVertex(x-8,y-10);
    endShape(CLOSE);

    fill(192,96,168); //feet fill
    beginShape(); //lower body of right character
    vertex(x-20,y);
    vertex(x-35,y-8);
    vertex(x-30,y);
    vertex(x-35,y+8);
    endShape(CLOSE);
}

function swordLeft(x,y) {

    push();
    translate(155,130);
    angleMode(DEGREES);
    rotate(315);
    noStroke();
    fill(0,230,40);
    rect(x+10,y+9,13,4); //bottom rectangle of sword
    fill(30,50,80);
    rect(x+20,y+5,4,12);//middle rectangle of sword
    fill(125,125,125);
    beginShape();//blade of sword
    vertex(x+24,y+13);
    vertex(x+39,y+13);
    vertex(x+43,y+11);
    vertex(x+39,y+9);
    vertex(x+24,y+9);
    endShape(CLOSE);
    pop();
}

function swordRight(x,y){

    push();
    translate(305,130);
    angleMode(DEGREES);
    rotate(45);
    scale(-1,1);
    noStroke();
    fill(0,250,0);
    rect(x+10,y+9,13,4); //bottom rectangle of sword
    fill(30,50,80);
    rect(x+20,y+5,4,12);//middle rectangle of sword
    fill(125,125,125);
    beginShape();//blade of sword
    vertex(x+24,y+13);
    vertex(x+39,y+13);
    vertex(x+43,y+11);
    vertex(x+39,y+9);
    vertex(x+24,y+9);
    endShape(CLOSE);
    pop();
}

function leftCharacterUI(x,y) {

    push();
    translate(80,250);
    fill(232,190,172);
    circle(x,y,30);
    fill(255);
    rect(x+10,y+20,70,20);
    pop();
}

function rightCharaterUI(x,y) {

    push();
    translate(310,250);
    fill(68,59,49);
    circle(x+90,y,30);
    fill(255);
    rect(x+10,y+20,70,20);
    pop();
}

For this project, I wanted to have the the sound of swords colliding with each other, and some environmental sounds like the thunder and the announcer voice at the beginning of the animation.

Project-10-Sonic Story

sketch

//Tim Nelson-Pyne
//tnelsonp@andrew.cmu.edu
//section C
//Assignment-10-Project
//a sound bomb drops from the sky as a zombie rises from the grave
//the sound bomb makes a musical explosion and the zombie dances to the beat

var noteImg
var explosionImg
var danceGifImg
var danceGif
var fall
var explosion
var tam
var beat


var i = 0;


function preload() {
    noteImg = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/eighthNote.png");
    explosionImg = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/musicExplosion.png");
    danceGifImg = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Mojo_the_zombie.gif");  
    fall = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/falling.wav");
    explosion = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/explosion.wav");
    tam = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Tam95bpm.wav");
    beat = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Beat189bpm.wav")
    danceGif = createImg("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Mojo_the_zombie.gif");
    danceGif.hide();
}

function setup() {
    createCanvas(480, 600);
    useSound();
    background(255);
    frameRate(60);
}

function soundSetup() { 
    
}


function draw() {
    //adds one to i each frame
    i ++;
    background(3, 0, 50);
    imageMode(CENTER);
    //makes the background flash multi colors when the sound bomb drops
    if(i >= 600 & i % 30 < 15) {
        fill(random(100, 255), random(100, 255), random(100,255));
        rect(0,0, 480, 400);
    }
    fill(23, 150, 20);
    noStroke();
    rect(0, 400, 480, 200);
    fill(100);
    rect(250, 325, 100, 150);
    //writes RIP on grave
    fill(0);
    textAlign(CENTER);
    text("RIP", 300, 375);
    //static zombie image rises from the grave
    if (i < 600){
        image(danceGifImg, 300, 700 - map(i, 0, 600, 0, 350), 400, 400);
        fill(23, 150, 20);
        rect(0, 500, 480, 100); 
    }
    //plays the cartoon falling noise and tambourine loop @ start
    if (i == 1) {
        fall.play();
        tam.play();
    }
    //displays the noteImg falling
    if (i < height - 25){
        image(noteImg, 100, i, 50, 50);
    }
    //when the noteImg hits the ground the explosion sound plays
    if (i == height - 25) {
        explosion.play();
    }
    //when the noteImg hits the ground the explosion image flashes
    if (i >= height - 25 & i % 30 < 15 && i < 800) {
        image(explosionImg, 100, height-150, 300, 300);
    }
    //a moment after the noteImg hits the groud the beat starts
    if (i == 600){
        beat.play();
    }
    //and the zombie dances
    if(i >= 600) {
        danceGif.show();
        danceGif.position(0,100);
    }
    //after the beat is over everything goes black
    if (i >= 1800) {
        danceGif.remove();
        fill(0);
        rect(0, 0, 480, 600);
        noLoop();
    }


    
}

LO 10: Sonic Story

sketch

// sketch.js template for sound and DOM
//
// This is the 15104 Version 1 template for sound and Dom.
// This template prompts the user to click on the web page
// when it is first loaded.
// The function useSound() must be called in setup() if you
// use sound functions.
// The function soundSetup() is called when it is safe
// to call sound functions, so put sound initialization there.
// (But loadSound() should still be called in preload().)
var img;
var bx = 20;
var by = 400;
var cx = 20;
var cy = 300;
var tx = 20;
var ty = 200;
var mx = 20;
var my = 100;
var bikeTone;
var bikeDynamics;
var carTone;
var carDynamics;
var trainTone;
var trainDynamics;
var motorcycleTone;
var motorcycleDynamics;

function preload() {
    // call loadImage() and loadSound() for all media files here
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(480, 480);
    createDiv("p5.dom.js library is loaded.");
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    bikeTone = new p5.Oscillator();
    bikeTone.setType('sine');
    bikeTone.freq(440.0);
    bikeTone.amp(0.1);
    bikeTone.start();
    bikeDynamics = new p5.Oscillator();
    bikeDynamics.setType('sine');
    bikeDynamics.disconnect();
    bikeDynamics.start();
    carTone = new p5.Oscillator();
    carTone.setType('sine');
    carTone.freq(261.63);
    carTone.amp(0.1);
    carTone.start();
    carDynamics = new p5.Oscillator();
    carDynamics.setType('sine');
    carDynamics.disconnect();
    carDynamics.start();
    trainTone = new p5.Oscillator();
    trainTone.setType('sine');
    trainTone.freq(164.81);
    trainTone.amp(0.1);
    trainTone.start();
    trainDynamics = new p5.Oscillator();
    trainDynamics.setType('sine');
    trainDynamics.disconnect();
    trainDynamics.start();
    motorcycleTone = new p5.Oscillator();
    motorcycleTone.setType('sine');
    motorcycleTone.freq(110);
    motorcycleTone.amp(0.1);
    motorcycleTone.start();
    motorcycleDynamics = new p5.Oscillator();
    motorcycleDynamics.setType('sine');
    motorcycleDynamics.disconnect();
    motorcycleDynamics.start();
}


function draw() {
    // you can replace any of this with your own code:
    background(255);
    stroke(0);
    makeBike(bx, by);
    bx += .5;
    makeCar(cx, cy);
    cx += 1;
    makeTrain(tx, ty);
    tx += 1.5;
    makeMotorcycle(mx, my);
    mx += 2;
    bikeDynamics.amp(0.5);
    bikeDynamics.freq(.034);
    bikeTone.amp(bikeDynamics);
    carDynamics.amp(1);
    carDynamics.freq(.06);
    carTone.amp(carDynamics);
    trainDynamics.amp(2);
    trainDynamics.freq(.085);
    trainTone.amp(trainDynamics);
    motorcycleDynamics.amp(2);
    motorcycleDynamics.freq(.12);
    motorcycleTone.amp(motorcycleDynamics);
    if (millis() > 4200 + soundStart) {
       motorcycleTone.stop();
       motorcycleDynamics.stop();
    }
    if (millis() > 6000 + soundStart) {
        trainTone.stop();
        trainDynamics.stop();
    }
    if (millis() > 8400 + soundStart) {
        carTone.stop();
        carDynamics.stop();
    }
    if (millis() > 15800 + soundStart) {
        bikeTone.stop();
        bikeDynamics.stop();
    }
}

function makeBike(x, y) {
    circle(x, y, 20);
    circle(x + 40, y, 20);
    line(x, y - 10, x + 40, y - 10);
    line(x, y - 10, x, y - 20);
    line(x + 40, y - 10, x + 40, y - 30);
    line(x + 30, y - 25, x + 50, y - 35);
    line(x - 10, y - 20, x + 10, y - 20);
}

function makeCar (x, y) {
    rect(x - 20, y - 20, 40, 20);
    rect(x - 40, y, 80, 20);
    circle(x - 30, y + 30, 20);
    circle(x + 30, y + 30, 20);
}

 function makeTrain(x, y) {
    rect(x, y, 20, 20);
    rect(x, y + 20, 40, 20);
    line(x, y + 30, x - 10, y + 30);
    rect(x - 40, y + 20, 30, 20);
    line(x - 40, y + 30, x - 50, y + 30);
    rect(x - 80, y + 20, 30, 20);
    circle(x + 5, y + 45, 10);
    circle(x + 35, y + 45, 10);
    circle(x - 15, y + 45, 10);
    circle(x - 35, y + 45, 10);
    circle(x - 55, y + 45, 10);
    circle(x - 75, y + 45, 10);
} 

function makeMotorcycle(x, y) {
    rect(x, y, 40, 20);
    triangle(x, y, x + 40, y, x + 40, y - 15);
    triangle(x - 20, y, x, y + 15, x, y);
    triangle(x + 40, y, x + 60, y, x + 40, y + 15);
    circle(x - 10, y + 20, 20);
    circle(x + 50, y + 20, 20);
}

4. Project 10: Sonic Story

sketch – CopyDownload
// This program displays a game of cup pong.
// The 'characters' are the ball, cups, table, and water in the cups.
// When the ball bounces on different surfaces (on the floor, into a cup, etc.),
// it produces different sounds.
// One side wins when all of the cups are empty
//(or just a few if you change the 'win' variable in the draw function).

// sounds:
var watercup;
var emptycup;
var bouncefloor;
var throwing;
var gameover;


// objects:
var cup; // will have fields for cx, cy, and boolean isFull
var ball; // will have fields for x, y, dx, dy, and functions

// arrays:
var leftCups = [];
var rightCups = [];

function preload() {
    watercup = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/pong-sounds-with-liquid.wav");
    bouncefloor = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/bouncing-ping-pong-ball.wav");
    throwing = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/throwing-paper-in-trash.wav");
    gameover = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/ending.wav");
}

// makes a cup object, always full to begin
function makeCup(cx, cy) {
    cup = {x:cx, y:cy, isFull: true, drawc: drawCup};
    return(cup);
}

// makes a ball object
function makeBall(cx, cy, dirx, diry) {
    ball = {x:cx, y:cy,
            dx:dirx, dy:diry,
            drawb: drawBall,
            throwb: throwBall,
            resetb: resetBall,
            leftright: true};
    return(ball);
}

function setup() {
    createCanvas(480, 300);
    frameRate(35);	// high framerate is better for this program
    useSound();
    rectMode(CENTER);

    // fill cup arrays:
    // set x and y positions to create pyramid shape.
    // the if statements create the rows for the pyramid
    for (var i=0; i<10; i++) {
        if (i<4) {
	    lcup = makeCup(width/10+10,	(i*20)+120);
            rcup = makeCup(9*width/10-10, (i*20)+120);
        }
        else if (i<7) {
	    lcup = makeCup(width/10+30,	(i*20)+50);
            rcup = makeCup(9*width/10-30, (i*20)+50);
        }
        else if (i<9) {
	    lcup = makeCup(width/10+50,	i*20);
            rcup = makeCup(9*width/10-50, i*20);
        }
        else {
	    lcup = makeCup(width/10+70,	height/2);
            rcup = makeCup(9*width/10-70, height/2);
        }
        leftCups.push(lcup);
        rightCups.push(rcup);
    }

    // create ping pong ball
    let dy = random(-4, 4);
    ball = makeBall(5, height/2, 5, dy);
}

function soundSetup() { // setup for audio generation
    watercup.setVolume(0.5);
    bouncefloor.setVolume(0.5);
    throwing.setVolume(0.5);
    gameover.setVolume(0.5);
}


function draw() {
    background(133, 94, 66);

    // draw the table
    drawTable();

    // draw the cups
    for (var c=0; c<leftCups.length; c++) {
        leftCups[c].drawc();
        rightCups[c].drawc();
    }

    // draw the ball
    ball.drawb();

    // throw the ball
    ball.throwb();

    // check for winner
    let checkl = 0;
    let checkr = 0;
    for (l=0; l<leftCups.length; l++) {
        if (leftCups[l].isFull == false) { checkl+=1 }
    }
    for (r=0; r<rightCups.length; r++) {
        if (rightCups[r].isFull == false) { checkr+=1 }
    }
    // when one side wins, display text and play sound
    // change 'win' value to see game over sooner:
    let win = 10;
    if (checkl == win|| checkr == win) {
        gameover.play();
        textAlign(CENTER, CENTER);
        textSize(25);
        fill(0);
        rect(width/2, height/2, width/2, 50, 10);
        fill(255);
        text('Game Finished!', width/2, height/2);
        noLoop();
    }


}

// draws a green table with offwhite diagonal lines:
function drawTable() {
    let linescol = color(250, 250, 225);
    let tcol = color(0, 100, 100);
    strokeWeight(7);
    stroke(linescol);
    fill(tcol);
    rect(width/2, height/2, 4*width/5, 4*height/5);
    line(width/10, height/10, 9*width/10, 9*height/10);
    line(width/10, 9*height/10, 9*width/10, height/10);
}

// draws individual cups based on x and y fields:
function drawCup() {
    let diam = 20;
    fill(200, 0, 0);	// red cup
    stroke(255);
    strokeWeight(2);
    circle(this.x, this.y, diam);
    // if the cup hasnt been hit, it has water in it:
    if (this.isFull == true) {
        noStroke();
        fill(0, 0, 200);	// blue water
        circle(this.x, this.y, diam/2);
    }
}

// draws the ball
function drawBall() {
    stroke(0);
    strokeWeight(.5);
    fill(250);
    circle(this.x, this.y, 10);
}

//throws the ball
function throwBall() {
    if (this.leftright==true) {		// going left to right
        if (this.x < width/2) {
            this.x += this.dx;
            this.y -= this.dy;
        } else {
            this.x += this.dx;
            this.y += (1.5*this.dy);
        }
        // remove the water if the ball goes into a full cup and reset ball placement
	// play water cup noise if cup is hit
        for (var j=0; j<rightCups.length; j++) {
            if (dist(rightCups[j].x, rightCups[j].y, this.x, this.y)<=7 &
		rightCups[j].isFull==true) {
	   	watercup.play();
                rightCups[j].isFull = false;
                this.resetb();
            }
        }
    } else {				// going right to left
        if (this.x > width/2) {
            this.x -= this.dx;
            this.y -= this.dy;
        }
        else {
            this.x -= this.dx;
            this.y += (1.5*this.dy);
        }
	// same code to remove water from hit cup
        for (var j=0; j<leftCups.length; j++) {
            if (dist(leftCups[j].x, leftCups[j].y, this.x, this.y)<=7 &
		leftCups[j].isFull==true) {
	   	watercup.play();
                leftCups[j].isFull = false;
                this.resetb();
            }
        }
    }
    // no cups are hit, reset the ball position & play floor bounce track
    if (this.x > width || this.x < 0 ) {
       	this.resetb();
        bouncefloor.play();
    }
}

//resets the ball to the next players starting position
function resetBall() {
    this.leftright = -this.leftright;
    if (this.leftright == true) {this.x=10}
    else {this.x =width-10}
    this.y = height/2;
    this.dy = random(-4, 4);
    // plays a 'whoosh' track for each throw
    throwing.play();
}

I chose to make a program that displays a game of water pong. The sounds I use are a ‘whoosh’ noise when a ball is thrown, a ‘clink’ sound if the ball goes into a full cup, a bouncing pingpong ball noise if the ball does not go into any full cups, and a bell noise if there is a winner. My code is randomized in a way that every game will be slightly different.

Project 10 – Sonic Story

sketch-beansDownload
//global variables
var frameCount = 0;
var sky;
var cat;
var sofa;
var clock;
var playlist;
var table;
var rain = [];
const numOfRaindrops = 100;

function preload() { 
  //preload images
  sky = loadImage("https://i.imgur.com/6PCHwrN.png");
  cat = loadImage("https://i.imgur.com/qApZuXa.png");
  sofa = loadImage("https://i.imgur.com/sESZJWa.png");
  clock = loadImage("https://i.imgur.com/hbfe35l.png");
  playlist = loadImage("https://i.imgur.com/wKD6EsD.png");
  table = loadImage("https://i.imgur.com/74DxEGR.png");

  //preload sounds
  clockSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/clock.wav");
  playlistSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/playlist.wav");
  rainSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/rain-1.wav");
  catSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/cat.wav");
  // clockSound = loadSound("clock.wav");
  // playlistSound = loadSound("playlist.wav");
  // rainSound = loadSound("rain.wav");
  // catSound = loadSound("cat.wav");
}

function setup() {
  createCanvas(480, 400);
  useSound();
  frameRate(20);

  //rain
  rain_color = color(225, 235, 244);
  background_color = color(21, 39, 56);
  for (var i = 0; i < numOfRaindrops; i++) {
    rain[i] = new drawFallingRain();
  }
}

function soundSetup() {
  clockSound.setVolume(0.4);
  playlistSound.setVolume(0.7);
  rainSound.setVolume(0.5);
  catSound.setVolume(0.4);
}

function draw() {

  background(background_color);

  //gradient sky
  image(sky, 0, 0, width, 210);

  //rain
  for (var i = 0; i < rain.length; i ++) {
      rain[i].rainDisplay();
      rain[i].rainDrop();
  }

  //room wall
  fill(109, 115, 147);
  noStroke();
  rect(0, 0, 100, 600);
  rect(400, 0, 100, 600);
  rect(0, 210, 800, 300);
  fill(88, 87, 103);
  rect(-100, 340, 800, 300);

  //window
  fill(109, 115, 147);
  rect(100, 100, 300, 10);
  rect(250, 0, 10, 200);
  fill(71, 72, 90);
  rect(100, 200, 300, 15);
  fill(144);
  rect(100, 200, 300, 5);

  //clock
  image(clock, 385, 30, 90, 140);

  //sofa
  image(sofa, -55, 10, 420, 400);

  //cat
  image(cat, 290, 130, 80, 80);

  //table
  image(table, 340, 250, 150, 150);

  //playlist
  image(playlist, 375, 230, 80, 80)

    if (frameCount % 460 == 0 || frameCount % 460 == 1) {
        rainSound.stop();
        rainSound.play();
    }
    if (frameCount % 340 == 0 || frameCount % 340 == 1) {
        print("Starting playlist")
        playlistSound.stop();
        playlistSound.play();
    }
    if (frameCount % 200 == 0 || frameCount % 200 == 1) {
        catSound.stop();
        catSound.play();
    }
    if (frameCount % 160 == 0 || frameCount % 160 == 1) {
        clockSound.stop();
        clockSound.play();
    }
    frameCount += 1;
}

function drawFallingRain() {
    this.rx = random(0, 400); //width of the canvas
    this.ry = random(0, 400); //height of the canvas
    this.rain_size = random(0, 8);
    this.rain_rate = map(this.rain_size, 0, 10, 8, 10);
    this.rain_range = map(this.rain_size, 0, 10, 7, 18);

    this.rainDisplay = function() {
        var raindrop_size = map(this.rain_size, 0, 20, 0.7, 0.3);
        stroke(rain_color);
        strokeWeight(raindrop_size);
        line(this.rx, this.ry, this.rx, this.ry + this.rain_range);
    }
    this.rainDrop = function() {
        this.ry = this.ry + this.rain_rate;
        var dropsOfRain = map(this.rain_size, 0, 10, 2, 1); //indicates the raindrop rate
        this.rain_rate = dropsOfRain + this.rain_rate;
        if (this.ry >= 300) { //continue raining
            this.ry = random(-100, 0);
            this.rain_rate = map(this.rain_size, 0, 10, 3, 15);
        }
    }
}

For this project, I decided to illustrate a chill scenery of a room with a cat on a rainy night (or in the early morning). The four characters I used were: raining sound, clock ticking, LP playlist, and cat meowing. I found sounds on freesound.org and found some free png images on free sites like Imgur. At first I found it challenging with the instructions of how the sound works in both my server outside of WordPress and on WordPress as blog entry, but I managed to figure it out! This was super fun project to work with.

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.

Project 10

Beginning sketches
sketch
/* Nami Numoto
 * Section A
 * mnumoto@andrew.cmu.edu
 * Project 10
 */

//tried to depict Baymax from Big Hero 6
//interacting with a spider
//and going from being confused to happy :)

var baymax;
var spider;
var question;

function preload() {
    baymax = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/ding.wav");
    spider = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/fall.wav");
    question = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/questionmark.wav");
}

function soundSetup() {
    baymax.setVolume();
    spider.setVolume();
    question.setVolume();
}

function setup() {
    createCanvas(400, 400);
    background(225);
    frameRate(1);
    useSound();
}

function baymax() {
    stroke(0);
    strokeWeight(3);
    ellipseMode(CENTER);
    //drop shadow
    fill("grey");
    noStroke();
    ellipse(width / 2, 350, 218, 54);
    //legs
    stroke(0);
    fill("white");
    ellipse(170, 300, 54, 90);
    ellipse(230, 300, 54, 90);
    //arms
    ellipse(145, 212, 68, 162);
    ellipse(255, 212, 68, 162);
    //body
    ellipse(200, 200, 145, 218);
    //face
    ellipse(width / 2, 109, 145, 90);
    //mouth
    line(163, 112, 236, 112);
    //eyes
    fill(0);
    ellipse(163, 112, 9, 18);
    ellipse(236, 112, 9, 18);
}

function smile() {
    arc(width / 2, 112, 73, 20, 0, PI, OPEN);
}

function spider() {
    //spider
    push();
    line(width / 2, 0, width / 2, 180);
    fill(0);
    ellipse(width / 2, 182, 10, 14);
    ellipse(width / 2, 176, 8, 10);
    strokeWeight(1);
    for (i = 0; i <= 3; i++) {
        line(width / 2 + 4, 4 * i + 176, width / 2 + 8, 4 * i + 170);
        line(width / 2 + 8, 4 * i + 170, width / 2 + 12, 4 * i + 176);
        line(width / 2 - 4, 4 * i + 176, width / 2 - 8, 4 * i + 170);
        line(width / 2 - 8, 4 * i + 170, width / 2 - 12, 4 * i + 176);
        }
    pop();
}

function question() {
    text("?", 100, 100);
}

function draw() {
    if (frameCount > 0) {
    baymax();
    }
    if (frameCount >= 7) {
        spider();
        spider.play();
      }
    if (frameCount >= 10) {
        question();
        question.play();
      }
    if (frameCount >= 9) {
        smile();
        baymax.play();
      }
    if (frameCount > 18) {
      frameCount === 1;
      }
}

Project 10: Sonic Story

sketch
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Sonic Story

var walkImage = [];  //stores chick images 
var walkHen = []; //stores hen images
var cornImg;
var angleCorn = 0;
var wheatImg;
var angleWheat = 0;
var snowImg = 0;
var snowY = 0;

var chirpingSound;
var cluckingSound;
var popSound;
var windSound;

function preload() {
    
    var filenames = []; //chick images
    filenames[0] = "https://i.imgur.com/Tfx9TC4.png";
    filenames[1] = "https://i.imgur.com/QahosbW.png";
    for (var i = 0; i < filenames.length; i++) {
        walkImage[i] = loadImage(filenames[i]); 
    }

    var fileHen = []; //hen images
    fileHen[0] = "https://i.imgur.com/7p6gBTy.png";
    fileHen[1] = "https://i.imgur.com/CnvJ23d.png";
    for (var i = 0; i < fileHen.length; i++) {
        walkHen[i] = loadImage(fileHen[i]);
    } 
    //icon images
    cornImg = loadImage("https://i.imgur.com/5qLGEX6.png");
    wheatImg = loadImage("https://i.imgur.com/FjHLXeq.png");
    snowImg = loadImage("https://i.imgur.com/MnUy5ko.png");

    chirpingSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/chirping.wav");
    cluckingSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/clucking.wav");
    popSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/pop-1.wav");
    windSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/wind-1.wav");

}

function makeCharacter(cx, cy, cdx, cdy) {
    var c = {x: cx, y: cy, dx: cdx, dy: cdy,
             walkingRight: true, 
             imageNum: 0,
             stepFunction: stepCharacter,
             drawFunction: drawCharacter
         }
    return c;
} 

function makeHen(hx, hy, hdx, hdy) {
    var h = {x: hx, y: hy, dx: hdx, dy: hdy,
             walkingRight: true, 
             imageNum: 0,
             stepFunction: stepHen,
             drawFunction: drawHen
         }
    return h;
}

function stepCharacter(){
    this.imageNum++;
    if (this.imageNum > 1){
        this.imageNum = 0;
    }
    
    if (this.imageNum>=walkImage.length){
        this.imageNum = 0;
    }
    
    if (this.y >= 650){
        this.y = 100;
    }

    if (this.x >= 550){ //start at right to flip
        this.walkingRight = !this.walkingRight;
        this.x = 50;
    }
    this.x += this.dx; //walk
} 

function stepHen(){
    this.imageNum++;
    if (this.imageNum > 1){
        this.imageNum = 0;
    }
    
    if (this.imageNum>=walkHen.length){
        this.imageNum = 0;
    }
    
    if (this.y >= 650){
        this.y = 100;
    }

    if (this.x >= 550){ //start at right to flip
        this.walkingRight = !this.walkingRight;
        this.x = 50;
    }
    this.x += this.dx; //walk
}

function drawCharacter(){ //chicks
    if (this.walkingRight == true){
        image(walkImage[this.imageNum], this.x, this.y);
    }
    else {
        push();
        translate(600, 0);
        scale(-1,1); //look at canvas from behind
        image(walkImage[this.imageNum], this.x, this.y);
        pop();
    } 
} 

function drawHen(){ //hen
    if (this.walkingRight == true){
        image(walkHen[this.imageNum], this.x, this.y);
    }
    else {
        push();
        translate(600, 0);
        scale(-1,1); //look at canvas from behind
        image(walkHen[this.imageNum], this.x, this.y);
        pop();
    } 
}

var character = [];
var hen = [];


function setup() {
    createCanvas(600,700);
    frameRate(5);
    imageMode(CENTER);
    createDiv("p5.dom.js library is loaded.");
    useSound();
    for (var i = 50; i <=450; i += 200){ //chicks
        character.push(makeCharacter(10, i, 5, 1)); 
    }
    for (var i = 50; i <=450; i += 200){ //hen
        hen.push(makeHen(10, i, 5, 1));
    }
}


function soundSetup() { // setup for audio generation
    chirpingSound.setVolume(0.3);
    cluckingSound.setVolume(0.5);
    popSound.setVolume(0.5);
    windSound.setVolume(0.5);
}


function draw() {
    background(135,206,235);
    //grass
    noStroke();
    fill(46,139,87);
    rect(0, 510, 600, 200);

    push();
    translate(200, 500);
    scale(0.2);
    for (var i = 0; i < 2; i++){ //call functions chicks
        character[i].stepFunction();
        character[i].drawFunction();
    }
    pop();
    
    if (frameCount >= 30){
    push(); //hens to right
    translate(300, 500);
    scale(0.2);
    for (var i = 0; i < 1; i++){ //call functions hen
        hen[i].stepFunction();
        hen[i].drawFunction();
    }
    pop();
}
    
    if (frameCount >= 50 & frameCount < 90){ //call corn
    push(); 
    translate(300, 300);
    scale(0.2);
    rotate(radians(angleCorn)); //rotate corn
    angleCorn += 20;
    image(cornImg, 0, 0);
    }
    pop();

    if (frameCount >= 90 & frameCount < 130){
    push(); 
    translate(300, 300);
    scale(0.2);
    rotate(radians(angleWheat)); //rotate wheat
    angleWheat += 20;
    image(wheatImg, 0, 0); //3 wheats
    image(wheatImg, 300, 0);
    image(wheatImg, 600, 0);
    }
    pop();

    if (frameCount >= 130 & frameCount < 200){
    push(); 
    translate(10, 100);
    scale(0.1);
    for (var i = random(-10,10); i < 2000; i+=50){ //snow falls
    image(snowImg, i*10, snowY); 
    snowY += 5;
    }
    pop();
    }

    text("p5.js 15104 fall 2021", 10, 15);
    
    if (frameCount >= 1 & frameCount < 30){
        chirpingSound.play();
    }
    if (frameCount == 33){
        chirpingSound.stop();   
    }

    if (frameCount >= 30 & frameCount < 35){
        cluckingSound.play();
    }

    if (frameCount >= 50 & frameCount < 52){
        popSound.play();
    }
    if (frameCount == 52){
        popSound.stop();
    }

    if (frameCount >= 90 & frameCount < 92){
        popSound.play();
    }
    if (frameCount == 92){
        popSound.stop();
    }

    if (frameCount >= 130 & frameCount < 160){
        windSound.play();
    }
    if (frameCount == 160){
        windSound.stop();
    }
}

I made the pixel art in Illustrator. My animation is based off of a lullaby in Spanish called Los Pollitos Dicen. My rendition is kind of a silly, abstract version. My mom would sing this to me often when I was a child.

In Spanish it goes;
Los pollitos dicen pío, pío, pío
Cuando tienen hambre, cuando tienen frío
La gallina busca el maíz y el trigo
Les da la comida, y les presta abrigo
Bajo sus dos alas, acurrucaditos
Duermen los pollitos hasta el otro día

English Translation;
The chicks say pío, pío, pío
When they’re hungry, and when they’re cold
The hen looks for corn and wheat
She gives them food and warmth
Under her wings, the chicks are comfy
And to the next day, the chicks are asleep