Final Project

Welcome to Covid Retreat!

For this project I was inspired to create a virtual escape due to the restrictions Covid-19 has created. I experimented with sound, location design, a game-like set up.

The program includes 4 locations and you can select your location of choice. Clicking on the icon allows you to enter that location, while pressing the back arrow on your keyboard returns you to the game page. Each location has a unique sound that is supposed to be ambient and relaxing so you can meditate to it. The city backdrop has stars that spin with the mouse X location and the village backdrop has snow falling. These act as additional visual aids.

The poppy field has sounds of birds and how a relaxing field would sound. The beach has the calming noise of waves and seagulls in the distance. The city has street noise as well as ambient jazz street music. The village has noise of wind chimes fluttering in the wind. The pictures of the locations act as aids to visualize the location you’re in, and then you can close your eyes and listen to the sounds to meditate.

graanak-15
//This is supposed to be a meditation simulation where you can escape to a location because 
// of the restrictions covid has placed on us. Welcome to Covid Retreat!

var homePage = true;
var gamePage = false;
var locationPoppy = false;
var locationBeach = false;
var locationCity = false;
var locationVillage = false;

//image variables
var gpage;
var poppyImg;
var cityImg;
var beachImg;
var villageImg;

//sounds variables
var field;
var beach;
var seagull;
var city;
var jazz;
var chimes;

//snow variables 
var xpos = [];
var ypos = [];
var dir = [];


function preload() {
	gpage = loadImage("https://i.imgur.com/kWIbADG.png");
	poppyImg = loadImage("https://i.imgur.com/gX6nVv0.png");
	villageImg = loadImage("https://i.imgur.com/ncTFXtG.png");
	cityImg = loadImage("https://i.imgur.com/JzdvYPw.png");
	beachImg = loadImage("https://i.imgur.com/l9hqxRW.png");

	field = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/135472__kvgarlic__summeropenfielddusk.wav");
	beach = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/320306__sophronsinesounddesign__beach-9.wav");
	seagull = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/353416__squashy555__seagull-on-beach.mp3");
	city = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/182872__klankbeeld__nightcity-hum-01-130212.mp3");
	jazz = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/54066__reinsamba__jazz-street-musicians.wav");
	chimes = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/324325__opmartin__wind-chimes.mp3");
}

function soundSetup() { 
	field.rate(0.75);
	field.setVolume(0.5);
	beach.rate(0.5);
	beach.setVolume(0.15);
	seagull.setVolume(0.1);
	city.setVolume(0.5);
	jazz.setVolume(1);
	chimes.setVolume(1.5);
}


function setup() {
    createCanvas(600, 500);
    useSound();
    //snow setup
    for(var i = 0; i < 100; i++){
    	xpos[i] = random(0, width);
    	ypos[i] = random(0, height);
    	dir[i] = random(1, 3);
    }
}

function draw() {

	//drawing the homepage using p5js commands

	if(homePage==true){
		background(230);
		noStroke();

		cube();

		fill(255);
		textSize(15);
		text('Welcome to Covid Retreat. Let us begin your relaxation journey.', 100, 350);

		fill(168, 255, 28, 200);
		rect(209, 420, 188, 58);
		fill(255);
		rect(209, 420, 181, 50);

		fill(0);
		text('Click to start.', 250, 450);

		fill(168, 255, 28);
		circle(mouseX, mouseY, 5);
		fill(168, 255, 28, 200);
		circle(mouseX, mouseY, 15);
		fill(168, 255, 28, 100);
		circle(mouseX, mouseY, 20);

//setting the backdrops for each of the locations
//setting the mouse pointer for the cursor the gamepage

	} else if(gamePage==true){
		image(gpage, 0, 0, 600, 500);
		fill(168, 255, 28);
		circle(mouseX, mouseY, 5);
		fill(168, 255, 28, 200);
		circle(mouseX, mouseY, 15);
		fill(168, 255, 28, 100);
		circle(mouseX, mouseY, 20);
		fill(0);
		textSize(10);
		text('If you would like to return to this page, press the back arrow on your keyboard.', 75, 100);

	} else if(locationPoppy==true){
		image(poppyImg, 0, 0, 600, 500);
		
	}else if(locationCity==true){
		//creating the stars that rotate with mouseX position for the city backdrop
		image(cityImg, 0, 0, 600, 500);
		stars(17, 13);
		stars(32, 36);
		stars(214, 10);
		stars(293, 30);
		stars(306, 16);
		stars(364, 59);
		stars(438, 13);
		stars(569, 21);

	}else if(locationBeach==true){
		image(beachImg, 0, 0, 600, 500);

	}else if(locationVillage==true){
		image(villageImg, 0, 0, 600, 500);
		fill(255);
		noStroke();
		//implementing the snow command
		snowing();
	}

}

//creating the logo on the homepage
function cube(){
	fill(255);
	beginShape();
	vertex(300, 70);
	vertex(390, 145);
	vertex(390, 248);
	vertex(300, 320);
	vertex(209, 248);
	vertex(209, 145);
	endShape();

	fill(220);
	beginShape();
	vertex(300, 70);
	vertex(390, 145);
	vertex(300, 210);
	vertex(209, 145);
	endShape();
}

//causing the screen changes and sound changes for each screen
function mousePressed(){
	var my = mouseY;
	var mx = mouseX;

	if(homePage){
		if(mx > 209 & mx < 390 & my > 420 & my < 470){
			gamePage = true;
			homePage = false;
		}
	}else if(gamePage){
		if(mx > 54 & mx < 139 & my > 132 & my < 217){
			locationPoppy = true;
			gamePage = false;
			field.play();
			field.setLoop(true);
		} else if(mx > 54 & mx < 139 & my > 336 & my < 421){
			locationCity = true;
			gamePage = false;
			city.play();
			city.setLoop(true);
			jazz.play();
			jazz.setLoop(true);
		} else if(mx > 338 & mx < 423 & my > 132 & my < 217){
			locationBeach = true;
			gamePage = false;
			beach.play();
			beach.setLoop(true);
			seagull.play();
			seagull.setLoop(true);
		} else if(mx > 338 & mx < 423 & my > 336 & my < 421){
			locationVillage = true;
			gamePage = false;
			chimes.play();
			chimes.setLoop(true);
		}
	}


}	

//function to return to the gamepage 

function keyPressed(){
	if (keyCode === LEFT_ARROW){
		gamePage = true;
		locationPoppy = false;
		locationBeach = false;
		locationCity = false;
		locationVillage = false;
		field.stop();
		beach.stop();
		seagull.stop();
		city.stop();
		jazz.stop();
		chimes.stop();
	}
}

function snowing(){
	for (var i=0; i < xpos.length; i++){
		circle(xpos[i], ypos[i], 2);
		ypos[i] += dir[i];

		if(ypos[i] >= height){
			ypos[i] = 0;
		}
	}
}

function stars(xp, yp){
	stroke(255, 239, 143);
	push();
	translate(xp, yp);
	rotate(radians(mouseX));
	line(-3, 0, 3, 0);
	line(0, -3, 0, 3);
	pop();
}

Leave a Reply