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);
}