Concept + Interaction:
I’m making a small interactive Barbie Dream House experience with mini-games in each room. You start outside the house and it tells you to “click the door”. When you do a doorbell sound plays and you go inside. The interior is a divided view with hotspots for rooms: closet, kitchen, bedroom, and living room.
Each room has a tiny activity:
Closet: wardrobe selector (browse outfits with ← / → and hit ✓ to confirm).
Kitchen: cupcake maker (choose base, pick frosting color, “bake” in an oven).
Bedroom: open a book to see a short quote or page.
Living room: click the TV to change pictures (channel changer). 
Code design:
Each interactive room is its own class/file.
Main sketch holds a simple state machine: state = “outside” | “inside” | “closet” | “kitchen” | …. When state === “closet” the sketch delegates to wardrobe.draw() and forwards clicks to wardrobe.handleClick().
I made a Wardrobe class that:
- loads outfit sprite-pages and slices them into frames,
- centers and scales the current outfit into a fixed box,
- draws left/right arrow buttons and a confirm (✓) button,
- exposes handleClick() for arrows, page switches, and confirm.
Other rooms (Kitchen, Bedroom, LivingRoom) follow the same class pattern so swapping and testing is easy.
Here is my current progress:
https://editor.p5js.org/rma9603/full/5s96PtOnM
Biggest risk & what I did about it:
The scariest part was making outfit switching reliable: slicing sprite-sheets, handling transparency, and aligning click hitboxes. If that failed the closet would be unusable.
How I reduced the risk:
I wrote a tiny test that loads one outfit sprite-page and uses page.get() to draw each frame side-by-side so I could verify cropping and transparency immediately. I exported/uploaded transparent PNGs (no white bg) and re-tested them.
centralized coordinates: arrows, confirm button, and hitboxes compute from the same this.box values so visuals and clicks always line up.
Result: the sprite-sheet method works, i can slice pages reliably and the outfit switching is stable, so i’m confident i can implement the cupcake and other rooms the same modular way.
Next steps:
- finish the kitchen cupcake game (choose base, frosting, bake timer).
- Create the bedroom interaction
- Create living room interaction
- add start/instructions screen and a “new session” reset button so people can restart without refreshing.
- hover feedback + polish (shadows, small tweaks).
- Make it full screen.