Author: Deema Al Zoubi

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.