RoadTrip

//RoadTrip
//the audio throughout will be a set playlist of songs that can be "tuned through" using the left and right arrow keys
//between each song will be radio interference/tuning noises 
//each scene will have its own ambient audio that will not be controlled by the user 
//using a switch function, the user will be able to pick through the scenes they want to view while listening to the music they "tune" to 

//since I'm having trouble refining the readio at the moment, I am making one more scene for the car to drive through

//Stripe inspo kept from a fork of https://www.openprocessing.org/sketch/645434, ended up only using the 
//shapes as a template for the road/roadlines and not using the class 

var snowflakes = [];  //random snowflakes 
var bubbles = []; //random bubbles
var citylights; //city light animation
var jeep;  //jeep animation
var jeepLights; //jeep with lights animation
var spaceJeep; //spinning jeep
var mountains; //mountain animation
var chair; //chair animation
var umbrella; //umbrella animation
var waves; //wave animation
var space; //space background
var bikini;
var buildings; //building background
var clouds; //cloud animation
var bridge; //bridge animation
var sign;
var tall; 
var bubblesound;
var wavesound; 
var trafficsound;
var tunersound;
var walkinhere;
var carey;
var checkyes;
var complicated;
var fivehundred;
var home;
var houdini;
var neverreallyover;
var ny;
var truelove;
var wait;
var tuneNum;
var clicks = 0;
var song_max = 20;
var song_min = 1; 
var songCount = 0;

function preload(){
	
	jeep = loadAnimation('Jeep001.png','Jeep009.png');
	jeepLights = loadAnimation ('JeepLights001.png' , 'JeepLights009.png');
	spaceJeep = loadAnimation('spaceJeep001.png', 'spaceJeep016.png');
	mount = loadAnimation('Mountains001.png');
	chair = loadAnimation('beachChair001.png');
	umbrella = loadAnimation('umbrella.png');
	citylights = loadAnimation('sparkle001.png', 'sparkle003.png');
	space = loadAnimation('space001.png','space010.png');
	bikini = loadAnimation('bikini001.png');
	clouds = loadAnimation('clouds001.png');
	waves = loadAnimation('wave001.png', 'wave006.png');
	buildings = loadAnimation('buildings001.png');
	sign = loadAnimation('sign001.png');
	bridge = loadAnimation('bridge001.png');
	wavesound = loadSound('wavecrash001.mp3');
	trafficsound = loadSound('traffic001.mp3');
	bubblesound = loadSound('bubblesound.mp3');
	tunersound = loadSound('tuner002.mp3'); 
	walkinhere = loadSound('walkin001.mp3');
	carey = loadSound('carey001.mp3');
	checkyes = loadSound('checkyes001.mp3');
	complicated = loadSound('complicated001.mp3');
	fivehundred = loadSound('fivehundred001.mp3');
	home = loadSound('home001.mp3')
	houdini = loadSound('houdini001.mp3');
	neverreallyover = loadSound('neverreallyover001.mp3');
	ny = loadSound('ny001.mp3');
	truelove = loadSound('truelove001.mp3');
	wait = loadSound('wait001.mp3');
	
	
}

function setup() {
createCanvas(1400,800);
translate(width/2,height/2);
	
		for(var y = 0; y < 500; y++){ //less than 500 snowflakes 
			xPos = random(0, width); //random x position
			yPos = random(0, height); //random y position
			speedY = random(0.5, 3); //speed in y direction
			speedX = random(0.02,0.5); //speed in x direction
			c = color(255, 255, 255, random(30, 200)); //varying opacity of whites
			wh = random(3, 10); //random width/height 
			snowflakes.push(new Snow(xPos, yPos, speedX, speedY, wh, wh, c));
		}
	
		for(var x = 0; x < 50; x++){
			xPos = random((width/3),(width*2)/3);
			yPos = random(height/2, height/4);
			speedY = random(5, 10);
			speedX = random(0.01, 0.03);
			c = color(135, 228, 255, random(20, 50));
			wh = random(15, 40);
			bubbles.push(new Bubbles(xPos, yPos, speedX, speedY, wh, wh, c));
		}
}


function draw() {
	
	frameRate(30);
	
	//wanted to automate the switching so that scenes are dependent on time and not on mouse clicks, ran out of time 
	
	 switch(clicks){
        case 1:
			 			bubblesound.stop();
			 			background(0);
            snow();
            break;
        case 2:
			 			background(0);
            beach();
            break;
        case 3:
            wavesound.stop();
						background(0);
						city();
            break;
				case 4:
			 			trafficsound.stop();
			 			walkinhere.stop();
						background(0);
			 			sea();
			 			break;
		 		case 5:
			 			bubblesound.stop();
						background(0);
						drawSpace();
						break;
	
			}
	
	 	switch(songCount){
			case 1:
				wait.stop();
				truelove.stop();
				tunersound.playMode('untilDone');
				tunersound.play();
				break;
			case 2:
				tunersound.stop();
				truelove.playMode('untilDone');
				truelove.play();
				break;
			case 3:
				truelove.stop();
				carey.stop();
				tunersound.playMode('untilDone');
				tunersound.play();
				break;
			case 4:
				tunersound.stop();
				carey.setVolume(0.6);
				carey.playMode('untilDone');
				carey.play();
				break;
			case 5:
				carey.stop();
				checkyes.stop();
				tunersound.playMode('untilDone');
				tunersound.play();
				break;
			case 6:
				tunersound.stop();
				checkyes.setVolume(0.6);
				checkyes.playMode('untilDone');
				checkyes.play();
				break;
			case 7:
				checkyes.stop();
				complicated.stop();
				tunersound.playMode('untilDone');
				tunersound.play();
				break;	
			case 8:
				tunersound.stop();
				complicated.playMode('untilDone');
				complicated.play();
				break;
			case 9:
				complicated.stop();
				fivehundred.stop();
				tunersound.playMode('untilDone');
				tunersound.play();
				break;	
			case 10:
				tunersound.stop();
				fivehundred.playMode('untilDone');
				fivehundred.play();
				break;
			case 11:
				fivehundred.stop();
				home.stop();
				tunersound.playMode('untilDone');
				tunersound.play();
				break;
			case 12:
				tunersound.stop();
				home.setVolume(0.5);
				home.playMode('untilDone');
				home.play();
				break;
			case 13:
				home.stop();
				houdini.stop();
				tunersound.playMode('untilDone');
				tunersound.play();
				break;
			case 14:
				tunersound.stop();
				houdini.setVolume(0.5);
				houdini.playMode('untilDone');
				houdini.play();
				break;
			case 15:
				houdini.stop();
				neverreallyover.stop();
				tunersound.playMode('untilDone');
				tunersound.play();
				break;
			case 16:
				tunersound.stop();
				neverreallyover.setVolume(0.6);
				neverreallyover.playMode('untilDone');
				neverreallyover.play();
				break;
			case 17:
				neverreallyover.stop();
				ny.stop();
				tunersound.playMode('untilDone');
				tunersound.play();
				break;
			case 18:
				tunersound.stop();
				ny.setVolume(0.6);
				ny.playMode('untilDone');
				ny.play();
				break;
			case 19:
				ny.stop();
				wait.stop();
				tunersound.playMode('untilDone');
				tunersound.play();
				break;
			case 20:
				tunersound.stop();
				wait.setVolume(0.5);
				wait.playMode('untilDone');
				wait.play();
				break;
		
	}

		}


function mouseClicked(){
		
		clicks += 1;
		if(clicks == 6){
			clicks = 1;
		}
		
	}


function keyPressed(){
	
		if (keyCode === RIGHT_ARROW){
			songCount += 1;
			if(songCount > song_max){
				songCount = song_min;
			}
		}
		if(keyCode === LEFT_ARROW){
			songCount -= 1; 
			if(songCount < song_min){
				songCount = song_max;
			}
		}
}

//I want to have an under water scene with coral and bubbles 
//bubble sounds 
function sea(){
	
	animation(bikini, width/2, height/2);
	animation(jeepLights, width/2, height/2);
	animation(sign, width/2, height/2);
	bubblesound.setVolume(0.3);
	bubblesound.playMode('untilDone');
	bubblesound.play();
	
	for(var i = 0; i < bubbles.length; i++){
		bubbles[i].move();
		bubbles[i].show();
		bubbles[i].makeMore();
	}
	
}

//I want to have one half of the road to have some beach chairs and an umbrella
//I want the other half of the beach to have a rolling wave shoreline 
//translucent clouds passing by 
//wave sounds  
function beach(){
	
	drawRoad();
	drawCar();  
	drawClouds();
	drawChairs();
	drawWaves();
	wavesound.setVolume(0.3);
	wavesound.playMode('untilDone'); //make this a little quieter
	wavesound.play();
	
	
}




//want to generate random snow 
//want to add snowy mountain range in background (drawn) that rises as the car "drives away"
//the animation will have its headlights on 
function snow(){ //headlights will turn on in the snow
	
	drawWinterRoad();
	drawMount();
	animation(jeepLights, width/2, height/2);
	
	for(var i = 0; i < snowflakes.length; i++){
		snowflakes[i].move();
		snowflakes[i].show();
		snowflakes[i].makeMore();
	}
	
	
}


//I want to have the jeep in outer space roating and floating around 
function drawSpace(){
	//add the drawCarLights(); function
	push();
	scale(0.4);
	animation(space, 1800, 1000); //space background
	pop();
	drawSpaceJeep();
}


//I want to add my sparkle animation so the buildings look like they're shining 
//I want to add a beeping and honking sound effect behind whatever music is playing or being tuned at the time 

function city(){ //I wanna draw this myself cuz its flippin ugly 
		
	background('#6351E8');
	push();
	scale(1.75);
	animation(buildings, 400, height/6);
	pop();
	drawCityRoad(); 
	drawBridge();
	animation(jeep, width/2, height/2);
	
	push();
	scale(0.7);
	animation(citylights, width/1.7, height/1.3); //this doesn't look very nice so I'm gonna fix that 
	pop();
	
	walkinhere.setVolume(0.5);
	walkinhere.playMode('untilDone');
	walkinhere.play();
	trafficsound.setVolume(0.3);
	trafficsound.playMode('untilDone');
	trafficsound.play();
}

function drawBridge(){
	
	push();
	scale(0.6);
	animation(bridge, 1200, 750);
	pop();
	
}


function drawCityRoad(){
	
		push();
    translate(width/2,height/2); //middle of screen
	 // background('#BFBEBB'); //background color (for now) 
	  fill('#5194E8'); //fill color (for now)
    rectMode(CORNER); //corner mode of rect
		noStroke();
    rect(-width/2,0,width,height/2); //rect the size of the bottom half of the screen
    fill('#807E7D'); //road color
    quad(6,0,-5,0,-width/2,height/2,width/2,height/2); //rect for road 
		fill('#BFBA2E');
    quad(-60,height/2,-15,height/2,0,0,-0.5,0); //left yellow line 
    quad(60,height/2,15,height/2,0,0,0.5,0); //right yellow line 
		pop();	
}


function drawWinterRoad(){
	
		push();
    translate(width/2,height/2); //middle of screen
	  background('#BFBEBB'); //background color (for now) 
	  fill('#E6E4E1'); //fill color (for now)
    rectMode(CORNER); //corner mode of rect
		noStroke();
    rect(-width/2,0,width,height/2); //rect the size of the bottom half of the screen
    fill('#807E7D'); //road color
    quad(6,0,-5,0,-width/2,height/2,width/2,height/2); //rect for road 
		fill('#BFBA2E');
    quad(-60,height/2,-15,height/2,0,0,-0.5,0); //left yellow line 
    quad(60,height/2,15,height/2,0,0,0.5,0); //right yellow line 
		pop();	
}


function drawRoad(){
	
		push();
    translate(width/2,height/2); //middle of screen
    background('#52B1FF'); //background color (for now) 
    fill('#C2B37D'); //fill color (for now)
    rectMode(CORNER); //corner mode of rect
		noStroke();
    rect(-width/2,0,width,height/2); //rect the size of the bottom half of the screen
    fill(0); //road color
    quad(6,0,-5,0,-width/2,height/2,width/2,height/2); //rect for road 
		fill('#BFBA2E');
    quad(-60,height/2,-15,height/2,0,0,-0.5,0); //left yellow line 
    quad(60,height/2,15,height/2,0,0,0.5,0); //right yellow line 
		pop();	

	
	
}

function drawClouds(){  
	
	push();
	scale(0.3);
	animation(clouds, 2500, 1000);
	pop();
	
}

function drawChairs(){

	{push();
	scale(.3);
	animation(chair, 600, 1700); //chair 1
	pop();}
	{push();
	scale(.25);
	animation(chair, 1300, 1800); //chair 2 
	pop();}
	{push();
	scale(.5);
	animation(umbrella, 350, 730); //umbrella 
	pop();}
	
}

function drawWaves(){
	
	animation(waves, width/4, height/2);
	
}


function drawCar(){ //no lights on 
		
	animation(jeep, width/2, height/2); //jeep 

}

function drawSpaceJeep(){
	
	animation(spaceJeep, width/2, height/2);
	
}

function drawMount(){ //make it rise up 
	//background(0);
	push();
	scale(0.45);
	//y = 10;
	// for (var y = 0; y < tall; y+= .1){
	//  scale(0.5); still trying to get it to rise up 
	 animation(mount, 1460, 800);
	//}
	pop();
}

class Snow{
	constructor(x, y, sX, sY, w, h, c){
		this.xPosi = x;
		this.yPosi = y;
		this.xSpeed = sX;
		this.ySpeed = sY;
		this.width = w;
		this.height = h;
		this.col = c;
		// console.log("constructor",x,y)
	}

	move(){
		this.xPosi += this.xSpeed;
		this.yPosi += this.ySpeed;
	}

	show(){
		noStroke();
		fill(this.col);
		ellipse(this.xPosi, this.yPosi, this.width, this.height);
	}

	makeMore(){
		if(this.yPosi > height){
			this.yPosi = 0;
		}
	}
}


class Bubbles{
constructor(x, y, sX, sY, w, h, c){
		this.xPosi = x;
		this.yPosi = y;
		this.xSpeed = sX;
		this.ySpeed = sY;
		this.width = w;
		this.height = h;
		this.col = c;
	}

	move(){
		this.xPosi -= this.xSpeed;
		this.yPosi -= this.ySpeed;
	}

	show(){
		stroke('#87FF9F');
		strokeWeight(3);
		fill(this.col);
		ellipse(this.xPosi, this.yPosi, this.width, this.height);
	}

	makeMore(){
		if(this.yPosi < 0){
			this.yPosi = height/2;
		}
	}
}