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

While watching the video, I kept thinking about the relationship between order and chaos. The speaker talked about how artists have historically tried to impose order on the unpredictable nature of the world. But now, with advancements in science and technology, randomness has become part of artistic expression itself. That idea really stuck with me. It made me wonder—do we create to control, or do we create to explore the unknown? The way the speaker described using randomness in his art made me question how much of our daily lives are actually shaped by chance. Even when we think we have control, aren’t we still just reacting to unpredictable forces? It’s interesting how adding a little bit of randomness into a structured system prevents everything from collapsing into sameness. That balance between order and chaos feels very human—too much order, and things become rigid; too much chaos, and everything falls apart.

I’ve been exploring this balance in my own work, especially in this week’s project. The scene I created presents a quiet, melancholic moment viewed from a window—contrasting the ever-changing cityscape outside with the stillness inside. I use randomness to generate elements like the shifting skyline, the movement of rain, and the organic growth of potted plants. This mirrors the way modern life constantly pushes forward, yet we still crave a connection to something timeless and stable. I think the optimum balance between randomness and control depends on intention—too much randomness, and the meaning gets lost; too much control, and it feels lifeless. For my piece, randomness makes each rendering unique, reinforcing the idea that no two moments, even in solitude, are ever exactly the same. The talk made me appreciate how randomness isn’t just a tool—it can be a way of seeing the world differently.

Week 2: Loops

Concept

I was inspired by the old magazines linked in the assignment description, where multiple shapes were often drawn onto the canvas. The canvas however defaults to a line, similar to the light cycles in the original Tron movie. Because of the constant increments by default, the line will turn at consistent lengths and eventually form a grid.

To allow for multiple shapes, I put together multiple functions (e.g., drawCircle, drawTriangle, drawSquare) that the program will rotate through when the mouse is clicked. However, if the user holds down the mouse, the program will cycle through all available shapes and draw all shapes at the same time.

Code Highlight

The below snippet includes an interesting piece of my code that incorporates the randomness: The code generates a random value in the range 0 to 1, and then uses that as a mechanism to decide whether to turn left, right, or go straight. Approximately 80% of the time the code will decide straight, 10% of the time it will choose left, and 10% of the time it will choose right.

// Decide what to do based on the provided value

let randVal = Math.random();
let xDelta = 0;
let yDelta = 0;

if (randVal < 0.8) {
  direction = direction; // do nothing
} else if (randVal < 0.9) {
  direction = (direction + 90) % 360; // go clockwise
} else if (randVal <= 1.0) {
  direction = (direction - 90 + 360) % 360; // go counterclockwise
}

// Draw in direction
if (direction === 0) {
  xDelta = increment;
} else if (direction === 90) {
  yDelta = increment;
} else if (direction === 180) {
  xDelta = -increment;
} else if (direction === 270) {
  yDelta = -increment;
}

 

Demo

Hint: Clicking on the canvas will increase the frame rate and the size of the shapes. Holding <SPACE> will enable the eraser mode.

Reflection and Future Work

This was a fun project for me to put together, and I enjoyed slowly building it up with multiple steps. It is a relatively simple concept, yet incorporates additional layers of complexity as the user interacts more with the piece.

While it does incorporate a loop that draws all shapes at once when the user presses the mouse, the entire program also acts as a loop as the art board is dynamically drawn.

Future work may wish to explore additional shapes that could be added to the piece, or alternative ways for the user to interact with it. Additional threads could also be added, such that multiple lines are being drawn at the same time.

Week 2: Using loops

Concept:

Here are my rough drawings that I used for ideation and inspiration:

The scene captures a quiet and melancholic night, showing the contrast between the outside world and the inside of the room. The rain falling against the window, adding to the somber mood. The city landscape outside is cold and distant with the buildings seen as dark silhouettes against the misty night sky. The outside world feels vast and modern, filled with artificial lights and towering structures, yet it lacks warmth and comfort.

Inside the room, the atmosphere is different. There is a longing for simplicity, an escape from the rush of modern life. The wooden furniture, antique candle holders, and potted plants reflect a preference for an older, more primitive way of living. Inside, one feels more connected to nature and tradition. 

Overall, this scene is about introspecting on the quiet sadness of longing for a simpler life while knowing that the world outside continues to move forward.

Since this was a generative art project, my project features the following elements that were randomly generated:

  • The city landscape changes every time you refresh the code, showing how quickly the infrastructure and outdoor environment evolve.
  • The leaves of the potted plants are randomly generated each time to depict the natural growth of plants.
  • The raindrops are randomly generated within the window area, with variations in speed, position, and size.

Highlights:

I believe the highlight of the code is the dynamic raindrops, as they are the main part of the project and also the most challenging. It was difficult to make the raindrops move continuously in a way that looks realistic, like actual rain. To avoid gaps in the rainfall, I started by coding the raindrops already scattered across the scene. Additionally, they needed to fall at different speeds to create a natural, random effect. Since the rain is outside the room, the raindrops had to disappear when they reached the bottom of the window and restart from the top.

// Initializing raindrops and distributing them randomly from the very top (y=70) to bottom of the window (y=70+380). this ensured that there were drops already at various heights so rainfall looks continuous.

for (let i = 0; i < dropCount; i++) {
let rx = random(130, 130 + 540); // horizontal area of the window
let ry = random(70, 70 + 380); // vertical area of the window
let sp = random(3, 9); // speed of each drop falling
let ln = random(5, 15); // length of each raindrop
raindrops.push({ x: rx, y: ry, speed: sp, length: ln });
}
}

function draw() {
// showing the static scene (background, window frame, city, plants, etc.)
image(sceneG, 0, 0);

// updating and drawing the raindrops so they fall continuously
stroke(200, 220, 255, 120); // raindrop color
strokeWeight(2);

for (let drop of raindrops) {
// move each drop down
drop.y += drop.speed;

// if a drop falls past the bottom of the window area, reseting it to the top
if (drop.y > 70 + 340) {
drop.y = 70;
drop.x = random(130, 130 + 540);
}

// drawing the drop as a vertical line
line(drop.x, drop.y, drop.x, drop.y + drop.length);
}
}

Reflections, ideas for future work & Improvements:

  • It might not be clearly noticeable, but the raindrops overlap with the plant pots, which is something I could have improved. While they still fit into the scene, appearing to be outside the window in the rain, I could place the potted plants in front of the rain to clearly show that they are indoors.
  • I could also improve the aesthetics of the room by adding more antique elements to enhance the contrast between the outside world and the inside of the room.
  • Another improvement could be randomly generating small movements in the candle flame to make it look more realistic.

Week 2 – Graphic Art

TURN YOUR SOUND ON

(click on embedded sketch to turn it on)

https://editor.p5js.org/bobbybobbb/full/V2hgFFToc

I was looking through the old computer arts magazines for inspiration and really liked some images, so I wanted to incorporate them into my project. These 2 specifically were of interest:

Imagine you’re watching a space broadcast on your old TV that glitches out quite often. My concept was to have a bunch of random lines make up a TV frame surrounding my canvas and have these lines animate and be random. I also wanted random stars to twinkle in the night sky and every now and then have static appear on the screen. As for the sound, I downloaded some NASA radio chatter to fit in with the space theme as if you’re watching an actual broadcast about space. Then the static comes in as if your TV is glitching out every now and then, kind of like an old-timey vibe. 

I created separate functions for all the elements in the animation like the TV frame, stars, and static. I had the hardest time with the stars because drawing lines in a circle around a center pivot point is not as easy as it seems. I learned about rotate() and transformations (which you had to use with rotate):

push();
// translate so that it rotates at pivot point: middle of the line
translate(startX+12.5,startY+12.5);
// rotate evenly around a circle
rotate(j*360/7);
translate(-startX-12.5,-startY-12.5);
line(startX,startY,startX+25,startY+25);
pop();

It took me so long to figure out how rotating the lines to form stars works, and at one point, my program crashed and I lost all my work after figuring it out and finishing the TV frame and stars (I was under the impression that p5.js autosaves, but it didn’t), and had to redo a good chunk of the project. There was a lot of math involved for all my elements and lots of randomness; I wanted random line thicknesses for the TV frame and stars, random number of lines and stars, and random shades of gray for the static.

I also used audio files I uploaded to the sketch:

staticNoise = loadSound('staticNoise.mp3');
nasaChatter = loadSound('nasaRadioChatter.mp3');

These two sounds toggle on and off with each other depending on what comes on the screen.

For the future, I’d like to sync up the audio and screen a bit more; it feels like the audio is lagging behind what’s being shown on the screen. At the same time, it kind of adds to the old-timey effect.

Week 2 – Loops

Concept

In this assignment, I initially created a work where random faces of different sizes and colors are displayed, as shown below.

However, after watching Casey Reas’ talk in Eyeo 2012, I challenged myself to mimic his style of digital artwork by using more simple objects to give somewhat abstract feeling to my audience.

So, I made a rotating square with circles of random coordinates. I wanted to create four different squares to rotate synchronously to make the four squares to form one large rotating square.

Demo

 

Code Highlight

let angle = 0;
let speed = 0.01;
let centerX = 200; 
let centerY = 200;  
...
//move the center of grid to (0,0) and top-left to (-200,-200) with top-right of (200,200)
  translate(centerX, centerY);
  rotate(angle); // Rotate the entire canvas
  angle += speed;

I am most proud of moving the center of grid to (0,0) to make it easier to code as I always found it hard to understand x- and y- coordinates system of p5.js. In addition, I made the objects rotate continuously for better visual aesthetics.

Reflection and Possible Improvements

I wanted to create an art as a result of some random values or outcomes of the code. Even though the circles have random coordinates, I initially wanted to create an entire artwork to be of a random result: to display a different outcome after each run. However, I could not be creative enough to make such imagination come true.

Moreover, my work would be more visually aesthetic if there are more shapes or colors; maybe, I could have made the shapes and colors to be randomly generated.

Reading Reflection – Week #2

I have had hard time really grasping what interactive media really means and what is expected in this class. Coming more from programming background, I have found myself struggling to be creative when completing assignments and working in class. As I have never challenged myself to think in realm of art, I needed to practice thinking like an artist and use my imagination in ways that are original : which is not usually the case when programming. When programming, there are very specific rules and guidelines; furthermore, there are limits to where I can be innovative. I need to use correct syntax, open brackets and close brackets in the right places for loops, and can never forget to put semi-colons after each lines of code. However, after watching Casey Reas’ speech in Eyeo 2012, I could understanding how art can be produced with the help of technology: more specifically how art can be created through coding.

Generating random numbers or patterns is one of the simplest concept in coding, and Reas discusses how such concept may create complex visual systems. It is intuitive for programmers to associate the word ‘random’ as chaos as they normally do not want random results or values to occur by their codes. However, Reas’ points on the relationship between systemic autonomy and artworks opened my eyes to a completely different perspective: persuading me to consider random outcome of code to be a form of art, in a sense. Seeing digital artworks presented by Reas during his presentation, I reflected on my programming journey and thought the amount of random outputs I got while learning how to code may have turned into an art piece!

Even though randomness in code and use of technology may be a medium to create art, I find Reas to be advocating the role of technology in art too much as he does not discuss art in forms of paintings or sculptures. He only talks about digital art forms, which might make painters or those who create more traditional forms of art uncomfortable. It occurs to me that if art can be created digitally with the help of machine learning and technological advancement, then there would be less opportunities for man-made arts as it is cost-effective and less time-consuming. Thus, I believe technological approach to art has to be made very carefully as it may not only affect the definition of art, but also have impacts on artists both socially and economically.

In addition, if art is made by random outcomes and does not show the same visualization consistently, I believe it is hard to be defined as ‘art’. Artists use specific colors, stroke their brushes in specific ways to match their needs, and pick specific apparatus to make their imagination come true, but Reas’ examples of art defies the traditional concept of art in all ways possible.

It is indeed remarkable how technology can be used to create art, but I think the creation of art cannot be relied entirely on randomness and should reflect more on the purpose of artists.

Assignment 2: Flowers in the Wind

For this week’s assignment, we were asked to create a peice of artwork utilizing loops. I struggled to think of a concept at first, but while walking around the campus, inspiration struck. I saw flowers across the campus moving in the wind. Thus, my assignment takes inspiration from that image.

In my peice, 10 flowers are randomly generated throughout the canvas, with their size and color also being randomized.

I had to watch some tutorials in order to understand the way angles worked in p5.js to get my flowers to spin. Due to this learning curve, I am especially proud of the rotation of the flowers within my peice. It took quite some time for me to get the hang of it, but it made the end result all the more satisfying to accomplish.

function draw() {
  //refreshing the background each time
  background("#9dc183");
  

  //iterating over every item in the flower array
  for (let flower of flowers) {
    push();
    //makes the drawing start at the center of the flower
    translate(flower.x, flower.y);
    //makes the flower spin from the center
    rotate(flower.angle);
    drawFlower(flower.size, flower.color);
    pop();
    flower.angle += spinSpeed;
  }

  //if statement that will call the generate flower function as long as the flower array isnt longer than 10 and will generate every second
  if (flowers.length < maxFlowers && frameCount % 60 == 0) {
    generateFlower();
  }
}

 

Initially I had wanted a more detailed background for my peice, rather than a solid color, however, I struggled with the background flickering every frame. Another thing I think that can be further improved on is the variety of flowers chosen. It would be fun to implement more kinds of flowers, rather than simply just having them in different colors.

Assignment 2: Drawing Fireworks

My concept

My project is a simple firework animation with randomly changing backgrounds. While reading the technical reading assigned for this week about randomness, I realized I wanted to incorporate that concept into my work. Another inspiration was the drawing exercise we did in class using mouseX and mouseY, so I decided to apply it here with the fireworks.

However, as I worked on the project, I realized that there’s a bigger meaning behind it. The randomness of the fireworks represents the unpredictability of life, with both the good and the bad. Each click creates a unique firework explosion, symbolizing how every action and decision in life leads to an outcome that can never be exactly repeated.

Code Highlight

One part of the code that I’m proud of is how I used user interactions to create the fireworks effect. On top of that, i created randomly changing backgrounds.

function mousePressed() {
  if (showText) {
    showText = false; 
    background(0); // Clear text from canvas
  }
  drawFirework(mouseX, mouseY);
  let randomBg = color( random(255), random(255), random(255) );
    background(randomBg); // Random Background with each click
}
function mouseDragged() {
  drawFirework(mouseX, mouseY); 
}

Reflection

This project taught me a lot, while allowing me to incorporate some concepts learned in class. While I initially struggled with creating the fireworks and spreading out the lines, I’m happy with how it turned out.

Also, i had an idea to add “Back” button so the user could return to the inital background and I hope the knowledge i’ll gain in classes will allow me to add such features.

Embedded Sketch

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.