Final Project: Monument to the Lost Year

The program that I created for the final project is the Memorial to the Lost Year, a group of digital monuments about the year 2020. I was inspired to create this memorial because I was reflecting on previous pandemics in world history and how we remember those today, and I was curious as to how future generations would reflect upon the Covid-19 Pandemic and the behavioral and cultural changes that came with it. Aesthetically, the collages I created as for each scene were inspired by the work of Cruz Garcia and Nathalie Frankowski and the collages I made while taking a class taught by them this summer.

A local host is needed to run the program. The program starts at a floor plan of the different areas. If the user clicks on the red marker associated with an area they are transported to that scene. At the Entrance Gallery, the user can flip through a selection of images related to life in the year 2020 by clicking the canvas. In the Zoom Monument Scene the user can place candles by clicking on the pedestal. At the Covid-19 Statue, the user is invited to focus on the spinning rings and to meditate or reflect on the pandemic. At the 2020 Election Memorial, users can click the Vote button to submit a mail-in ballot. To move between scenes, the user can press the left arrow key to return to the floor plan and then click on a different red marker.

If I had more time, I would have liked to add more exhibits to the memorial that covers more aspects of life in the year 2020.

monumentDownload

/*Image Sources:
	Zoom Monument Collage:
		Background: https://1.bp.blogspot.com/-clsypiRLZo4/XOPVE1F8TgI/AAAAAAAGZm4/3NzoNNpDCuo5w66qzYwf75csYIhacaj8QCLcBGAs/s1600/Worthington-Whittredge-Foothills-Colorado.jpg
		Zoom Logo: https://humtech.ucla.edu/wp-content/uploads/2018/08/zoom-560x560.png
		Pedestal: https://kingdomhigh.com/image/cache/data/orlandi/provence-riser-stand-pedestal-statue-base-15in-stone-statue-fs8216-orn-fs8216-200142557-700x700.jpg
	Covid-19 Statue Collage
		Background: https://www.thewadsworth.org/wp-content/gallery/hudson-river-school/copy_0_1868.3.jpg
		Sky: https://www.artfixdaily.com/images/fl/july2_cropsey1500x813.jpg
		virus: https://source.wustl.edu/wp-content/uploads/2018/12/flu.jpg
		column: https://victoriafrederick.files.wordpress.com/2014/09/loadbearing-polystone-columns-architectural-columns-roman-corinthian-fluted-columns.jpg
		marble texture: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.decomurale.ca%2Fwp-content%2Fuploads%2F2015%2F10%2FS_shutterstock_132172547.jpg&f=1&nofb=1
		Sound: https://freesound.org/people/HerbertBoland/sounds/78448/
	Election Memorial Collage:
		Background: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.thewadsworth.org%2Fwp-content%2Fgallery%2Fhudson-river-school%2F1948.190.jpg&f=1&nofb=1
		Biden Head: https://www.kindpng.com/picc/m/560-5606161_joe-biden-head-hd-png-download.png
		Trump Head: https://basicgestalt.files.wordpress.com/2017/07/trumphead2.png?w=356&h=509
		Bronze Texture 1: https://media.istockphoto.com/photos/bronze-metal-texture-background-picture-id453084961?k=6&m=453084961&s=612x612&w=0&h=AdlZR8A8q8ZXtdDb7aKmYY7rO0iS5Th3OLFKPLUPGFU=
		Bronze Texture 2: https://cdn.wallpapersafari.com/34/19/qP0HSo.jpg
	Image Gallery:
		Collage:
			Background: https://d2jf00asb0fe6y.cloudfront.net/hudson-river-school_05_0abb3e55e0fc49ea59240af9e6e1b9cd.jpg
			Brick Wall: https://jooinn.com/images/brick-wall-154.jpg
		Gallery Images:
			Pence Fly: https://www.india.com/wp-content/uploads/2020/10/mike-pence-debate-1602128479.jpg
			BLM Protest: https://milwaukeerecord.com/wp-content/uploads/2020/06/BLM_PRIDE_MKE_612020-23.jpg
			Biden-Kamala: https://i.dailymail.co.uk/1s/2020/08/21/05/32204630-8649691-Hand_in_hand_Kamala_Harris_and_Joe_Biden_joined_hands_in_the_air-a-16_1597985527220.jpg
			Masks: https://images.assettype.com/swarajya/2020-03/0d8cd05f-25be-4429-b1af-93495e880fef/EThrpG_UwAEEYuA.jfif?w=1280&q=100&fmt=pjpeg&auto=format
			Joe Exotic: https://www.licc.org.uk/app/uploads/2020/05/Tiger-King-Web-MJ-Edit-700x540.png
			Dr. Fauci: https://cspinet.org/sites/default/files/49809803361_8cb800f519_o.jpg
			White House Picket Signs: https://www.vidaenelvalle.com/news/politics-government/ijdvpj/picture247039187/alternates/LANDSCAPE_1140/319913bf2ae577f9ea2d18b8560f6f8b8b025745
			Trump vs Biden: https://stevechabot.com/blog/admin/wp-content/uploads/2020/05/052720-2033-05-500.jpg
			Zoom Meeting: https://d.newsweek.com/en/full/1580408/zoom-meeting.jpg
			Social Distancing: https://qual360.com/wp-content/uploads/2020/04/social-distancing.jpg
*/

var zoomMon;
var floor;
var covidStatue;
var candleColors = ["blue","white","black","green","red"];
var candles = [];
var sceneNumber = 0;
var wind;
var sceneEnter = false;
var election;
var ballots = [];
var wall;
var galleryLinks = ["https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/bidenkamala.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/blmprotest.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/fauci.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/joeexotic.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/masks.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/pencefly.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/socdist.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/trumpbiden.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/whitehousepicket.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/zoommeeting.jpg"];
var galleryImages = [];
var chooseImg;
var angle = 0;


function preload() {
    // call loadImage() and loadSound() for all media files here
    //Zoom Monument Scene Background
    zoomMon = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/zoommonument.jpg");
    //Starting Floor Plan
    floor = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/floorplan.jpg");
    //Covid-19 Statue Background
    covidStatue = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/covidstatue.jpg");
    //Wind Sound
    wind = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/wind.mp3");
    //Election Memorial Background
    election = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/election.jpg");
    //Image Gallery Background
    wall = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/imagewall.png");
    //Gallery Images
    for (var i = 0; i < galleryLinks.length; i++){
    	var g = galleryLinks[i];
    	galleryImages.push(loadImage(g));
    }


}



function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 400);
    background(255);
    useSound();
    chooseImg = int(random(0,galleryImages.length));

}

function soundSetup() {
	wind.setVolume(.5);

}


function draw() {
	if (sceneNumber == 0){
		image(floor,0,0,400,400);
		//Zoom Monument Marker
		noStroke();
		fill("red");
		circle(150,170,10);
		//Covid statue marker
		circle(150,290,10);
		//Election Memorial Marker
		circle(250,290,10);
		//Entrance Gallery Marker
		circle(250,170,10);
		fill("black");
		text("Click a Marker to go to that Location",10,20);

	} else if (sceneNumber == 1) {
		zoomMonument();

	} else if (sceneNumber == 2) {
		if (sceneEnter == true){
			wind.loop();
			sceneEnter = false;
		}
		nineteenStatue();
	} else if (sceneNumber == 3){
		electionScene();
		noStroke();
		fill("yellow");
		text("Click 'VOTE!' to Cast Ballot",10,20);
		text("Press the Left Arrow to Return",10,30);
		text("2020 ELECTION MEMORIAL",width/2 + 40,height-20);
	} else if (sceneNumber == 4){
		gallery();
	}

	if (sceneNumber != 2){
		wind.stop();
	}
	if (sceneNumber != 3){
		//empty ballots array when you leave election memorial
		ballots = [];
	}
	if (sceneNumber != 1){
		//empty candles array when you leave zoom monument
		candles = [];
	}

}

function mousePressed(){
	//go to Zoom Monument
	if (mouseX >= 140 & mouseX <= 160 && mouseY >= 160 && mouseY <= 180 && sceneNumber == 0 ){
		sceneNumber = 1;
	}
	//go to Covid Statue
	if (mouseX >= 140 & mouseX <= 160 && mouseY >= 280 && mouseY <= 300 && sceneNumber == 0){
		sceneNumber = 2;
		sceneEnter = true;
	}
	//Candle Object Creation
	if (mouseX >= 132 & mouseX <= 245 && sceneNumber == 1){
		var ca = makeCandles(mouseX,302);
		candles.push(ca);
	}
	//go to Election Memorial
	if (mouseX >= 240 & mouseX <= 260 && mouseY >= 280 && mouseY <= 300 && sceneNumber == 0){
		sceneNumber = 3;
	}
	//Ballot object creation
	if(mouseX >= 5 & mouseX <= 45 && mouseY >= 305 && mouseY <= 345 && sceneNumber == 3){
		var mail = makeMailBallots();
		ballots.push(mail);
	}
	//go to Entrance Gallery
	if (mouseX >= 240 & mouseX <= 260 && mouseY >= 160 && mouseY <= 180 && sceneNumber == 0){
		sceneNumber = 4;
	}
	//Click through Image Gallery
	if (sceneNumber == 4){
		choosingImage();
	}


}

function keyPressed (){
	if (keyCode == LEFT_ARROW){
		sceneNumber = 0;
	}
}

function zoomMonument(){
		image(zoomMon,0,0);
		fill("yellow");
		text("Click Pedestal to Place Candle",10,20);
		text("Press the Left Arrow to Return",10,30);
		text("ZOOM MONUMENT",width/2 + 70,height-20);
		for (var i = 0; i < candles.length; i++){ 
			var c = candles[i];
			c.candleDraw();
		}
}

function nineteenStatue(){
	image(covidStatue,0,0);
	fill("white");
	text("Stare Into the Rings and Reflect",10,20);
	text("Press the Left Arrow to Return",10,30);
	text("COVID-19 STATUE",width/2 + 70,height-20);
	hypnoticRing();
}

function makeCandles(candleX,candleY){
	var candle = {x: candleX, y: candleY,
					candleDraw: drawCandles,
					color: candleColors[int(random(0,candleColors.length))]};
	return candle;
}

function drawCandles(){
	//candle base
	noStroke();
	fill(this.color);
	rect(this.x,this.y,5,-10);
	//flame
	fill("yellow");
	beginShape();
		vertex(this.x + 2.5,this.y - 10);
		curveVertex(this.x,this.y - 15);
		vertex(this.x + 2.5, this.y - 21);
		curveVertex(this.x + 5,this.y - 15);
	endShape();
}

function electionScene() {
	image(election,0,0,);
	voterBox();
	for (i = 0; i < ballots.length; i++){
		var b = ballots[i];
		b.drawMail();
		b.moveMail();
	}
}

function voterBox() {
	noStroke();
	fill(0,255,255);
	rect(0,400,50,-100);
	fill(0,90);
	square(0,300,50);
	fill("red");
	circle(25,325,40);
	fill(0);
	text("VOTE!",9,329);
}

function makeMailBallots() {
	var mail = {x: random(60,width - 20), y: 0,
				dy: random(3,5), color: color(random(0,255),random(0,255),random(0,255)),
				drawMail: mailDraw, moveMail: mailMove,};
	return mail;
}

function mailDraw() {
	strokeWeight(1);
	stroke(0);
	fill(this.color);
	rect(this.x,this.y, 20,10);
	noFill();
	triangle(this.x,this.y,this.x + 20, this.y, this.x + 10, this.y + 5);
}

function mailMove() {
	this.y += this.dy;
}

function gallery() {
	image(wall,0,0);
	fill("white");
	text("Click To Change Image Displayed",10,20);
	text("Press the Left Arrow to Return",10,30);
	text("ENTRANCE GALLERY",width/2 + 70,height-20);
	image(galleryImages[chooseImg],100,height*.5,150,150);
}

function choosingImage() {
	var randImg = 0;
	var newImage = 0;
	//make sure new image that shows isn't the same as the previous
	while(newImage < 1){
		randImg = int(random(0,galleryImages.length));
		if (randImg != chooseImg){
			chooseImg = randImg;
			newImage++;
		}
	}
	return chooseImg;
}

function hypnoticRing() {
	noFill();
	strokeWeight(2);
	var ringColors = [];
	for(var i = 0; i < 4; i++){
		var c = color(random(0,255),random(0,255),random(0,255));
		ringColors.push(c);
	}
	push();
		translate(width/2,height/2);
		stroke(ringColors[0]);
		circle(-20*cos(degrees(angle)),0,100);
		stroke(ringColors[1]);
		circle(20*cos(degrees(angle)),0,100);
		stroke(ringColors[2]);
		circle(-20*cos(degrees(angle)),50*sin(degrees(angle)),100);
		stroke(ringColors[3]);
		circle(20*cos(degrees(angle)),50*sin(degrees(angle)),100);
	pop();

	angle += 10;
}

Leave a Reply