Author: Shaikha Mhara Al Nuaimi

Week 4 – Reading Reflection

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.

Week 4 – Assignment

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

This project helped me understand how external data works in p5.js. At first, I didn’t get how a whole line from the CSV could turn into separate words, but once I understood how split() works, it made sense. It showed me how generative text can be structured instead of random.

One challenge was keeping the CSV formatted correctly. If one row had an extra space or missing comma, the whole sentence would come out wrong. Fixing that helped me understand how important clean data is.

In the future, I want to try mixing pieces from different rows instead of using one row at a time. That would make the fortunes even more varied. I also think it would be cool to animate the cookie cracking open or have the fortune slide out instead of just appearing, and also try making the fortune cookie look more realistic, and I also want to trey adding animation because it would make the interaction feel more fun.

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.

Week 3 – Reading Reflection

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.

Week 3 – Assignment

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.

My concept was to make something interactive that didn’t rely on complicated visuals but still felt fun to use. Since we learned how to create our own objects and store them in arrays, I wanted to build a sketch where the user could generate many circles without manually drawing each one. The bouncing bubbles demo from class inspired me a lot, especially the way each object moves on its own. I also liked the idea of randomness and repetition, which are common in generative art. I wanted the user to help create the final image, so every time the sketch runs, the result is different since they could be different colors and sizes.

How the Project Works:

I started by creating an empty array called shapes, which stores all the circles that appear on the screen:

let shapes = [];

Whenever the user clicks, a new Shape object is created at the mouse position. I used .push() to add it to the array so the sketch can keep track of every circle the user creates. I wrote a Shape class that gives each circle its own position, speed, size, and color. The class also includes functions that make the circle move, bounce off the edges of the canvas, and display itself.

The sketch also includes a simple interaction where pressing any key removes the last circle from the array. This gives the user some control over how crowded the canvas becomes.

Inside the draw() function, I used a for‑loop to update every circle in the array. The loop calls move(), bounce(), and display() for each object. This is what makes the animation run smoothly and allows all the circles to move at the same time.

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();
}

This section shows how useful it is to create your own objects. Instead of writing separate code for each circle, one loop controls everything. It keeps the sketch organized and makes it easy to add or remove shapes.

Reflection and future ideas:

This assignment really helped me understand how arrays and objects work together in a sketch. In the beginning, I kept forgetting small things like using .push() or making sure my variable names matched exactly, and those tiny mistakes caused a lot of errors. Since JavaScript is case‑sensitive, even one wrong letter would break the whole thing, so I had to get used to being more careful. Once I understood how everything connected, the array, the class, and the loop, the project became much easier and honestly more fun to work on. I enjoyed playing around with random values for the colors, sizes, and speeds because it made the artwork feel more alive and unpredictable.

If I had more time, I would love to expand this sketch by adding different types of shapes instead of just circles, or maybe adding fading trails behind the shapes as they move. I also think it would be interesting to experiment with sound interaction or simple physics like gravity to make the movement feel more dynamic. Overall, this assignment made the concepts we learned in class feel much clearer, and it showed me how these techniques can be used creatively instead of just technically.

References:
  • p5.js Reference – random() https://p5js.org/reference/p5/random/
  • p5.js Reference – ellipse() https://p5js.org/reference/p5/ellipse/
  • p5.js Reference – color() https://p5js.org/reference/p5/color/
  •  Reference – mousePressed() https://p5js.org/reference/p5/mousePressed/
  • p5.js Reference – keyPressed() https://p5js.org/reference/p5/keyPressed/
  • Class example: Bouncing Bubbles (Intro to IM)
  • I used AI only to help me fix small mistakes in my code, especially when I had red error lines and couldn’t figure out what was causing them.

Week 2 – Reflection

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.

Week 2 – Loop Art

My Concept

For this assignment, I wanted my design to feel both structured and fun to interact with, while still being something I could make using the basics we’ve learned in p5.js. My final sketch creates a grid of animated squares that slowly move and respond to the mouse. When the mouse moves over the canvas, squares close to it change size and color, making the grid feel interactive and fun to play with and explore.

Snippet of the code I’m proud of:

Here’s a section I’m proud of because it combines motion and interaction:

let d = dist(mouseX, mouseY, x, y);

if (d < 80) {
  size += map(d, 0, 80, 25, 0);
  r = 255;
  g = random(100, 200);
  b = random(200, 255);
}

This part checks how close the mouse is to a square (d) and then:

  • increases the square’s size as the mouse gets closer,
  • changes its color using both randomness and mouse position, which creates a dynamic, responsive effect. It shows how loops and conditionals work together with interaction.

Embedded sketch:

How I made this: 

I made this sketch by creating a canvas using createCanvas(600, 400) and then using nested loops with x and y to place squares evenly across the grid. I used a spacing variable to control how far apart the squares are. Each square changes size over time with sin(frameCount * 0.05 + x * 0.04 + y * 0.04) to make a smooth wave effect. I also used dist(mouseX, mouseY, x, y) to check how far the mouse is from each square so that squares near the mouse get bigger and change color. I added a small rotation with rotate() and used push() and pop() so each square rotates on its own. I set the colors using r, g, and b, some based on the wave and some random near the mouse, and drew the squares with rectMode(CENTER) and rect(). Using loops, animation, rotation, and mouse interaction made the piece feel alive while keeping a clear pattern.

The complete code:

let spacing = 45;

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

function draw() {
  background(10, 10, 30, 60);

  for (let x = 0; x < width; x += spacing) {
    for (let y = 0; y < height; y += spacing) {

      // wave motion
      let wave = sin(frameCount * 0.05 + x * 0.04 + y * 0.04) * 12;
      let size = 18 + wave;

      // distance to mouse
      let d = dist(mouseX, mouseY, x, y);

      // angle rotation
      let angle = sin(frameCount * 0.02 + d * 0.05);

      push();
      translate(x + spacing / 2, y + spacing / 2);
      rotate(angle);

      // color
      let r = 120 + wave * 4;
      let g = 80 + d * 0.2;
      let b = 200;

      // interaction 
      if (d < 80) {
        size += map(d, 0, 80, 25, 0);
        r = 255;
        g = random(100, 200);
        b = random(200, 255);
      }

      stroke(255, 180);
      fill(r, g, b, 180);
      rectMode(CENTER);
      rect(0, 0, size, size);

      pop();
    }
  }
}

Reflection and future ideas

Overall, I’m really happy with how this piece turned out. I started with the idea of a geometric grid like the ones in old computer art magazines, and I used what I’ve learned about loops, motion, and interaction to make it come to life. Learning how to use nested loops was especially rewarding because it let me create a pattern that fills the whole canvas with very little code. I’m honestly very proud of how my code came out. I really enjoyed exploring this aspect of p5.  And i like how I made the squares change when the mouse moves over them which makes it feel alive and fun to explore.

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

p5.js Reference: https://p5js.org/reference/

Week 1: Self Portrait by Mhara Al Nuaimi

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.