Author: Rawan Al Ali

When I first read that activities like reading or dancing are not really interactive, I was confused. I always thought that simply reacting to something counted as interacting, so I had to question my own assumptions. Crawford explains that strong interaction requires three elements: listening, thinking, and speaking. Listening is when the system notices what the user does, thinking is when it figures out how to respond, and speaking is when it actually shows that response. I realized that many of my sketches are more reactive than interactive. They respond to clicks or mouse movement, but they do not really “think.” Without all three elements, interaction feels one-sided or unsatisfying. Thinking about this helped me see that interactivity is really a two-way conversation, where the program and the user are both active participants. The reading also made me reflect on the balance between predictability and surprise. If the sketch always responds the same way, it quickly becomes boring. If it responds randomly without logic, it can feel confusing. Strong interactivity happens when the user feels like their actions truly matter, but the system also has its own personality and reasoning.

For my p5 sketches, I want to build this type of interactivity. In my most recent mosaic-style sketch, the program could listen to which shapes the user clicks or where the mouse moves, think by changing the lines, colors, or arcs, and speak by  updating the patterns on the canvas. I also want to add keyboard functions so pressing keys can change the color of something or the layout. By including randomness or subtle variations, each interaction would feel unique while still making sense. This way, the user is not just observing the sketch, they are influencing it, experimenting, and finding out how different interactions can lead to different outcomes. Adding these layers of responsiveness would make the sketch feel alive and engaging, showing the strongest form of interactivity that Crawford describes.

“We are all mosaics of the people we’ve met.”

This artwork started as an idea I couldn’t stop thinking about: what if all the people and experiences in our lives were shapes in a giant, messy mosaic, connected by invisible lines we carry with us? So I made it happen. Each shape, circles, squares, triangles, and some random oddballs, represents a person or a memory. The lines connecting them are the invisible threads of influence that never really go away, no matter where you move or who you become.

I wanted this mosaic to feel alive. It’s not static. The shapes can move around when you click on them, but the connections always stay. It’s a simple interactive twist, but I love how it visually represents the idea that we carry pieces of each other wherever we go. You can almost imagine it breathing, like a community of little tiles that are all related in some way.

 

How I Built It: 

I used Object-Oriented Programming because I wanted each shape to feel like its own little character, with its own position, size, rotation, and even “friends,” aka connections to other shapes. All the shapes live in an array, which makes it super easy to loop through them to draw, animate, and update lines.

The movement was trickier than I thought. I used lerp() to make shapes glide smoothly toward new spots instead of jumping around like they were hyperactive. And here’s a cool tip I learned from The Coding Train: push() and pop() are lifesavers for isolating transformations like rotation and translation. Without them, every rotation or move would have messed up all the other shapes. Honestly, watching that video was a game-changer. I finally understood why isolating transformations is so important in generative art.

The hardest part was keeping the lines connected while shapes moved independently. At first, I tried drawing straight lines, but it looked rigid and didn’t feel like a living mosaic. I solved it by using curved lines with quadratic vertex and a little randomness to the midpoint, which made the connections feel fluid and unique. I also had to carefully loop through each shape’s connections array so that every connection stayed accurate even when shapes moved.I must have spent hours fiddling with arrays and connections, trying to get it to feel smooth but not rigid. I think it ended up working, and honestly, I kind of love the little quirks. The lines stretch and bend in ways that feel alive. The code snippet: 

// Draw connecting lines
stroke(255, 100);
strokeWeight(2);
for (let i = 0; i < shapes.length; i++) {
  for (let target of shapes[i].connections) {
    // curved line for mosaic effect
    let mx = (shapes[i].x + shapes[target].x) / 2 + random(-20, 20);
    let my = (shapes[i].y + shapes[target].y) / 2 + random(-20, 20);
    noFill();
    beginShape();
    vertex(shapes[i].x, shapes[i].y);
    quadraticVertex(mx, my, shapes[target].x, shapes[target].y);
    endShape();
  }
}

The Interactivity:

You can click on any shape, and it will move to a new random location. The lines stretch and follow, showing that even if things move around in life, the connections remain. I considered adding drag-and-drop or color changes, but I kind of like it simple. Letting the shapes shift on their own feels like they have a mind of their own.

Reflection : 

This project taught me a few things:

• Classes and arrays are magical once you get them to work together 
• lerp() is a lifesaver for smooth motion 
• push() and pop() are your best friends for rotations and translations (thanks, Coding Train) 
• Generative art can be messy and chaotic, but sometimes that’s exactly the point 

If I did this again, I’d probably add more personality to each shape, maybe tiny patterns or colors that reflect “who” each piece is. For now, I like how it’s simple, a little messy, and interactive, like a mini community on the screen.

Inspiration: Sound Waves and Chaos

When I first heard the word loops, the first thing that came to mind was sound waves. I imagined smooth, rhythmic waves moving across the canvas, like music frozen in space. I even found a little example of what I hoped to create, but my coding skills weren’t quite ready to match the vision.

 Scrolling through Instagram one day, I stumbled on an image that sparked a new idea. I thought: what if I could combine sound waves with the chaotic little voice in your head when you overthink?  

Concept Development: From Chaos to Calm

The top right of my canvas is extremely chaotic; dense, loud, overwhelming, but as the lines move toward the bottom left, they thin out and eventually fade into empty space. This represents the calm that comes when that inner chatter finally quiets.

This idea lets me visualize the process of overthinking, moving from noise to quiet, using loops and arcs to represent both emotion and structure. 

Coding Process: Adding Randomness

Here’s a snippet I’m proud of:

//arc

for (let x = 250; x <= width; x += 40) {
  stroke(255, random(150, 255), random(100, 255)); // random color
  noFill();
  let randY = 80 + random(-20, 20); // random vertical position
  let randW = 300 + random(-50, 50); // random width
  let randH = 400 + random(-50, 50); // random height
  arc(x, randY, randW, randH, 250, 450);
}

//line

for (let x = 1; x <= width; x += 20) {
  stroke(255, random(150, 255), random(100, 255)); // random green/pink/blue tint
  let endX = width + random(-50, 50);
  let endY = height + random(-50, 50);
  line(x, 1, endX, endY);
}

After watching Casey Reas’ video on randomness, I was inspired to incorporate a bit of chaos into my work. I added randomness to the color and the shape of the arcs, so every frame looks slightly different. This gives the piece a sense of movement and chaos, like thoughts bouncing around in your head—but still following a hidden structure underneath.

Reflection: What I Learned

This project helped me realize that coding can be just as expressive as traditional art—it’s just another medium to visualize thoughts and emotions. I also learned the value of adding randomness, it brought the project to life in ways my original plan didn’t anticipate. I also noticed that art doesn’t always have to be ‘pretty’ it can also be beautifully chaotic. 

Future Improvements

For the future, I’d love to make the sketch more dynamic and interactive, so the patterns could respond to the user’s input or feel more like actual sound waves. I also want to experiment with layering animations to capture the feeling of overthinking versus quiet peace more vividly. I wish one day I could make something as cool as my original inspiration.

I had to reconsider my approach to structure after watching Casey Reas’ presentation on chance operations and randomness. I have a background in business, so I’ve always thought that control and planning are crucial for projects, schedules, and data analysis. I assumed the same would apply to coding: clearly define the rules and follow them. The 11×11 grid of dots, one of Reas’ examples, showed how controlled randomness functions: each dot moves according to precise rules, but minor variations or “random” steps result in patterns that change from orderly to chaotic. The thought of chaotic work always scared me. He demonstrated how a system can be both rule-based and unpredictable at the same time by describing instructions like moving in a straight line, bouncing off edges, or slightly deviating from a path. It helped me understand that randomness need not imply a lack of control but can be incorporated into a well-organized framework to produce entertaining and captivating results.

I want everything to be flawlessly structured, so as a beginner coder, I frequently question my work. I enjoy doing things the “right” way and abiding by the rules. Reas’s ability to strike a balance between chance and rules has piqued my interest in trying new things. While allowing randomness to dictate specifics like placement, size, or interactions, I hope to establish boundaries in my own projects, such as establishing a color scheme, the quantity of elements, or grid positions. This method seems applicable not only to coding or art but also to business: stability is provided by a clear structure, but creativity and innovation can be stimulated by flexibility and unpredictability.  Reas’ talk taught me that embracing chance within rules doesn’t undermine order; it makes it more interesting, alive, and full of potential surprises.

Project Overview

For this assignment, I created an interactive self-portrait that represents me both visually and personally. The portrait includes:

• My cartoonish face with long straight hair, eyebrows, eyelashes, nose, and mouth.
• Interactive eyes that follow the user’s mouse, which I am especially proud of.
• A background of colorful circles that symbolize “yarn cakes,” reflecting my love for crocheting.
• A small bunny plushie on the side, inspired by one of my crochet projects, including tiny stitched details to mimic real crochet stitches.
  

  Visual Documentation

  I started with an extremely rough sketch to plan what I wanted my self-portrait to look like and the placement of facial features, hair, and background elements. I also noted a couple of interactive elements I hoped to achieve. 

  

  I watched a YouTube tutorial to  learn the mouse-following pupil technique, which became the most interactive and technically exciting part of my sketch: YouTube tutorial. Honestly, I struggled a lot with this part, but I was determined to get it right. I tried to make the pupils move without leaving the eyes, and after lots of trial and error, I finally figured it out.

  The circles in the background represent yarn cakes, inspired by my hobby. Crocheting is similar to knitting, but instead of using two needles, I use a hook to create loops and form fabric.

  The little bunny in the corner represents one of my actual crochet projects, and I tried to include stitch details to mimic crochet.

  Interactive Features

  • The eyes follow the user’s mouse, giving the portrait a sense of life.
  • Users can move their mouse around the canvas to see how the pupils track it.

  Technical Notes

  • Eyes: Pupil positions are calculated by taking the difference between the mouse coordinates and the center of each eye, multiplied by a scaling factor to keep pupils inside the eyeball. This took me some time to get the hang of.
  • Hair & Face: Used basic shapes (rectangles, ellipses, arcs).
  • Background Yarn Cakes: Multiple overlapping circles of different sizes and colors, inspired by real crochet yarn balls.
  • Bunny Plushie: Ellipses for the head and ears, with short lines to simulate crochet stitches.

  Research, Tutorials, and Inspirations

  • YouTube tutorials helped with  the eye-following technique.
  • Crocheting inspired the yarn cakes and bunny, making the project personal.
  • I was inspired by examples given in class and wanted to create cartoon-style self-portraits similar to them.

  Coding I Am Proud Of

  I am most proud of the eye-following interaction, which made the portrait feel alive. My code for this feature is well-commented and included below. 

  //eyes
   stroke(0);
   fill("#FCC7D9");
   ellipse(170, 120, 30, 35); //left eye
   ellipse(230, 120, 30, 35); //right eye
   fill(255);
   ellipse(170, 130, 25, 20); //left eye
   ellipse(230, 130, 25, 20); //right eye
  
   fill(0);
   let leftPupilX = 170 + (mouseX - 170) / 40; // small movement toward mouse
   let leftPupilY = 130 + (mouseY - 130) / 40;
   ellipse(leftPupilX, leftPupilY, 10, 15); // left pupil
  
   let rightPupilX = 230 + (mouseX - 230) / 40;
   let rightPupilY = 130 + (mouseY - 130) / 40;
   ellipse(rightPupilX, rightPupilY, 10, 15); // right pupil
  

  Reflection

  I am really proud of myself because this is my first time ever coding. I learned a lot of new things and hope to improve along the way.

  I wish I could have animated the yarn cakes so they floated gently in the background while the eyes moved around, making the portrait even more dynamic. Linking the yarn cake movement to the eye-following interaction could create a more immersive experience, where the background reacts to the user.

  This would enhance the interactive and playful feel of the portrait, connecting personal elements to user engagement.