Final Project

This is a fun little animated/interactive sequence on the death of the theater industry because of COVID. It is mostly cut off because of wordpress!!

sketchDownload
var clouds = [];
var grassLeftOn = true
var grassRightOn = true
var tiktok; //image of the tiktok logo that emerges from the death of the
			//theater industry
var rat; //image of the ratatouille musical that is saving the theater
		 //industry right now
var angle = 0 //to rotate the images of tiktok and ratatouille

function preload() {
	tiktok = loadImage("https://i.imgur.com/FymNkxO.png")
	rat = loadImage("https://i.imgur.com/70iMUtD.jpeg")
}

function setup() {
    createCanvas(1500, 700);
    background(220);
    frameRate(10);
    for (var i = 0; i < 5; i++) {
    	clouds[i] = new Object();
		clouds[i].x = random(1500);
		clouds[i].y = random(300);
		clouds[i].size = random(100);
		clouds[i].dx = random(5);
	}
}

function draw() {
	background(82, 0, 124);
	strokeWeight(1);
	fill(233, 228, 236, 190);
	circle(750, 110, 200); //this is the moon
	textSize(15);
	textAlign(CENTER, CENTER);
	fill(255, 247, 0);
	text('Click Any Grave', 750, 80);
	text('But Beware', 750, 100);
	text('Click The Center Grave Twice', 750, 120);
	text('If You Dare', 750, 140);
	fill(6, 117, 14);
	rect(0, 400, 1500, 300); //this is the horizon
	fill(48, 186, 57);
	beginShape(); //this is the path leading to the "death of theater" grave
	vertex(620, 700);
	vertex(620, 700);
	vertex(690, 450);
	vertex(810, 450);
	vertex(880, 700);
	vertex(620, 700);
	vertex(620, 700);
	endShape();
	strokeWeight(3);
	gates(); //for the gates in the background
	//clouds moving across the screen
	for (var i = 0; i < 5; i++) {
		draw_clouds(clouds[i]);
		clouds[i].x += clouds[i].dx;
		if (clouds[i].x > 1750) {
			clouds[i].x = -250
		}
	}
	//populate the landscape with graves
	strokeWeight(2);
	stroke(0);
	graves(690, 450, 240, 120); //center grave
	graves(480, 680, 260, 180); //left front
	grassLeft(472, 681, 30, 40);
	grassRight(585, 681, 40, 30);
	graves(900, 680, 190, 210); //right front
	grassLeft(892, 681, 20, 70);
	grassRight(990, 681, 20, 40);
	graves(160, 550, 80, 120); //left mid
	grassLeft(152, 551, 10, 90);
	grassRight(195, 551, 10, 90);
	graves(390, 470, 70, 20); //left back
	grassLeft(386, 471, 5, 10);
	grassRight(420, 471, 10, 5);
	graves(1080, 500, 120, 80); //right mid
	grassLeft(1072, 501, 20, 50);
	grassRight(1130, 501, 20, 35);
	graves(1420, 410, 60, 80); //right back
	grassLeft(1412, 411, 10, 30);
	grassRight(1448, 411, 10, 30);
	if (frameCount % 10 == 0) { //grass moves back and forth like the wind is blowing through it
		if (grassLeftOn == true) {
			grassLeftOn = false
		} else {
			grassLeftOn = true
		}
		if (grassRightOn == true) {
			grassRightOn = false
		} else {
			grassRightOn = true
		}
	}
	if (mouseIsPressed) {
		if (mouseX > 690 & mouseX < 810 && mouseY > 330 && mouseY < 450) {
			clickCenterGrave();
		}
		if (mouseX > 480 & mouseX < 610 && mouseY > 500 && mouseY < 680) {
			clickLeftFrontGrave();
		}
		if (mouseX > 900 & mouseX < 980 && mouseY > 470 && mouseY < 680) {
			clickRightFrontGrave();
		}
		if (mouseX > 160 & mouseX < 200 && mouseY > 430 && mouseY < 550) {
			clickLeftMidGrave();
		}
		if (mouseX > 390 & mouseX < 425 && mouseY > 450 && mouseY < 470) {
			clickLeftBackGrave();
		}
		if (mouseX > 1080 & mouseX < 1140 && mouseY > 420 && mouseY < 500) {
			clickRightMidGrave();
		}
		if (mouseX > 1420 & mouseX < 1450 && mouseY > 330 && mouseY < 410) {
			clickRightBackGrave();
		}
	}
}

function mouseReleased() {
if (mouseX > 690 & mouseX < 810 && mouseY > 330 && mouseY < 450) {
		finalSequence(); //launches the final sequence after mouseIsPressed is released for the center grave
	}
}

function draw_clouds(cl) {
	noStroke();
	fill(231, 250, 253);
	circle(cl.x, cl.y, cl.size);
	circle(cl.x - cl.size/4, cl.y, cl.size - (cl.size/5));
	circle(cl.x + cl.size/4, cl.y, cl.size - (cl.size/5));
	circle(cl.x - cl.size/2, cl.y, cl.size - (cl.size/4));
	circle(cl.x + cl.size/2, cl.y, cl.size - (cl.size/4));
}

function gates() {
	line(0, 250, 700, 250);
	line(800, 250, 1500, 250);
	for (var x = 0; x < 710; x += 10) {
		line(x, 250, x, 400);
	}
	for (var x = 800; x < 1510; x += 10) {
		line(x, 250, x, 400);
	}
}

function graves(x, y, hsize, vsize) {
	fill(165);
	beginShape();
	vertex(x, y);
	vertex(x, y);
	vertex(x, y - vsize +  vsize/6);
	curveVertex(x + hsize/8, y - vsize);
	curveVertex(x + 3*hsize/8, y - vsize);
	vertex(x + hsize/2, y - vsize + vsize/6);
	vertex(x + hsize/2, y);
	vertex(x + hsize/2, y);
	endShape();
}

function grassLeft(x, y, hsize, vsize) {
	fill(12, 182, 0);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x + hsize/4, y - vsize/2);
	if (grassLeftOn == true) {
		curveVertex(x, y - vsize);
	} else {
		curveVertex(x + hsize, y - vsize);
	}
	curveVertex(x + 3*hsize/4, y - vsize/2);
	curveVertex(x + hsize, y);
	curveVertex(x + hsize, y);
	endShape();
}

function grassRight(x, y, hsize, vsize) {
	fill(12, 182, 0);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x + hsize/4, y - vsize/2);
	if (grassRightOn == true) {
		curveVertex(x + hsize, y - vsize);
	} else {
		curveVertex(x, y - vsize);
	}
	curveVertex(x + 3*hsize/4, y - vsize/2);
	curveVertex(x + hsize, y);
	curveVertex(x + hsize, y);
	endShape();
}

function clickCenterGrave() { //text that appears on the screen if you click and hold the center grave
	fill(165);
	rect(0, 0, 1500, 700);
	textSize(100);
	textAlign(CENTER, CENTER);
	fill(0);
	text('Here Lies The Theater Industry', 750, 300);
	textSize(70);
	text('May She Be Reborn Into Something Better', 750, 400);
}

function clickLeftFrontGrave() {
	fill(165);
	rect(0, 0, 1500, 700);
	textSize(90);
	textAlign(CENTER, CENTER);
	fill(0);
	text('RIP Comm. Herschel Brawdweigh', 750, 300); //commercial broadway
	textSize(130);
	text('Father to Tony', 750, 440); //the tony's
}

function clickRightFrontGrave() {
	fill(165);
	rect(0, 0, 1500, 700);
	textSize(90);
	textAlign(CENTER, CENTER);
	fill(0);
	text('Miss Nadia Marika', 750, 300); //miss not america
	textSize(100);
	text('Outside Of US, There Is Nothing', 750, 440); //outside of us/the U.S.
}

function clickLeftMidGrave() {
	fill(165);
	rect(0, 0, 1500, 700);
	textSize(70);
	textAlign(CENTER, CENTER);
	fill(0);
	text('Together Forever: Dez Ein and Prof. Duckshun', 750, 300); //design and production
	textSize(130);
	text('They Were the Best of Us', 750, 440);
}

function clickLeftBackGrave() {
	fill(165);
	rect(0, 0, 1500, 700);
	textSize(90);
	textAlign(CENTER, CENTER);
	fill(0);
	text('Newt Hamster', 750, 300); //new amsterdam theater
	textSize(130);
	text('A Dam Beloved Pet', 750, 440);
}

function clickRightMidGrave() {
	fill(165);
	rect(0, 0, 1500, 700);
	textSize(90);
	textAlign(CENTER, CENTER);
	fill(0);
	text('To Brooks Atkinson', 750, 300); //brooks atkinson was a famous theater critic
	textSize(130);
	text('Critics Die Too', 750, 440);
}

function clickRightBackGrave() {
	fill(165);
	rect(0, 0, 1500, 700);
	textSize(90);
	textAlign(CENTER, CENTER);
	fill(0);
	text('Call Me By Your Name', 750, 300); //theater saying "call me film" because all we have is filmed productions heehee I'm hilarious
	textSize(130);
	text('Film Is All We Have Now', 750, 440);
}

function finalSequence() { //when the mouse is first released, all animated movement stops
	//when the mouse is clicked again and released, the center grave cracks
	//the tiktok logo, a picture of ratatouille appears, and a title appears
	//this is because the ratatouille musical is the only exciting thing happening in theater right now
	//if the user wants to view the other graves after this one, they have to restart the program
	//but if they keep clicking, the tiktok/ratatouille images will rotate!
	noLoop();
	strokeWeight(3);
	line(750, 330, 730, 350);
	line(730, 350, 770, 390);
	line(770, 390, 730, 430);
	line(730, 430, 770, 470);
	line(770, 470, 730, 520);
	line(730, 520, 770, 580);
	line(770, 580, 730, 640);
	line(730, 640, 770, 700);
	push();
	translate(325, 350);
	rotate(radians(angle));
	image(tiktok, -175, -200, 350, 400);
	pop();
	push();
	translate(1175, 350);
	rotate(radians(angle));
	image(rat, -175, -200, 350, 400);
	pop();
	angle += 5
	fill(255, 247, 0);
	textSize(40);
	textAlign(CENTER, CENTER);
	text('"Playbill Announces a Concert Presentation of Ratatouille: The Tiktok Musical"', 750, 30);
}

Leave a Reply