For this assignment, I decided to continue developing the heart theme from my previous sketch. In Assignment 2, I created a structured heart wallpaper where all the hearts moved together when pressed. This time, I wanted to test my abilities more and make the interaction feel more refined and independent rather than controlling everything at once.

Instead of using one shared movement variable, I used arrays and object-oriented programming to create a grid of Heart objects. Each heart now has its own properties, such as position, size, and animation phase. I used nested loops again to build the grid, but instead of shifting the entire grid together, each heart updates individually using its own update() function.

To create smoother movement, I used sin() and cos() to make the hearts pulse and slightly wiggle when the mouse hovers over them. The hearts remain structured in a grid, but when the mouse gets close, they move in a controlled sinusoidal motion. I also created the heart shape using beginShape() and bezierVertex() instead of ellipses and a triangle, which made the hearts look more developed and smooth.

The part of my code that I am most proud of is the section where the hearts move when hovered over:

if (this.isMouseNear()) this.x = this.baseX + sin(frameCount * 0.18 + this.phase) * this.wiggleAmount; this.y = this.baseY + cos(frameCount * 0.18 + this.phase) * this.wiggleAmount; }

This part controls the interactive movement. I learned that frameCount acts like time, and using sin() and cos() creates smooth back-and-forth motion instead of random movement. Adding phase also prevents all the hearts from moving in sync, which makes the animation feel more natural.

Overall, I’m happy with how this sketch developed from the previous one. It feels more structured and intentional, especially since each heart now behaves independently. The most challenging part was understanding how to separate update and display logic, and how to keep the original grid position while still allowing movement. For future improvements, I would like to experiment with how nearby hearts respond to interaction, and create a ripple effect instead of only affecting one/two hearts at a time.

Reading Reflection

In the reading, Crawford does not directly state that interactivity must include technology, but he clearly frames it within digital systems and computational design. Most of his examples revolve around computers, simulations, and structured input-response systems. While I understand his definition of interactivity as a “cyclic process of listening, thinking, and speaking,” I think his focus on digital media slightly narrows how we understand the concept.

Personally, I don’t think interactivity necessarily has to involve technology. I think something can be interactive simply by changing how we perceive or respond to it. For example, a physical artwork that shifts depending on where you stand, or a space that makes you question your perspective, still creates interaction, even without code. This reading made me question whether interactivity is really about technology, or if it is more about creating a meaningful exchange between a system and a participant, regardless of medium.

One thing that drives me crazy is the car touch screens and buttons that are used to control things like the air conditioning and volume. I have to literally look away from the road just to figure out which button to press. I get so frustrated and end up pressing everything just to see what would change. From what I understood in Norman’s reading, it is the failure of signifiers and mapping. I used to think they were the same thing, but with all of his examples, he made it clear that affordances are what actions are possible, while signifiers are what show those actions to the user. The car buttons do not communicate their function, and their icons are quite confusing. I think this could be improved by adding clear labels, rearranging icons, or even having words instead of icons, so I could predict what will happen before I press it. 

I can apply Norman’s design principles by making sure the buttons actually look clickable and that the interactive elements and directions stand out visually so users do not have to guess. I will incorporate mapping, where the controls match their results spatially and conceptually, so that people can predict what will happen. I noticed that when mapping is unclear, I hesitate before acting because I do not trust what will happen. I would also probably prioritize feedback or make sure to show a loading animation or confirmation message so people know their action worked. I think I would also design my sketches with the assumption that users will make mistakes, by including undo options or very clear instructions. The reading made me realize that good design isn’t about the visual aesthetics of something, but about making sure people understand how to use it; otherwise, it would be really annoying to use.

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.

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

 

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.

The only thing I was impressed with was Crawford’s ability to write that much about the misuse of the term interactivity. In my opinion, Crawford was being quite exaggerative. While I understand the frustration and agree that people sometimes slap the word “interactivity” on more reactive things, many of the examples Crawford gave were not very common. I have never really heard of a movie being called interactive before, unless it’s a kids’ movie like Dora, nor have I heard someone call opening the fridge interactive.

Following his argument to its logical conclusion, we should change “interactive media” to “reactive media.” After all, interactive media is programmed to trigger a reaction when the user interacts with it, but it does not listen, think, and respond the way Crawford claims interactivity should. However, when I Googled the official definition of interactivity, the Oxford dictionary defines it as “the process of two people or things working together and influencing each other.” According to this definition, everything Crawford claimed was not interactive is indeed interactive, because it involves things influencing each other, not necessarily listening, thinking, and speaking.

That said, I do agree with Crawford that interactivity exists on a spectrum. I believe the characteristics of a strongly interactive system are its ability to listen, think, and speak. Generative AI is the best example of a strongly interactive system we currently have, if not the most interactive. It simulates human conversation and allows for human-like interactions. Other examples of interactivity, such as humans triggering a reaction from computer-based artwork (like the sketches we do in class), fall on a slightly lower scale of interactivity because they are more of a “reaction,” to use Crawford’s terms, but I would still consider them highly interactive.

To improve the degree of user interactivity in my sketches, I could go beyond just the click of a mouse. Using different parts of the human body, including an interactive webcam project, like one of my classmates’ projects for this week, and even allowing for multiple interactions at once – something like a two-player game – can all improve the degree of interactivity of my sketches.

My Concept:
When I first started thinking about this assignment based on what we did in class, I came up with simple ideas such as a balloon pop, but I felt like I wanted something more interesting and interactive. I got inspired when I was sitting outside at night and watching the stars above, which gave me the idea to recreate that image using code and add animation by making the stars move. Throughout the process, I came up with more ideas, such as adding a glow so they appear as “shining stars,” and turning the piece into something interactive by allowing users to connect the stars together. This way, users can create their own drawings by forming constellations and remove the lines using their keyboard. In the end, I created a constellation-inspired artwork of shining stars that float around a midnight-sky background, where the stars connect through the mouse and the connections are fully controlled by the user, allowing them to create different drawings or patterns.
Inspiration:

Embedded Sketch:

A Code I’m proud of:
In this assignment, I explored the code more deeply, and I’m proud of most of my work. However, a particular part I’m especially proud of is the mouse interaction I added. When I first implemented it, I couldn’t make it fully controlled by the user. Instead, when clicking on a star, it would randomly select another star to connect to, and eventually all the lines would connect to the same one. After looking at the references and experimenting with the code, I was able to use the if and else statements, along with the null value to reset the selection, which allowed the user to freely choose which stars to connect.

//Interactions in the Sketch

//Loop to find first star
//When the mouse is pressed on a star
function mousePressed() {
  if (!chosenStar) {
    for (let star of stars) {
      if (dist(mouseX, mouseY, star.x, star.y) < 6) {
        //Select it as the first star and stop loop
        chosenStar = star;
        break;
      }
    }
  }
  //When first star is found, loop to find the second star
  else {
    //Check that its a different star
    for (let star of stars)
      if (dist(mouseX, mouseY, star.x, star.y) < 6 && star !== chosenStar) {
        //Create a line that connects the two stars and store it in the connections array
        connections.push(new Connection(chosenStar, star));
        //Reset so user can choose new stars
        chosenStar = null;
        break;
      }
  }
}

Another part of the code I’m proud of is the temporary line that appears when selecting stars before finalizing the connection. At first, the line simply appeared, but I wanted it to clearly show where the connection was going. After researching and following tutorials, I was able to add this feature using an if statement along with mouseX and mouse Y, making the interaction clearer and more natural for the user.

//Allow a temporary line to be created when selecting a star and moving to select the second one, controlled by mouse
  if (chosenStar) {
    stroke("white");
    strokeWeight(0.2);
    line(chosenStar.x, chosenStar.y, mouseX, mouseY);
    noStroke();
  }

 

Reflection and ideas for future work or improvements:
Overall, I feel satisfied with the outcome of this assignment. I tried new things and experimented much more with effects such as the glow and breathing animations for the stars. I also added more interactivity for the first time and learned many new things throughout the process. I really enjoyed seeing the idea I had in mind actually work the way I wanted it to. However, there is always room for improvement, and I feel like these are just my first steps. For future work, I would love to add more details to the aesthetics of the piece and possibly introduce even more interactivity. Since the theme is stars, I could add elements such as flying rockets, shooting stars, or even a moon that moves or reacts when something specific happens.

References:
I met with a peer tutor, Mariam Alkhoori, who taught me how to create the glowing, floating stars as a starting point for this project.
I used the p5.js reference page (https://p5js.org/reference/) to ensure I was using the functions correctly. Some of the specific references I used include:
https://p5js.org/reference/p5/line/
https://p5js.org/reference/p5/mousePressed/
https://p5js.org/reference/p5/sin/
I used the Happy Coding tutorial on array functions to better understand how to use arrays and remove elements using pop() (https://happycoding.io/tutorials/p5js/array-functions#pop)
I used ChatGPT to help navigate and understand bugs in my code when it did not work. When working with the Star class, I sometimes mixed up how object properties are referenced. I mistakenly used ‘star.x’ inside the class instead of ‘this.x’, which caused errors because ‘star.x’ is not defined inside the class. This caused the sketch to not properly access or draw the stars. By reviewing the code with ChatGPT, I was able to identify how properties inside a class must be accessed, as we practiced in class. I applied the same logic when working with the connection class to ensure consistency across all classes and the main sketch. 

The characters of a strongly interactive system should include a strong need for input, and a strong output which has the user intrigued even further. The outputs need to be able to create joy or interest or maybe even frustration, just something that can really have the user feeling deeply about what had happend, and trigger the strong intention to try again. I believe games are a pretty good example of this. They require input to do anything at all, and they might be somehow addictive because the output from the game keeps the gamer strongly sttracted. Whether it is that the user dies and needs to start again, needs to finish something, or needs to start somethign new, the feeling generated by the system urges the user to make another input, and then the cycle of an interactive system can keep spinning until one decides to leave.

For my own p5 sketches, I think they lack an interactive depth. There is too little to do with my sketches, since I haven’t learned enough to build a game out of it. There is no interactive cycle, it is usally just a click or a movement of the mouse, and everything is over. This leaves the user with no intention to start again or do something different because they have already finished everything they can. Also, the output isn’t intersting enough. If the output is, for example, getting a certificate that holds some value, or maybe a souvenier of Abu Dhabi, it might make the users want to participate more (for more or different rewards), or maybe it can attract other users.

According to this, I get the idea that I have to incorparate more interactive funcions to keep the user interested when I go on to learn more code and make the big projects.

Concept

I had my initial inspiration from the algorithmic art of Vera Molnár, but since someone already did art based on that and I wanted something more lively, so I thought of making tracing eyes across the canvas. I originally aimed at giving it a spooky feeling but wasn’t really able to fixate an idea on how to make it spooky. So I just ended up using random colors and having the eyes pop up randomly acreoss the canvas.

The tracing effect was the part that I really wanted to implement the most as an idea. I wanted all the eyes, no matter where they are on the screen, to be looking at the position of the mouse. Since I was using class to draw the eyes, it meant that there needed to be a universal fucntion for all the eyes, and I am pretty proud of the results.

Code that I am proud of 

let dx = mouseX - this.eyex;
    let dy = mouseY - this.eyey;
    //calculates the angle of point(dx,dy) relative to positiveX, which is same as (mouseX,mouseY) to horizontal
    let alpha = atan2(dy, dx);
    //calculate distance between mouse and eye center
    let distance = dist(mouseX, mouseY, this.eyex, this.eyey);
    //if mouse is inside the iris, pupil & iris movements follow the mouse, if mouse is outside, they follow the angle at the max distance of 12.5, so they dont run from the eye
    let movedist = min(distance, 25 / 2);
    let movedist2 = min(distance, 3);
    //cos determines horizontal direction movement and sin defines verticle direction movement
    let pupilx = this.eyex + cos(alpha) * movedist; 
    let pupily = this.eyey + sin(alpha) * movedist;
    let irisx = this.eyex + cos(alpha) * movedist2;
    let irisy = this.eyey + sin(alpha) * movedist2;

The code used in creating the movement was not too difficult, it was the math that took me a lot of time. Arc-tangent-2 was used to calculate the angle for the tracing,  because angle of point (dx,dy) relative to positiveX is the same as (mouseX,mouseY) to positive x.

The line I liked most in this chunk is where I united the situations of the mouse being inside and outside the iris in one line. taking the minimum of the two numbers allowed the pupil to follow the mouse smoothly as it transfers across iris.

Embeded sketch (click to see eyes)

Reflection

I actually have reflected quite alot during the production already. Because I randomnized the size and stroke weight, it was a bit difficult to make the arcs meet at the ends, and some of the thinner lines dont really look good with big eyeballs. Also, I did no fill for the arc so it wouldn’t create a fan shape, but that also leaded the bottom eye to be able to be seen through the top eye. I may need to reasearch into how to fill odd shapes to fit that.

Some further development I want to make to this is maybe attach it to some creature instead of having a lot of eyes floating and stacking on top of each other. I am thinking about maybe putting it on some worm because for some reason I think of the game I am playing called Hollowknight: Silksong when I look at the eyes move.

The reading by Crawford pushed me to reflect more carefully on how I define interaction in my own work. I usually associate interaction with visible movement or manual input, but Crawford presents it as an exchange in which the user acts and the system responds in ways the user can notice and understand. The user stays engaged when their actions change behavior over time and when feedback feels connected to what they do. Crawford emphasizes listening as a core part of interaction, meaning the system changes only when the user’s input affects future responses. This idea made me realize how easy interaction becomes shallow and meanigless when the system continues regardless of the users presence

When thinking of how I want to apply this idea to my p5 sketches, I see areas where interaction feels just a bit limited in a way. Many sketches rely on randomness and animation, which creates visuals but does not always depend on the user’s actions. When the user moves the mouse or clicks, the sketch often continues in a similar way, which kind of weakens the sense of exchange Crawford describes in the reading. To improve this, I want the users input to influence structure rather than just surface behavior. Mouse movement could change speed, and clicks could change patterns. Changes like these would force the system to listen and respond, which aligns more closely with Crawford’s definition of interaction and helps the work feel more intentional and responsive rather than automatic and fixed. Overall, Crawford’s text really opened my eyes on the concept of interaction, and definitely deepened my understanding of how I want to incorporate it in my own work in the future.