Category: Project-10-Sonic-Story

var cloudX = 0;
var cloudY = 50;
var cloudDx = 5;
var carX = 400;
var carY = 350;
var carDx = 15;
var manX = 200;
var manY = 350;
var manDx = 10;
var cloudLaughing;
var rainSound;
var manGrumble;
var carSound;

function preload() {
    cloudLaughing = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/laugh.wav");
    rainSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rain-1.wav");
    carSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/car.wav");
    manGrumble = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/mad.wav");
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 400);
    frameRate(1);
    useSound();
}

function soundSetup(){
    cloudLaughing.setVolume(0.5);
    carSound.setVolume(0.5);
    manGrumble.setVolume(0.4);
}

function cloud(){
    noStroke();
    fill(255);
    //cloud 1
    push();
    scale(1.5);
    circle(cloudX, cloudY, 60);
    circle(cloudX - 30, cloudY + 10, 40);
    circle(cloudX + 30, cloudY +10, 40);
    //face
    stroke(0);
    line(cloudX-15, cloudY - 15, cloudX-5, cloudY - 5);
    line (cloudX - 15, cloudY - 5, cloudX -5, cloudY - 15);
    line(cloudX+15, cloudY - 15, cloudX+5, cloudY - 5);
    line (cloudX + 15, cloudY - 5, cloudX + 5, cloudY - 15);
    fill(0);
    arc(cloudX, cloudY, 30, 30, 0,  PI); //smile
    pop();

    cloudX += cloudDx
    print(frameCount);
    if (frameCount == 25){
        cloudDx = 0
    }
}

function rain(){
    for (var i = 0; i < 12; i++){
        var x = random(125, 275);
        var y = random(100, height);
        fill(93, 146, 245);
        noStroke();
        circle(x - 15, y+3, 5);
        triangle(x - 17.5, y +3, x - 12.5, y+ 3, x - 15, y - 5)
    }
}

function car(){
    fill(255, 0, 0);
    ellipse(carX, carY, 100, 70);
    ellipse(carX, carY + 15, 150, 40);
    fill(60, 140, 255);
    ellipse(carX - 30, carY - 10, 40, 20)
    fill(0)
    //tires
    circle(carX - 35, carY + 30, 30);
    circle(carX + 35, carY + 30, 30);
    carX -= carDx
    if (frameCount == 14){
        carDx = 0;
    }
}

function person(){
    fill(0);
    stroke(0);
    strokeWeight(1);
    circle(manX, manY, 15);
    strokeWeight(5);
    line(manX, manY, manX, manY + 30);
    line(manX, manY + 30, manX -15, manY + 40);
    line(manX, manY + 30, manX + 15, manY + 40);
    line(manX, manY + 20, manX -15, manY+ 5);
    line(manX, manY + 20, manX + 15, manY+ 5);
    if (frameCount >= 27){
        manX -= manDx
    }
}

function draw() {
    background(195, 200, 226);
    fill(190);
    stroke(50);
    rect(0, 350, width, height);
    cloud();
    car();
    if (frameCount <= 5){
        text('Evil Cloud', 190, 200);
    }
    if (frameCount >= 15){
        person();
    }
    strokeWeight(1);
    //sounds
    if (frameCount > 25 & frameCount <= 49) {
        rain();
        rainSound.play();
    }
    if (frameCount >= 27 & frameCount < 49){
        manGrumble.play();
    }
    if (frameCount < 14){
        carSound.play();
    }
    if (frameCount == 25) {
        cloudLaughing.play();
    }
    if (frameCount == 50){
        rainSound.stop();
        manGrumble.stop();
    }
    if (frameCount == 14){
        carSound.stop();
    }
    if (frameCount == 28){
        cloudLaughing.stop();
    }

}

//Story Concept: Alice from Alice in Wonderland wakes up stuck in the glitched out world
//of Vaporwave. First, she wakes up in the MS Paint canvas and sees the marble bust from
//Macintosh Plus's Floral Shoppe album floating above her as startup music plays. Next,
//as she explores this new world trying to find a way out she discovers and incessant error
//message that blocks her path. Then, she visits the All-Seeing-Eye for guidance, but the
//eye just floats around aimlessly making an ominous drone. Finally, she arrives at the 
//original frontier and manages to shut down the Windows 95 logo that runs this world.

var sceneOne;
var sceneTwo;
var sceneThree;
var sceneFour;
var error;
var alice;
var soundOne;
var blink = true; //helps make error message disappear and reappear
var soundError;
var eye;
var eyeDrone;
var windows;
var logoFlip = true;//helps flip and reflip Windows 95 logo
var vaporwave;
var sleepalice;
var sitalice;
var windowSound;
var marbleBust;


function preload() {
    // call loadImage() and loadSound() for all media files here
    sceneOne = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/2-scaled.jpgmu.edu/15-104/f2020/wp-content/uploads/2020/11/1-scaled.jpg");
    sceneTwo = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/2-scaled.jpg");
    sceneThree = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/3-scaled.jpg");
    sceneFour = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/4-scaled.jpg");
    //source: https://i.pinimg.com/originals/c8/0b/29/c80b290d6ea187abe624cd42c4b44014.png
    windows = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/windows.png")
    //source: https://freshsparks.com/wp/wp-content/uploads/2015/06/generic-error-message-microsoft.jpg
    error = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error.png");
    //source: http://2.bp.blogspot.com/-cM30a7xxeMg/TplisvJ0QYI/AAAAAAAAABk/DUgdfkhhq0c/s320/Alice%2B2.gif
    alice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/alice.gif"); 
    //source: https://freesound.org/people/kjartan_abel/sounds/542453/
    soundOne = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/japansky-1.wav"); 
    //source: https://freesound.org/people/AbdrTar/sounds/519422/
    soundError = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error-1.wav"); 
    //source: https://freemasoninformation.com/wp-content/uploads/2014/05/all-seeing-eye-of-god-796x1024.jpg
    eye = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/eye.png");
    //source: https://freesound.org/people/pointparkcinema/sounds/407241/
    eyeDrone = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/eyedrone-1.wav");
    //source: https://freesound.org/people/Doctor_Dreamchip/sounds/523808/
    vaporwave = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/vaporwave.wav"); 
    //source: https://www.disneyclips.com/images/images/alice1small.gif
    sleepalice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/sleepingalice.gif");
    //source: https://www.disneyclips.com/images/images/alice-small.png
    sitalice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/alicesit.png");
    //source: https://www.myinstants.com/instant/windows-xp-shutdown/
    windowSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/preview_4.mp3")
    //source: https://ih0.redbubble.net/image.236642016.7494/ap,550x550,12x16,1,transparent,t.png
    marbleBust = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/floralshoppe.png");

}


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


function soundSetup() { // setup for audio generation
    soundOne.setVolume(.2);
    soundError.setVolume(1);
    eyeDrone.setVolume(.7);
    vaporwave.setVolume(.5);
    windowSound.setVolume(.5);
}

var soundplay = true;
var marbleAngle = 0;

function draw() {
	var eyeX = random(0,3500);
	var eyeY = random(220,500);
    var marbleRadius = 600;
    // you can replace any of this with your own code:
    background(200);
    text("p5.js 15104 fall 2019 v1", 10, 15);
    print(soundplay);
    if (frameCount < 27){
    	soundplay = true;
    	image(sceneOne,0,0,400,400);
    	push();
    	scale(.25,.25);
    	image(sitalice,90,775);
    	pop();
        push();
        imageMode(CENTER);
        scale(.5,.5);
        image(marbleBust,marbleRadius*cos(radians(marbleAngle)),250);
        marbleAngle += 20;
        pop();
    	stroke("black");
    	fill("black");
    	text("Chapter One: Alice Wakes Up in the Internet",5,390);
    	soundOne.play();
    } else if (frameCount >= 27 & frameCount < 50){
    	soundOne.stop();
    	image(sceneTwo,0,0,400,400);
	    push();
	    scale(.1,.1);
	    drawAlice(3000,3000);
	    pop();
	    if (blink == true){ //makes error message appear and disappear
	    	push();
	    	scale(.8,.8);
	   		drawError(0,height/4);
	    	pop();
	    	soundError.play();
	    } else if (blink == false){
	    	soundError.stop();
	    	background(0,0);
	    }
	    blink = !blink;
	    stroke("black");
    	fill("black");
    	text("Chapter Two: Alice Encounters an Error",5,390);
    } else if (frameCount >= 50 & frameCount < 70) {
    	image(sceneThree,0,0,400,400);
		push();
		scale(.4,.4);
		drawAlice(650,300);
		pop();
		push();
		scale(.1,.1);
		drawEye(eyeX,eyeY); //All-Seeing-Eye moves randomly on canvas
		eyeDrone.play();
		pop();
		stroke(255);
    	fill(255);
    	text("Chapter Three: Alice Asks the All-Seeing-Eye for Help",5,390);
    } else if (frameCount >= 70 & frameCount < 90){
    	eyeDrone.stop();
    	image(sceneFour,0,0,400,400);
    	push();
    	scale(.1,.1);
    	drawAlice(3300,3300);
    	pop();
    	push();
    	scale(.5,.5);
    	if (logoFlip == true){
    		drawLogo(width/2,height/2);
    		windowSound.play();
    	} else if (logoFlip == false){
    		windowSound.stop();
    		scale(-1,1);
    		drawLogo(-1.5*width,height/2);
    	}
    	pop();
    	logoFlip = !logoFlip; 
    	stroke(120);
    	fill(120);
    	text("Chapter Four: Alice Faces the Original Frontier",10,390);

    } else {
    	//text(frameCount,0,0);
    	if (soundplay == true){
    		vaporwave.play(); //Cheesy end credit music plays
    		soundplay = !soundplay; //prevents song from restarting each time draw loops
    	}
    	background(0);
    	push();
    	scale(3,3);
    	fill(255,255,0);
    	stroke(255,255,0);
    	text("Alice in Vaporwave Land",1,height/9 + 10);
    	if (frameCount> 95){
    		text("Click to Start Again",1,(height/9)+20);
    	}
    	pop();
    	push();
    	scale(.5,.5);
    	image(sleepalice, 400,400);
    	pop();
    }


}

function mousePressed(){
	if (frameCount > 95){ //restarts story
		vaporwave.stop();
		frameCount = 0;
	}
}


function drawAlice(x,y){
	image(alice,x,y);
}

function drawError(x,y){
	image(error,x,y);
}


function drawEye(x,y){
	image(eye,x,y);
}

function drawLogo(x,y){
	image(windows,x,y);
}

//Annie Kim
//anniekim@andrew.cmu.edu
//SectionB
//anniekim-10-project

/* 
For my program, this is the general story line:
A lonely frog who is on a lilypad in the middle
of the water, is there with a fish. A fly comes near
the frog, and the frog eats it. Luckily, the frog is 
happy because it was getting hungry, however it is not 
so lucky for the fly. Then suddenly, lightning strikes,
and thunder echoes through the sky, and the sky turns dark.
The fish swims away in fear, and the frog is left alone again.
*/

var fly; //audio file names
var frogcroak;
var thunder;
var water;

var bug = {
    x: 450, y: 180,
    width: 45, height: 25
}
var lily = {
    x: 110, y: 320, 
    width: 200, height: 90
}
var lily1 = {
    x: 110, y: 320,
    width: 200, height: 90
}
var tongue_move = {
    x: 240, y: 220
}
var cloud = {
    x: 50, y: 75
}
var crab = {
    x: 400, y: 370,
}
var fish = {
    x: 225, y: 440,
}


function preload() {
    // call loadImage() and loadSound() for all media files here
    fly = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/fly-1.wav")
    frogcroak = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/frogcroak.wav")
    thunder = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/thunder.wav")
    water = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/water.wav")
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(450, 480);
    useSound();
    frameRate(1);
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    fly.setVolume(0.25);
    frogcroak.setVolume(0.75);
    thunder.setVolume(0.75);
    water.setVolume(0.8);
}


function draw() {
    //sky color
    background(217, 243, 245);
    //water
    fill(150, 214, 250);
    noStroke();
    rect(0, 250, 450, 230);
    //calling fish object
    fishy();
    //lilypad1 ~stagnant, doesnt move
    strokeWeight(2);
    stroke(100, 175, 0);
    fill(150, 225, 0);
    ellipse(lily1.x, lily1.y, lily1.width, lily1.height);
    fill(150, 214, 250); //making cut into lily pad
    noStroke();
    triangle(lily1.x, lily1.y, lily1.x - 100, lily1.y + 15, lily1.x - 50, lily1.y + 60);
    //calling cloud object
    clouds();
    //calling froggy object
    froggy();
    //fly & tongue movement + sound
    if (frameCount >= 1 && frameCount <= 7) {
        flying();
        fill(0);
        textSize(17);
        strokeWeight(1);
        textFont('HelveticaBold');
        text("The fly accidentally gets too close to the hungry frog.", 10, 100);
        tongue();
        fly.play();
    }
    if (frameCount == 7) {
        fly.stop(); //stops sound once fly disappears
    }
    if (frameCount >= 9 & frameCount <= 13) {
        frogcroak.play();
    }
    if (frameCount == 13) {
        frogcroak.stop();
    }
    if (frameCount == 25) {
        background(0);
        textSize(40);
        fill(255);
        strokeWeight(1);
        textFont('HelveticaBold');
        text("The End", 150, 240);
        water.stop();
        noLoop();
    }
}

function flying() {
    //creating 1st fly wing
    fill(255);
    stroke(0);
    ellipse(bug.x + 10, bug.y - 12, bug.width - 15, bug.height - 10);
    //creating fly body
    fill(0);
    noStroke();
    ellipse(bug.x, bug.y, bug.width, bug.height);
    //creating 2nd fly wing
    fill(255);
    stroke(0);
    ellipse(bug.x + 12, bug.y - 10, bug.width - 15, bug.height - 10);
    //making fly move
    bug.x = bug.x - 65;
    if (bug.x <=  200) {
        bug.x = 200;
    }
}

function froggy() {
    //light green color
    fill(117, 176, 111);
    //legs
    stroke(0);
    strokeWeight(3);
    ellipse(lily.x - 15, lily.y - 43, 35, 55);
    ellipse(lily.x + 65, lily.y - 43, 35, 55);
    //body
    ellipse(lily.x + 25, lily.y - 50, 80, 90);
    //feet
    fill(117, 176, 111);
    //arc(lily1.x - 3, lily1.y - 5, 40, 25, PI, 0);
    arc(lily.x + 4, lily.y - 5, 40, 30, PI, 0, CHORD);
    arc(lily.x + 46, lily.y - 5, 40, 30, PI, 0, CHORD);
    //head
    stroke(0);
    ellipse(lily.x + 25, lily.y - 105, 100, 80);
    //smile
    fill(100, 0, 0);
    arc(lily.x + 25, lily.y - 100, 70, 40, 0, PI, CHORD);
    //ears
    fill(117, 176, 111);
    circle(lily.x, lily.y - 140, 38);
    circle(lily.x + 47, lily.y - 140, 38);
    noStroke();
    circle(lily.x + 4, lily.y - 132, 36);
    circle(lily.x + 43, lily.y - 132, 36);
    //white part of eyes
    stroke(0);
    strokeWeight(2);
    fill(255);
    circle(lily.x + 47, lily.y - 140, 23);
    circle(lily.x, lily.y - 140, 23);
    //black of eyes
    fill(0);
    circle(lily.x + 47, lily.y - 140, 10);
    circle(lily.x, lily.y - 140, 10);
    //this will make the frog jump
    if (frameCount >= 9 & frameCount <= 10) {
        lily.y -= 150;
        textSize(20);
        strokeWeight(1);
        textFont('HelveticaBold');
        fill(0);
        text("The frog jumps with joy because it was hungry.", 15, 380);
    }
    if (frameCount >= 10 & frameCount <= 11) {
        lily.y += 150;
    }
}

function tongue() {
    strokeWeight(17);
    stroke(100, 0, 0);
    line(tongue_move.x, tongue_move.y - 10, 135, 230);
    //moving tongue to catch fly
    tongue_move.y -= 5;
    tongue_move.x -= 5;
    if (tongue_move.y <= 200) {
        tongue_move.y = 200;
    }
    if (tongue_move.x <= 220) {
        tongue_move.x = 220;
    }
}

function clouds() {
    if (frameCount >= 14 & frameCount <= 18) {
        darksky();
        lightning();
        textSize(28);
        fill(0);
        textFont('HelveticaBold');
        text("The sky shakes with thunder.", 100, 390);
        thunder.play();
    }
    if (frameCount >= 19 & frameCount <= 25) {
        darksky();
        thunder.stop();
        water.play();
    }
    fill(255);
    //left cloud
    circle(cloud.x, cloud.y, 100);
    circle(cloud.x - 45, cloud.y, 70);
    circle(cloud.x + 55, cloud.y, 55);
    //right cloud
    circle(cloud.x + 300, cloud.y - 30, 100);
    circle(cloud.x + 255, cloud.y - 30, 70);
    circle(cloud.x + 355, cloud.y - 30, 55);
    //clouds moving
    cloud.x += 5;
}

function lightning() {
    fill(255, 255, 0);
    quad(cloud.x, cloud.y, cloud.x - 20, cloud.y + 70, cloud.x + 10, cloud.y + 90, cloud.x + 30, cloud.y + 20);
    quad(cloud.x + 2, cloud.y + 75, cloud.x - 10, cloud.y + 145, cloud.x + 12, cloud.y + 165, cloud.x + 32, cloud.y + 95);
}

function darksky() {
    fill(160);
    rect(0, 0, 450, 250);
}

function fishy() {
    //body and tail
    fill(237, 104, 74);
    strokeWeight(1);
    stroke(255, 0, 0);
    ellipse(fish.x - 38, fish.y - 5, 17, 30);
    ellipse(fish.x - 38, fish.y + 5, 17, 30);
    ellipse(fish.x - 8, fish.y - 26, 30, 25);
    ellipse(fish.x, fish.y, 70, 60);
    //face of fish
    fill(255, 122, 92);
    ellipse(fish.x + 10, fish.y, 53, 54);
    //eyes of fish
    fill(255);
    stroke(0);
    circle(fish.x + 9, fish.y - 5, 18, 18);
    circle(fish.x + 27, fish.y - 5, 18, 18);
    fill(0);
    circle(fish.x + 9, fish.y - 5, 6, 6);
    circle(fish.x + 27, fish.y - 5, 6, 6);
    //bottom fin
    fill(237, 104, 74);
    stroke(155, 0, 0);
    triangle(fish.x, fish.y + 22, fish.x - 20, fish.y + 23, fish.x - 4, fish.y + 38);
    //smile
    noFill();
    arc(fish.x + 18, fish.y + 10, 20, 10, 0, PI);
    //fish is moving off of the canvas
    if (frameCount >= 19 & frameCount <= 25) {
        fish.x += 55;
        fish.y -= 36;
        fill(0);
        textFont('HelveticaBold');
        textSize(20);
        text("The frog wishes the fish would stay.", 50, 450);
        text("The frog doesn't want to be alone in the storm.", 50, 400);
    }
}