Project 10: Sonic Story

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