Author: Hajar Alkhaja

Reading Response – Week 4

One thing that drives me crazy is when I’m looking for a parking spot in a busy garage that uses red and green lights to show if a spot is taken or free. Yesterday, I was rushing to make it to an appointment. I saw a spot far away, but then I noticed a green light closer to the mall entrance, which was supposed to mean the space was free. I drove toward it, only to find a car already parked there. By the time I went back to the original spot, it was taken. It was so frustrating and a complete waste of time.

From Norman’s perspective, this is a design problem caused by poor visibility and misleading signals. The green light gave me a false cue, similar to the confusing doors and devices he describes. A better design would use more accurate sensors that reliably detect when a car is present. It could even provide feedback, like showing when the spot was last updated, so drivers can trust what they see. This would prevent wasted time and make the whole parking experience smoother and less stressful.

     

When working on interactive media, especially projects that are heavy on user engagement, I would apply Norman’s principles by making the instructions very clear and giving clear, immediate feedback to every action. Norman emphasizes visibility and feedback, which are key for helping users understand what to do and what is happening as they interact with the program.

I think even in my p5.js projects, I can start practicing this. For example, if a user types an invalid input, instead of the program crashing, I could display a clear message telling them what went wrong and how to fix it. This way, the user isn’t left confused or frustrated. A good approach is to design as if the person using the program is a child, everything should be simple, obvious, and easy to understand without needing extra instructions. This makes the experience smoother, more engaging, and aligned with Norman’s idea of good, user-centered design.

Week 4 – Loading Data, Displaying text

I speak both Arabic and English, so when I learned that our project had to involve words, I knew I wanted to create something that brought both languages together. My first idea was simple: a program that translates colors typed in English into Arabic and displays them on the screen. At first, I liked it, but I quickly realized it felt too basic. Each time you typed a color, the same thing happened, for the same input you got the same output every single time.

To improve it, I thought to add a quiz that tested you on three random colors each time. This added some variation, but it still didn’t feel interactive enough. I wanted users to not just type answers but to interact with the piece and feel like they were shaping the experience. As I worked on making the program more dynamic, I found a YouTube video that helped me learn how to add randomness and interactivity to my code: https://youtu.be/-6v_AYyn49k?si=Ra0T98ejk4Xkcr-J. From that tutorial, I learned how to make the Arabic words appear in different random positions and sizes and how to create multiple modes so the user can switch between still, bouncing, and floating text. This gave the piece a balance between control and randomness, the user can make choices, but there’s still some sort of randomness. I also used custom fonts from Google Fonts by embedding them directly into my HTML file.

In the final version, I kept my original concept of translating colors, but now the project feels much more alive. The user can explore different modes, play with the experience, and see something new each time. It’s almost as if its art created by the words now. It’s structured enough for the user to have some control, but there’s always randomness, so it’s never exactly the same twice. For me, this connects to Chris Crawford’s ideas about interactivity, where both the user and the program are working together to create something meaningful, rather than the program just showing a static result. It’s no longer just a translation tool, it’s an interactive artwork that bridges both of my languages while letting others engage with it in a fun and personal way.

When I first added Arabic text to my program, it kept printing from left to right, which looked really strange because Arabic is supposed to flow right to left. It took me a couple of tries to figure out why this was happening. Eventually, I realized I needed to set the text direction directly in the code. Once I added a line to force the drawing context to use RTL, the Arabic words finally displayed correctly. It was a small but important fix that made the project look much more natural and readable.

// Draw Arabic word correctly (right to left)
   push();
   drawingContext.direction = 'rtl'; 
   textFont(arabicFont);
   textSize(item.size);
   fill(item.color);
   text(item.word, item.x, item.y);
   pop();
 }

 

Week 3 – Reading Response ( The Art of Interactive Design )

 

I think a strongly interactive system is one that feels like it’s really engaging with you, almost like having a conversation. The author describes interactivity as two sides listening, thinking, and responding, and I see that especially in how responsive a system is. When I was younger, I joined a LEGO robotics competition and built a robot from scratch. At first, it didn’t do anything, but once we added the Arduino parts and coded it, it started moving and reacting to our commands. It felt alive, like it was “listening” to us.

Artificial intelligence takes this even further. I heard about a study where researchers kept breaking a robot’s leg, and instead of shutting down, it figured out a new way to walk. That’s incredibly interactive because it shows learning and adaptation. Even something like Siri or Alexa shows this on a smaller scale, you ask a question, and it responds right away. For me, a truly interactive system listens, adapts, and almost feels like a partner, not just a machine following instructions.

I love how they made something normal we play with everyday interactive.

One idea I have for improving the degree of user interaction in my p5 sketches is adding an AI chat voice, kind of like Siri. Instead of having to leave the sketch and go back to the coding page whenever I have a question or need to fix something, I could just talk to the AI while working on my project. It would feel like we’re coding “together,” where I can ask questions out loud and get instant feedback or suggestions. This would make the process more fun and interactive, and it would keep me focused on creating instead of constantly switching between different pages or tools.

Week 3 – Functions, Arrays, and Object-Oriented Programming

For this project, I started with the really basic car code that was shared with us as an example. I liked how simple and clear it was, so I decided to build on that idea. I kept the general structure and movement the same, but instead of a car, I turned it into a spider. That meant changing the shapes, adding legs, and making it look a little more alive.

One thing I found pretty challenging was getting the legs to wiggle naturally. At first, they either didn’t move at all or moved in a really awkward way. It took me some trial and error, especially using functions like sin() and playing around with timing, to get it just right. In the end, I was able to make the spider’s legs move in a subtle way, which makes it feel like it has a bit of personality as it crawls around the canvas.
// make legs wigle
  legWiggle(index) {
    const phase = index * 10;
    return sin((frameCount + phase) * 0.05) * (this.legLength * 0.15);
  }

This piece of code makes the spider’s legs wiggle a bit, and it was honestly the hardest part for me. I had to keep experimenting with the numbers until the movement looked smooth and natural instead of random or awkward.

Week 2 – Writing Response

In his Eyeo talk, Casey Reas reflects on how randomness can bring life to a system. At one point, he explains that when there is no variation or unpredictability, everything begins to merge into sameness: “If these lines don’t have any bit of noise or jitter, they gradually tend towards one location. The system becomes homogeneous.” I found this idea so powerful because it mirrors real life. If everything was perfectly controlled, predictable, and identical, the world would feel lifeless. For example, if every tree on my walking path looked exactly the same, going on a walk would be dull and uninspiring. But because there’s always a little difference like a twisted branch, a bird flying by or sudden shift in light ,  my walk is always interesting and dynamic. Reas’ point about adding just a “slight bit of noise” to keep a system alive reminds me that unpredictability is what makes both art and life vibrant. I completely agree with his perspective that randomness doesn’t need to feel chaotic; instead, it can be a natural force that keeps things intriguing and gives them life, much like nature itself.

Reas also talks about the tension between chaos and order in art, saying that historically artists have been expected to impose structure and fight against disorder. His work flips that expectation, showing that embracing randomness doesn’t mean giving up control. He designs rules and systems but leaves certain spaces open for chance, allowing surprising outcomes to emerge. This balance really resonates with me. I’ve noticed in my own creative work that when I try to control every single detail, the result feels rigid and forced, it almost seems as if it traps my flow of creativity. On the other hand, if I let go completely, the work fully loses direction and structure. I think the “optimum balance,” as Reas demonstrates, is to create a strong foundation, like the rules of a game, and then allow randomness to bring it to life. This makes me rethink how I approach creativity. Rather than seeing unpredictability as a threat, I want to treat it as a collaborator, trusting that a little randomness will make my work interesting and lively, just as it makes the world around us more beautiful and alive.

Casey Reas’ talk really resonated with me because I go on walks all the time, and I’ve noticed how much the environment affects how I feel. The first photo, with its perfectly symmetrical path and identical trees, reminds me of walking on a treadmill at the gym,  predictable and boring. But the second photo, with its uneven, colorful flowers and natural variety, captures what makes walking outside so special to me. The flowers aren’t perfectly placed, yet that imperfection gives the path life and personality. It doesn’t feel chaotic, just alive, and that’s what keeps my walks meaningful and exciting.

week 2 – patterns

Overview

At first, I wasn’t sure what to create for this project, so I decided to just start by making something simple: dots. My plan was to practice using loops by randomly placing dots on the screen. I used a while loop to create many dots, and once I saw them on the canvas, I realized they looked a lot like stars scattered across a dark night sky.

That gave me the idea to turn my project into a night sky scene. I kept the dots as stars, and then I wanted to make them feel more realistic. To do this, I decided to practice with a for loop to make the stars twinkle. By adjusting their brightness smoothly over time, the stars started to fade in and out, creating a gentle twinkling effect.

In the end, my project isn’t just a pattern of dots, it’s a simple, animated night sky that uses both while and for loops, and I really enjoyed the process of seeing it come to life step by step.

Highlight of code

One part of my code that I really enjoyed working on was where I used the while loop to create all of my stars. At first, I didn’t fully understand how a while loop worked, but through this project, I learned how it keeps running over and over until a certain condition is met.

let count = 0;
  while (count < 500) {  
    stars.push({
      x: random(width),
      y: random(height),
      size: random(1, 3),
      phase: random(TWO_PI) // different twinkle timing
    });
    count++; // increase count each time
  }

I used the while loop to generate 500 stars, each with a random position and size. What I liked about this was how simple it felt to control the number of stars, I just set a limit, and the loop kept creating stars until that limit was reached.

This helped me understand loops better because I could actually see the results on the screen. It also made me realize the difference between a while loop and a for loop. The while loop gave me more control over the setup process, and it was perfect for building the starting starfield for my night sky.

Self Portrait – Week 1

Overview

For this first assignment, this was actually my very first time coding. Because of that, I wanted to keep things simple, but also try something that I thought was cool and interesting. I decided to make a portrait in a scene that could change from day to night. The feature I liked the most was being able to switch the background from morning to night with a single click, it felt like a big achievement for me and made the project more fun. Overall, I kept the shapes and details simple, but I made sure that I could still change and experiment with the code.

https://editor.p5js.org/hajarr.alkhaja/full/

https://editor.p5js.org/hajarr.alkhaja/sketches/YawBFYuSj

 

Process

We started with a warm-up in class where we learned how to make a simple circle. That gave an idea on how to code for different shapes. We also learned how to make shapes change with a mouse click, and this inspired me to add the day and night feature. I watched the tutorial videos from YouTube, which helped me understand how to use shapes like ellipses, arcs, and triangles. From there, I built my project step by step, first the background, then the grass and sky, and finally the girl. I kept it simple, using a different shape and color for each feature, and added a night variable so everything could change between day and night.

Code Highlights

At first, I really struggled with the code because I didn’t fully understand how the night variable and the if (night) statements worked. It was confusing to me how to make something happen only in the day or only in the night. Slowly, I started to get the hang of it, and once I understood the logic, it became much easier. In the end, most of my code was just repeating the same pattern in different ways, for example, changing colors, showing the sun or the moon, or opening and closing the eyes. 

I found it really interesting how I defined the night variable once and then kept repeating the if/else code for each feature of my self-portrait. I slowly got the hang of it and it helped me understand how coding logic works.

// girl's dress (triangle body)
if (!night) {
  fill(255, 105, 180); // bright pink (day)
} else {
  fill(199, 21, 133);  // darker pink/purple (night)
}
triangle(
  width/2 - 25, height - 70,
  width/2 + 25, height - 70,
  width/2,      height - 190
);

 

Another challenge I faced was figuring out where to place each shape. I had to keep adjusting the positions, running the code, and moving things again until I found the right spots. This took a lot of trial and error, but it also helped me learn how the coordinate system works.

At one point my code even stopped working completely and gave me errors I didn’t understand. I couldn’t figure out why, so I used AI to help me find the mistake. Once I fixed it, everything started working again, and I was able to continue building my portrait. Overall, I feel like I learned a lot about both the logic of coding and the patience it takes to position and test shapes.