Author: Shaikha Mhara Al Nuaimi

My Concept

For this assignment, I wanted to create something simple, structured, and fully based on the techniques from the Week 2 slides. I decided to build a grid of squares using nested loops, just like the examples shown in class. But instead of keeping the grid static, I wanted it to feel a little more interactive.

My idea was to make the colors shift whenever the mouse is pressed, using the built‑in boolean variable mouseIsPressed from the slides. The end result of my project is a grid of evenly spaced squares that change color in a smooth loop every time you click.

Snippet of the code I’m proud of:

if (mouseIsPressed) {
  colorShift += 2;
}

if (colorShift > 255) {
  colorShift = 0;
}

I’m proud of this part because it uses boolean logic and variable incrementation.

How I made this: 

I started by creating a canvas using createCanvas(600, 400), just like in the examples from class. Then I used nested for loops to place squares across the screen.

To make the squares spaced further apart, I increased the loop step to x += 70 and y += 70. This gives the grid a clean, airy look.

Next, I added a variable called colorShift that starts at 0. Using the boolean variable mouseIsPressed (from the slides), I made the number increase whenever the mouse is clicked. This number is then added into the fill() colors so the squares change color interactively.

I also used simple conditionals (if, else if, else) to change the color depending on how far down the screen the square is.

Finally, I drew each square using rect(x, y, 50, 50) inside the nested loops. Because the loops repeat across the whole canvas, the pattern fills the screen automatically.

Reflection and future ideas

Overall, I’m really happy with how this piece turned out, because it uses simple tools like loops, conditionals, boolean variables, and a bit of animation, yet it still manages to feel interactive. Even though the sketch is built from very basic building blocks, the way everything works together makes the grid feel responsive and alive.

Using mouseIsPressed was especially fun, because it showed me how a single boolean variable can instantly make a sketch interactive. Just clicking the mouse changes the colors across the whole grid, and that small action makes the code fun.

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

• Week 2 Slides, (Conditionals, Loops, Boolean Variables) Used for understanding nested loops, mouseIsPressed, relational operators, and conditional logic.
• p5.js Reference https://p5js.org/reference/ Used to check syntax for rect(), fill(), and basic drawing functions.

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:

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.