Reading Reflection – Week 2

The first thing about Casey’s presentation that made me challenge my beliefs is that digital art is not real art. I used to think that things that are ‘generated’ are not authentic enough to be considered a unique piece of art. Yet, seeing how much thought and structure it takes to create an abstract pattern with the help of algorithms made me reevaluate my views. It’s fascinating how a series of flat geometric shapes drawn over and over again can create such a lively picture.  This idea is reflected in the quote by Michael Noll, “The computer is a unique device for the arts, since it can function solely as an obedient tool with vast capabilities for controlling complicated and involved processes. But then again, full exploitation of those unique talents for controlled randomness and detailed algorithms can result in an entirely new medium—a creative, artistic medium.” In my future works, I’d like to work more on thinking creatively within a limited range of functions I know.

I believe that uncontrolled randomness leads to complete chaos, while good digital artwork takes a little bit of randomness and a lot of decision-making. As humans, we are set to think in patters, thus it can be quite challenging to create something inherently random, something that has no beginning or end, or doesn’t follow standard rules of composition. I like how Casey uses randomness as a jumping-off point for his artworks such as rolling a dice to trigger the final composition, which is built based on a series of carefully designed algorithms.  

Looking at Casey’s journey, I admire how meticulous he is about building an algorithm and exploring it to the fullest before moving onto a new concept. It seems like he won’t leave his idea until he has tried visualizing it in all ways possible. This reminds me of how famous artists such as Picasso, who went though different ‘eras’ in his art, ended up creating a series of artworks known as The Blue Period. 

My final takeaway from this talk is that true randomness can not be generated by a computer – it has to be “borrowed” from nature, like the patters that bacteria create while reacting to sunlight, where computer serves as a tool to make randomness make sense. 

Week 2 – artwork

Concept

This artwork explores the balance between structure and unpredictability through a dynamic grid of circles. The grid itself represents order and repetition, while the interaction with the mouse introduces an element of spontaneity. As the user moves their cursor, the circles respond by changing size and color, creating a sense of movement and fluidity. This interaction turns the viewer into an active participant, making the piece feel more alive and engaging. The idea behind it is to show how external influences can transform something predictable into something unexpected.

Code Highlight

One of the most interesting aspects of the code is the way it uses a double for-loop to generate a grid of circles. This helps arrange the shapes evenly on the canvas. The interactive part is driven by the dist() function, which calculates how far each circle is from the mouse pointer. That distance then determines the size and color of each circle, making them look as if they reacted to the user’s mouse movements. The map() function helps smooth out these changes by scaling the distance values into a range that works well for the visual effect.

for (let i = 0; i < cols; i++) {
  for (let j = 0; j < rows; j++) {
    let d = dist(mouseX, mouseY, x, y);
    let circleSize = map(d, 0, width, maxSize, minSize);
    fill(map(d, 0, width, 255, 100), 100, 200);
    ellipse(x, y, circleSize);
  }
}

Reflection & Improvements for Future Work

I believe that my project does a great job of showing how loops and interaction can be used to create something visually engaging in p5.js. The grid of circles reacting to the mouse makes the piece feel dynamic, and the changes in size and color add a nice touch of unpredictability. It’s simple, but it keeps things interesting as you move the mouse around.

That being said, there’s definitely room for improvement. Right now, the transitions feel a bit abrupt, so adding some smoothing or easing effects could make the movement more natural. It would also be fun to experiment with extra elements like rotation, fading effects, or even some subtle animation when the mouse isn’t moving. Another cool idea would be giving users more control—maybe letting them change the colors or grid size with sliders or buttons. And if sound was added, it could create an even more immersive experience where the visuals react to music or voice input.

Overall, this was a fun experiment in generative art.

Week 1 – Self-portrait


Reference: I used a picture of myself for official documents to help me vizualize the self-portrait

 

 

 

 

 


Reflection

This task was a really fun and creative way to dive into p5.js. At first, I was a bit nervous because the idea of creating a portrait entirely through code felt like a challenge. However, as I started working with the basic shapes, I realized how much fun it was to build my self-portrait step by step.

I began with simple shapes like ellipses for the head and hair, and a rectangle for the fringe. It was amazing how easily I could combine these basic elements to create the foundation of the portrait. Once I had the basic structure, I worked on adding details like the eyes, eyebrows, and nose.

My favorite part of the process was creating the blush effect on the cheeks. I used lines to make small strokes under the eyes, which gave the face a lot of character and expression. It felt like a small touch, but it made a big difference in bringing the portrait to life.

By the end of the task, I was surprised by how much I learned about coding and how creative you can be with simple drawing functions. One thing that bothered me is how time-consuming it can be to find the right “coordinates” on the canvas. It would have been helpful if I could hover over a specific spot where I’d want my object to start and see the coordinate number.

function setup() {
  createCanvas(400, 400);
  background(255, 182, 193);

  // Hair
  fill(110, 70, 50);
  ellipse(200, 225, 200, 290);
  
  // Head
  fill(240, 209, 190);
  noStroke();
  ellipse(200, 200, 150, 180);

   //Fringe 
  fill(110, 70, 50); // Same color as hair
  noStroke();
  rect(140, 110, 120, 30); 
  
  // Eyes
  fill(255);
  ellipse(170, 200, 30, 20); // Left eye white
  ellipse(230, 200, 30, 20); // Right eye white
  fill(150, 75, 0);
  ellipse(170, 200, 10, 10); // Left iris
  ellipse(230, 200, 10, 10); // Right iris
  
  // Blush under left eye
  stroke(255, 182, 193); // Light pink color for blush
  strokeWeight(2);
  line(150, 220, 155, 225); // First line
  line(160, 220, 165, 225); // Second line
  line(170, 220, 175, 225); // Third line

  // Blush under right eye
  line(220, 220, 225, 225); // First line
  line(230, 220, 235, 225); // Second line
  line(240, 220, 245, 225); // Third line

  // Eyebrows
  stroke(80, 50, 40);
  strokeWeight(4);
  noFill();
  arc(170, 190, 40, 30, PI + QUARTER_PI, TWO_PI - QUARTER_PI); // Left   eyebrow
  arc(230, 190, 40, 30, PI + QUARTER_PI, TWO_PI - QUARTER_PI); // Right   eyebrow


  // Nose
  noFill();
  stroke(150, 100, 90);
  strokeWeight(2);
  beginShape();
  vertex(200, 205);
  vertex(195, 225);
  vertex(200, 230);
  endShape();

  // Mouth
  noStroke();
  fill(180, 80, 90);
  arc(200, 260, 50, 30, 0, PI);

  // Earrings
  fill(255, 255, 0);
  ellipse(125, 220, 10, 10); // Left earring
  ellipse(275, 220, 10, 10); // Right earring

   // Shirt
  fill(245, 245, 220);
  rect(140, 340, 120, 80);
  arc(200, 340, 120, 80, PI, 0);
  
  // Neck
  fill(240, 209, 190);
  rect(175, 270, 50, 35);

}