Week 2: Reading response (Casey Reas’ Eyeo talk)

How are you planning to incorporate random elements into your work?

Randomness is usually seen as something chaotic, but Casey Reas makes a strong case for it as a necessary ingredient in structured systems. His work shows that when randomness is completely absent, everything eventually settles into sameness—it loses vitality. That idea made me reconsider my approach. I tend to design with a clear sense of control, ensuring everything is deliberate. But maybe randomness isn’t about losing control; maybe it’s about creating space for unpredictability to enhance structure. Instead of placing every element with precision, I want to introduce rules that allow randomness to shape certain aspects—maybe through variation in form, spacing, or subtle movement. This way, my work maintains a structured framework but never becomes rigid. I like the idea of randomness making a piece feel alive, as if it’s still evolving even after it’s complete.

Where do you feel is the optimum balance between total randomness and complete control?

There’s a sweet spot where randomness and control feed into each other, and that’s where the most compelling work happens. Reas talks about how systems that are too rigid become static, while those that are too chaotic lose coherence. That really resonated with me because I’ve felt the same frustration in my own work—when something is too ordered, it feels predictable; when it’s too random, it lacks intention. The best balance depends on what the work is trying to say. If I want a sense of structure, I can set constraints but allow randomness to influence the details—like adjusting spacing, shifting colors, or adding unpredictable textures. It’s not about choosing between order and chaos but about letting them interact, so the piece always has a bit of tension, a sense that it could shift or evolve. That, to me, makes the work more engaging, both visually and conceptually.

Assignment 2 : Loops

Reflection

For this assignment, I created a checkers board using loops and conditionals in p5.js. The program generates an 8×8 grid with alternating black and white squares, and places red and blue checkers pieces on the appropriate black squares using conditionals. The checkers pieces are drawn as circles and are positioned in the top three (red) and bottom three (blue) rows. One of the most interesting parts of the code is how (i + j) % 2 !== 0 ensures that pieces only appear on black squares, while additional conditionals determine their placement. In the future, I could improve this by adding interactivity to allow piece movement, highlighting valid moves, implementing kinged pieces with visual markers, and enabling player turns to make it a fully playable checkers game.

Code

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(30);
  let cols = 8;
  let rows = 8;
  let squareSize = width / cols;

  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let x = i * squareSize;
      let y = j * squareSize;

      // Alternating black and white squares
      if ((i + j) % 2 === 0) {
        fill(240); 
      } else {
        fill(20); 
      }

      rect(x, y, squareSize, squareSize);

      // Placing checkers pieces only on black squares in the right rows
      if ((i + j) % 2 !== 0) {
        if (j < 3) {
          fill(200, 50, 50); 
          ellipse(x + squareSize / 2, y + squareSize / 2, squareSize * 0.8);
        } else if (j > 4) {
          fill(50, 50, 200); 
          ellipse(x + squareSize / 2, y + squareSize / 2, squareSize * 0.8);
        }
      }
    }
  }
}

 

Assignment 1 : Self Portrait

Reflection

For this self-portrait, I wanted to create a clean, simple, and expressive representation of myself, combining basic shapes like ellipses, arcs, and rectangles. The goal was to balance realism and a playful, cartoon-like aesthetic while incorporating distinct features like a small beard, expressive eyebrows, and stylized hair. I focused on ensuring proportionality and seamless transitions between shapes, such as the neck connecting to the head and the shirt integrating an arc and rectangle for a polished look.

I’m proud of how the self-portrait turned out, as it reflects a good balance of simplicity and personal expression. The use of arcs and ellipses allowed me to create distinct facial features, and the small beard adds a unique touch to the design. However, there is room for improvement. In the future, I’d like to experiment with adding shading or gradients to enhance depth and realism. Additionally, I could explore animations, such as blinking eyes or a waving hand, to bring the portrait to life. This project has been a rewarding exercise in creative coding, helping me better understand shape integration and design principles in p5.js.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  // Drawing the neck
  fill(240, 200, 170);
  rect(180, 280, 40, 20);

  // Drawing the head
  fill(240, 200, 170);
  ellipse(200, 200, 150, 180);

  // Drawing the eyes
  fill(255);
  ellipse(170, 190, 30, 20);
  ellipse(230, 190, 30, 20);

  fill(50);
  ellipse(170, 190, 10, 10);
  ellipse(230, 190, 10, 10);

  // Adding eyebrows using arcs for expression
  stroke(50);
  strokeWeight(3);
  noFill();
  arc(170, 175, 40, 10, PI, TWO_PI);
  arc(230, 175, 40, 10, PI, TWO_PI);

  // Drawing the nose
  stroke(150, 100, 80);
  strokeWeight(2);
  line(200, 190, 200, 220);
  arc(200, 220, 20, 10, 0, PI);

  // Adding mouth
  noStroke();
  fill(200, 80, 80);
  arc(200, 250, 50, 30, 0, PI);

  // Adding a small beard below the mouth
  fill(100, 50, 30);
  arc(200, 280, 70, 30, 0, PI);

  // Drawing the hair 
  fill(50);
  arc(200, 150, 160, 120, PI, TWO_PI);
  rect(120, 150, 20, 80);
  rect(260, 150, 20, 80);

  // Drawing ears on both sides of the head
  fill(240, 200, 170);
  ellipse(125, 200, 20, 40);
  ellipse(275, 200, 20, 40);

  // Drawing a shirt 
  fill(100, 150, 200);
  noStroke();
  arc(200, 347, 100, 100, PI, TWO_PI);
  rect(150, 345, 100, 50);
}