Final Project Showcase Zere

Day in the Life of Luna: Final Project by Zere Kystaubayeva

Demo Video YouTube Link

Concept

Luna is a cat living on Maple Lane. You spend one full day as her: waking up, playing, eating, exploring outside, and causing chaos at night. The game is built in p5.js and takes inspiration from the cozy aesthetic of Animal Crossing. Each scene flows into the next automatically once you complete the interaction, so it feels like a continuous day rather than a menu-driven game. The base of this project was taken from my midterm. I have made substantial changes both to the design and to the flow of the game.

Interaction Design

The game uses five different input methods across its scenes:

  1. Mouse click: tossing yarn between paws, eating from the bowl
  2.  Mouse hover/proximity: chasing the butterfly (you move your cursor close to catch it, it flies away if you get too close too fast)
  3. Keyboard (WASD / arrow keys): navigating Luna through a maze to find the yarn ball
  4. Microphone/speech: making noise to scare birds off a fence one by one
  5. Drag and drop: placing poop on specific spots on the bed

Each interaction gives clear feedback: a glowing ring shows the butterfly catch progress, a mic volume bar shows when your voice is being picked up, dashed circles show where to drag the poop, and a success sound plays on every completion. There is also a yellow glow on clickable objects so users know what to interact with before clicking.

How It Works

  1. The game is structured around a gameState string that switches between scenes. A goTo() function handles transitions with a soft cream fade. Each scene has its own draw function called from the main draw() loop.
  2.  Backgrounds, furniture, trees, flowers, and characters are all drawn in code using p5.js shapes. This decision was made by me after using AI-generated background images in my midterm project. I felt that using the simpler but still not AI-generated images would be much better this time. The cat sprite in the maze is rendered from a sprite sheet PNG using image() with a cropped source region.
  3. The butterfly uses a flee algorithm, which is different from the way a user would catch the butterfly in the initial version of the game. Now, when your cursor gets within 150px, it calculates the angle away from you and moves in that direction. A catch progress arc fills up when you sustain proximity under 70px.
  4. The mic scene uses p5.AudioIn to read the microphone volume each frame. When volume exceeds a certain threshold, one bird gets scared off one by one.

How This Was Made

The game was built from scratch in p5.js with several versions, starting from a midterm project and substantially expanding it. I used Claude to help generate the maze. I was struggling to write the grid-based collision detection myself, so I prompted Claude with: “I have a 2D array maze grid where 1 is a wall, and 0 is a path. Luna is a character with a bounding box. Write a p5.js function that checks if moving to a new x/y position would collide with any wall tile, using the cell size and origin offset.” Claude produced the mazeTileBlocked() function and the movement logic.

Media Assets I used:

  • Cat sprite: downloaded from itch.io free pixel art cat sprite pack
  • Bowl PNG, paw PNGs, butterfly PNG, poop PNG: from the original midterm project
  • Wall texture PNG: from a free cozy interior tileset on itch.io
  • Background music: sourced from freemusicarchive.org
  • Success sound: downloaded from freesound.org
  • Meow sound: from the original midterm project
  • Font: pixel.ttf, sourced from itch.io

All of the media assets I used were free!!!

What I’m Proud Of

Each scene has an interaction that makes sense for what Luna would actually be doing, so I am not forcing interactive design where it would look unnecessary.  The butterfly chase in particular turned out well this time, as during my midterm submission, I felt like this scene needed work. The proximity-based catch mechanic with the progress arc is more satisfying than just clicking. I’m also happy with how the backgrounds look entirely in code; in my opinion, it gives off a cohesive, cozy feel without any background AI-generated images.

Areas for Improvement

  1. I feel like the maze could be more visually polished, right now it’s functional but plain. I would like the maze to be more complicated, so the game would feel more interesting.
  2. The microphone sensitivity could be adjustable, so it works better in different environments.
  3. Adding a Luna character sprite to more scenes, not just the maze and birds, would make it feel more alive, but for now, I was okay with the idea of the user playing the game from the POV of Luna in the rest of the scenes.

Leave a Reply