Author: Deema Al Zoubi

My Concept

I wanted to make a visualization that’s both fun and interactive, inspired by something I love: music. I picked the top 50 Spotify songs of 2023 because I thought it would be exciting to explore popular tracks visually. The idea was to take a simple concept; songs with different features like energy, mood, popularity, and danceability, and show it in a more creative and engaging way, instead of a boring, standard chart. I wanted people to notice patterns and interact with the data while keeping it simple and playful. In my visualization, the size of each circle represents popularity, the color represents danceability, (where pink is the least and blue is the most and purple is the in between), the higher the circle is, the happier the song’s mood, and the further to the right, the more energy the song has.

A Highlight of Some Code That I’m Particularly Proud Of

One part I’m really proud of is the hover effect that shows the song title and artist. It makes the visualization feel more interactive and personal because you can actually explore the songs instead of just seeing circles on a canvas. The code works by checking the distance between the mouse position (mouseX, mouseY) and the center of each circle (c.x, c.y). If the distance is smaller than the circle’s radius (size / 2), it means the mouse is hovering over that circle, and then the text appears above it. I used fill(0) to make the text black, textSize(12) to set the size, and textAlign(CENTER) so it’s centered nicely over the circle.

The ${} syntax is called a template literal in JavaScript. It lets you insert variables directly into a string, so ${songs.getString(i, ‘track_name’)} pulls the song name from the table and ${songs.getString(i, ‘artist_name’)} pulls the artist. Using it this way makes it easy to combine them into one neat line of text without writing extra code to join them. I like this part because it’s simple, but it really makes the visualization interactive and fun to use.

// if mouse is hovering over the circle, show the song name and artist
    if (dist(mouseX, mouseY, c.x, c.y) < size / 2) {
      fill(0);
      textSize(12);
      textAlign(CENTER);
      text(`${songs.getString(i, 'track_name')} - ${songs.getString(i, 'artist_name')}`, c.x, c.y - size);
    }
  }

Reflection and Ideas for Future Work or Improvements

I’m happy with how the visualization turned out because it’s simple, colorful, and interactive, and you can immediately see patterns in the data. In the future, I’d love to explore adding more interactivity, like filtering songs by genre or letting users compare two songs directly. I could also experiment with different visual encodings, like using different shapes to represent additional variables. Another idea is adding key press options to trigger effects or even including sound, so the circles could play a snippet of the song when clicked or hovered over. Overall, I think it’s a fun way to combine data and creativity, and it shows how you can turn something as tricky as data into a playful visual experience. 

What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

One thing that can be a bit frustrating is microwaves with a lot of buttons and a confusing dial. You just want to heat your food, but some have many buttons, like “Popcorn,” “Defrost,” “Reheat”, and then there’s the round knob for setting the timer. Sometimes it’s hard to tell which way to turn it, how to stop it, or how to restart it. It’s not always clear, and you end up taking extra time just figuring it out.

Norman explains in the reading that when things are confusing, it’s usually the design, not the user. This microwave has bad mapping, because the buttons and dial don’t clearly show what will happen, and it gives little feedback, so it’s hard to know if it’s working. A simpler design; fewer buttons, clear instructions for the dial, and a display showing the timer and status, would make it much easier to use.

How can you apply some of the author’s principles of design to interactive media?

I think I could apply some of Norman’s principles of design to interactive media by being organized and guiding the user through the steps. For example, if I’m creating a sketch or an interactive project, I’d make sure it’s clear what the user should do at each stage. I’d also keep in mind that the user might not be familiar with the work, so I’d include hints, feedback, and cues to make it easier to understand. Basically, I’d try to make the experience intuitive while staying open-minded, remembering that just because something makes sense to me doesn’t mean it’s obvious to someone else.

After reading “The Art of Interactive Design” by Chris Crawford, I found it really interesting how he critiques common ideas about interactivity, continuously giving examples while showing why something might initially seem interactive but then explaining why he disagrees. Each time he explains a concept, I think to myself, “Yes, I see this as interactive,” but then he challenges that assumption in a way that convinces me to see it differently. It made me wonder: is interactivity utterly subjective? Can something be called interactive if it only engages one age group, or does it have to be recognized as interactive by most people? Crawford suggests that we can think of interactivity as high, moderate, or low, rather than a simple yes-or-no quality. Interactivity, in his view, is about change, not stagnation; it’s about creating a system that can evolve and respond in better ways, rather than just maintaining the same thing. Like he said, “You can turn up the reaction volume as high as you want, but playing Beethoven’s Ninth Symphony at 20,000 watts does not make it a painting.”

I believe the characteristics of a strongly interactive system are when it is capable of change, not permanent or fixed, and when the person interacting with it can contribute their own personality to the process. I like how he breaks interactivity down into listening, thinking, and speaking; all three need to happen for it to feel real. If one of these is missing, it doesn’t work, just like a conversation falls apart if one person isn’t really listening. Movies, books, or even some games might seem interactive at first, but they fail because they mostly just speak; they don’t listen or think about the user’s input. For me, interactivity is about creating a space where the user can engage fully and shape their experience, making it personal and dynamic. The system isn’t just reacting; it’s part of a back-and-forth process, and that’s what makes it strong and meaningful.

To improve the degree of user interaction in my p5 sketches, I think the key is to make the sketches more responsive to the user’s actions and give them a sense of control over what happens.  For example, I could let users influence multiple aspects of the sketch at once, like color, shape, and movement, so their choices feel meaningful. I could also let the user control some actions from the sketch, like giving them options to choose whether they want one interactive response or another. Later on, when we learn how to include sound features, I could make sketches that track the mouse or input sound continuously and adapt dynamically, rather than only responding at specific moments—which I know might take a long while for me to figure out and really learn how to use.

Concept:

For this project, I wanted to make something a bit more playful and fun. I took inspiration from the classic “Why did the chicken cross the road?” joke, but instead of just one answer, I made each chicken have its own punchline inside a speech bubble. This time I wanted to use a more creative inspiration and make it a little comedic by playing with humor and randomness.

I also challenged myself more with the coding. I didn’t just stick to what we already learned in class, but tried to experiment by looking things up, exploring, and figuring out how to make it work. For example, I had to learn how to make the speech bubble size change depending on the sentence length, and how to make sure each chicken gets a unique punchline. It was tricky, but I liked that I was able to understand and fix something new on my own.

So overall, this piece is both about the humor of random answers to the same old joke, and also about me pushing myself creatively and technically.

Highlight of a code i’m proud of:

One part of my code I’m really proud of is how I made sure each chicken gets a unique punchline. I used shuffle(punchlines, true) to mix up all the punchlines randomly so the order isn’t always the same. The true part is important because it tells the program to change the original punchlines array directly, instead of just making a shuffled copy. This way, when I assign punchlines to chickens, the original array is already randomized. Then, I looped through the array with for (let i = 0; i < punchlines.length; i++) to create a new chicken for each punchline using chickens.push(new Chicken(0, 50 + i * 40, punchlines[i]). The 0 makes each chicken start on the left side of the canvas, and 50 + i * 40 spaces them vertically so they don’t overlap. I like this part because it shows how I can combine arrays, loops, and objects to create multiple unique characters on the screen, and it really brings the sketch to life.

// shuffle punchlines so each chicken gets a unique one
  shuffle(punchlines, true); // randomize the order of punchlines in place

  // create one chicken for each punchline
  for (let i = 0; i < punchlines.length; i++) {
    // x = 0 so chicken starts on left
    // y = 50 + i*40 to space them vertically
    // punchlines[i] gives each chicken its own joke
    chickens.push(new Chicken(0, 50 + i * 40, punchlines[i]));
  }
}

Problems I Ran Into: 

   – Speech bubbles being too small
At first, the text didn’t fit inside the bubbles. I fixed this by using textWidth() to measure the punchline and then adding padding, so the bubble grows depending on how long the sentence is.

   – Same punchlines repeating
In the beginning, some chickens had the same joke. To fix this, I used shuffle(punchlines, true) so the punchlines get mixed up randomly, and each chicken gets its own unique one.

– Balancing simplicity and creativity
I didn’t want the code to be too complicated, but I still wanted it to be fun and creative. That’s why I kept the chicken shape simple (just ellipses for the body and a triangle for the beak) and focused more on the concept with the speech bubbles and punchlines.

Reflection and ideas for future work or improvements: 

I really enjoyed making this project because it let me experiment with coding in a creative way, using arrays, loops, and objects together. I learned a lot about how to structure a sketch, how to make multiple objects move independently. 

For future improvements, I’d love to make the sketch even more dynamic and interactive. For example, I could let the user click on a chicken to make it say a new punchline, or have the chickens move at different speeds across a more detailed road scene. I could also experiment with animations in the bubbles, like making them pop up.  Another idea is to add more randomness to the chicken shapes or colors to give each one even more personality. Overall, I’d like to keep exploring ways to make the sketch playful and visually fun while practicing more advanced coding techniques.

After watching Casey Reas’ Eyeo talk on chance operations, I really connected with his idea that randomness can be a powerful tool in creating art. I agree so much with him that allowing chance into a process can lead to results you might never imagine on your own. For example, in the video he shows sketches where simple rules create shapes, but each time the program runs, the shapes move slightly, overlap differently, or appear in new patterns. Even though the rules stay the same, the randomness makes every version unique and surprising. I found this really inspiring because it shows that art doesn’t have to be completely planned; the program can explore possibilities for you, almost like collaborating with the computer. I also thought about how he balances control and chance, which is something I want to apply in my own work. In the examples, he defines limits for where shapes can appear, what size they can be, or how colors can change, so the random elements stay within a certain framework. This makes the final work look intentional instead of chaotic. Watching this made me think about my own sketches. It’s exciting to see how even small random variations can make something feel more alive and dynamic.

I think the best balance between total randomness and complete control is when you set limits for the random parts but keep the main structure planned. In my own sketches, I could let things like pupils or stars move randomly in a small area while keeping the rest of the portrait fixed. This way, randomness adds fun and surprise without making the piece messy. The talk also raises some questions for me: How do artists decide how much randomness to allow without losing the overall vision? And if a program can produce interesting art automatically, does that mean anyone can make art, or is there still something unique about the artist’s choices? Also how do you design rules that are structured enough to guide the outcome but still leave space for randomness to create interesting variations? These are things I want to explore as I experiment more with random elements in my own work.

My concept: 

For my concept, I wanted to try something a little different that’s not too complicated but still has some creativity in it. At first, I was just going to do a simple circle illusion, but then I felt like that was too typical and I could push it further. I included the first work I did of the circle because I thought it represented more of a loop, while the scribbly one ended up showing more of an animation. So I used a while loop to draw 200 points around a circle, but I added randomness to their positions so it wouldn’t look perfect—it looks more scribbly and alive. I also used random colors for each point, which makes the circle feel like it’s sparkling or shifting. On top of that, I made the radius slowly grow as the frames go by, so the shape expands over time instead of just sitting still. Every 300 frames, the background resets, so the drawing starts fresh again. The result is this mix of order and chaos: a circle at the core, but messy, colorful, and always moving.

A highlight of some code that you’re particularly proud of: 

This doesn’t look like much, but it actually makes a big difference in how the sketch feels. The first line makes the circle slowly grow as the frames go by; it’s like the drawing is breathing or expanding instead of staying stuck in one size. The second part clears the background every 300 frames. Without it, everything would just pile up forever until the screen looked like a giant blur.

I had to look up how to use frameCount and the %  symbol because I didn’t know them before. It was cool to learn that % basically means “every so many frames, do this thing.” Once I figured that out, it felt like I unlocked a new trick to control time and motion in my drawing. I think this is what made my work look more interactive. 

// slowly grow radius over time
  r = r + frameCount * 0.05;

  // reset background
  if (frameCount % 300 === 0) {
    background(0);
  }
}

Reflection and ideas for future work or improvements: 

Looking back at this project, I’m really happy with how the scribbly circles turned out. I like that it’s not just a perfect circle but it feels alive and playful, and I think the motion adds a lot. I also learned a lot about how loops and randomness can work together to create patterns that look complex without being too hard to code. If I were to improve it, I’d probably try adding even more layers or different shapes, maybe some rectangles or lines that move in a similar way to the circles. I’d also like to experiment with colors that change more smoothly over time instead of random ones every frame, so it feels more like a natural gradient. Another idea is to make the scribbles react to the mouse or keyboard, so the viewer can interact with it, which is something i’m planning to experience more with the upcoming assignments. Overall, I feel like this project opened up a lot of possibilities for me to explore simple ideas in a more creative, experimental way.

Full Screen Sketch 

My concept:

• For this assignment, I made a self-portrait using basic shapes in p5.js. I drew the face, hair, and features with ellipses, rectangles, and arcs, and added a fun starry background to make it playful. The goal was to practice placing shapes with coordinates and layering them correctly, like using red ellipses to add a blush effect and adding the star effect in the background. 

Code Highlight: 

• A highlight of some code that i’m particularly proud of is probably the eyes. I spent some extra time making sure the pupils, whites, and tiny highlights looked good together. Even though it’s all basic shapes, adding the little white highlights made the eyes feel alive and gave the portrait more personality. I made sure the codes are in the right order so they overlay the way i want them to and I kept it simple like what we learnt in class and what’s available on the reference website. Also, including the categories for each code really helped keep it organized and easier for me to process and edit.

//eyes
noStroke();
fill(255);
ellipse(170, 170, 25, 16);
ellipse(230, 170, 25, 16);

//pupils
fill(30);
ellipse(170, 170, 12, 12); 
ellipse(230, 170, 12, 12); 

fill(255);
ellipse(170, 168, 4, 4); 
ellipse(230, 168, 4, 4);

Reflection and ideas for future work or improvements: 

• This was my first time making a self-portrait in p5.js, so I definitely struggled a bit with getting the coordinates right and making the shapes look exactly how I imagined. Positioning everything took some time, but it was a good way to practice patience and planning. Next time, I want to experiment with more than just solid shapes; maybe using lines, gradients, or patterns to make the drawings more interesting. I’d also like to learn how to make the sketches interactive, so they respond to the mouse or keyboard, and generally make them look more polished and professional. Overall, it was a fun way to practice layering shapes, arranging them carefully, and thinking about composition, and I feel like I can improve a lot on these ideas in future projects and maybe further my creativity more with the new skills I’ll learn.