Week #5- midterm progress

My Concept:

For my midterm project, im attempting to bring Bikini Bottom to life through an engaging and nostalgic digital experience. The project features the three iconic homes from SpongeBob SquarePants, SpongeBob’s pineapple house, Squidward’s stone home, and Patrick’s simple rock. The project is a tribute to childhood memories, capturing the essence of the beloved cartoon that many grew up watching. I plan to make it more interactive by making users solve different problems using hints, enabling them to interact with different objects.

Design:

For my design I hope to closely mirror the original aesthetic of SpongeBob SquarePants, using vibrant colors and playful elements to capture the cartoon’s distinct underwater atmosphere. The houses are placed in a scene that resembles Bikini Bottom’s sandy ocean floor, with blue gradients representing the ocean background as shown below: 

The interactive element plays a crucial role in this project. As the user moves their mouse over each house, the door lights up to indicate interactivity. When a user clicks on the door, an passcode input box pops up, where the user needs to type in the correct code to unlock it (by using hints). When a user interacts with the door, they enter the house where, depending on the house chosen, will have a different theme and interactive objects that match the vibes/themes of the character. This will also be done by changing the genre of music inside each house.

Challenges:

One of the main challenges was making the opening door action simple and easy to use. Instead of just clicking the door, I had to add an input field that only appears when needed. Managing this input box so it doesn’t always stay on the screen was tricky. Another challenge was handling incorrect passcodes. I made the program display “Incorrect” on the screen. This required making sure the message only appears when needed and resets when the user tries again.

Finally, I had to ensure that when the correct passcode is entered, the screen updates immediately. This meant making sure the input box and button disappeared at the right time while smoothly transitioning to the next screen.

let doorX, doorY, doorWidth, doorHeight;
let isUnlocked = false;
let correctPasscode = "1234"; //the passcode
let userInput = "";
let message = "";

function setup() {
  createCanvas(300, 200);
  
//door position
  doorX = width / 2 - 40;
  doorY = height / 2;
  doorWidth = 80;
  doorHeight = 120;

//input box
  inputBox = createInput('');
  inputBox.position(width / 2 - 50, height / 2 + 50);
  inputBox.hide(); //hidden at the start

//create submit button
  submitButton = createButton('Enter');
  submitButton.position(width / 2 + 60, height / 2 + 50);
  submitButton.mousePressed(checkPasscode);
  submitButton.hide(); //initially hidden
}

At the moment the dimensions for clicking the door is not perfect at all, but it’s just to give an idea. (click at the bottom of the door)

passcode is “1234”