Sketch and demo video below!

Concept:

This took a while to make but I am quite happy with how it turned out! First my reference for this was this Reddit post I saw about the visualization of a 4 bit adder. I thought it would be a perfect idea for data visualization, going back to the roots of how a computer performs calculations. This idea gave birth to this p5.js digital version.

Implementation:

The core logic of this code was simply drawing paths and gates at the time I specified them to draw them at. I will show an example of what I mean.

The coordinates are drawn manually, in a segments.

let b0_pA_to_X1 = [
  { x: 420, y: 630 },
  { x: 420, y: 600 },
  { x: 210, y: 600 },
  { x: 70, y: 600 },
  { x: 70, y: 450 },
];

let b0_pX2_to_sum = [
  { x: 165, y: 320 },
  { x: 165, y: 200 },
  { x: 810, y: 200 },
  { x: 810, y: 100 },
];

let b1_pX2_to_sum = [
  { x: 320, y: 320 },
  { x: 320, y: 250 },
  { x: 770, y: 250 },
  { x: 770, y: 100 },
];

And what I mean by segments, is the areas highlighted with a red circle, any part of the path which switches direction is the segment I note down, and we use a drawpath function to draw a straight line from one segment to the next.

Now this is the paths we set, but how do we draw them? Once we click the start button, we have a variable that keeps track of this and when it is true we start drawing everything. Example:

if (timer > 1250 + 9500 * 0.5) {
  drawPath(b2_pA_to_An1, getP(1250 + 9500 * 0.5, 1500), cB2);
  PathStart = 1250 + 9500 * 0.5;
  PathDur = 1500;
  if (timer > PathStart + PathDur) {
    drawAND(
      917,
      550,
      50,
      40,
      cAnd,
      getP(PathStart, PathDur),
      startT + PathDur + PathStart
    );
    if (timer > PathStart + PathDur + 1000) {
      drawPath(b2_pAn1_to_Or, getP(PathStart + PathDur + 1000, 5000), cB2);
    }
  }
}

Here we check if a certain time has passed before we start drawing the path of the 3rd bit that goes from the first point to the first and gate. We use our drawpath function to get it drawn with a duration of 1.5 seconds that we specified. And since is the last path to the gate that we are drawing it to, we draw the and gate right after! Repeat this with every single path and gate and we have our sketch done… (Absolutely tedious)

Before moving on to the code I am proud of.

The nToB function converts a number no into its binary representation with n+1 bits. It works by checking each bit from the most significant to the least significant:

– no >> i shifts the number i bits to the right, bringing the target bit to the least significant position.

– & 1 extracts that bit (0 or 1).

– b.push(…) adds the bit to the array.

The result is an array of 0s and 1s representing the binary digits of the number, with the most significant bit first.

I am quite proud of the function I wrote that draws the paths and here is why.

// We use a signal here to keep track of everything. Uses progress (pr) to interpolate coordinates between wire nodes
function drawPath(pts, pr, col) {
  push();
  drawingContext.shadowBlur = 15; // Creating neon glow through canvas shadow context
  drawingContext.shadowColor = color(col);
  stroke(col);
  strokeWeight(2);
  noFill();
  let segs = pts.length - 1;
  let cur = floor(pr * segs); // Identifies which wire segment the signal is on
  let sPr = (pr * segs) % 1; // Progress within that specific segment (0.0 - 1.0)

  // Draws all wire segments that the signal has already "charged"
  for (let i = 0; i < cur; i++)
    line(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y);

  if (cur < segs) {
    // lerp() calculates the point between A and B based on sPr percentage
    let x = lerp(pts[cur].x, pts[cur + 1].x, sPr);
    let y = lerp(pts[cur].y, pts[cur + 1].y, sPr);
    line(pts[cur].x, pts[cur].y, x, y);
    fill(col);
    circle(x, y, 4); // The "head" pulse of the path flow
  }
  pop();
}

The function itself takes 3 parameters, the points which are arrays of segment objects, the current progress of our path, and the color of the path.

What do I mean by segment objects? An object in java script can be made as such: {x:400, y:500} for example, where x and y are properties of the object, and 400 and 500 is the value of these properties (It is quite similar to how dictionaries work in python, if you wanna read more on java script objects go here). And for each path we have an array of these segment objects. For the progress, there a small function that takes in the start time, and the duration of the path and calculates the progress based on how much time has passed. And finally the color simply takes in a hex value. After that we define the design of the path and then we get into the main logic of the function.

The function itself is pretty well commented so I will briefly explain how the logic goes.

We first check how many segments the path has, and identify what segment we are currently on, and how much have we progressed through that specific segment (This is calculated by using the duiration we want givern in the code). We have a loop that draws every segment we have completed on screen, but how do we draw the incomplete segments giving us that smooth animation? Simple! That is where linear interpolation comes in play (Really look into this function if you are doing animations it is splendid).

If our current segment is before the last segment, we draw the path of the current segment, but we don’t wanna draw the full thing if we have not reached it yet yes? that is where we use the variable that tracks how much of the segment we traversed. So for example if we traveled 60% of the way of segment 2, we fully draw segment 1 and draw up to 60% of segment 2. We draw a circle at the point we are to have that leading circle animation of the path. And boom! That is how we get the smooth animation of the paths being drawn! Pretty nifty no?

Anyway besides that, the gates were simply messing around with bezier curves and a lot of trial and error till I got the shape I wanted.

Reflection:

I am very happy with how it turned out, however I wish to eventually remake this with a more… automated logic, since drawing everything manually was a pain, and if we have more than 4 bits this would simply take way too long to do. So if there is something I would want to improve about it, is to try lessen the manual aspect of writing this code and instead try to automate it, maybe with random segment points within a certain boundary could work.

 

My Concept:

For this week’s assignment, I wanted to create something that felt relatable and personal instead of just random words being generated. Since we learned how to load data from a CSV file and generate text from it, I thought it would be fun to make a NYUAD Advice Generator. The idea was to take simple words from a file and turn them into small pieces of campus advice that feel random, questionable, but still kind of make sense.

I liked the idea of the computer choosing the advice instead of me hardcoding every sentence, because it makes the sketch feel unpredictable and sort of personalized in a way. Every time you click, you get something different, which makes it feel more interactive and less fixed and predetermined. I also wanted it to look clean and centered, so it feels like a actual little advice card instead of just text floating on a screen.

Highlight of Sketch:

One part of the sketch that I am most proud of is how I organized the text generation into a fucntion called generateAdvice(). Organizing all those lines of code into one function made it so much more organized and easier for me to call the function rather than repeatdly rewriting the lines of code.

// I created a function for the lines of code that generate the advice for a more efficent and easy to use code, and this way i can call the functiin anywhere in my code without having the repeatdly write these lines again.
function generateAdvice() {

  //these lines of code were heavily inspired by the random poem generator example from class.

  // this line picks a random line from advice.csv file.
  let randomLine = lines[int(random(lines.length))];

  // this line splits the words from the array by commas
  let row = split(randomLine, ",");

  // after splitting the csv line, row is now an array and each position in the array holds one word from the the advice file, and these lines of code  extract each word using the index constants i defined at the top of the code.
  
  //these lines of code are similar to the poetry example from class but are organized in a clearer and more consice way that fits my code.
  let scenario = row[SCENARIO];
  let action = row[ACTION];
  let item = row[ITEM];
  let location = row[LOCATION];

  // these lines of code build the advice clearly.
  adviceLine1 = "If you feel " + scenario + "...";
  adviceLine2 = action + " with your " + item + ".";
  adviceLine3 = "Go to " + location + ".";
}

I am also proud of how I centered the card and used width and height instead of random numbers. That made the layout feel more intentional and organized. It was defintely a small detail, but it made the whole sketch look more put together and versatile for all screens and canvases.

function drawCard() {

  // centered card dimensions usinf height and width to avoid magic and hardcore numbers.
  let cardWidth = width * 0.7;
  let cardHeight = height * 0.7;

  //// the rect() starts drawing from the top left corner, so if i want the card in the middle of the screen,i have to move it left and up by half of its size, and this makes the card sit exactly in the center. x being horizontal position and y being vertical.
  let cardX = width / 2 - cardWidth / 2;
  let cardY = height / 2 - cardHeight / 2;

Embedded Sketch:

How This Was Made:

I started by deciding what kind of text I wanted to generate, and once I chose the NYUAD advice idea, I created a CSV file with single words separated by commas, just like the poem words example from class. Each line followed the same structure so that the program could read it properly, and the sentences/advice would make sense to a certain extent.

Then in my code, I used loadStrings() inside preload() to load the file before the sketch starts. In draw(), I used random() to pick one line from the file and split() to separate the words by commas. After splitting, the row becomes an array, and I used the index positions to take out each word from the array

.Once I had each word stored in its own variable, I built the final advice sentence using string concatenation (which is a fancy term that means putting pieces of text together), just like the poem generator example from class. I then displayed the text using text() and centered everything on the screen. I used noLoop() so the advice only changes when the user clicks, and mouseClicked() to restart that loop. This makes the sketch interactive instead of constantly refreshing on its own.

Reflection and Future Ideas:

Overall, I think this project helped me better understand how loading data works in p5. At first, I didn’t fully understand what split was doing, but after working through it step by step, I realized it’s just turning a string into pieces that I can access individually. That made the whole idea of generative text feel less intimidating and confusing.

There were definitely small moments of confusion, especially when thinking about where the text generation should go and how it compares to the professor’s example. But figuring that out helped me understand the structure of draw(), noLoop(), and mouse interaction much more clearly.

In the future, I would like to experiment with more complex text structures, maybe adding more variables per line or creating multiple sentence formats. I also think it would be interesting to combine generative text with animation so the words themselves feel more dynamic and for the whole sketch to just be more entertaining visually. Overall, really proud of this cute little sketch.

Refrences:

• https://p5js.org/reference/p5/loadStrings/
• https://p5js.org/reference/p5/split/
• https://p5js.org/examples/calculating-values-random/
• https://p5js.org/reference/p5/loop/
• https://p5js.org/reference/p5/noLoop/
• https://p5js.org/reference/p5/textAlign/
• https://editor.p5js.org/Aya_Riad/sketches/fIy61R_jf
• I used Generative AI for feedback, which is how I came up with the idea of instead of putting all the lines of code under the draw function, to create a generateAdvice() function for a more organized code. It also helped me generate the words for the csv file, as it was quite difficult to create that many variations.

This reading is probably my favorite reading so far. It triggered me to reflect on various objects we encounter daily that are not very efficient, and have not had a change in their mechanisms for years. When reading about mapping lights to their switches, it reminded me of my own house, where we have a set of switches near the main door.

Even after living in this house for around 10 years, I still flick multiple switches until I find the one I need. The placement of the switches is especially inefficient because some of these switches are for lights outside the house in the front yard, and some are for lights inside the house.

It took me a while to think of something that functions inefficiently besides what was already mentioned in the reading, because I feel like Norman covered some of the core ones. Then, I remembered my electric toothbrush. My electric toothbrush is the most basic Oral-B model, and it only has one button (as do most electric toothbrushes). On top of this button, the word “timer” is written, indicating that this button is a timer. However, this button is also the same button I use to turn on the toothbrush. I was always confused about how to trigger the timer, and I did not have access to the manual to check. It took me around a year to realize that the toothbrush vibrates in a specific pulsing pattern for a short 2 seconds after 2 minutes of being on. I always wondered why the toothbrush would randomly vibrate weirdly mid-brush, and then I connected the dots. Using Norman’s definitions, this is an issue with the feedback of the system. How was I to know that the timer had started? While to me specifically, I think something like a light or a sound would’ve been a better indicator for the timer, I actually think this design is the most accessible design. It means deaf and blind people can still sense the toothbrush’s vibrations to know the timer is up. So, I think sometimes designs can seem inefficient to some people, but in reality they are designed this way to make them functional to everyone no matter their abilities.

This is a clear example of an item that affords timing your brush, but has poor design with signifiers that allow the usage of this feature. Norman’s argument on the importance of designing products keeping in mind the complexity of humans and eliminating the thought that how to use a feature you create will be obvious to its users can be applied to our interactive media projects. Interactive media is all about experience and interactivity. Without clear instructions from the artist on how to interact with their artwork or their game, users cannot maximize their experience. Imagine how frustrating it would be for a user to play a game with no instructions on how to control the game or about the main goal of the game. The game loses its purpose to entertain, because the user is frustrated with figuring out how to work the game.

For the concept of my work, I based on what I partially developed from week 3 where last time I did a bubble generative text from the mouth drag, and how after dragging the mouse after the output would make lots of bubbles react, thus this time I did greetings and simple phrases from each of the languages that I speak. From watching the video tutorial 1.4 on JSON Data I was able to break it into 3 sections language, punctuation, decoration where for each greeting or word language I set a random variable deco where output randomly decides to go along with language, punctuation and decoration respectively. Once again ranking all of the arrays within the square brackets.

The key codes that I am proud of were the code stamped texts: Where I let text = array and where I set the function to put the line 56 (main text) and line 61 the emoji run it into the array. Secondly, for the IF text length I inputted the function where if text length is more than 20 this means that in the 21st click after running output my result. Would come out as. The first phrase that showed in the first click after running the output would disappear . Also lastly I inputted a sin(frameCount) function as currently my code after running output has some blinking going on so I ran it into a way that it would appear as wave that run smoothly.

<iframe src=”https://editor.p5js.org/po2127/full/s0dQdQGk0″></iframe>

https://editor.p5js.org/po2127/full/s0dQdQGk0

references:

https://p5js.org/reference/p5/loadJSON/

Dan Shiftman Array YouTube 7.1-7.5

In terms of what I think I could improve in the future would be to play around with functions that everytime that a text have “burst up” and burst everytime that we click. So overall is to explore more with varieties and different animations , etc.

Here is my final sketch:

Concept:

I really liked the map idea that we did in class, so I wanted to do something similar but on a smaller scale. I chose Abu Dhabi and decided that I wanted the map to show something useful, like public resources. I chose 10 police stations and plotted them on a map image I found on Google. The goal was too amek he map simple and interactive so that people could click on the locations and see the name and phone number of the station.

Code Highlight:

  //draw popup if active
  if (popup) {
    drawPopup(); // it calls the function to draw the popup overlay and the text
  }
}

function mousePressed() {
  let clicked = false; // to track if the circle was clicked
  for (let i = 0; i < stations.getRowCount(); i++) {
    let x = stations.getNum(i, "X"); //to get the circle x
    let y = stations.getNum(i, "Y"); //to get the circle y
    let name = stations.getString(i, "Name"); //to get the station names
    let phone = stations.getString(i, "Phone"); //to get the station phone numbers

    //check if mouse is inside the circles
    if (dist(mouseX, mouseY, x, y) < 10) {
      popup = true; //show popup
      popupText =
        name +
        "\nPhone: " +
        phone +
        "\n" +
        "click anywhere on the outside to return to map"; //set popup text, with /n to set up the phone number on a new line underneath it, same with the insturctions to leave the popup
      clicked = true; //mark that a circle was clicked
    }
  }
  // If clicked outside any circle to hide the popup
  if (!clicked) {
    popup = false;
  }
}

//to draw the popup with the info
function drawPopup() {
  // Semi-transparent overlay
  fill(0, 0, 0, 150); //transparent grey overlay for the background
  rect(0, 0, width, height); //to cover the entire canvas

  // White popup box
  fill("white"); //color for box
  rect(100, 150, 300, 150, 10); //rect in center with rounded corners

  // Text inside box
  fill(0); //black text
  textFont(myFont); //outside font
  textSize(18); //size
  textAlign(CENTER, CENTER); //to center the text horziontally and vertically
  text(popupText, width / 2, height / 2); //to display the popup text
}

The part of the code I’m particularly proud of is the interactive circles, where you click on the circle, and a pop-up box with information appears. I created a function called drawPopup() to organize my popup drawing code, where I call it manually when the popup boolean is true.

Reflection/future work:

I started this assignment using the same concept as the map visualization we did in class. In the class example, we used latitude and longitude values, which are good for geographic visualizations. But I changed the method to manual X/Y coordinates because I’m using a custom image map, so I needed precise visual placement instead of mathematical mapping. I manually assigned x and y coordinates for each police station and placed them into my Excel sheet, so that they would visually match their positions on my map. I also added interaction logic so users can click the circles to see information, which turns the project from a static visualization into something more interactive using the mousePressed() and dist() functions. I also added a grey transparent overlay behind the pop-up to make it clearer and easier to read.

I used ChatGPT mainly for debugging because I would make silly mistakes like writing CVS instead of CSV, and had a hard time finding the problem with why my sketch wouldn’t load. I also used ChatGPT because I added the title and instructions text and placed it in the middle, but every time I interacted with the circles, the text would be placed on the left of the canvas. So, ChatGPT said it was because of my textAlign(CENTER, CENTER); and it told me to set alignment only for the popup, and to reset it to LEFT, BASELINE before drawing any other text. That helped me better understand how the text-align feature worked as well. I also used a Google font for my text: https://fonts.google.com/selection 

And I searched up on Google how to make a pop-up using a boolean, and I took inspiration from this sketch I found: 

https://editor.p5js.org/YifanLiu/sketches/HkcS9wXo-#:~:text=let%20on%20=%20false;,(204%2C%20153%2C%20255) 

But overall, I mainly used the example we did in class and the lecture slides for reference. I also took some of the concepts from this week’s reading into consideration and provided clear instructions on how to manage the map. For future improvements, I would like to make my animations smoother and maybe add zooming or panning for better navigation on the map, but this assignment definitely helped me understand the different ways we can portray data. 

One thing that really drives me crazy is when websites log me out suddenly while I’m still working on something. I could literally be in the middle of typing a really long text or even filling out a form that’s like 20 questions, and suddenly the website automatically takes me back to the login page, and everything I wrote is gone and erased. It makes me feel so frustrated and annoyed at myself and the website. However, after reading Norman, I realized this is a failure of feedback and signifiers. My mental model assumes that if I’m actively typing, the system will know that I’m there. But clearly it’s running on some sort of invisible timer that I can’t see, and there’s nothing to signal that I’m about to lose everything I worked so hard on. I think this could be improved so easily by adding a simple message like “You will be logged out in 2 minutes” or even by just automatically saving drafts. Just anything really that respects the fact that users are human and not always aware of the system’s hidden rules.

If I apply Norman’s design principles to interactive media, I would focus on making those hidden rules visible in a way. I would make sure there are clear signifiers and signals showing what’s happening and clear feedback so users don’t feel confused or suprised by sudden things that the system outputs. I would also design while keeping in mind that people will make mistakes and are prone to getting distracted, because that’s just normal human nature. The reading honestly made me rethink how often we blame ourselves for doing things wrong or not understanding when really the design just didn’t communicate those rules clearly. Overall, a really eyeopening read and made me realize that good dystems should make the user feel very capable rather than lost and confused.

I&M Reading
Reading this chapter made me really think how I would interact with everyday objects in a very personal way. As I used to assume that if I struggled with something simple such as a confusing door, a complicated appliance, or a strange interface I now think it was my own fault. The reading argues that these frustrations usually come from poor design, not user incompetence, which felt astonishing and an eye opener. The examples about doors and household devices made the ideas feel very realistic, because they reflect small annoyances we experience almost daily without questioning them. It made me realize how much of my behavior is lead by intuitive signals from objects, and how frustrating it becomes when those signals are kind of unclear or misleading. What drives me crazy is when everyday interfaces have too many unclear buttons, hidden functions, which could be improved by using clearer signifiers, simpler layouts, and immediate feedback so users do not have to guess what to do.

What I found especially meaningful is the emphasis on human-centered design and the idea that designers should adapt to human psychology, not expect humans to adapt to machines. This perspective feels very relevant in today’s technology-heavy world, where many products are powerful but not intuitive. The discussion about discoverability, signifiers, and feedback made me more aware that good design should communicate naturally without needing long instructions. Overall, I think the reading is insightful because it shifts the way we see mistakes as instead of blaming users for the confusion, it encourages us to critically evaluate the design itself, which feels like a more human and realistic approach to technology and everyday life.

One thing that drives me crazy that was not mentioned in the text is when I go to a bathroomm at a restaurant or any other place and I try to use the sink, but the sink does not turn on/I don’t know how the sink turns on. I believe one way that could be fixed is by having clear symbols on the handles or visible handles to indicate where and what motion to do. Or a poster on the wall to show how to open the sink.

One way I would incorporate some of Norman’s principles of design into my work is by having more indicators of what the user is supposed to do to activate my sketch’s interactive element. For instance, in my bubble-pop design, it is unclear for my users what to click or what to try to do as there are no indicators that the bubbles are meant to pop. I would therefore include more explicit instructions.

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.