## Project 10: Sonic Story

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.

``````//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 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);
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
}
}

``````

## Project 10

//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.

sketch
``````//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
}
function setup() {
createCanvas(400, 400);
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()
}

``````

## Project 10: Sonic Story

CLICK ON CANVAS TO START!

sonic story wordpress
``````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 counter = false;
var count = 0;

// images

// sounds
}

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);
}

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();
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.

## Project 10: Animation

``````// 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

var imageNames = [];
imageNames = "https://i.imgur.com/ZP19uwT.jpg";
imageNames = "https://i.imgur.com/4Bl2ivM.jpg"
imageNames = "https://i.imgur.com/VaO2Qof.jpg"
imageNames = "https://i.imgur.com/tpxAt2V.jpg"
imageNames = "https://i.imgur.com/nkNrX5Y.jpg"
imageNames = "https://i.imgur.com/HEE2XA5.jpg"
imageNames = "https://i.imgur.com/7vkRyqN.jpg"
imageNames = "https://i.imgur.com/FOvHPju.jpg"
imageNames = "https://i.imgur.com/22f630s.jpg"
imageNames = "https://i.imgur.com/7bbhlOa.jpg"
imageNames = "https://i.imgur.com/Ke1o6Gb.jpg"
imageNames = "https://i.imgur.com/hnSXa9y.jpg"
imageNames = "https://i.imgur.com/HPLomd1.jpg"
imageNames = "https://i.imgur.com/ifo5g3u.jpg"
imageNames = "https://i.imgur.com/cedp6AC.jpg"
imageNames = "https://i.imgur.com/6XxqZ1u.jpg"
imageNames = "https://i.imgur.com/rhEs6bx.jpg"
imageNames = "https://i.imgur.com/o5VujYT.jpg"
imageNames = "https://i.imgur.com/9nXwcuh.jpg"
imageNames = "https://i.imgur.com/07qlded.jpg"
imageNames = "https://i.imgur.com/wH2NFj7.jpg"
imageNames = "https://i.imgur.com/qB6Ayi0.jpg"
imageNames = "https://i.imgur.com/AM8eMi3.jpg"
imageNames = "https://i.imgur.com/uOzyybS.jpg"
imageNames = "https://i.imgur.com/vnEhu5u.jpg"
imageNames = "https://i.imgur.com/SEA3Z8z.jpg"

for (var i = 0; i < imageNames.length; 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.

## Project 10

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.

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

var birdSound;
var autumn;
var chimes;
{

}

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);
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);
ellipse(20, 5, 10, 5);
ellipse(20, 4, 10, 5);
//wing
fill (170, 220, 255);
ellipse(6, 4, 11, 6);
ellipse(5, 3, 11, 6);
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);
}

``````

## Project 10: Sonic Story

``````//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 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
fill(242,232,99); //lighter yellow
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);
}

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;
}

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);
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.

## Sonic-Story

``````//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

// These URLs are for the individual walk cycle images
var filenames = [];
filenames = "https://i.imgur.com/14ifmej.png";
filenames = "https://i.imgur.com/r9GhjWn.png";
filenames = "https://i.imgur.com/A0L2KVp.png";
filenames = "https://i.imgur.com/JFE5CBm.png";
filenames = "https://i.imgur.com/14ifmej.png";
filenames = "https://i.imgur.com/r9GhjWn.png";
filenames = "https://i.imgur.com/A0L2KVp.png";
filenames = "https://i.imgur.com/JFE5CBm.png";
filenames = "https://i.imgur.com/14ifmej.png";
filenames = "https://i.imgur.com/r9GhjWn.png";
filenames = "https://i.imgur.com/A0L2KVp.png";
filenames = "https://i.imgur.com/JFE5CBm.png";

// These URLs are for the individual bird cycle images
var file = [];
file = "https://i.imgur.com/82McfxQ.png";
file = "https://i.imgur.com/OMNJ7z2.png";
file = "https://i.imgur.com/ZP2mduv.png";
file = "https://i.imgur.com/2ly1P4T.png";
file = "https://i.imgur.com/5VNmIMy.png";
file = "https://i.imgur.com/KjJmaEd.png";
file = "https://i.imgur.com/036LD8g.png";
file = "https://i.imgur.com/OPD7VfW.png";
file = "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++) {
}

for (var i = 0; i < file.length; i++) {
}

lightning.resize(150,0);
}

// 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.stepFunction();
characters.drawFunction();
birds.stepFun();
birds.drawFun();
characters.dx = 4;
birds.dx = 6;
}
else {
characters.stepFunction();
characters.drawFunction();
birds.stepFun();
birds.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.

## Sonic Story

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…

## Project 10: Sonic Story

wpf-curves.js
``````//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 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
}

//======== 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,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.

## Sonic Story

sketch

Fishies! For this week’s project, I wade an infinite animation of a fish eating a fish eating a fish eating a… the colors are randomly generated and there are two pitches playing the jaws theme, and chomping and background underwater sounds from freesounds.org. Enjoy!!

``````
function setup() {
createCanvas(400, 200);
useSound();
frameRate(4);
background('lightblue');
chooseColor1();
chooseColor2();
}

function soundSetup() {
osc = new p5.Oscillator();
osc.amp(1);
osc.setType('sine');
osc.start();
}

bg.setVolume(0.75);
chomp.setVolume(0.5);
}

var r;
var g;
var d;
var col1;
var col2;

function chooseColor1(){
r = random(100,255);
g = 140;
b = random(100,255);
col1 = color(r,g,b);
}

function chooseColor2(){
r = random(100,255);
g = 140;
b = random(100,255);
col2 = color(r,g,b);
}

function drawFish1(x, y, s, c, mouthClosed, lookingFord) {
push();
translate(x, y);
scale(s);
strokeCap(SQUARE)
strokeWeight(1);

var fil = color(red(c)+20, green(c)+20, blue(c)+20);

if (mouthClosed == true) {
//top half of fish (colored w/ c)
//fill
stroke(fil);
fill(fil);
triangle(-17, -5, -12,-2, -17, -1);
rect(-17, -1, 7, 3);
rect(-16, 2, 3, 1);
rect(-6,-5, 16, 5);
line(-6, -2, -10,-2);
line(-6, -3, -8,-3);
line(10, -2, 17, -2);
line(10, -3, 14, -3);

//outline
stroke(c);
line(-17, 2, -17, -6);
point(-16,-6);
point(-15,-5);
point(-14,-4);
point(-13,-3);
point(-12,-2);
point(-11,-2);
point(-10,-3);
point(-9,-3);
point(-8,-4);
point(-7,-4);
line(-6,-5, -2, -5);

//fin
stroke(fil);
rect(-1, -8, 4, 4);
triangle(-1, -7,-3, -5, -1, -5);
line(3, -6, 5, -6);

stroke(c);
point(-4, -6);
point(-3, -7);
line(-2, -8, 3, -8);
point(3, -7);
point(4, -7);
point(5, -6);

line(2,-5, 10, -5);
point(11,-4);
point(12,-4);
point(14,-3);
point(15,-3);
line(16,-2, 18, -2);

//bottom half of fish
//finn fill
stroke(240);
fill(240);
rect(-5, 4, 4, 2);

stroke(220);
point(-16, 4);
point(-15, 4);
line(-14, 3, -10, 3);
line(-10, 4, -6, 4);
line(-6, 5, 0, 5);

//fin
stroke(220)
point(-6,5);
point(-7,5);
point(-7, 6);
line(-6, 7, -2, 7);
line(-2, 6, 10, 6)

stroke(240);
line(11, 5, 0, 5);
line(12, 5, 0, 5);
line(13, 4, -5, 4);
line(14, 3, -10, 3);
line(15, 2, -10, 2);
line(16, 1, -10, 1);
line(17, 0, -10, 0);
line(18, -1, -10, -1);

//gills
stroke(204,194,194);
point(0,2);
point(1,1);
point(2,2);
point(3,1);
point(4,2);
point(5,1);
point(6,2);

stroke(220);
point(10, 5);
point(11, 5);
point(12, 4);
point(13, 3);
point(14, 2);
point(15, 1);
point(16, 0);
point(17, -1);

//eye
fill(255);
stroke(255);
rect(9, -1, 4, 2);
rect(10, -2, 2, 4);
stroke(0);
//if (lookingFord) {
point(11,0);
//} else if (!lookingFord) {
//    point(10, -1);
//}

pop();
} else {
//top half of fish (colored w/ c)
stroke(fil);
fill(fil);
triangle(-17, -5, -12,-2, -17, -1);
rect(-17, -1, 7, 3);
rect(-16, 2, 3, 1);
rect(-6,-5, 16, 5);
line(-6, -2, -10,-2);
line(-6, -3, -8,-3);
line(10, -2, 17, -2);
line(10, -3, 14, -3);

stroke(c);
line(-17, 2, -17, -6);
point(-16,-6);
point(-15,-5);
point(-14,-4);
point(-13,-3);
point(-12,-2);
point(-11,-2);
point(-10,-3);
point(-9,-3);
point(-8,-4);
point(-7,-4);
line(-6,-5, -2, -5);

//fin
stroke(fil);
rect(-1, -8, 4, 4);
triangle(-1, -7,-3, -5, -1, -5);
line(3, -6, 5, -6);

stroke(c);
point(-4, -6);
point(-3, -7);
line(-2, -8, 3, -8);
point(3, -7);
point(4, -7);
point(5, -6);

line(2,-5, 10, -5);
point(11,-4);
point(12,-4);
point(14,-3);
point(15,-3);
line(16,-2, 18, -2);

//bottom half of fish
//finn fill
stroke(240);
fill(240);
rect(-5, 4, 4, 2);

stroke(220);
point(-16, 4);
point(-15, 4);
line(-14, 3, -10, 3);
line(-10, 4, -6, 4);
line(-6, 5, 0, 5);

//fin
stroke(220)
point(-6,5);
point(-7,5);
point(-7, 6);
line(-6, 7, -2, 7);
line(-2, 6, 10, 6)

stroke(240);
line(11, 5, 0, 5);
line(13, 5, 0, 5);
line(16, 4, -5, 4);
line(17, 3, -10, 3);
line(14, 2, -10, 2);
line(13, 1, -10, 1);
line(12, 0, -10, 0);
line(18, -1, -10, -1);

stroke(204,194,194);
point(0,2);
point(1,1);
point(2,2);
point(3,1);
point(4,2);
point(5,1);
point(6,2);

stroke(220);
point(10, 5);
point(11, 5);
point(12, 5);
point(13, 4);
point(14, 4);
point(15, 4);
point(16, 3);
point(17, 3);

//eye
fill(255);
stroke(255);
rect(9, -1, 4, 2);
rect(10, -2, 2, 4);
stroke(0);
point(11,0);

pop();
}
}

function drawFish2(x, y, s, c, mouthClosed, lookignFord) {
push();
translate(x, y);
scale(s);
strokeCap(SQUARE)
strokeWeight(1);

var fil = color(red(c)+20, green(c)+20, blue(c)+20);

if (mouthClosed == true) {
//top half of fish (colored w/ c)
stroke(fil);
fill(fil);
triangle(-15, -5, -12,-2, -15, -1);
rect(-15, -1, 7, 3);
rect(-14, 2, 3, 1);
rect(-6,-5, 16, 5);
line(-6, -2, -8,-2);
line(-6, -3, -6,-3);
line(10, -2, 17, -2);
line(10, -3, 14, -3);

stroke(c);
line(-15, 2, -15, -4);
//point(-16,-6);
point(-15,-5);
point(-14,-4);
point(-13,-3);
point(-12,-2);
point(-11,-2);
point(-10,-3);
point(-9,-3);
point(-8,-4);
point(-7,-4);
line(-6,-5, -2, -5);

//fin
stroke(fil);
rect(-1, -8, 4, 4);
triangle(-1, -7,-3, -5, -1, -5);
line(3, -6, 5, -6);

stroke(c);
point(-4, -6);
point(-3, -7);
line(-2, -8, 3, -8);
point(3, -7);
point(4, -7);
point(5, -6);

line(2,-5, 10, -5);
point(11,-4);
point(12,-4);
point(14,-3);
point(15,-3);
line(16,-2, 18, -2);

//bottom half of fish
//finn fill
stroke(240);
fill(240);
rect(-5, 4, 4, 2);

stroke(220);
point(-16, 4);
point(-15, 4);
line(-14, 3, -10, 3);
line(-10, 4, -6, 4);
line(-6, 5, 0, 5);

//fin
stroke(220)
point(-6,5);
point(-7,5);
point(-7, 6);
line(-6, 7, -2, 7);
line(-2, 6, 10, 6)

stroke(240);
line(11, 5, 0, 5);
line(12, 5, 0, 5);
line(13, 4, -5, 4);
line(14, 3, -10, 3);
line(15, 2, -10, 2);
line(16, 1, -10, 1);
line(17, 0, -10, 0);
line(18, -1, -10, -1);

stroke(204,194,194);
point(0,2);
point(1,1);
point(2,2);
point(3,1);
point(4,2);
point(5,1);
point(6,2);

stroke(220);
point(10, 5);
point(11, 5);
point(12, 4);
point(13, 3);
point(14, 2);
point(15, 1);
point(16, 0);
point(17, -1);

//eye
fill(255);
stroke(255);
rect(9, -1, 4, 2);
rect(10, -2, 2, 4);
stroke(0);
//if (lookingFord) {
point(11,0);
//} else if (!lookingFord) {
//    point(10, -1);
//}

pop();
} else {
//top half of fish (colored w/ c)
stroke(fil);
fill(fil);
triangle(-17, -5, -12,-2, -17, -1);
rect(-17, -1, 7, 3);
rect(-16, 2, 3, 1);
rect(-6,-5, 16, 5);
line(-6, -2, -10,-2);
line(-6, -3, -8,-3);
line(10, -2, 17, -2);
line(10, -3, 14, -3);

stroke(c);
line(-17, 2, -17, -6);
point(-16,-6);
point(-15,-5);
point(-14,-4);
point(-13,-3);
point(-12,-2);
point(-11,-2);
point(-10,-3);
point(-9,-3);
point(-8,-4);
point(-7,-4);
line(-6,-5, -2, -5);

//fin
stroke(fil);
rect(-1, -8, 4, 4);
triangle(-1, -7,-3, -5, -1, -5);
line(3, -6, 5, -6);

stroke(c);
point(-4, -6);
point(-3, -7);
line(-2, -8, 3, -8);
point(3, -7);
point(4, -7);
point(5, -6);

line(2,-5, 10, -5);
point(11,-4);
point(12,-4);
point(14,-3);
point(15,-3);
line(16,-2, 18, -2);

//bottom half of fish
//finn fill
stroke(240);
fill(240);
rect(-5, 4, 4, 2);

stroke(220);
point(-16, 4);
point(-15, 4);
line(-14, 3, -10, 3);
line(-10, 4, -6, 4);
line(-6, 5, 0, 5);

//fin
stroke(220)
point(-6,5);
point(-7,5);
point(-7, 6);
line(-6, 7, -2, 7);
line(-2, 6, 10, 6)

stroke(240);
line(11, 5, 0, 5);
line(13, 5, 0, 5);
line(16, 4, -5, 4);
line(17, 3, -10, 3);
line(14, 2, -10, 2);
line(13, 1, -10, 1);
line(12, 0, -10, 0);
line(18, -1, -10, -1);

stroke(204,194,194);
point(0,2);
point(1,1);
point(2,2);
point(3,1);
point(4,2);
point(5,1);
point(6,2);

stroke(220);
point(10, 5);
point(11, 5);
point(12, 5);
point(13, 4);
point(14, 4);
point(15, 4);
point(16, 3);
point(17, 3);

//eye
fill(255);
stroke(255);
rect(9, -1, 4, 2);
rect(10, -2, 2, 4);
stroke(0);
point(11,0);

pop();
}
}

var count = 0;
var mouthClosed;
var lookingFord;

function draw() {
background('lightblue');

if (count%32==0) {
count = 0;
col1 = col2;
chooseColor2();
osc.start();
bg.play();
bg.loop();
}

if (count > 8) {
mouthClosed = true;
osc.stop();
//lookignFord = false;
} else {
mouthClosed = false;
//lookignFord = true;
}

if (count <= 8) {
if (count%2==0) {
drawFish1(width/2, height/2, 3, col1, true);
osc.freq(midiToFreq(52));
} else if ((count+1)%2==0) {
osc.freq(midiToFreq(53));
drawFish2(width/2, height/2, 3, col1, true);
}
}

var bigFishX = map(count, 0, 12, -200, 200);
var bigFishS = map(count, 12, 24, 10, 3);

if (count == 5) {
chomp.play();
}

if (count <= 12) {
if (count%2==0) {
drawFish1(bigFishX, height/2, 10, col2, mouthClosed);
} else if ((count+1)%2==0) {
drawFish2(bigFishX, height/2, 10, col2, mouthClosed);
}
} if (count > 12 & count <= 24) {
if (count%2==0) {
drawFish1(width/2, height/2, bigFishS, col2, mouthClosed);
} else if ((count+1)%2==0) {
drawFish2(width/2, height/2, bigFishS, col2, mouthClosed);
}
} if (count > 24) {
if (count%2==0) {
drawFish1(width/2, height/2, 3, col2, mouthClosed);
} else if ((count+1)%2==0) {
drawFish2(width/2, height/2, 3, col2, mouthClosed);
}
}

count += 1;
}
``````