Category: S2026 – Aya

Concept:

At the beginning of this project, I was deciding whether I should create a truth or dare style generative text. After researching different types of questions, I came across “Who’s Most Likely To,” which has a similar concept but felt more suitable for the project. Because the project focuses on generative text, I chose to create an interactive “Who’s Most Likely To” generator. Each click produces a new randomly generated question using words taken from a CSV file.

I wanted the interaction to feel playful and social, similar to a board game night activity. To support this, the background color changes every time the user clicks, so the experience feels dynamic rather than static. I also designed a bold border, a clear title, and a short prompt explaining how to interact with the page so the user immediately understands what to do. I used a playful font to match the tone of the game and make the interface feel light and inviting. The goal of the project is to create a simple interactive experience where the user repeatedly clicks and receives a new question each time.

Embedded code:

Highlight of the code:

 

push();//saves current drawing setting
 stroke(3);
 strokeWeight(20);
 noFill();
 rect(15, 15, width - 29, height - 29);//draws the rect to be framing the canvas
 noStroke();
 pop();//closes the drawing seeting what is between push and pop wont affect the other lines of code

 push();//saves current drawing setting
 textSize(30);
 text("Whos Likely Game", width / 2, height / 4);
 pop();//closes the drawing seeting what is between push and pop wont affect the other lines of code

 push();//saves current drawing setting
 textSize(17);
 // textAlign(CENTER,CENTER);
 text("Click the screen to generate a question!", width / 2, height / 3.5);
 pop();//closes the drawing seeting what is between push and pop wont affect the other lines of code

 translate(width / 2, height / 2);

function randomColor() {
  bgColor = color(random(255), random(255), random(255)); //everytime th emouse is clicked a new color is given to the background
}

I used push () and pop () to isolate the styling of the title and prompt. This prevents their font size and styling from affecting the generated question. It helped me understand that p5.js keeps drawing settings active unless they are reset, so push and pop act like saving and restoring the canvas settings. Instead of calculating the exact position of the generated text, I used translate () to move the coordinate system to the center of the canvas. This allowed me to draw the question at (0,0) and keep it centered regardless of canvas size. I implemented randomness visually by generating a new RGB color on every click. The background change works as feedback, letting the user know their interaction triggered the system while also making every interaction visually unique.

How it was made:

For the process, I first began by implementing the CSV file. I created a CSV containing the word groups I was going to use, specifically the determiners and the verbs. I then loaded the CSV file using loadStrings () and tested that the data was being imported correctly. I mostly used the same structure as the code we used in class, but modified it so it would fit my sentence structure and generate a “Who’s Most Likely To” question.

After that, I added a custom font to improve the visual style. I placed the font file as a . ttf file and loaded it inside the preload () function so it would be available before the sketch starts. Then I applied the font to the text elements.

Next, I created the stationary text elements, including the title “Who’s Most Likely Game” and the prompt “Click the screen to generate a question.” I positioned them using width/2 and height/4, and a similar proportional placement for the prompt. This way, if the canvas size changes, the text stays centered and aligned above the generated question. I then added a border using rect () and adjusted the dimensions so it scales with the canvas size. For the stationary text, I wrapped the styling inside push () and pop () so the text settings would not affect the rest of the sketch.

I also implemented interaction using mousePressed (). Each click refreshes the question and changes the background color to make the experience more playful. I referenced the p5.js example (link in refrences) for this part and adapted the example to my project. To properly position the generated question, I used translate() to center the text on the canvas. Throughout the process, I relied on the examples from class to build the basic structure first, and then gradually added variations and visual improvements.

Reflection and Future ideas:

For reflection and future ideas, I am proud that I was able to understand how to implement important p5.js features such as push () and pop (), the use of translate(), and how to properly structure the draw() function. I also learned how to work with external files by importing a custom font and a CSV dataset into p5.js. Through this project I improved my understanding of transformations and how randomness can be used to generate a dynamic canvas. The background color changes helped me better understand how interaction and feedback can make a simple system feel more engaging. I also became more aware of layout and visual clarity, and how small design choices affect how easily the user understands the interface.

In the future, I would like to expand the project by animating the generated text so it fades in or slightly bounces when a new question appears. I would also like to allow users to input their own names so the game feels more personalized, and possibly add a point system to make it feel closer to an actual game. Additionally, adding small icons or visual elements could make the interface more visually appealing and reinforce the playful board-game atmosphere.

References:

For the color background changing whenever its pressed:

https://p5js.org/reference/p5.Element/mousePressed/

For text randomizer :

https://editor.p5js.org/maa9946/sketches/-4EPAewPV

For refreshing my understanding of transformations:

https://p5js.org/tutorials/coordinates-and-transformations/

Background color labeling and randomizer:

https://editor.p5js.org/aferriss/sketches/B1oYHcN9W

For text font:

https://editor.p5js.org/maa9946/sketches/FUnL3noV1

https://fonts.google.com/specimen/Barriecito

For who’s most likely to questions:

https://www.teenvogue.com/story/most-likely-to-questions#how-to-play

The first example that came to mind that drives me insane is the Apple Magic Mouse. Although it isn’t mentioned in the reading it is an outside example that illustrates several of Norman’s design principles in action and the failure to achieve these principles and its consequences. The mouse cannot be used while charging because the charging port is placed on the bottom which was something that received a lot of backlash due to its inconvenient design placement. When the battery dies, you are forced to stop using it entirely until it charges, which makes the interaction extremely inconvenient. This design breaks several of Don Norman’s design principles. First, it demonstrates poor mapping. The location of the charging port forces the mouse to be flipped upside down, which physically prevents interaction. The physical layout directly maps to the user not being able to use the product. A mouse is meant to support continuous use, but the placement of the port makes its core function temporarily impossible.

Second, it breaks the conceptual model. A user expects a rechargeable device to continue working while plugged in, similar to a phone or laptop. When the mouse suddenly becomes unusable during charging, the user realizes their mental model was wrong. This mismatch between expectation and reality causes frustration. It also violates discoverability. The user does not learn this limitation during purchase or setup they discover it only at the worst possible moment: when the battery dies. At that point, the design interrupts workflow and negatively impacts the entire user experience. The issue appears to come from prioritizing aesthetics over usability. The bottom placement hides the charging port and keeps the mouse visually minimal, but it sacrifices function. This overall poor design is a result of the designer prioritizing appearance over functionality this is similar to Normans friends case where he got stuck in between a set of poorly designed swinging doors, and Norman stated that the” designer aimed for beauty, not utility.” Which is essentially what happened with the apple magic mouse.

A better design solution would be to move the charging port to the front or side of the mouse. The cable could lay flat while the mouse remains usable, improving mapping and maintaining a clean appearance. Another improvement would be a swappable battery, similar to camera batteries, allowing users to replace a depleted battery instantly instead of waiting. By relocating the charging port and optionally adding a replaceable battery, the mouse would better support continuous interaction, align with the user’s conceptual model, and improve the overall user experience.

Some of the author’s principles that caught my attention, and that I think strongly apply to interactive media, are discoverability, understanding, signifiers, and conceptual models. I feel these are the minimum standards that any interactive project should meet, especially when creating an interactive website.

First, discoverability and understanding are essential. When a user opens a website, they should immediately understand what the website is and how they are supposed to interact with it. The user should not have to guess where to click or what is interactive. For example, on the NYU Brightspace website there are clear icons for settings, notifications, and the user profile. These icons communicate visual cues, and because the symbols are simple and familiar, the user can quickly understand their function. The elements are clearly mapped, easy to find, and obviously clickable, which allows the user to comfortably navigate the interface.

Another important principle is signifiers, which Norman describes as indicators that communicate where the action should take place. In interactive media, signifiers guide the user through the experience. For example, on a game website there might be a “Start Here” button that glows while the background is dimmed. This immediately captures attention and shows the user where to begin. Similarly, a button might be a different color, such as red, or use motion like a pulsing animation. In many games, especially during tutorials, an arrow icon hovers over an object to show the player what to tap and how to interact. These visual cues reduce confusion and help the user learn the system naturally.

Another principle is the conceptual model, which explains how something works. This is especially important in interactive media because users need to form a mental understanding of the system before they can fully engage with it. Tutorials are a good example, they teach the user the rules of interaction before the experience becomes logic of the system, they feel more confident navigating it.

Overall, these principles help make an interactive project intuitive rather than frustrating. When discoverability, clear signifiers, and a strong conceptual model are present, the user does not have to think about how to use the interface and can instead focus on the experience itself. This is ultimately the goal of good interaction design.

In reading “The Psychopathology of Everyday Things,” I was struck by how often I have blamed myself for “operator error” when, in reality, I was just a victim of bad design. Don Norman’s breakdown of the disconnect between engineers — who often design with a logic that doesn’t match human behavior — and actual users was eye-opening. One thing that drives me crazy, which Norman doesn’t specifically detail, is the modern design of “smart” appliances that replace physical knobs with touchscreens.

Trying to set a timer on a touch-based stove while my hands are wet or covered in flour is an exercise in pure frustration. The lack of a physical affordance (something to grab and turn) and the absence of immediate haptic feedback make the interface feel fragile and unresponsive. This could be vastly improved by following Norman’s principle of discoverability –incorporating tactile controls like physical dials that naturally signal how they should be operated without me having to look away from my cooking to navigate a sub-menu.

When applying Norman’s principles to interactive media, I see a clear path forward through the use of signifiers and natural mapping. In a digital environment, we don’t always have physical objects, so signifiers become our primary tool for communication. For example, in a complex mobile app, instead of hiding features behind ambiguous icons, designers should use signifiers that clearly communicate “where the action should take place”. Furthermore, applying natural mapping—like having a volume slider that moves vertically to represent “more” or “less” — takes advantage of biological standards that lead to immediate, intuitive understanding. By focusing on human-centered design and assuming that users will make mistakes, we can build interactive media that feels like a helpful collaboration rather than a “fight against confusion”.

1. Sketch and Code

Code

2. Overview

For this assignment, I moved away from abstract shapes toward a conceptual exploration. The project uses Object-Oriented Programming to manage a dense grid of hundreds of independent “Bit” objects. The artwork functions as a digital ecosystem that transitions from a chaotic, flickering state of binary data to a structured, symbolic heart shape when the user provides “attention” via a mouse click.

3. Concept

My goal was to visualize the friction between cold machine logic and human emotion. I wanted to create a “hidden” layer of data that only reveals itself through interaction. The aesthetic is inspired by classic terminal interfaces — matrix-green on a deep black background — but the focus shifts to how human interaction (the mouse) acts as a lens, organizing random 0s and 1s into meaningful language and iconography.

4. Process and Methods

• • I populated the canvas using a nested loop that instantiates Bit objects which allowed every single character on the screen to have its own internal state, managing whether it currently displays a binary digit or a human word.
  • To make the background feel “alive,” I implemented a probability check within each object. By giving each bit a 2% chance to flip its value every frame, I created a shimmering effect.
  • Instead of a simple radius, I utilized a heart curve equation which creates a high-definition mathematical boundary that filters the grid, determining which objects should “corrupt” their binary state into human text.

5. Technical Details

• • Unlike a standard distance check, which creates a simple circle, I implemented an algebraic heart curve. The challenge was that p5 coordinates are pixel-based and grow downwards from the top-left (0,0). To make the equation work, I had to translate every point in the grid into a normalized local space relative to the cursor.

// 2. COORDINATE NORMALIZATION:
// Transforms pixel coordinates into a math-friendly scale (-x to +x) centered on the mouse position.
let x = (this.pos.x - mouseX) / 150; 
let y = (this.pos.y - mouseY) / 150;

// 3. ALGEBRAIC HEART CURVE:
// Formula: (x^2 + y^2 - 1)^3 - x^2 * y^3 <= 0
// If the result is negative, the coordinate is inside the heart shape.
let heartEquation = pow(x*x + pow(-y, 2) - 1, 3) - pow(x, 2) * pow(-y, 3);

// INTERACTION LOGIC
if (mouseIsPressed && heartEquation < 0) {
  // If inside the heart boundary, reveal a human word
  // 'frameCount % 20' creates a shifting glitch effect within the heart
  if (this.currentText.length === 1 || frameCount % 20 === 0) {
    this.currentText = random(humanWords);
  }
} else {
  // Revert to background binary logic
  this.currentText = this.binaryState;
}

• • The background’s “breathing” light effect is driven by a sine wave. By adding the x coordinate of the object to the frameCount inside a sin() function, I created a horizontal phase-shift, resulting in a light ripple that moves gracefully across the grid.

// 4. TRIGONOMETRIC PULSING:
// Uses a sine wave to cycle brightness based on time and X-position
let pulse = sin(frameCount * 0.05 + this.pos.x * 0.02);
let brightness = map(pulse, -1, 1, 60, 200);

6. Reflection

This project was a bit of a shift in my style of works, where I dipped more into the artistic side rather than just the technical. My main challenge was mastering the balance between the machine code and the heart. Initially, the heart appeared distorted because I hadn’t accounted for the rectangular aspect ratio of the canvas. By learning to normalize the X and Y scales independently of the pixel count alongside changes in sizes, I achieved a more crisp silhouette. Using push() and pop() to isolate the font styles of individual objects allowed me to create a dual-identity system where “Machine” and “Human” layers exist in the same space without visual conflict.

7. Resources

• • https://p5js.org/
  • https://mathworld.wolfram.com/HeartCurve.html

When I read about Chapter 1 of The Design of Everyday Things, the first thing that comes to my mind is how confused I felt using Brightspace when I first came to NYUAD. The author explains that when something is designed poorly, people usually blame themselves instead of the system that created it. That stood out to me because that is exactly how I felt. I kept thinking I was the problem and that I just was not understanding how to use it I had trouble when uploading my assignments,  and when trying to find professors’ feedbacks. Before NYUAD, I used Google Classroom, and everything there felt simple and clear and it was easy to use and understand. Brightspace felt crowded and all over the place which made it hard to navigate. After reading this chapter, I realized my frustration was not only about me. It was also about the design itself.

The chapter also talks about how designers sometimes assume everyone thinks the same way they do. That made me think about how different people use technology in different ways. Some people grow up using all kinds of apps and websites, so they get used to complicated layouts and things that could be considered “confusing” to other people. Others do not have that same experience, so they might feel lost more easily. I noticed this with WordPress too. The first time I used it, I had no idea where anything was. It felt overly crowded and confusing. After using it many times, I slowly got more comfortable. That helped me understand why designers need to think about all kinds of users, not just people who already know similar platforms.

There are also websites that feel easy right away. To me Amazon is a good example. The search bar is easy to find when trying to search for the product you’re looking for, the cart is always in the same place and when you click it you could see what you added there, and checking out or tracking an order is simple. You do not have to guess what to do next. Even simple games like Wordle are easy to understand and use. So it gives the idea that the interaction they offered suits any type of person even people that don’t even know how to use technology. When you open it, you already know what to do without instructions. That shows how good design can make something feel natural to someone.

Overall, this reading made me pay more attention to the design of the things I use every day. I started noticing how much design affects whether something feels stressful or simple. It also made me think that simple design is usually better. I am still wondering how designers decide how much is too much. Adding more features can be helpful, but it can also make things more confusing. Finding the right balance seems difficult, and I am curious about how designers figure that out.

My concept

For this week’s assignment, I made a generative fortune cookie. I wanted to create something that is fun to interact with, but also use what we learned about loading data from a CSV file. Instead of letting the computer pick totally random words, I organized my CSV so each row had the same structure: subject, adjective, action, object, place, and warning.

I liked the idea of copying how real fortune cookies work so in my sketch, every time you click, the program picks one row from the CSV and turns it into a fortune. This makes the project interactive and gives it that “mysterious” fortune cookie feeling not knowing what you will read next. I also tried to center everything so it looks like an actual fortune paper coming out of a cookie.

Highlight of my sketch

One part of my project that I’m proud of is how I drew the fortune paper. I wanted it to look clean and centered, so I made a separate function called drawPaper() just for that. This helped keep my code organized and made it easier to adjust the design. The function draws a big white rectangle with rounded corners to look like the paper sticking out of the cookie, and then I added a soft shadow underneath it to make it stand out more.

Here’s the code for that part:

function drawPaper() {
  noStroke();
  fill(255);

  rectMode(CENTER);
  rect(width/2, 360, 360, 110, 12);

  fill(0, 0, 0, 25);
  rect(width/2, 365, 360, 110, 12);
}

 

Embedded sketch

How this was made

I made a CSV file where every row followed the same pattern. Keeping the format consistent was important because if one row had a missing comma, the whole sentence would break.

In preload(), I used loadStrings() to load the CSV and loadFont() to load my font that i downloaded from google fonts. In setup(), I created the canvas, set the font, centered the text, generated the first fortune, and used noLoop() so the sketch doesn’t constantly refresh.

The main logic happens in generateFortune(). I used random() to pick a random line from the CSV, then split() to break it into pieces. Each piece goes into a variable, and then I build two full sentences using those variables.

The mouseClicked() function calls generateFortune() and then redraw(), which updates the sketch only when the user interacts (by clicking it basically) . This makes it feel less chaotic.

Reflection and future ideas

References

p5.js documentation I used the official p5.js reference to look up functions like loadStrings(), loadFont(), random(), split(), noLoop(), redraw(), text(), triangle(), and rect().  https://p5js.org/reference/

Google fonts I downloaded the font I used in my sketch from Google Fonts. https://fonts.google.com/

CSV file I created my own CSV file for this project and formatted it myself.

Ai usage I used AI to help me brainstorm and generate some of the sentences for my CSV file (subjects, adjectives, actions, objects, places, and warnings). I edited and formatted everything myself when creating my own CSV file on google sheets.

One of the reasons products fail in real life is due to over-engineering. I know this wasn’t explicitly mentioned in the chapter, however it fits the description of designing a product that solves a simple problem in an complicated way. However, besides following the perspective of an engineer when designing the products, there is another play at hand. Control, many don’t realize it but over-engineering are done on purpose to control the people. It’s not that these people don’t understands how humans work, rather they understand how they work exactly. What do I mean by that?

Let us take printers for examples. Modern printers are so frustrating to work with, I absolutely hate dealing with them, you have to download their specified app, then press some button 2 times for 5 seconds or some nonsense to turn on blue tooth mode, and honestly half the buttons on the printer you will never end up using in your life. But that’s not it, it’s the fact you need all cartridges filled to print something.

Let’s say you want to print a document in black and white, and you don’t have any colored ink cartridges, the printer won’t let you print the document unless you have everything filled. Not to mention you need to use the printer’s brand specific cartridges which are most probably overpriced. All this is done so that the customer keeps on buying only their products for the printer. Besides my vent, it is true that most of the time products are over-engineered due to engineer’s not taking in the perspective of the average Joe.  For the midterm project specifically, I plan on implementing proper feedback and instructions so that the user feels in control the entire time, and don’t have to second guess anything they do while playing the game.

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.