Author: Shaikha Mhara Al Nuaimi

Concept

My midterm project is an interactive drink‑building experience called Boba Builder. The idea is simple, the user moves through different screens to create their own custom boba drink. It is an interactive and customizable experience and  where they choose a tea flavor, add toppings, decide on ice, pick a straw or umbrella, and then see the final drink displayed at the end.

Design

For my design I want my game/ interactive experience to have a playful theme with mostly colors being pastel, I want the theme to be a cute and fun experience. I want my game to be understood easily and for the player to be guided through each screen knowing what to do and everything is easy to follow.

The flow of the experience is straightforward: it starts on the main screen, then moves to the tea selection, followed by the pouring stage. After that, the player chooses their toppings, decides whether they want to add ice, and then decorates the drink. The final screen shows the completed boba based on all the choices the user made.

For the final outcome of the boba, I’m hoping the completed drink will look similar to the boba on my start page, with the ice, fruit, umbrella or straw, boba, and the different tea flavors all coming together after the user picks how they want their customizable boba to look like.

I drew the background in Procreate, and I plan to create all the other visuals there as well before importing them into p5.js.

Challenging Part

Since I want to draw my own visuals for almost everything, the most challenging part for me is handling all the visual assets while keeping everything aligned in fullscreen mode. I need to make sure they load correctly and stay positioned properly on different screen sizes. Currently, any click on the start screen takes you to the next page. I’m going to fix this so the game only starts when the player actually clicks the start button.

Reducing Risk

To reduce the risk I will probably load everything as soon as possible so that it would be easier for me to experience how everything will align together and I will look on p5’s reference to see if there is anything that would help with ensuring all assets will be fit to the full screen and will be positioned properly on different screen sizes. To avoid the issue of the screen changing on any click, I’m going to find tutorials to help with this issue and try finding something on p5 references that might help. This means the game will only start when the player actually clicks the start button.

References

• p5.js Reference: keyTyped() Used to implement the “press f for fullscreen” interaction. https://p5js.org/reference/p5/keyTyped/
• p5.js Reference: windowResized() Used to keep the canvas responsive when the browser window changes size. https://p5js.org/reference/p5/windowResized/
• Fullscreen Example: Class Slides (Week 5)
• Google Fonts: Ribeye Marrow font used in the project https://fonts.google.com/specimen/Ribeye+Marrow

When I think about computer vision, I usually think of it as the way computers “see,” mostly in apps, websites, or phone features. After learning more about it, I realized that computers do not see anything the way humans do. Humans take in a whole scene at once, but computers break everything into tiny pieces like pixels, brightness, and movement. They notice small details that we might miss, but they also miss the bigger picture that humans understand naturally.

My own experience with things like Face ID and Snapchat filters shaped how I reacted to the topic. Unlocking my phone with my face feels normal and easy now, and Touch ID on a Mac makes things even faster. At the same time, I do not trust every technology that tracks people. I feel fine when big companies use it, because I honestly have the mentality of why would they want to use my data out of  the billions of people using their platforms. However if it is a random app or something that could be hacked, then I wouldn’t want them to easily track me. That made me understand why computer vision based artworks can feel both creative and unsettling at the same time.

I think surveillance in public spaces is important for safety, but using it in art is kind off weird. It can be meaningful, but it can also feel invasive depending on how people are being watched. The idea of a machine constantly observing people makes me a little uncomfortable and weirded out honestly, but also curious about how far this technology will go. I do not think computers will ever fully understand human behavior the way humans do. Emotions, intentions, and intuition are probably never going to be experienced by computers.

If I were to design an artwork with computer vision, I would focus on tracking gestures or movement instead of faces. That feels less personal and more playful and fun to experience. I also think artists should have limits when using real people as data, especially when people do not know they are being recorded. Overall, learning about computer vision made me think more about how much we rely on it and how it affects both everyday life and creative work.

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.

Reading Chris Crawford’s chapter made me realize that I never really thought deeply about what “interactivity” actually means. I always assumed anything on a screen was interactive, but Crawford explains that real interactivity is like a conversation where both sides listen, think, and respond. When I compare that to the apps and games I use the most, like TikTok, Tetris, and Block Blast, I can see how they fit his definition. These apps react to what I do, and I react back, so it becomes a cycle. Crawford also talks about how the word “interactive” gets thrown around too much, and I agree because I’ve seen products or websites call themselves interactive even when they don’t respond to the user at all. Sometimes a site has so many buttons, menus, or pop‑ups that it feels more overwhelming than interactive. His point about needing two “actors” made sense to me because a system that only shows information without responding to the user isn’t really interacting. It made me think about how much I value visuals, animations, and feedback because those things make a system feel alive and responsive, not just decorative.

The reading also made me reflect on my own p5 sketches and how they fit into Crawford’s idea of interactivity. So far, I’ve made things like my panda portrait and class exercises with bouncing balls and patterns. These sketches react in small ways, but they don’t fully “listen, think, and speak” back to the user yet. Crawford’s definition made me realize that I want my sketches to respond more directly to what the user does. I want to add animation, movement, and user‑controlled elements so the sketch feels like it is reacting to the person using it. I also want to make something that feels more like a small game or a mini‑movie, where characters move and interact with each other. The reading helped me understand that interactivity is not just about visuals but about creating a back‑and‑forth experience. By the end of the semester, I hope my sketches feel more alive and fun, and I want users to enjoy interacting with them. I’m inspired by old pixel games from the 2000s because they feel nostalgic, simple, and playful, and I want to bring that feeling into my work while also making sure the interaction follows the cycle Crawford describes.

My concept:

For this week’s assignment, I created a generative artwork using arrays and objects. I followed the bouncing bubbles example we worked on in class, but I changed it to make something more colorful and fun. The main idea is that the user can click anywhere on the canvas to add bouncing circles. Each circle has a different size, speed, and color because all of those values are random.  I wanted to keep the idea simple while practicing the coding concepts we learned, especially storing objects in arrays and updating them inside a loop.

let shapes = [];

Embedded Sketch:

Code Highlight:

One part of the code I’m proud of is the loop that updates all the shapes:

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

When I watched Casey Reas’ Eyeo talk on Chance operations, I started thinking differently about how i use control in my art. Reas explains that the computer is not just a tool that follows orders, but a creative system that can use chance in a planned way. One part that really stood out to me was when he talked about artists like Sol LeWitt, where the instructions are the artwork and the final image is just one version of many possibilities. That made me realize that art does not always need to be fully planned to be meaningful. I noticed that in my own work I usually avoid randomness, especially when I paint portraits. I like to control the faces, expressions, and details, and I feel like adding random elements could ruin the image I worked hard on. I like knowing what the final result will look like and follow the structured plan of how it’s suppose to turn out. But Reas helped me see that even when a system creates something unexpected, it still comes from the artist’s ideas and decisions. Making me realize even when mistakes are made, sometimes it still helps us see that it can turn the thing we are creating better (whether it’s planned or not).

Before watching the talk, I thought randomness mostly made things messy and out of control. Now I understand that randomness can be planned and guided by rules. Reas explains how simple systems can create complex behaviors, and that really changed how I think about art. If I use chance in my own projects, I want to start with movement. Movement creates emotion and makes the artwork feel alive, and letting it behave in a slightly unpredictable way can make it more interesting. I also think randomness can make my projects more unique instead of looking repetitive. At the same time, I believe there needs to be a balance between chaos and structure. If a project is formal or important, too much randomness can feel a bit overwhelming, confusing or disrespectful. For me, the best balance is when I control the main rules but let chance decide small details, like position or scale. After watching Reas’ talk, I see chance not as something that ruins my work, but as something that helps me explore new ideas and think differently when working with projects, art, assignments, writing and etc.

My Concept

For this assignment, I wanted to create something simple, structured, and fully based on the techniques from the Week 2 slides. I decided to build a grid of squares using nested loops, just like the examples shown in class. But instead of keeping the grid static, I wanted it to feel a little more interactive.

My idea was to make the colors shift whenever the mouse is pressed, using the built‑in boolean variable mouseIsPressed from the slides. The end result of my project is a grid of evenly spaced squares that change color in a smooth loop every time you click.

Snippet of the code I’m proud of:

if (mouseIsPressed) {
  colorShift += 2;
}

if (colorShift > 255) {
  colorShift = 0;
}

I’m proud of this part because it uses boolean logic and variable incrementation.

How I made this: 

I started by creating a canvas using createCanvas(600, 400), just like in the examples from class. Then I used nested for loops to place squares across the screen.

To make the squares spaced further apart, I increased the loop step to x += 70 and y += 70. This gives the grid a clean, airy look.

Next, I added a variable called colorShift that starts at 0. Using the boolean variable mouseIsPressed (from the slides), I made the number increase whenever the mouse is clicked. This number is then added into the fill() colors so the squares change color interactively.

I also used simple conditionals (if, else if, else) to change the color depending on how far down the screen the square is.

Finally, I drew each square using rect(x, y, 50, 50) inside the nested loops. Because the loops repeat across the whole canvas, the pattern fills the screen automatically.

Reflection and future ideas

Overall, I’m really happy with how this piece turned out, because it uses simple tools like loops, conditionals, boolean variables, and a bit of animation, yet it still manages to feel interactive. Even though the sketch is built from very basic building blocks, the way everything works together makes the grid feel responsive and alive.

Using mouseIsPressed was especially fun, because it showed me how a single boolean variable can instantly make a sketch interactive. Just clicking the mouse changes the colors across the whole grid, and that small action makes the code fun.

If I had more time or knew more about p5.js, I would like to try more effects. For example, I could make the shapes respond to sound, or create more interactive features like clicking to make new shapes appear. I would also like to experiment with colors to make smoother gradients and more interesting palettes. In the future, I want to keep exploring user interaction and generative art using what I have learned so far and what I will learn next.

References

• Week 2 Slides, (Conditionals, Loops, Boolean Variables) Used for understanding nested loops, mouseIsPressed, relational operators, and conditional logic.
• p5.js Reference https://p5js.org/reference/ Used to check syntax for rect(), fill(), and basic drawing functions.

My Concept:

For this assignment, we had to create a self-portrait using only code in p5.js. Instead of making a normal human face, I chose to turn myself into a panda character. I picked a panda because its one of my favorite animals honestly, and i felt like it represented me the most for my portrait. Since this is my first time working with p5, I wanted something simple that still lets me practice shapes and positions.

The whole portrait is drawn using code, not the mouse. I built the panda using basic shapes like circles, rectangles, and arcs. Each part of the panda, like the ears, eyes, nose, and body, is placed using x and y values. My goal was to learn how shapes can work together to form a character instead of just random objects on the screen.

My Portrait:

A part of the code I like is how I created the panda’s face using only circles and one arc. Even though it looks simple, getting the face to look right took a lot of adjusting.

Here is my code: 

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background("rgb(255,151,235)");

  // head
  fill(255);
  circle(300, 260, 220);

  // ears
  fill(0);
  circle(200, 150, 90);
  circle(400, 150, 90);

  // eye patches 
  circle(250, 260, 70);
  circle(350, 260, 70);

  //eyes
  fill(255);
  circle(250, 260, 30);
  circle(350, 260, 30);

  fill(0);
  circle(250, 260, 12);
  circle(350, 260, 12);

  // nose
  circle(300, 300, 20);

  // mouth
  noFill();
  stroke(0);
  arc(300, 320, 50, 30, 0, PI);

  // body
  noStroke();
  fill(255);
  rect(220, 360, 160, 150, 40);

  // arms
  fill(0);
  rect(180, 380, 40, 100, 20);
  rect(380, 380, 40, 100, 20);

  // feet
  rect(240, 500, 50, 40, 20);
  rect(310, 500, 50, 40, 20);
  
  // bamboo
  fill(0,200,0);
  rect(470, 350, 30, 200);
  line(470, 390, 500, 390);
  line(470, 430, 500, 430);

}

Changing just a few numbers made the panda look very different. Sometimes the eyes looked crossed, and sometimes the mouth was too low. Fixing those small things helped me understand how exact the coordinates need to be.

How was this made? : 

First, I created the canvas and chose a background color. Then I made the panda’s head using a large circle and attached the ears to the top. After that, I worked on the face using circles for the eye patches, eyes, and pupils. I kept running the sketch and changing the x and y values until the face felt centered. This part took the longest because small changes made a big difference.

After finishing the face, I added the nose and mouth using a circle and an arc. Then I created the body, arms, and feet using rectangles with rounded corners so the panda looked soft instead of sharp. I also added a piece of bamboo next to the panda using rectangles and lines.

I mainly used what we learned in class, like rect(), circle(), arc(), line(), and fill(). When I forgot how something worked, I checked the p5.js reference. The hardest part for me was thinking in numbers instead of just drawing what I see.

Reflection and future ideas:

This project helped me see how coding can be used for art. At first, it felt strange to draw by typing numbers instead of using a pencil, but after testing and fixing things again and again, it started to make sense.

One thing I learned is that order matters in code, because shapes drawn later appear on top of others. I also learned how careful you have to be with placement, since even moving a shape a little can change the whole look of the character.

If I keep working on this, I would like to add more detail, like clothes or props, and maybe small animations like blinking eyes. I also want to try making the panda react to the mouse or keyboard. Overall, this was a good start for learning p5.js, and I feel more comfortable using shapes and coordinates now than before.