![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/09/stop-banner.png)
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;
}