Shaikha Mhara Al Nuaimi – Introduction to Interactive Media

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:

<br />

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:

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:

<br />

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.

Author: Shaikha Mhara Al Nuaimi