Month: February 2026

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.

Concept

For this week’s assignment, I decided to draw a bit from the skills I learned in Intro to CS back in my freshman year. I chose to implement a very simplified version of Pac-Man, something I always wanted to recreate.

Here is the final sketch (use the right arrow key to begin moving Pac-Man):

The idea is simple: you use the left and right arrow keys to move Pac-Man, and it eats the ghosts once it approaches them. Once all the ghosts are eaten, and Pac-Man returns to his starting position on the left side of the screen, the ghosts regenerate. This creates a sort of infinite loop.

Pac-Man:

The Pac-Man figure is created using the arc() function. On the p5 reference page for the function, there is a sample code for a biting Pac-Man. So, I used that in my assignment. I used Claude.ai to understand what each line of code was doing, specifically how the sin function works and how it enables the model to open and close its mouth. Building on this knowledge, I was able to adjust the speed at which Pac-Man was biting. I also added a boolean that checks if he is moving, so that he is only biting when he is moving.

Pac-Man’s movements are based on the pressing of the right and left arrow keys. From my Intro to CS class, where we built a sample Super Mario Bros game, I knew there must be a way to trigger movement when a specific key is pressed. With a Google search, I found that you can use

if (keyCode === LEFT_ARROW)

However, this function made it difficult to make Pac-Man move when the key is pressed and stop when the key is released. I had a bug where he would just keep moving on his own. I asked Claude.ai for a different function that is specifically for detecting if a key is held down or not, and it gave me the keyIsDown() function. This function returns true if the key is pressed, and false if not. This function fixed my bug and made Pac-Man stop and go correctly.

Ghosts:

For the ghosts, I found PNG images on Google and uploaded them to the sketch. Then, I found this sketch online, which includes a tutorial on how to load and display images.

I faced some difficulty with getting the ghosts to disappear when Pac-Man eats them. At first, I was just looping through the image names and displaying each image, then checking if the x position of Pac-Man and the image aligned, and deleting the image, but this was not doing anything. I asked Claude.ai why my code was not working, and it pointed out to me that images cannot hold x variables; therefore, I cannot check conditions using them. So, I created a simple Ghost class to store each ghost image’s x and y positions, its size, and image name. I made each ghost image an instance of the Ghost class, and stored them in a ghosts[] array. This allowed me to use the dist() function to see if Pac-Man was close to the ghost and delete that ghost instance from the array, which makes the ghost disappear from the sketch.

I was initially just going to leave the sketch with one iteration of displaying, then eating the ghosts, but then I decided to make it regenerate the ghosts every time they are all eaten. I did this by checking if the ghosts[] array is empty, because that indicates that all ghosts have been eaten. Adding only this condition gave me a small bug where the ghosts do not generate when the sketch first loads. It also would re-display the ghosts as soon as the last ghost is eaten, and since Pac-Man would be in proximity of the last and before last ghosts, it eats them immediately, making all the ghosts disappear as soon as they appear. Therefore, I added a condition that ensures that not only must the array be empty, but Pac-Man must also be on the left side of the screen (back at his starting position).

Code Snippet I am Proud of:

//loop backwards through the ghost objects to delete from the back of the array, otherwise you skip items in the array
 for (let i = ghosts.length - 1; i >= 0; i--) {
   let ghost = ghosts[i];

   //display the ghost image
   image(ghost.imgName, ghost.x, ghost.y, ghost.size, ghost.size);

   //if the distance between the center of pacman and the center of the ghost is smaller than 50
   if (dist(pacman.x, pacman.y, ghost.x + 40, ghost.y + 40) < 50) {
     //delete that ghost object from the array so that it is not displayed
     ghosts.splice(i, 1);
   }
 }

This is the code to display the ghost images and delete them when Pac-Man eats them. I am most proud of it because it took me the longest to figure out, and I made LOTS of edits until I reached the final version that worked.

Reflection

Overall, I am extremely happy with my work. Pac-Man has always been one of my favorite games, and I am thrilled I got the chance to recreate it. Despite running into a lot of bugs, they taught me a lot along the way, helped me discover new functions, and expanded my knowledge on how certain things are done in JavaScript since I have never coded using it before. For the future, I would definitely love to properly implement a full Pac-Man game, maybe for my final project 🙂

References

keyIsDown(): https://p5js.org/reference/p5/keyIsDown/

Image upload tutorial: https://editor.p5js.org/FAAH/sketches/8s1g0vilF 

arc(): https://p5js.org/reference/p5/arc/

Claude AI: https://claude.ai/new

• Claude was used to understand the biting Pac-Man code from the arc() reference page, for debugging when the ghosts were not disappearing, and for finding the keyIsDown() function. It gave me the solution of creating a ghost class, which I then implemented on my own.