For this project, I made 2 fish who are lovers that swim randomly around an aquarium looking for each other. When they meet, they fall in love again and the supportive crab in the corner claps for them and a love song plays.

sketchDownload

//Catherine Liu
//jianingl@andrew.cmu.edu
//Section D
//project 10

//two fishes swimming around tank (bump sound when they hit the sides)
//when they bump into each other they fall in love (song plays)
//crab clapping for them (clapping sound)
//house bubbles turn into hearts (bubbling sound)

// use http://localhost:8000/ to run html

//variables for pink fish
var x1 = 50;
var y1 = 50;
var dx1 = 50;
var dy1 = 20;

//variables for green fish
var x2 = 300;
var y2 = 300;
var dx2 = 40;
var dy2 = 30;

var meet = false; //checks to see if fish meet
var crabClaw = 1; //keeps track of frame for crab claw clapping
var songCount = 0; //counter for song played
var bubbleArrayX = []; //x value for each bubble
var bubbleArrayY = []; //y value for each bubble
var heartArrayX = []; //x value for each heart
var heartArrayY = []; //y value for each heart

//sound variables 
var bump;
var bubbles;
var heart;
var clap;

function preload() {
    bump = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/bump.mp3");
    bubbles = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/bubble-4.wav");
    heart = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/lovesong.mp3");
    clap = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/clap.wav");
}

function setup() {
    noStroke();
    createCanvas(600, 400);
    useSound();
    frameRate(10);

    //sets up bubble and heart arrays
    for (i = 170; i > 50 ; i-=15) {
        bubbleArrayX.push(400 + random(-10,10));
        bubbleArrayY.push(i);
        heartArrayX.push(400 + random(-10,10));
        heartArrayY.push(i);
    }

}

function soundSetup() { 
    bump.setVolume(0.2);
    bubbles.setVolume(0.2);
    clap.setVolume(0.1);
    heart.setVolume(0.3)

}

function draw() {
    background(65,105,225);
    fill(255,250,205);
    rect(0,height-50,width,height);


    drawCrab();
    drawHouse();

    //if fish meet, play song and stop bump sounds
    if (meet == true) {
        bump.stop();
        playSong();
    }

    //if fish have not met, keep moving them
    if (meet == false) {
        x1 += dx1;
        y1 += dy1;
    }
    fill(255,182,193) //pink fish
    drawFish(x1,y1,dx1);
    dx1 += random(-5,5);
    dy1 += random(-5,5);
    if (x1 < 40) {
        bump.play();
        dx1 = -dx1;
    }
    if (x1 > width - 40) {
        bump.play();
        dx1 = -dx1;
    }
    if (y1 < 40) {
        bump.play();
        dy1 = -dy1;
    }
    if (y1 > height - 75) {
        bump.play();
        dy1 = -dy1;
    }

   if (meet == false) {
        x2 += dx2;
        y2 += dy2;
    }
    fill(173,255,47) //green fish
    drawFish(x2,y2,dx2);
    dx2 += random(-5,5);
    dy2 += random(-5,5);
    if (x2 < 40) {
        bump.play();
        dx2 = -dx2;
    }
    if (x2 > width - 40) {
        bump.play();
        dx2 = -dx2;
    }
    if (y2 < 40) {
        bump.play();
        dy2 = -dy2;
    }
    if (y2 > height - 75) {
        bump.play();
        dy2 = -dy2;
    }

    meetUp(25); //checks if fish have met
}

function drawFish(x, y, dx) {
    ellipse(x, y, 60, 40); //fish body

    //checks which direction fish is facing to draw tail
    if (dx > 0) {
        if (meet == true) { //if fish met, draw smile
            push();
            fill(0);
            circle(x+20,y,10);
            pop();

            push();
            noFill();
            stroke(2);
            arc(x+10, y+7, 10, 10, 0, PI);
            pop();
        } else { //no smile
            push();
            fill(0);
            circle(x+20,y,10);
            pop();
        }
        triangle(x-30, y, x-50, y-10, x-50, y+10); //fish tail

    } if (dx < 0) {
        if (meet == true) { //if fish met, draw smile
            push();
            fill(0);
            circle(x-20,y,10);
            pop();

            push();
            noFill();
            stroke(2);
            arc(x-10, y+7, 10, 10, 0, -PI);
            pop();
        } else { //no smile
            push();
            fill(0);
            circle(x-20,y,10);
            pop();
        }
        triangle(x+30, y, x+50, y-10, x+50, y+10); //fish tail
    }

}

//checks if fish have "met" by checking distance between them <= 0 and draws heart
function meetUp(size) {
    if (dist(x1, y1, x2, y2) <= 40) {
        //draws heart
        fill("red")
        var xPos = x1;
        if ((y1-70) < 10) {
            var yPos = y1 + 70;
        } else {
            var yPos = y1 - 70;
        }
        beginShape();
        vertex(xPos, yPos);
        bezierVertex(xPos - size / 2, yPos - size / 2, xPos - size, yPos + size / 3, xPos, yPos + size);
        bezierVertex(xPos + size, yPos + size / 3, xPos + size / 2, yPos - size / 2, xPos, yPos);
        endShape();

        meet = true; //change variable to true to show fish have met
    }
}

function drawCrab() {
    fill("orange");
    ellipse(100, height-80,80,50);
    circle(60,height-100,20);
    circle(140,height-100,20);
    arc(60,height-130, 50, 50, -(radians(30)), -HALF_PI);
    arc(150,height-130, 50, 50, -(radians(30)), -HALF_PI);
    push();
    noFill();
    strokeWeight(10);
    stroke("orange");
    arc(120, height-35, 80, 80, PI + QUARTER_PI, TWO_PI);
    arc(80, height-35, 80, 80, PI, PI + HALF_PI);
    pop();
    fill(0);
    circle(120,height-90, 8);
    circle(100,height-90, 8);

    //if fish have met, crab claps by drawing circles on top of arcs
    if (meet == true) {
        arc(100, height-80, 20, 20, 0, -PI);

        //alternating variable so crab claws open and close with every frame
        if (crabClaw == 1) {
            clap.play();
            fill("orange");
            circle(60, height-130,50,50);
            circle(150,height-130,50,50);
            crabClaw += 1;
        } else if (crabClaw == 2) {
            crabClaw = 1;
        }

    }

}

function drawHouse() {
    fill(160,82,45); //brown
    rect(width-200, height-170, 120,120);
    triangle(width-220,height-170,width-140,height-250,width-60,height-170);
    rect(width-200,height-230,20,80);
    fill(173,216,230); //light blue
    rect(width-160, height-110,40,60);
    fill(0); //black
    circle(width-155,height-70,5);
    fill(173,216,230); //light blue
    rect(width-180,height-150,20,20);
    rect(width-120,height-150,20,20);

    fill(224,255,255); //light cyan
    bubbles.play();

    //moving bubbles up the canvas by adding random dx and dy
    for (i = 0; i < bubbleArrayX.length; i++) {
        var randomDx = (random(-5,5));
        var randomDy = (random(-10,0));

        if (meet == false) { //if fish have not met, house bubbles
            bubbleArrayX[i] += randomDx;
            bubbleArrayY[i] += randomDy;
            //reset x and y position if bubble leaves canvas
            if (bubbleArrayY[i] <= 0) {
                bubbleArrayX[i] = 400 + random(-10,10);
                bubbleArrayY[i] = 150;
            }
            circle(bubbleArrayX[i], bubbleArrayY[i], 5)

        } else if (meet == true) { //if fish have met, house bubbles hearts
            heartArrayX[i] += randomDx;
            heartArrayY[i] += randomDy;
            var size = 10;
            fill("pink")
            beginShape();
            vertex(heartArrayX[i], heartArrayY[i]);
            bezierVertex(heartArrayX[i] - size / 2, heartArrayY[i] - size / 2, heartArrayX[i] - size, heartArrayY[i] + size / 3, heartArrayX[i], heartArrayY[i] + size);
            bezierVertex(heartArrayX[i] + size, heartArrayY[i] + size / 3, heartArrayX[i] + size / 2, heartArrayY[i] - size / 2, heartArrayX[i], heartArrayY[i]);
            endShape();
            //reset x and y position if heart leaves canvas
            if (heartArrayY[i] <= 0) {
                heartArrayX[i] = 400 + random(-10,10);
                heartArrayY[i] = 150;
            }
        }
    } 

}

//plays love song after fish meet
function playSong() {
    //only want song to play once so use counter
    if (songCount == 0) {
        heart.play();
        songCount += 1;
    } else {
        //do nothing
    }
}

//This is a original ball game where two players play against each other
//by trying their best to get the ball to the other side
//Crowds are cheering whenever a player gets the ball to the other side
//as time past, players become tired.Play suffering sound instead of ‘haha’
//the game ends with a player not able to get the ball to the other side
//canvas turns black and the last sound is the man suffering.

//This is a original ball game where two players play against each other
//by trying their best to get the ball to the other side
//Crowds are cheering whenever a player gets the ball to the other side
//as time past, players become tired.Play suffering sound instead of 'haha'
//the game ends with a player not able to get the ball to the other side
//canvas turns black and the last sound is the man suffering.

var manSuffering;
var ballBouncing;
var crowdCheering;
var womanHaha;
var womanSuffering;
var manHaha;
var x = 50
var y = 170
var vx = 100
var vy = 1
//loading the sounds
function preload() {
    manSuffering = loadSound("http://localhost:8000/man suffering.wav");
    ballBouncing = loadSound("http://localhost:8000/ball bouncing.wav");
    crowdCheering = loadSound("http://localhost:8000/crowd cheering.wav");
    womanHaha = loadSound("http://localhost:8000/woman haha.wav");
    manHaha = loadSound("http://localhost:8000/man haha.wav");
    womanSuffering = loadSound("http://localhost:8000/woman suffering.wav");
}
function setup() {
    createCanvas(400, 400);
    createDiv("p5.dom.js library is loaded.");
    useSound();
    frameRate(10)
}
function soundSetup() { // setup for audio generation
    manSuffering.setVolume(0.5);
    ballBouncing.setVolume(0.5)
    crowdCheering.setVolume(0.5)
    womanHaha.setVolume(0.5)
    womanSuffering.setVolume(0.5)
    manHaha.setVolume(0.5)
}
function draw() {
    background(192,100,150)
    //draws the court
    court()
    //draws a moving male player
    playerMale(20,random(100,220))
    //draws a moving female player
    playerFemale(380,random(100,220))
    //draws a moving ball
    ball()
    //draws 7 spectators
    for (var i = 0; i < 4; i++){
        push()
        fill(random(170,255))
        spectator(50+100*i,300)
        pop()    
    }
    for (var i = 0; i < 3; i++){
        push()
        fill(random(170,255))
        spectator(100+100*i,320)   
        pop() 
    }
    //when the ball hits the edge and time is a 15 seconds, one player screams and game ends
    if (frameCount > 150 & x+25 >= width){
        manSuffering.play()
        background(0)
        noLoop();
    }
}
function playerMale(x,y){
    push()
    strokeWeight(3)
    ellipse(x,y,18,25)
    //body
    line(x,y+12,x,y+50)
    line(x,y+30,x-10,y+15)
    line(x,y+30,x+10,y+15)
    line(x,y+50,x+10,y+65)
    line(x,y+50,x-10,y+65)
    //eyes
    ellipse(x-3,y-2,1,1)
    ellipse(x+3,y-2,1,1)
    arc(x, y, 12, 15, 1, PI-1)
    //hair
    line(x,y-12,x,y-22)
    line(x-3,y-11,x-10,y-18)
    line(x+3,y-13,x+10,y-18)
    pop()  
}
function playerFemale(x,y){
    push()
    strokeWeight(3)
    ellipse(x,y,18,25)
    //body
    line(x,y+12,x,y+50)
    line(x,y+30,x-10,y+15)
    line(x,y+30,x-20,y+30)
    line(x,y+50,x+10,y+65)
    line(x,y+50,x-10,y+65)
    //eyes
    ellipse(x-3,y-2,1,1)
    ellipse(x+3,y-2,1,1)
    arc(x, y, 12, 15, 1, PI-1)
    //hair
    line(x,y-12,x-10,y)
    line(x-2,y-12,x-12,y+2)
    line(x+2,y-12,x+12,y+2)
    pop()
}
function court(){
    push()
    fill(0,130,0)
    beginShape();
    vertex(70, 50);
    vertex(330, 50);
    vertex(380, 320);
    vertex(20, 320);
    endShape(CLOSE);
    pop()
}
function spectator(x,y){
    push()
    noStroke()
    ellipse(x,y+120,100,200)
    ellipse(x,y,50,70)
    pop()

}
function ball(){
    push()
    ellipse(x,y,10,10) //draws the ball
    x = x + vx //x-coordinate of ball moves according to x-velocity
    y = y + vy //y-coordinate of ball moves according to y-velocity
    if (x+25 >= width){ //when ball touches right side, bounces back
        vx = random(-80,-30)
        vy = random(-5,5)
        //crowd cheers when a player gets the ball to the other side
        //as time past, players become tired.Play suffering sound instead of 'haha'
        ballBouncing.play()
        if (frameCount < 125){
            crowdCheering.play()
        }
        if (frameCount < 75){
            womanHaha.play() 
        }else{
            womanSuffering.play()
        }
    }
    if (x-25 <= 0){ //when ball touches left side, bounces back
        vx = random(30,80)
        vy = random(-5,5)
        ballBouncing.play()
        if (frameCount < 125){
            crowdCheering.play()
        }
        if (frameCount < 75){
            manHaha.play() 
        }else{
            manSuffering.play()
        }
    }
    //ball doesn't go off the court
    y = constrain(y,50,320)
    pop()
}

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.

sketch

// gnmarino
// gia marino
// class section D

// the story is suppose to be up to your own interruptation.
// the main point is someone is trying to reach love and they can't so 
// a friend has to help them out. The concept is about how sometimes
// you need a friend's help even if it's a little thing

var rope; // rope swinging noise
var heart; // heart's voice
var char1; // 1st character's voice
var walking; // 2nd character's walking
var counter = 0; // counts the frames
var animationImages = []; // holds images for animation

function preload() {
    rope = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Rope-Sound.wav");
    heart = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Heart.wav");
    char1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/character1noise.wav");
    walking = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/walking.wav")

    var imageNames = [];
    imageNames[0] = "https://i.imgur.com/ZP19uwT.jpg";
    imageNames[1] = "https://i.imgur.com/4Bl2ivM.jpg"
    imageNames[2] = "https://i.imgur.com/VaO2Qof.jpg"
    imageNames[3] = "https://i.imgur.com/tpxAt2V.jpg"
    imageNames[4] = "https://i.imgur.com/nkNrX5Y.jpg"
    imageNames[5] = "https://i.imgur.com/HEE2XA5.jpg"
    imageNames[6] = "https://i.imgur.com/7vkRyqN.jpg"
    imageNames[7] = "https://i.imgur.com/FOvHPju.jpg"
    imageNames[8] = "https://i.imgur.com/22f630s.jpg"
    imageNames[9] = "https://i.imgur.com/7bbhlOa.jpg"
    imageNames[10] = "https://i.imgur.com/Ke1o6Gb.jpg"
    imageNames[11] = "https://i.imgur.com/hnSXa9y.jpg"
    imageNames[12] = "https://i.imgur.com/HPLomd1.jpg"
    imageNames[13] = "https://i.imgur.com/ifo5g3u.jpg"
    imageNames[14] = "https://i.imgur.com/cedp6AC.jpg"
    imageNames[15] = "https://i.imgur.com/6XxqZ1u.jpg"
    imageNames[16] = "https://i.imgur.com/rhEs6bx.jpg"
    imageNames[17] = "https://i.imgur.com/o5VujYT.jpg"
    imageNames[18] = "https://i.imgur.com/9nXwcuh.jpg"
    imageNames[19] = "https://i.imgur.com/07qlded.jpg"
    imageNames[20] = "https://i.imgur.com/wH2NFj7.jpg"
    imageNames[21] = "https://i.imgur.com/qB6Ayi0.jpg"
    imageNames[22] = "https://i.imgur.com/AM8eMi3.jpg"
    imageNames[23] = "https://i.imgur.com/uOzyybS.jpg"
    imageNames[24] = "https://i.imgur.com/vnEhu5u.jpg"
    imageNames[25] = "https://i.imgur.com/SEA3Z8z.jpg"

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

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

function soundSetup() { // setup for audio generation
    rope.setVolume(0.5);
    heart.setVolume(0.5);
    char1.setVolume(0.5);
    walking.setVolume(0.5);
}

function draw() {

    // displays an image every frame
    image(animationImages[counter], 0, 0, 400, 500);

    // all the if statements state what frame each noise will play
    if (counter == 1 || counter == 11 || counter == 24) {
        char1.play();
    }
    if ( counter == 4 || counter == 25) {
        heart.play();
    }
    if (counter == 6) {
        rope.play();
    }
    if (counter == 13 || counter == 15) {
        walking.play();
    }

    counter ++

    // ends animation
    if (counter == animationImages.length+1) {
        background(0);
        noLoop();
    }
}

For my project this week I wanted to story to be interrupted however you wanted. So the actual story is quite simple but you could get many different means out of the animation. My four sounds were the heart’s voice, the rope moving, character 1’s voice, and character 2’s footsteps.

This project depicts a bicycle moving along a path through different scenery. Different sound effects play as the bicycle passes through grass, birds fly by, trees and fall foliage appear, and night starts to fall.

sketch

//Alana Wu
//ID: alanawu
//Project 10: Sonic Story

var birdSound;
var autumn;
var chimes;
function preload()
{
    chimes = loadSound("http://localhost:8000/chimes3.wav");
    birdSound = loadSound("http://localhost:8000/bird.wav");
    autumn = loadSound("http://localhost:8000/autumn.wav");
    chirping = loadSound("http://localhost:8000/chirping.wav");

}


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


function soundSetup()
{
    birdSound.setVolume(5);
    autumn.setVolume(3);
    autumn.amp (.4);
    chimes.setVolume(.5);

}

var x;
var y;
function draw()
{

    background(0, 200, 255);
//biking through the grass, windchimes playing
    if (frameCount < 40)
    {
        grass();
        chimes.play();
    }

//birds fly by and chirp
    if (frameCount >= 40 & frameCount < 80)
    {
        bird(width + 400 - frameCount*10, frameCount*4);
        bird(width + 430 - frameCount*10, height - frameCount*5);
        bird(width + 400 - frameCount*10, height/2 - frameCount*3);
        bird(width + 420 - frameCount*10, height/3 + frameCount*2);
        bird(width + 400 - frameCount*10, 15 + frameCount*2);
        if (frameCount % 8 == 0)
        {
            birdSound.play();
        }
    }
//bike through the autumn trees, wind is blowing
    if (frameCount >= 80 & frameCount < 160)
    {
        if (frameCount % 10 == 0 && frameCount < 120)
        {
            autumn.play();
        }
        background(0, 200, 255);
        trees (width + 1120 - frameCount*14, height);
    }
    if (frameCount >= 140)
    {
        night();
    }

    noStroke();
    fill (200);
//road and bicycle
    rect (0, 385, width, 20);
    bicycle(150, 350);
//ends program after a certain amount of time
    if (frameCount > 200)
    {
        noLoop();
    }

}

function bicycle (x, y)
{
    stroke(0);
    strokeWeight(5);
    noFill();
    circle (x, y, 70, 70);
    circle (x + 100, y, 70, 70);
    line (x, y, x + 50, y);
    line (x + 50, y, x + 32, y - 42);
    line (x + 24, y - 42, x + 42, y - 42);
    line (x + 50, y, x + 90, y - 55);
    line (x + 88, y - 65, x + 100, y);
    line (x + 88, y - 65, x + 72, y - 65);

}

function bird (x, y)
{
    noStroke();
    fill (0, 0, 255);
    ellipse (x, y, 40, 32);
    push();
    translate(x, y);
    rotate (radians(5));
    ellipse(20, 5, 10, 5);
    rotate (radians(15));
    ellipse(20, 4, 10, 5);
//wing
    fill (170, 220, 255);
    ellipse(6, 4, 11, 6);
    rotate(radians(-25));
    ellipse(5, 3, 11, 6);
    rotate(radians(-25));
    ellipse(4, 2, 11, 6);
    pop();
    fill (255);
    ellipse (x - 8, y - 5, 12, 12);
    fill (0);
    ellipse (x - 10, y - 5.5, 6, 6);
    fill (255, 180, 30);
    triangle (x - 26, y + 8, x - 19, y, x - 15, y + 9);
}

function grass()
{
    fill (0, 230, 0);
    noStroke();
    push();
    translate (400 - frameCount*20, 0);
    for (var x = width; x >= 0; x -= 20)
    {
        triangle (x, height, x + 20, height, x + 10, height - 100);
    }
    pop();
}

function trees (x)
{
//green tree
    noStroke();
    fill (100, 50, 0);
    triangle (x - 10, height, x + 10, height, x, height - 100);
    triangle (x - 26, height - 55, x, height - 55, x, height - 45);
    triangle (x + 35, height - 60, x, height - 65, x, height - 55);
    fill (0, 150, 0);
    circle (x - 25, height - 100, 60);
    circle (x + 25, height - 120, 75);
    circle (x + 35, height - 60, 50);
    circle (x - 30, height - 55, 40);

//yellow tree
    x += 75;
    fill (100, 50, 0);
    triangle (x - 10, height, x + 10, height, x, height - 250);
    fill (255, 200, 0);
    ellipse (x, height - 250, 80, 110);

//red orange yellow tree
    x += 200;
    fill (100, 50, 0);
    triangle (x - 10, height, x + 15, height, x, height - 200);

    fill (255, 130, 0);
    circle (x + 15, height - 135, 50);
    fill (255, 50, 50);
    circle (x, height - 170, 80);
    fill (240, 230, 0);
    circle (x - 18, height - 125, 40);

//tallest tree
    x -= 75;
    fill (100, 50, 0);
    triangle (x + 20, height, x-10, height, x + 5, 0);
    fill (255, 255, 0);
    circle (x + 20, 90, 50);
    fill (200, 255, 0);
    circle (x + 25, 5, 100);
    fill (150, 255, 0);
    circle (x + 10, 45, 70);
    fill (100, 255, 0);
    circle (x-12, 70, 60);
}

//sky becomes night time, stars come out
function night()
{
    if (frameCount % 15 == 0)
    {
         chirping.play();   
    }

    background (0, 200 - (frameCount - 140), 255 - (frameCount-140));
    fill (255);
    noStroke();
    if (frameCount > 160)
    {
        circle (random(width),random(height), 10);
    }
    circle (random(width),random(height), 10);
    circle (random(width),random(height), 10);
}

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

// Storyline: a mouse comes out of its hole, sees some cheese,
// then goes over to nibble on it. It sees the shadow of a cat,
// then scurries back to its hole.

var xPos; //x position of the mouse
var yPos; //y position of the mouse 
var timer=0; //for animation timing purposes
var yPosCat; //y position for cat shadow

function preload() {
    squeak = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/squeak.wav");
    aha = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/aha.wav");
    nibble = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/nibble.mp3");
    scream = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/scream.wav");
}

function soundSetup() {
    squeak.setVolume(0.5);
    aha.setVolume(0.5);
    nibble.setVolume(0.5);
    scream.setVolume(0.5);
}

function setup() {
    createCanvas(600,400);
    frameRate(4); //speed of story
    xPos=(width/2)+180;
    yPos=(height/2)+78;
    yPosCat=600;
    rectMode(CENTER);
    noStroke();
    useSound();
}

function setting() {
    //wall
    background(240); //light gray
    fill(156,56,72); //red
    rect(width/2,25,width,100);

    //mouse hole
    fill(131,122,117); //lighter grayish brown for the hole wall
    rect((width/2)+90,(height/2)+50, 110,200, 80,80);
    fill(96,91,86); //grayish brown for the hole
    rect((width/2)+100,(height/2)+50, 100,200, 80,80);

    //floor
    fill(107,58,15); //brown
    rect(width/2,400,width,200);
}

function cheese() {
    fill(242,205,96); //yellow
    quad(100,350, 200,310, 200,235, 100,250);
    fill(242,232,99); //lighter yellow
    quad(100,350, 60,320, 60,240, 100,250);
    fill(228,186,62); //darker yellow
    triangle(60,240, 100,250, 200,235);

    //holes
    fill(242,205,96); //yellow
    ellipse(70,300,10,30);
    ellipse(90,280,15,40);
    ellipse(80,320,10,20);
    ellipse(75,260,10,20);
}

function mousey(x,y) {
    stroke(170); //gray
    noFill();
    strokeWeight(5);
    curve(x+35,y,x+35,y,x+70,y,x+100,y-50);
    noStroke();
    fill(170); //gray
    rect(x,y, 70,40, 0,80,80,0);
    arc(x-35,y+20, 70,80, PI,0);
    fill(150); //darker gray
    ellipse(x-40,y+20,20,12);
    ellipse(x+15,y+20,20,12);
    ellipse(x-30,y-20,40);
    fill(216,130,157); //pink
    ellipse(x-30,y-20,30);
    ellipse(x-70,y+15,10,10);
    fill(0); //black
    ellipse(x-50,y,10,10);
}

function catShadow(x,y) {
    fill(50,50,50, 80);
    ellipse(x,y,400,200);
    ellipse(x,y+200,200,400);
    triangle(x+50,y-100, x+200,y-25, x+150,y-150);
    triangle(x-50,y-100, x-200,y-25, x-150,y-150);
}

function draw() {
    setting();
    cheese();
    mousey(xPos,yPos);

    //to conceal mouse entering hole
    fill(240); //light gray
    rect((width/2)+200,(height/2)+50, 100,100);
    fill(107,58,15); //brown
    rect(width/2+225,400, 150,200);

    //mouse movement
    if (xPos>260) {
        xPos-=10;
    }

    //cat shadow
    catShadow(width/2,yPosCat);
    if (yPosCat>(height/2) & timer>23) {
        yPosCat-=20;
    }

    if (timer>32) {
        setting();
        cheese();
        push();
        translate(width,0);
        scale(-1,1);
        mousey(xPos+90,yPos);
        pop();
        fill(240); //light gray
        rect((width/2)+225,(height/2)+50, 150,100);
        fill(107,58,15); //brown
        rect(width/2+225,400, 150,200);
        catShadow(width/2, yPosCat);
        if (xPos>30) {
            xPos-=20;
        }
    }

    //sound
    if (timer==0) {
        aha.play();
    }
    if (timer==16 || timer==10) {
        aha.stop();
        squeak.play();
    }
    if (timer==19) {
        nibble.play();
    }
    if (timer==33) {
        scream.play();
    }

    timer+=1;
}

When thinking of a story I could use for this assignment, I thought back to children’s stories and cartoons. Some notable cartoons came to mind, like Tom and Jerry and Looney Tune’s Tweety Bird, and based off of these I decided to do a cat and mouse theme. The basic story I decided on using was: “a mouse comes out of its hole, sees some cheese, then goes over to nibble on it. It sees the shadow of a cat, then scurries back to its hole.” To facilitate this story, I used an aha sound (for when the mouse sees the cheese), a squeak noise (to make the mouse more mousey), a nibble noise (for when the mouse is eating the cheese), and a scream (for when the mouse sees the cat). I think the story is cute and very readable.

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.