Week 2 : Reading Response

Casey Reas’ talk on order and chaos in generative art really made me think about the balance between structure and unpredictability in creative expression. I found it fascinating how simple shapes, when repeated using logical rules or algorithms, can give rise to patterns and symmetry. However, while order is important, embracing chaos can lead to more creative freedom. This idea stood out to me because I often feel that art involves a degree of control, where every detail is carefully placed. But Reas’ perspective made me consider the value of letting go—allowing things to take their own course rather than trying to dictate every aspect of an artwork.

Another point that resonated with me was his discussion on randomized numbers and their role in generative art. Randomness, when introduced carefully, can maintain an underlying order while also adding variation that makes the artwork more dynamic. I also found it interesting how a computer, a machine built for logic and precision, can be used to generate such diverse and expressive visuals. This is where I think human input remains invaluable—deciding what should be controlled and what should be left to randomness. While working on my own assignment, I kept Reas’ ideas in mind, thinking carefully about which elements to keep structured and where to introduce randomness to add some chaos and balance out the order and symmetry.

Week 2 : Graphic Art

This time, we had to explore the idea of structured randomness—using loops to create patterns that feel both intentional and organic. I was drawn to the symmetry and repetition found in mandelas, so I used circles, triangles, and leaf-like shapes to build a layered composition. While loops helped generate repeating elements, I also added variations in color, rotation, and placement to make the design more dynamic and to add more uniformity I kept the color scheme consistent with shades of blue for the shapes constituting the mandela.

One part of my code that I’m especially happy with is the layered circles in the background. Getting the balance right took more trial and error than I expected. At first, the colors felt too flat, so I adjusted the shades to match the overall theme to give it a sense of depth. I also had to tweak the positioning to avoid overcrowding while still maintaining a structured look and while doing all this I realized how much small details can change the overall feel of a design.

  // depending on grid created calculates spacing across vertical and horizontal axis between circles 
  spacingX = width / (cols + 1); 
  spacingY = height / (rows + 1); 

  // iterates through each position of grid through rows and columns and assigns differing attributes to each circle to ensure randomness but with even distribution across grid to ensure there's no over-crowding or empty spacing left
  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let x = (i + 1) * spacingX + random(-20, 20); 
      let y = (j + 1) * spacingY + random(-20, 20);
      let circleSize = random(30, 80); 
      let growthRate = random(1, 2); 
      let maxSize = circleSize + random(20, 50);
      let c = color(random(150, 255), random(150, 200), random(200, 255), 150); 
      
      // adds each circle to array created to store attributes
      circles.push({
        x: x, y: y, circleSize: circleSize, growthRate: growthRate, growing: true,
        maxSize: maxSize, minSize: circleSize, col: c
      });
    }
  }
}

function draw() {
  background(255);
  noStroke()
  
  // iterates through array of circles and displays them on canvas
  for (let circle of circles) {
    fill(circle.col); 
    ellipse(circle.x, circle.y, circle.circleSize, circle.circleSize);

    // Growing and shrinking for added randomness
    if (circle.growing) {
      circle.circleSize += circle.growthRate;
      if (circle.circleSize >= circle.maxSize) circle.growing = false;
    } else {
      circle.circleSize -= circle.growthRate;
      if (circle.circleSize <= circle.minSize) circle.growing = true;
    }
  }
Reflection and Future Ideas

Something I found interesting while working on this project was how patterns emerge from simple logic. By repeating and slightly modifying positions of basic shapes, it’s possible to create intricate visuals without manually placing every element. It made me think about the way natural patterns—like those in flowers, shells, or even city layouts—often follow underlying mathematical principles.

Looking ahead, I’d like to push this concept further by incorporating interactivity. Maybe the colors of each layer could shift based on user input, or the shapes which make up each layer change randomly to create a more fluid, evolving mandela. I also want to experiment with layering more complex curves and incorporating randomness in a way that still feels balanced. This project has been a fun challenge in balancing structure and creativity, and I’m excited to keep refining my approach.

Week 1 : Self-Portrait

For this assignment, we were tasked to make a self portrait of ourselves using javascript with simple shapes and other functions we learnt in class and learned through online resources as well.

My thought process for this was simple, I just integrated my facial features and things I wanted to highlight about myself through this self-portrait. One thing I enjoyed adding the side-eye when the mouse is pressed, it was something fun which also incorporated a hint of my personality into my self portrait, and the color of my t-shirt changes from purple (NYU represent) to red to reflect my changing moods. I feel like this exercise allowed me to go back to the basics and I realized how even simple 2D shapes could be used to express complex ideas, for example, cropping a circle into half using a rectangle of the same color as the background to hide it which I used for the top of my head and so on.

One section of my code which I’m proud of is when my portrait side-eyes, mainly cause I spent a lot of time trying out various shapes in different sizes to perfect the side eye, and the colour of my t-shirt also changes to red when the mouse is pressed and goes back to normal upon releasing it. I used simple shapes like circles and rectangles in various colours to make it look like a side-eye along with the mousePressed and mouseReleased functions.

// eyes along with the eye-roll code
  
  if (side_eye) {
    // Draw the new eyes when the flag is true
    fill('white');
    ellipse(145, 140, 25, 14);
    fill('black');
    circle(138, 140, 10); // Pupil
    fill('rgb(255,207,165)');
    rect(131, 131, 27, 8);
  
    fill('white');
    ellipse(195, 140, 25, 14);
    fill('black');
    circle(187, 140, 10); // Pupil
    fill('rgb(255,207,165)');
    rect(182, 131, 27, 8); // Eye reflection
  } else {
    // Draw the original eye shapes if the flag is false
    fill('white');
    noStroke();
    ellipse(145, 140, 25, 14); // Left eye
    ellipse(195, 140, 25, 14); // Right eye

    fill('black');
    noStroke();
    circle(145, 140, 12); // Left pupil
    circle(195, 140, 12); // Right pupil
  }
Reflection and Future Ideas

Reflecting on this assignment, I feel like it was a great opportunity to deepen my understanding of JavaScript and how to use it creatively to build a self-portrait. Breaking down the portrait into simple shapes and translating that into code helped me understand the fundamentals of p5.js and in the future I wish to learn more about other functions and to implement curves and curved lines so that I can make my self portrait more detailed and improve overall design.