Recently, I had the opportunity to visit The Metropolitan Museum of Art (The MET) and was truly inspired by the diverse and rich history encapsulated within its walls. This visit sparked an idea in me to design an exhibit for The MET’s Costume Institute, focusing on the evolution of haute couture through iconic designs from renowned fashion houses. My midterm, aims to showcase the enduring allure and innovation of haute couture, highlighting how designers have redefined beauty and style over the decades.
By focusing on the individual stories that each garment tells about its era, the exhibit aims to provide a rich, textual narrative that captures the essence and evolution of haute couture across different periods.
Interactive elements, such as clickable images that reveal the history and significance of each piece, are integral to the exhibit. These features are designed to engage users, encouraging them to delve deeper into each garment’s story and understand its place within the broader narrative of fashion history.
let titleSize = 40;
let subtitleSize2 = 20;
let subtitleSize = 10;
let bg, bg2;
let dress1, dress1Zoom1, dress1Zoom2, dress1Zoom3, dress1Zoom4, dress1Zoom5;
let dress2, dress2Zoom1, dress2Zoom2, dress2Zoom3, dress2Zoom4;
let dress3, dress3Zoom1, dress3Zoom2, dress3Zoom3;
let dress4, dress4Zoom1, dress4Zoom2, dress4Zoom3, dress4Zoom4;
let dress5, dress5Zoom1, dress5Zoom2, dress5Zoom3, dress5Zoom4, dress5Zoom5;
let dress6, dress6Zoom1, dress6Zoom2, dress6Zoom3, dress6Zoom4;
let scene = "main"; // Start with the exhibit scene
let bgsound;
function preload() {
bgsound = loadSound('bgsoundfile.mp3')
bg = loadImage('bg.jpeg');
bg2 = loadImage('fullscreen.png'); // The fullscreen image for the exhibit
//dress1
dress1 = loadImage('dress1.png');
dress1Zoom1 = loadImage('dress1Zoom1.png');
dress1Zoom2 = loadImage('dress1Zoom2.png');
dress1Zoom3 = loadImage('dress1Zoom3.png');
dress1Zoom4 = loadImage('dress1Zoom4.png');
dress1Zoom5 = loadImage('dress1Zoom5.png');
//dress2
dress2 = loadImage('dress2.png');
dress2Zoom1 = loadImage('dress2Zoom1.png');
dress2Zoom2 = loadImage('dress2Zoom2.png');
dress2Zoom3 = loadImage('dress2Zoom3.png');
dress2Zoom4 = loadImage('dress2Zoom4.png');
//dress3
dress3 = loadImage('dress3.png');
dress3Zoom1 = loadImage('dress3Zoom1.png');
dress3Zoom2 = loadImage('dress3Zoom2.png');
dress3Zoom3 = loadImage('dress3Zoom3.png');
//dress4
dress4 = loadImage('dress4.png');
dress4Zoom1 = loadImage('dress4Zoom1.png');
dress4Zoom2 = loadImage('dress4Zoom2.png');
dress4Zoom3 = loadImage('dress4Zoom3.png');
dress4Zoom4 = loadImage('dress4Zoom4.png');
//dress5
dress5 = loadImage('dress5.png');
dress5Zoom1 = loadImage('dress5Zoom1.png');
dress5Zoom2 = loadImage('dress5Zoom2.png');
dress5Zoom3 = loadImage('dress5Zoom3.png');
dress5Zoom4 = loadImage('dress5Zoom4.png');
dress5Zoom5 = loadImage('dress5Zoom5.png');
//dress6
dress6 = loadImage('dress6.png');
dress6Zoom1 = loadImage('dress6Zoom1.png');
dress6Zoom2 = loadImage('dress6Zoom2.png');
dress6Zoom3 = loadImage('dress6Zoom3.png');
dress6Zoom4 = loadImage('dress6Zoom4.png');
}
function setup() {
createCanvas(720, 400);
textSize(titleSize);
textAlign(CENTER, CENTER);
bgsound.loop();
}
function draw() {
if (scene === "main") {
drawMainScene();
} else if (scene === "exhibit") {
drawExhibitScene();
} else if (scene.startsWith("zoomedInDress")) {
drawZoomedScene();
} bgsound.play();
}
function drawMainScene() {
background(bg);
noStroke();
fill(0);
textSize(titleSize);
text("THE MET", width / 3 + 120, height / 3 - 80);
textSize(subtitleSize2);
text("THE COSTUME INSTITUTE", width / 2, height / 2 - 110);
fill(0);
textSize(subtitleSize);
text("Touch the start button to begin!", width / 2, height / 2 - 80);
// Start Button
fill(255);
rect(width / 2 - 50, height / 2 + 50, 100, 40, 10);
fill(0);
textSize(16);
text("Start", width / 2, height / 2 + 70);
}
function drawExhibitScene() {
background(bg2); // Use the fullscreen image as the background for the exhibit
// Back Button, only show if we're not in the initial exhibit scene
fill(255); // White color
rect(20, 20, 60, 30, 10);
fill(0); // Black color
textSize(16);
text("Back", 50, 35);
}
function drawZoomedScene() {
let zoomedImage;
switch (scene) {
case "zoomedInDress1_1":
zoomedImage = dress1Zoom1;
break;
case "zoomedInDress1_2":
zoomedImage = dress1Zoom2;
break;
case "zoomedInDress1_3":
zoomedImage = dress1Zoom3;
break;
case "zoomedInDress1_4":
zoomedImage = dress1Zoom4;
break;
case "zoomedInDress1_5":
zoomedImage = dress1Zoom5;
break;
case "zoomedInDress2_1":
zoomedImage = dress2Zoom1;
break;
case "zoomedInDress2_2":
zoomedImage = dress2Zoom2;
break;
case "zoomedInDress2_3":
zoomedImage = dress2Zoom3;
break;
case "zoomedInDress2_4":
zoomedImage = dress2Zoom4;
break;
case "zoomedInDress3_1":
zoomedImage = dress3Zoom1;
break;
case "zoomedInDress3_2":
zoomedImage = dress3Zoom2;
break;
case "zoomedInDress3_3":
zoomedImage = dress3Zoom3;
break;
case "zoomedInDress4_1":
zoomedImage = dress4Zoom1;
break;
case "zoomedInDress4_2":
zoomedImage = dress4Zoom2;
break;
case "zoomedInDress4_3":
zoomedImage = dress4Zoom3;
break;
case "zoomedInDress4_4":
zoomedImage = dress4Zoom4;
break;
case "zoomedInDress5_1":
zoomedImage = dress5Zoom1;
break;
case "zoomedInDress5_2":
zoomedImage = dress5Zoom2;
break;
case "zoomedInDress5_3":
zoomedImage = dress5Zoom3;
break;
case "zoomedInDress5_4":
zoomedImage = dress5Zoom4;
break;
case "zoomedInDress5_5":
zoomedImage = dress5Zoom5;
break;
case "zoomedInDress6_1":
zoomedImage = dress6Zoom1;
break;
case "zoomedInDress6_2":
zoomedImage = dress6Zoom2;
break;
case "zoomedInDress6_3":
zoomedImage = dress6Zoom3;
break;
case "zoomedInDress6_4":
zoomedImage = dress6Zoom4;
break;
}
background(zoomedImage); // Display the zoomed-in image on full canvas
// Back Button
fill(255); // White color
rect(20, 20, 60, 30, 10);
fill(0); // Black color
textSize(16);
text("Back", 50, 35);
}
function mouseClicked() {
if (!bgsound.isPlaying()) { // Check if the sound is not already playing
bgsound.loop(); // Start playing the sound
}
if (scene === "main") {
// If the Start button is clicked, change to the exhibit scene
if (mouseX > width / 2 - 50 && mouseX < width / 2 + 50 && mouseY > height / 2 + 50 && mouseY < height / 2 + 90) {
scene = "exhibit";
}
} else if (scene === "exhibit") {
// Check if the click is within the back button's coordinates
if (mouseX > 20 && mouseX < 80 && mouseY > 20 && mouseY < 50) {
scene = "main";
}
// Check if the click is within Dress1's designated area
else if (mouseX > 148 && mouseX < 228 && mouseY > 43 && mouseY < 149) {
scene = "zoomedInDress1_1";
}
// Check if the click is within Dress2's designated area
else if (mouseX > 325 && mouseX < 405 && mouseY > 44 && mouseY < 149) {
scene = "zoomedInDress2_1";
}
// Check if the click is within Dress3's designated area
else if (mouseX > 450 && mouseX < 580 && mouseY > 44 && mouseY < 149) {
scene = "zoomedInDress3_1";
}
// Check if the click is within Dress4's designated area
else if (mouseX > 148 && mouseX < 229 && mouseY > 203 && mouseY < 308) {
scene = "zoomedInDress4_1";
}
// Check if the click is within Dress5's designated area
else if (mouseX > 323 && mouseX < 406 && mouseY > 201 && mouseY < 309) {
scene = "zoomedInDress5_1";
}
// Check if the click is within Dress6's designated area
else if (mouseX > 450 && mouseX < 580 && mouseY > 201 && mouseY < 307) {
scene = "zoomedInDress6_1";
}
} else if (scene.startsWith("zoomedInDress")) {
// If the Back button is clicked in a zoomed-in scene, go back to the exhibit
if (mouseX > 20 && mouseX < 80 && mouseY > 20 && mouseY < 50) {
scene = "exhibit";
} else {
// Cycle through the zoomed-in images
let parts = scene.split('_');
let dressNum = parts[0].replace("zoomedInDress", "");
let zoomLevel = parseInt(parts[1]);
zoomLevel = zoomLevel >= 4 ? 1 : zoomLevel + 1; // Loop back after the last image for dress1 and dress2
if(dressNum === "3" && zoomLevel > 3) zoomLevel = 1; // Since dress3 has only 3 zoom levels
scene = `zoomedInDress${dressNum}_${zoomLevel}`;
}
}
}