Month: February 2026

Week 3 Homework Zere Kystaubayeva

Concept: This sketch depicts a group of ladybugs crawling across the screen, represented by emojis. Each ladybug is an object with its own position and movement, and randomness makes the composition generative and slightly different every time it runs. I chose the concept to be simple, focusing more on the motion and repetition of visuals.

Code I’m proud of: I am proud of using the “move” and “display” functions inside an array that stores the ladybugs:

for (let i = 0; i < ladybugs.length; i++) {
  ladybugs[i].move();
  ladybugs[i].display();

Code:

 Reflection: I feel like it is getting more and more complicated with each lesson, but I am trying my best to include the required functions into our homework codes. That is why this week’s sketch feels very basic to me.

Week 3 – Reading Response

The Subjectivity of Linguistics and Definitions

It is a point that I most strongly resonate with, and one that I may struggle to articulate so fully as that which was present in Crawford’s reading, that I begin by producing a quote from said reading:

“… I take a more easygoing view of definitions. Any idea worthy of my attention is probably too big and too complicated to be reduced to some schoolmarmish formula.” (Crawford, 5)

As is to Crawford, to me linguistics is about a message. And it is so that the delivery of a message is as much an artform as is an artform about the delivery of a message. Oftentimes, I find definitions an easy way to brush over more nuanced topics.

As for interactive systems, I strive not to pen down a concrete definition, but to explore them based on their attributes and depth of interaction. Let us take a simple interactive system: a classic slot machine in the Ol’ Flamingo. Its got a lever for players to pull, makes cool sounds when you win, its got flashy lights and a degree of manual work in pulling the lever. It builds anticipation in the spinning of the slots. On the plus side (a win for the casino), the casino serves you drinks as you gamble away.

In essence, all five of your senses are deeply entrenched in this interactive system. And the drinks you’ve been served are likely to keep your brain engaged elsewhere from the fact that your credit rating isn’t looking awfully good at the moment. If I were to rate it on a scale of 1 to 10, with 10 being the strongest interactive system, it would most certainly be a good 8, for its pretty holistic in its nature, however cruel and money-depleting that nature may so be.

As did Crawford elaborate on interactive systems: “interaction: a cydic process in which two actors alternately listen, think, and speak”

In essence, the formerly described slot machine engages all of ones senses, it will never be a ten for one simple reason, that it lacks to spur intelligence. It does not really heighten one’s intellectual curiosity or thoughts. Its a repetitive action with the only randomness being how much your bank account depletes after every pull.

This is that which distinguishes between a good interactive system and a strong(er/est) interactive system. Id est a system that strives to not only address our superficial senses and thoughts, though in addition delves deep into a more nuanced realm of human thought and complex emotions.

It is that which is also present within Crawford’s formerly quoted definition.

I believe a p5 sketch could be honed but only so to an extent, for while we may invoke a multitude of senses, id est ones sight, perhaps emotion and intellectual curiosity, maybe even sound, it lacks touch, smell and taste. As someone who loves food oneself, many of my activities (in game design) and the real world do then to revolve around food, but the problem I run into is the same, we can not capture the actuality of every human sense in p5 sketches. Maybe that is the imperfect beauty of this medium, and so to me I will focus on honing the sights and sounds of my p5 sketches, with keeping in light a degree of naturality or randomness that helps to convey a deeper meaning, or perhaps is just there to perplex the observer!

Week 3 – Kamila Dautkhan

Concept 

Overall, I wanted to create something that’s between technical and visual. I was inspired by simple motion studies and minimalist generative art, where small variations in movement and size can create an interesting composition. I didn’t really want the artwork to feel chaotic or overly complex. Instead, I wanted to focus on clarity, repetition and subtle variation. My main idea was to treat each block as its own “entity.” When you look at it you can see that all the blocks follow the same basic rules but they move slightly differently since I wanted to create something chaotic rather than static.

Highlight of the Code

I’m especially proud of this part because it is how the blocks are created and stored using a class and an array:

blocks.push(new Block(random(width), random(height)));

I am proud of it because it represents the core idea of the project. It basically generates multiple objects from the same structure while still allowing each one to behave differently.

Reflection

This project helped me better understand how code structure directly affects the visual outcome. I learned that even very simple rules can produce very interesting results if they are applied consistently. I also became more confident using classes and arrays because it felt quite confusing at first but using them actually made the code much easier to manage.

If I were to continue developing this sketch, I would like to experiment with interaction like having the blocks respond to the mouse or to each other. I’m also very interested in exploring color systems more and maybe using gradients in my future works!



Week 3 — Reading Response

Reading the first chapter of Chris Crawford’s The Art of Interactive Design really made me stop and rethink how I’ve been using the word “interactive.” Honestly, I realized I’ve been throwing that term around for years to describe anything with a screen and a few buttons. Crawford’s metaphor of a conversation — a tight, messy loop of listening, thinking, and speaking—sets a much higher bar than I ever considered. It hit me that most of my “interactions” with technology are actually just reactions. Like his example of dodging a falling branch, I’m often just responding to a trigger rather than engaging in a real exchange. This definitely challenged my assumption that user agency automatically equals interactivity.

However, as much as I appreciate the clarity of his model, I couldn’t help but feel that Crawford is being incredibly restrictive — almost to the point of being a gatekeeper. By insisting that a system must “think” (process data in a complex way) to be interactive, he’s basically dismissive of a huge chunk of digital art and media that I love. I thought about atmospheric games or simple creative tools where the “thinking” is minimal, but the emotional impact is huge. Does a digital instrument not count as interactive just because it doesn’t deliberate before making a sound? This rigid, almost elitist definition feels like it prioritizes computer science logic over the actual human experience of a medium. It makes me wonder if he’s so focused on the “cycle” that he misses the beauty of simple, high-quality reaction.

One passage that really stuck with me was his critique of the “gauchely techie” replacement of human terms with “input, process, and output.” It’s a bit ironic because, while he wants to keep the human element (the “conversation”), his requirements for what qualifies as “thinking” feel very mechanical. This leaves me with a lot of questions: Has my own definition of interactivity been too lazy, or is Crawford’s just too narrow for the modern world? This reading didn’t just give me a new framework; it actually made me more defensive of the “simpler” digital experiences that he seems to look down on, while also making me want to strive for more depth in the things I build myself.

Week 3- Reading Response

A strongly interactive system listens carefully, thinks with some complexity, and responds in a clear way that affects what the user does next. It feels more like a back and forth conversation. I agree with Crawford that calling a shampoo bottle or a basic light switch “interactive” weakens the word, because those things only react in one fixed way. At the same time, his strict rejection of books, films, and performances as non interactive feels narrow to me, because people often respond to media through comments, edits, or shared viewing, which shapes the experience indirectly. Crawford seems biased toward systems that resemble one on one dialogue and software with explicit input and output, and less interested in social or cultural interaction around media. That bias is useful for learning to design, but it also raises concerns about how we value hybrid experiences like interactive films.

When I look at my p5 sketches through this lens, I see that they often stop at reaction instead of interaction. For example, a sketch that draws the same circle on every mouse press listens, thinks in a fixed way, and speaks with a single repeated output. I want to move toward voice based interaction, where the computer listens to the user’s voice through the microphone and transforms volume and rhythm into evolving line drawings, so the user’s sound shapes the image in a continuous back and forth. Practically, this means using microphone input, mapping volume to line thickness, length, and color based on the tone of the user, and storing recent sound levels so the drawing reflects how the voice changes over time. I am also interested in adding simple rules, such as a quiet period that slowly fades the image and bursts of loud sound that produce sharp strokes, because these choices ask the user to experiment with their voice instead of repeating a single gesture.

Week 3–Reading Response

I found this reading really interesting because the author’s writing style is amusing and engaging. It almost made me feel like I was interacting with the ideas while I was reading. The reading also gave me a new, clearer definition of what “interactive art” means. The examples helped me realize that I didn’t fully understand interactive art before. In the author’s view, an interactive event needs three parts: speaking, listening, and responding. All three have to be present. And the response has to be meaningful; if the response is too weak or shallow, then the event does not really count as interactive in a strong sense.

Before, I assumed that if an artist designed something “interactive,” it would still be interactive even if there was no audience, or even if people were not paying attention. After reading, I understand the author’s point that the audience is not just watching the art—the audience becomes part of the artwork. In interactive art, the artist and the audience “make” the experience together. This is the first time I have really noticed how important the audience is to the final meaning of an art piece.

I also like the idea of “degrees of interactivity.” Some artworks create strong interaction because the audience thinks carefully and responds in a thoughtful way. Other situations feel less interactive because the audience may not notice what the work is asking, or they may respond without thinking much. This raises questions for me: how can we tell whether an interaction is “high” or “low” in interactivity? Who gets to decide that? Also, does the level of interactivity change how an artwork is interpreted, or can the meaning stay the same even when audience responses are shallow?

Week 3 – Spinner

Concept

This work creates art from outward spirals employing the concept of classes and arrays. The spirals are created at the position of the mouse when it is clicked. The spiral get assigned a random color and it has a translucent effect to help blend colors and create a more visually pleasing effect. The blur function was also used to make the work more fluid.

Code I’m proud of

function mouseClicked() {
  let newBall = new Ball(mouseX, mouseY, random(20, 100), random(-5,5), random(-10,10));
  balls.push(newBall);
  
  // Prevents program from slowing down
  if (balls.length > 25) {
    balls.shift();
  }
}

This is the code that creates the spirals. It makes a new spiral when the mouse is clicked and then adds it to an array. I noticed that the program was glitching as the number of spirals increased. I then added a code to remove the oldest spiral created when the number of spirals reached 25. This kept the code running smoothly.

Code

Click to start
Press the space bar to clear the screen

Reflection

This exercise helped me put to practice my knowledge in classes and arrays while also using previous knowledge acquired throughout the course. It was really fun creating this work. This program can be improved by adding more features to the spirals through the class to create more visual effects.

Week 3: Reading Response

I do agree with the author that interactivity is a two-way process. It is something I interact with, and something that interacts with me. However, does it have to include all three components the author mentions—speaking, listening, and thinking? Are we really interacting with computers in the same way? They do not think the way humans do. They are trained using mathematical equations and algorithms, yet they can sometimes outperform human thinking.

In my opinion, a strong interactive system allows me to manipulate things in real time—for instance, typing on a computer right now or playing a virtual reality (VR) game. There is not necessarily a listening, speaking, or even thinking component. According to the author, this would not be considered interactive. But for me, interaction means getting a reaction to my actions.

One example the author gives is an interactive rug, which I would not consider interactive from the rug’s side because it does not interact with me in the same way I interact with it—I simply play with cars on it. However, I would consider rugs that teach prayer through step-by-step instructions, or similar designs, to be interactive because I interact with them and they interact with me.

In the future, I would add things that get the user more involved in my p5 sketches, creating a real interaction between the user and the sketch. For example, I could use ml5 and other machine learning libraries to make the sketches respond to gestures, sounds, or movements. I think a strong interactive system should give feedback to the user, so their actions actually change what happens on the screen in real time. This way, the interaction doesn’t need to include thinking or speaking like the author says—it’s still interactive because the sketch reacts to me. I also wonder, though, does a system need intention or intelligence to be truly interactive, or is responsiveness enough?

 

Week 3: OOP and Array

CONCEPT

After looking at examples from previous students and the sample car sketch in the syllabus, I was reminded of the Filipino children’s fable Ang Kuneho at ang Pagong, or in English, The Rabbit and the Turtle. The story is about a fast but overconfident rabbit who challenges a slow turtle to a race, only to lose after falling asleep halfway through. Inspired by this, I created a race animation where the turtles move forward at their own slow and steady pace, while the rabbit stays asleep unless the user wakes it up by clicking the mouse.

I used object-oriented programming to better organize my code. Each turtle is treated as its own object, with individual position and speed values, allowing them to move smoothly and independently across the screen. I also used arrays to control the turtles’ speeds and the rabbit’s hopping positions. Every time the mouse is pressed, the rabbit moves to the next position in the array, reinforcing the idea that the user’s input directly affects what happens in the sketch.

HIGHLIGHT

In creating my code, I mainly referenced the class slide decks and my previous p5.js sketches from earlier exercises. These helped guide both the structure and logic of my work. I also used ChatGPT as a support tool, especially when I struggled with connecting another JavaScript file to my sketch.js. Because of that issue, I decided to keep everything in a single file, which made the project easier to manage. Whenever my code did not work as expected, I also used ChatGPT to help me identify where things were going wrong and how to fix them, which helped me better understand my mistakes instead of just copying solutions.

One part of the code that I am particularly proud of is how I handled the movement of the rabbit and the turtles. For the rabbit, I created a function that stores possible hop positions in an array, allowing the rabbit to move step by step each time the user interacts. For the turtles, I used a loop to update each turtle’s position based on its own speed, making them move independently across the screen and loop back once they reach the end.

//---------------- Moving the Rabbit ----------------//

function hop() {
  rabbitPositions = [];
  for (let x = 33; x < width; x += n + 5) {
    rabbitPositions.push(x);
  }
}


//---------------- Moving the Turtle ----------------//

function moveTurtles() {
  
  for (let t of turtles) {
    t.x += t.speed;          
    turtle(t.x, t.y, 50, 35); 

    if (t.x > width + 40) t.x = -40;
  }
}
REFLECTION

Overall, I really enjoyed making this mini game and seeing how it developed through the process. One thing I would like to explore further is adding more movement and animation to both the turtle and the rabbit as they move along the track. Once I feel more confident with the code, I want to push the sketch further and make the characters more expressive.

I am also interested in expanding the game logic, such as clearly showing who is winning by tracking how many laps each character has completed and adding a visual response when a winner is determined. Adding small details like the rabbit blinking, hopping in a more natural way, or the turtles moving their legs as they walk would make the sketch feel more alive and engaging for the user.

Sources:

https://p5js.org/reference/ and Class Slide decks

 

Week 3 – Reading Response

When I first read the opening lines of the text, I immediately thought of interactivity as a conversation. To me, a strong interactive system works as a two-way exchange, not just a machine waiting for commands. The user does something, and the system responds in a way that affects what happens next. This back and forth is what keeps the experience active. I agree with the author that participation and interactivity are not the same. Simply taking part does not mean interactivity is happening. Just like dancing to a CD is not a conversation because the music does not change, it is not truly interactive if it continues without responding to the user.

This idea strongly influences how I approach my p5.js sketches. I want to move away from making works that are only meant to be watched and create pieces that respond to the viewer. In my current turtle and rabbit sketch, I avoided letting the animation play on its own. The rabbit only hops when the user clicks the mouse, which turns the action into an exchange. The click becomes the user’s input, and the movement becomes the system’s response. As I continue working, I want to explore deeper forms of interactivity where users can influence not only what appears on the screen but also how the sketch behaves, making the experience feel more like an ongoing conversation between the person and the code.