Week 3 – Functions, Arrays, and Object-Oriented Programming

Concept

In this p5.js sketch, my main objective was to practice the use of classes and arrays. In my sketch, little objects called “walkers” wander randomly across the canvas, leaving behind the trail that slowly fades away. Each walker has its properties (see below in Code Highlight part), which are determined randomly at the moment of creation (user click).

Demo (Click on canvas)

Code Highlight:

The core of this sketch is the Walker class. It encapsulates everything each walker needs to function:

// Walker class definition
class Walker {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    // Give each Walker a random color
    this.col = color(random(255), random(255), random(255));
    // Control how quickly it moves around
    this.stepSize = random(1, 3);
  }

  update() {
    // Randomly move the walker in x & y directions
    this.x += random(-this.stepSize, this.stepSize);
    this.y += random(-this.stepSize, this.stepSize);

    // Keep the walker within the canvas boundaries
    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  }

  show() {
    noStroke();
    fill(this.col);
    ellipse(this.x, this.y, 8, 8);
  }
}

Inside this class, the update() method adjusts the walker’s position in small random increments, while show() draws a small ellipse at its current location.

The background(0, 13) call in the draw() loop is also important because it uses transparency to slowly erase the walkers’ paths, creating the glowing trails of each walker (I think it looks kinda cool).

Reflection & Improvements for Future Work

First of all, it was really entertaining to watch each walker wander around, leaving a trail. By simply changing parameters like number of walkers, their step size, or fade value in the background, one could produce unique versions of this piece.

In the future, I would love to make sure that the walkers of the same color would interact with each other (mixing together and creating a bigger walker). Another interesting idea would be to incorporate music in this piece (maybe 90s like Jungle beat) -> this way each walker would change its size/movement speed/direction based on the song.

If one would think long enough, the possibilities for making this piece more immersive and dynamic are essentially limitless.

Maybe one could make a game out of this piece, who knows?

Reading Response 2 – What Exactly Is Interactivity? (Week 3)

Chris Crawford’s idea of interactivity as a conversation between two participants came as a novelty to me. Before reading this, I assumed that any program that reacted to user input was interactive in its nature, but after reading this I was convinced that an interactive system must possess these three elements; listening, thinking and responding/speaking. 

I feel like Crawford’s example of the refrigerator light was brilliant, it made me rethink what it means for a system to be truly interactive. I began examining the apps and websites I use every day and noticed that many of them only react to user input without actually processing information in a meaningful way. They operate on predefined rules, responding to clicks and taps but not truly engaging with the user. This made me question whether these systems, despite their responsiveness, can really be considered interactive in the way Crawford describes. 

This reading also made me reflect on how I can make my own p5 sketches feel more interactive. Right now, they mostly respond to simple inputs like mouse clicks, but what if I could design interactions that feel more like a two-way conversation?

Instead of just reacting instantly, the system could analyze patterns in user input, adapt its responses based on context, or even introduce an element of unpredictability to keep the interaction dynamic. For example, it could recognize different drawing styles over time and subtly adjust its behavior to match the user’s preferences. Of course, achieving this level of interactivity would likely require more advanced tools than p5.js (Maybe use of LLMs/AI).

I would love to create something beyond basic cause-and-effect responses and explore ways to create a more engaging.

Reading Response 1 – Chance Operations (Week 2)

In his talk, Casey Reas explores the theme of order and chaos in art, emphasizing the role of randomness in creative processes. He also focuses on the notion of “controlled randomness” , where artists establish specific rules and parameters within code, allowing for unexpected outcomes while maintaining the overall coherence.

First of all, I really enjoyed listening to Reas’ talk. I appreciated the way he showcased his work and explained his philosophy on creativity and art. Reflecting on his insights, I aimed to incorporate the concept of controlled randomness in my most recent p5.js sketch, which I titled randomness. The overall structure of the artwork is straightforward—featuring a 10×10 grid of circles. However, the element of controlled randomness comes into play when the user interacts with the piece. Each time the user clicks on the canvas, the circles in the grid change in shape and size, creating a dynamic balance between order and unpredictability. While users can grasp the overall structure, every interaction (mouse click) generates a unique and evolving pattern. I wouldn’t go so far as to claim that my artwork revolutionizes the concept of generative art, but I believe it is an engaging and enjoyable piece to explore.

That being said, Reas’ perspective on art and the creative process encourages me to explore the potential of chance in my work. With every new p5.js sketch I create, I will keep the notion of “controlled randomness” in mind.

Week 2 – Animation, Conditionals, Loops

Concept

In this p5.js sketch, my main objective was to practice for loops and play around with the concept of randomness a bit. It is a simple generative art piece. The idea was to generate a grid of circles, where each circle varies in size, color and level of transparency. So by clicking on the window/canvas, the user can regenerate a completely random pattern (this adds an element of interactivity and makes the artwork dynamic).

Demo (Click on canvas)

Code Highlight:

One of the parts I’m most proud of is the loop structure that efficiently places the circles while maintaining randomness in their size and color:

for (let x = 0; x < width; x += spacing) {
  for (let y = 0; y < height; y += spacing) {
    let size = random(10, spacing * 0.8);
    let r = random(100, 255);
    let g = random(100, 255);
    let b = random(100, 255);

    fill(r, g, b, 180); // Semi-transparent random color
    noStroke();
    ellipse(x + spacing / 2, y + spacing / 2, size, size);
  }
}

Reflection & Improvements for Future Work

This project reinforced my understanding of looping structures in p5.js and the power of randomness in generative art. It was interesting to see how slight variations in parameters can lead to visually engaging results.

Future Work:
Experiment with different shapes (e.g., triangles, squares, or custom polygons). Add animation so circles gradually fade in and out.  Allow users to save their favorite generated patterns.

This was a fun dive into creative coding, and I look forward to exploring more complex generative techniques!

Week 1 – Self Portrait

Concept

My main objective was to create an accurate self-portrait of myself. To achieve this, I started by taking a photo of myself at the beginning of the assignment and then attempted to capture all the details I saw in the photo using p5.js. The challenge arose when it came to my wavy (almost curly) hair, as I needed to accurately depict its shape. Additionally, I spent a considerable amount of time figuring out what kind of facial expression to depict, I ended up doing “closed eyes” look since it looked better than the “open eyes” to me. I also focused on maintaining the correct proportions of my body in the portrait. In the end, I was pleased with the minimalistic aesthetic that emerged, as it seemed to align well with my personality.

Demo

Code Highlight (Hair area):

So this part is the part of the code that I am most proud of, maybe due to the fact that I spent so much time on it 🙂

It was the most challenging part of the code due to various reasons like lack of p5.js knowledge (I had to look a lot of stuff up), trying to make different shapes work in harmony and perfectionism stalling the productivity.

At the end, I tried to imitate a middle-part hairstyle using arcs and triangles (might not be the best way but I am fine with the end result).

Here’s the code snippet of the Hair class:

// Hair class 
class Hair {
  draw() {
    fill(0, 0, 0); // Hair color
    noStroke();
    arc(300, 205, 197, 170, PI, 0); // Top hair arc
    fill(228, 177, 171); // Skin color
    arc(300, 210, 50, 50, PI, 0); // Forehead section (mid-part separation)
    fill(1, 1, 1); // Hair color
    triangle(201, 205, 275, 205, 175, 230); // Left side bangs
    rect(200, 205, 15, 45); // Left side hair sideburn
    rect(385, 205, 15, 45); // Right side hair sideburn
    triangle(326, 205, 400, 205, 430, 230); // Right side bangs
  }
}

Reflection & Improvements for Future Work

The experience was quite enjoyable for me because, I was exposed to p5.js before, but it never went beyond some simple sketches, just messing around with the software, nothing serious.  Additionally, it felt like I was opening a new realm of coding. After completing handful of courses in Computer Science curriculum, coding started to associate with efficiency and work, not necessarily artistic vision/creativity, so I was delighted to work on something creative using code.

I always wanted to try to do digital portraits, previously I only did pencil portraits, but I never had the time or reason to do it until now. Discovering that I could make art with code was a delightful surprise. It made me realize I had missed out on a great way to express myself creatively. This experience has sparked a new interest in combining technology and art in my work, and I’m eager to explore this intersection more in the future.