# 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[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.