Author: Zere Kystaubayeva

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.

Week 13 Project test – Zere

I have conducted user testing with my initial version of the project. The user tested my game twice, without instruction and with instruction later. Videos are attached below.

  1. Are they able to figure it out? Where do they get confused and why? Do they understand the mapping between the controls and what happens in the experience?

On the first trial, the user had trouble understanding the point system and the order of the very first two mini-games. In my opinion, this happened due to the lack of a button/indicator that would instruct what to do next. Control mapping was understood, and the user has managed to figure out that the game is mouse-controlled, which is pretty straightforward, as he happens to be a frequent laptop/technology user. Yet, in a case where a person is not familiar with technology, control mapping can be difficult, which means that in further versions, I need to be clearer on the intent and instructions of the game.

2. What parts of the experience are working well? What areas could be improved?

I feel like the overall design of the game works pretty well, in user’s opinion it is aesthetically pleasing. What could be worked on, both from my brainstorming and user’s feedback, is the back/forth buttons that let you progress through the game, and more clarity of instructions, as well as clarity of the point system.

3. What parts of your project did you feel the need to explain? How could you make these areas clearer to someone who is experiencing your project for the first time?

After the initial testing, I had to explain that as soon as the user is done with the mini-games in that particular scene, the user has to click the bottom right button in order to progress to the next scene. In my opinion, I need to be clearer on the instruction of the game, for example including a brief overview of how the game works on the introductory page, or having a mini-tutorial on how the control works. It is also worth noting that the user took 1 minutes and 30 seconds to complete the game on the first try, while on the second try, after my instruction, the user took only 30 seconds to complete all of the tasks. The efficiency/time of completion increased x4, which means that providing valuable instructions is extremely important for a smooth user experience.

 

First trial of the game:

IMG_2807 2

Second trial of the game:

IMG_2809

 

 

Week 12 Final Project Proposal Zere

For my final project, I would like to build on my midterm and make substantial changes/extensions to the game I created. I would build on the experience of “Day in the Life of a Cat” by producing more interactive scenarios and adding more sounds to immerse the user in the game.

I still need to start working on the project so the documentation of that will be updated below.

Week 12 Reading Response Zere

A thing that really stuck with me in this reading was the whole “trickle-up” idea, basically the argument that innovation doesn’t just flow from mainstream design down into accessibility products, but can actually go the other way around. The example that opens the text is kind of wild when you think about it – the Eameses didn’t design sleek furniture and then adapt it for disabled people. They designed a leg splint for injured Navy sailors, and the techniques they figured out through that problem ended up shaping some of the most iconic furniture of the 20th century.

That framing hit differently for me because of something my professor, Noel Joyce, who taught Innovation Lab to me in my freshman year, brought up in class. He designed an accessible mountain bike called Project Mjolnir, built for people who’d normally be shut out of the sport. But the thing he mentioned that I keep thinking about is that anyone can ride it, not just disabled users.

I think that’s exactly what the reading is trying to show: when you design for people with real, specific needs, you’re forced to think harder and more creatively than you would designing for some “average” user. It makes me wonder how many better products we’re missing out on simply because accessibility was never part of the brief to begin with.

Week 11 – Reading Response Zere

I resonate with the argument made by the author, as in my opinion, the notion of touchscreens being the “ending point” of a technological revolution seems a little odd to me. I believe that there is much more to the technological development of the future than an object that resembles a phone.
What I found most interesting was the part about hands. The author makes a great point about how useful our touch senses are. Human evolution can be strongly tied to the senses that are on the tip of our fingers. Touch is an extremely powerful “tool”, if we could call it that, and we’ve basically designed it out of our tools entirely.

This reading reminded me of our time in class, when the professor showed us simple motion detectors and control using p5js. This technology is not touch-related directly, but still presents a more futuristic/alternative concept rather than touchscreens. This transitions into my thought that interactions that involve your whole hand, your movement, your body, basically, other additional parts of our body (also including touch), are much more interesting and feel more “alive”, compared to just sliding your finger across a surface.

To conclude, I think that it’s easier to make the argument than to solve the problem. It’s one thing to say “we should use our hands more” and another to design something that’s actually as convenient and as accessible as a smartphone. He kind of admits this in the responses page , he doesn’t have the answer, just the problem. Which is fair, but also frustrating at the same time.

Week 11 Assignment – Zere

Concept

The concept of my project is to create a light-controlled musical instrument using Arduino. Instead of buttons or keys, the player controls pitch by covering or exposing a photoresistor to light, like waving your hand over it. A pushbutton switches between a low octave and a high octave, making the instrument feel expressive and playful. I wanted the interaction to feel unusual and fun, more like a theremin than a traditional instrument.

const int LDR_PIN = A0;
const int BTN_PIN = 2;
const int BUZZ_PIN = 8;

void setup() {
  pinMode(BTN_PIN, INPUT_PULLUP);
}

void loop() {
  int lightVal = analogRead(LDR_PIN);
  int btnState = digitalRead(BTN_PIN);

  int freq;
  if (btnState == LOW) {
    freq = map(lightVal, 0, 1023, 500, 2000);
  } else {
    freq = map(lightVal, 0, 1023, 100, 500);
  }

  tone(BUZZ_PIN, freq);
  delay(10);
}

I started by placing a photoresistor on the breadboard with a 10kΩ resistor forming a voltage divider, which lets the Arduino read changing light levels through A0. At first the buzzer played the same tone constantly, later I discovered through the serial monitor that A0 was reading 1023 the whole time, which meant that the resistor was not properly connected to the photoresistor. Once I fixed that, the pitch started responding to light.

What I’m proud of

The part I’m most proud of is figuring out the button wiring. This was incredibly frustrating, as I spent a long time confused about which legs of the button connect internally, which pins on the Arduino were digital versus analog, and why the signal kept reading the wrong values. I watched a YouTube tutorial to better understand how the process, it was quite challenging to be honest. https://www.youtube.com/watch?v=gj-H_agfd6U

What I can do better next time

Next time, I want to map the light values to specific musical notes rather than continuous frequencies, so it sounds more like a real scale than a smooth slide between pitches. I could also add an LED that lights up when the button is pressed for visual feedback, or use multiple photoresistors to create distinct pitch-control zones. I could also arrange the wires more neatly next time.

This is the video of me testing the sound: IMG_2491

 

Midterm – Zere Kystaubayeva

View only link: https://editor.p5js.org/lunaland/full/lguzYiIJr

1. Concept of the game: I decided to create an interactive piece called “Day in the Life of a Cat”, where the user gets to experience normal cat stuff that cats get to do throughout their days.

  • I have a hairless cat, Luna. I miss her a lot since she lives with my grandparents, and I decided to remind myself of her by creating this interactive experience. Everything that the game includes is pretty much all she does every day – eat, play with random things, terrorize insects outside, and poop.
  • What and how: The user gets to experience morning, day, and night as a cat, clicking on different items and discovering what they can do with them. I decided to keep the interface very simple, since overcomplicating things would make it hard for me personally to produce a good interactive experience. Each part of the day has its own mini-game to complete in order to transition into the next part of the day. The user collects points for completing the mini games. You get 30 points in total. You can play the game again after finishing it.
  • Additional stuff: Initially, I wanted to draw all of the backdrops myself or create them using code, using simple shapes and colors. Then I remembered a game I always wanted to play called Animal Crossing, and wanted to create a similar atmosphere – cute and simple background decor. I wanted to use images from the internet, but none were “flat” enough for a backdrop, and I couldn’t insert my own images in there due to a lack of space. In the end, I decided to generate Animal Crossing and other cute mini-games-inspired backdrops, as well as all of the items that are needed to complete the game. I generated everything through ChatGPT image generation.

2. Code that I’m proud of and why

The part of my code that I am most proud of is the scene system and the way the game moves from one part of the day to another. I used different game states like the instruction screen, morning scene, day scene, night scene, and ending scene. This made the project feel real and interactive, as if it’s truly a cat that goes about its day. I am proud of this because it helped me organize the game clearly and made it easier to control what the user sees at each moment.

3. What I found challenging

The most challenging part for me was making the different scenes connect smoothly. At first, I struggled with where the player should go after each interaction. I had to think carefully about how to move from the instruction screen to the morning scene, then to mini-game scenes, then back again, and finally to the ending, without making it confusing for the user and me. This taught me that you need to have both the idea and the execution planned to detail before starting the process, because I had to redo a lot of stuff to create mini-game scenes in between the bigger scenes.

Week 5 Reading Response Zere

What are some of the ways that computer vision differs from human vision?

While humans use their eyes and brains to interpret the information about the scenes they see, computer vision utilizes cameras and algorithms to analyze images. Computers can’t understand images or videos without specific algorithms that assign meaning to the pixels.

What are some techniques we can use to help the computer see/track what we’re interested in?

  1. Frame differencing: Motion is detected by comparing consecutive video frames. This works well when objects or people are in motion.
  2. Brightness thresholding: This separates foreground and background based on the light/dark values. This helps in environments where there is a strong visual contrast.
  3. Simple object tracking: This finds the brightest/darkest pixels in an image/scene and follows the object’s position.

How do you think computer vision’s capacity for tracking and surveillance affects its use in interactive art?

You can create responsive interaction artworks, as there is opportunity to track objects/bodies/faces/gestures etc. Additionally, some artworks use surveillance techniques to comment on power and monitoring in a social perspective. This gives room for critique and opinion, something that is crucial in any form of art.

Week 5 – Midterm Progress Zere

Concept of the project: I decided to create an interactive piece called “Day in the Life of a Cat”, where the user gets to experience normal cat stuff that cats get to do throughout their days.

Why did I choose this concept? Well, I have a hairless sphynx cat named Luna, and I love her VERY MUCH. I miss her a lot since she lives with my grandparents, and I decided to remind myself of her by creating this interactive experience.

What and How: The user gets to experience morning, day, and night as a cat, clicking on different items and discovering what they can do with them. I decided to keep the interface very simple, since overcomplicating things would make it hard for me personally to produce a good interactive experience. Here is my sketch for now:
I think one of the most important part of the sketch is the “meow” sound that is played when users click on the paw. That is why I created a test program for sound playback. It may be simple and flawed for now, but I think it’s an easy solution to the problem if it arises. Here is the link for the program: LINK. 

Week 4 Reading Response Zere

  1. Something that drives me crazy and how it can be improved: “automatic doors” across campus! Primarily, the ones in D2, they drive me crazy every day. These so-called “automatic doors” are not even automatic at times, and are super heavy. A lot of the times they simply do not work, and I have to manually open them or wait until somebody opens them for me. It is especially frustrating when you want to have a nice lunch/dinner outside of D2, but carrying the heavy tray in and out of the cafeteria is made almost impossible if you are by yourself. These automatic doors could be improved by making their behavior consistent and by adding clearer signifiers and feedback to show when they are working. Since people in D2 often carry trays, the doors should be designed to open every time and stay open long enough to accommodate real use. This would provide a clear conceptual model of those “automatic doors”.
  2. How can I apply some of the author’s principles of design to IM?

    The main lesson from the reading is that interactive media should not make users stop and think, “What is going on here?” or “What am I supposed to do here?” Instructions, explanations, or repeated trials directly affect the user experience of what is meant to be interactive and understandable. In my opinion, interactive systems should clearly signal what actions are possible and what will happen after those actions are taken. Design has to be good – buttons clickable, interactions should respond quickly to the user. That is why feedback is important. I believe that IM should work with normal human expectations, that way there would be more people interested in it or pursuing it.