<aside> 🐱

Link: https://editor.p5js.org/hbfs666/sketches/4WbFM6Igx

</aside>

State 1: Chase (cat runs away)

State 1: Chase (cat runs away)

State 2: You Befriended the cat!

State 2: You Befriended the cat!


For this week’s assignment, I decided to create a small interactive program that lets the user interact with a cat. I think cats have very unique personalities and often seem to have a stronger sense of individuality than other pets, such as dogs. Because of that, I thought it would be interesting to recreate that kind of interaction through a program. The main goal is for the user to befriend the cat. At first, the cat runs away from the user’s mouse, making it impossible to catch it directly. (Yes, this cat is scared of the “mouse.”) Once the user realizes that chasing it does not work, they may discover that if they stop moving the mouse for five seconds, the cat will slowly come to them on its own.

What’s related to what?

In this program, the most apparent relation is the distance between the position of the cat and the position of the user’s mouse. I track the cat’s horizontal center catMid and compare it to mouseX to decide how the cat should move.

There’s also a less visible relationship between time and mouse movement. When the mouse stays relatively still for about five seconds (300 frames) the cat’s behavior changes and a new relationship is triggered.

How are they related?

I designed the sketch with two states, so the same input creates different outcomes depending on the cat’s “perspective”.

The first state is the “chase” state, so when the mouse gets within a certain range, the cat will move away from the mouse, increasing the distance between them.

When the user stops chasing and keeps the mouse still for long enough times, the cat will slowly start moving toward the mouse, and the relationship flips.

Is it a positive or negative relationship?

I’m actually not sure how to exactly answer this question. If we look at the horizontal movement of the mouse and the cat, it seems mostly positive because when the mouse moves toward the cat, the cat moves in the same direction, so their x-coordinates increase or decrease together. However, if we look at the distance between them instead, the relationship feels negative. When the user tries to decrease the distance, the cat responds by increasing it. This relationship eventually changes as well, because after the user stays still for a few seconds, the cat begins to decrease the distance on its own. So I would say the relationship depends on which variables we focus on, and it also changes depending on how close the user is to the cat, which feels pretty similar to interacting with a real cat.

What elements change using variables?

I mainly manipulate position through the variable move . It shifts the entire cat body horizontally. I also use leftEyesPos and rightEyesPos to change the eyes so the cat appears to look toward the direction it’s moving. And the overall behavior is controlled by variables like stillTime ,coming andsuccess to switch between the two states.

How does the perspective change depending on the element?

Cat: Why is this person chasing me

Human: Why is the cat running away