Author: ss17339

Assignment 2: For Art

This is my for-loop art piece: taking part of my love for geometric art and combining it with the coding techniques we were taught in class. I chose to be more abstract because my last piece was very portrait-like/ realistic and I wanted to experiment.

📋Assignment Brief

  • Use for() loops or while () loops
  • Use past learned coding techniques
  •  Make a simple work of art, inspired by old computer art magazines

💭Conceptualisation

The goal was to create dynamic geometric art, featuring rotating shapes that interact visually. The core concept revolved around three elements:

  • Rotating circles to create orbital motion
  • A radial pattern of triangles spinning collectively
  • A rotating grid of rectangles to add depth and complexity

The vision was to layer these elements while maintaining visual harmony. Early iterations included a spiral, but it was later removed to reduce clutter. The final design focused on symmetry, contrasting colors, and opposing rotational directions to create a hypnotic effect.

💻Process

I initialised the canvas, centered the coordinate system to the centre of the page, and set the angle mode to degrees for rotation control. I then created an off-axis rotating circle, positioned away from the centre. I used a for loop to distribute 10 triangles radially. Each triangle’s rotation used a fixed offset for simultaneous orbiting.

Next, I added a second circle rotating counterclockwise to create visual tension. I then implemented nested for loops to place rectangles in a grid. Each rectangle rotated with an angle for a shimmering backdrop. I used a translucent background to make a continuous motion trails.

I was the most proud of how I was able to make the grid of squares rotate and spin around. It took a lot of iteration but I was glad that I finally figured out how to make it rotate, and leave a trace.

// Additional Element: Rotating Grid of Rectangles 
  push();
    rotate(angle * 0.2);
    for (let x = -width / 2; x < width / 2; x += 80) 
    {
      for (let y = -height / 2; y < height / 2; y += 80) 
      {
        push();
          translate(x, y);
          rotate(angle);
          fill(255, 255, 0, 100);
          noStroke();
          rect(0, 0, 40, 40);
        pop();
      }
    }
  pop();

 

🚩Challenges

One significant challenge stemmed from managing coordinate transformations. Early versions of the code caused shapes to orbit erratically or appear static because rotations and translations were applied in the wrong order or without proper isolation. For instance, the triangles initially refused to spin because an outer rotate(-angle) transformation, intended to create a dynamic counter-rotation, inadvertently canceled out the individual rotations applied inside the loop.

Another challenge involved implementing opposing rotations for the two circles. Initially, both circles spun in the same direction, which diluted the intended visual contrast. Fixing this required applying rotate(-angle) to the second circle, but this also inverted its positional translation. By maintaining consistent translation distances (90 pixels) for both circles while inverting only the rotation, the symmetrical yet opposing motion was achieved.

📶Potential Improvements

We could enhance the artwork’s interactivity and visual appeal in several ways. Adding user-controlled parameters, like sliders to adjust rotation speeds or grid density, would allow viewers to interact with the piece directly. This could make the experience more engaging and personalized. Color dynamics present another exciting avenue for exploration. We might implement gradual transitions between different color schemes or incorporate noise-based gradients, creating more organic and fluid color shifts throughout the animation. These changes could significantly alter the mood and feel of the artwork.

For a more dramatic upgrade, we could venture into 3D space using p5.js’s WEBGL mode. This would add a new dimension to our geometric shapes, enabling them to orbit in layered planes or respond to perspective changes. It would transform the flat, 2D experience into a more immersive, depth-filled visual journey.

</>Source Code

GitHub Link: https://github.com/theSumeed/Assignment-2-For-Art/tree/main

Assignment 1: Portrait of Myself

This is my self-portrait, depicting me with some items of interest: two flags representing my ethnicity and nationality; gears depicting my love for engineering; and Yugioh cards showing my love for the game.

📋Assignment Brief

  • Make a self-portrait using p5.js using the online editor
  • The portrait must be entirely created using code
  • The portrait may be stylised and should be inspired by one’s character

💭Conceptualisation

I started the project by sketching elements that I identified with, things that resonated with who I am. I chose to highlight my flags, Yugioh cards, a paintbrush, and even a rough sketch of myself. I chose to use a very stylised, art style in order to play into the strengths of the software, hoping to recreate an almost vector-art look.

I then thought about features to implement. Despite not being taught any interactive elements just yet, I wanted to make my piece do something special. Hence, I made the eyes follow the user’s mouse. I achieved this through a combination of researching other people’s projects, YouTube, and Chat GPT.

💻Process

I worked on this project in chunks- isolating each component into an element that would need to be individually coded,  and then planning what tools I would need to use for it. I really enjoyed this as it taught me the thought process and planning needed for a piece like this- something completely new to me.

As I used many repeated elements, I was able to focus on creating a singular good piece and then just translate the element into the other areas it’s needed.

I felt particularly proud that I was able to code the moving eyes: I had to research how different features worked, create and effectively use variables, and had to think through logic to ensure it moved the eyes correctly. This was all iterative, I had to stop and re-try many times but was able to manage in the end.

//Eyes
 fill(256); //Set the fill colour to white
   rect(285, 375, 45, 50, 17);
   rect(370, 375, 45, 50, 17);
   rect(285, 400, 45, 25, 3);
   rect(370, 400, 45, 25, 3);
 noFill(); // Disable the fill colour

 
 // Eye variables
 let leftEyeX = 310; // Left eye X position
 let rightEyeX = 395; // Right eye X position
 let eyeY = 400; // Both eyes Y position
 let eyeSize = 40; // Size of outer eye circles
 let pupilSize = 25; // Size of pupils

 // Calculate pupil positions for both eyes
 for (let eyeX of [leftEyeX, rightEyeX]) 
 {
   let dx = mouseX - eyeX;
   let dy = mouseY - eyeY;
   let angle = atan2(dy, dx);

   // Limit pupil movement
   let maxDistance = (eyeSize - pupilSize) / 4;
   let distance = min(dist(eyeX, eyeY, mouseX, mouseY), maxDistance);

   // Calculate and draw each pupil
   let pupilX = eyeX + cos(angle) * distance;
   let pupilY = eyeY + sin(angle) * distance;

   fill(56, 16, 28); //Set the fill colour to brown
     circle(pupilX, pupilY, pupilSize);
   noFill(); // Disable the fill colour
 }

🚩Challenges

Creating the moving eyes were a tad difficult because this uses a lot of knowledge that we have not yet learned in class. However, I was able to look at past projects and use the internet to self-teach how it works. The Pakistani flag was rather tedious, too, as I had to research how to make a star shape and use another new feature. Additionally, the new coordinate system was rather strange. I had to adjust to using the downwards is positive mindset, but it became easy after I introduced a temporary mouse tracker- using the software’s mouseX and mouseY features.

📶Potential Improvements

To improve, I would use more variables so that my portrait may be scaled to whatever size the canvas is. This would allow the portrait to keep a high resolution despite being scaled up or down. Additionally, I could introduce a clicking feature, something where an element on the screen would change every time I click it. This introduces a sense of whimsy and fun that I identify with.

</>Source Code

GitHub Link: https://github.com/theSumeed/Self-Portrait