Reading Reflection – Week#2

When Casey Reas presented on the section of the interplay between order and chaos in art, I was struck by the way geometry became a central thread in the works he showed. What first appears as random begins with a point, then extends into a line, a plane, a pyramid, and beyond. This progression made me reflect on how art can serve as a medium for visualizing different dimensions, not just one or two, but conceptually even higher dimensions that are difficult to visualize mathematically.

These pieces also reminded me of a saying that what we perceive as “fixed reality” is often the outcome of countless random events in the past. This questioned me to reconsider the very idea of randomness. In the digital world, randomness is never truly random but rather pseudo-random, generated by algorithms. If randomness is always mediated by machines, codes, and computational logics, then perhaps chance itself is never pure but always carefully curated within larger systems, or even by higher-dimensional “creatures.”

In the last works that Reas showed, randomized pixels can be flipped into recognizable icons and numbers. This reminded me that the rules and symbolic systems we rely on every day, language, notation, even code itself, are not inevitable truths but constructed layers that emerged from countless iterations, decisions, and constraints. What seems stable is in fact the result of “layered randomness,” structured into order through history and standardization. Even today, the simple random() function in p5.js, which feels effortless to call, is built upon decades of infrastructural layering: from punch cards and military research to modern standards like Unicode. Each of these conveniences conceals a history of constraints, distilling complex philosophies and technologies into modular tools that allow digital artists to create with apparent spontaneity.

To answer the question of the optimum balance between total randomness and complete control, my mind drifted toward a more philosophical side. Can there ever be an autonomous “optimal point,” or is every balance ultimately surveilled and regulated? I find myself leaning toward a more pessimistic answer, suspecting that what appears to be freedom within randomness is always already framed by invisible structures of control. 

Week 2 Loop Assignment – Joy Zheng

Concept

My concept for this work came from an in-class moment. When Professor Mang was demonstrating looping horizontal and vertical lines, my eyes were tricked into seeing illusory diagonal lines that weren’t actually there.

After chatting with a psychology major friend who is taking a course on visual perception, I learned this effect is called optical illusion (our brain “fills in” missing shapes or creates illusions). She also introduced me to a set of famous illusions, and I was especially fascinated by the Cafe Wall Illusion, where parallel lines look slanted (not parallel as they really are) when black and white tiles are offset. I decided to recreate that illusion using nested loops, because it is simple yet powerful in showing how math and art can merge to create perceptual and artistic effects.

The effect turned out to be amazing. You can actually feel the tiles appear sloped when you look at them from a certain distance. I noticed that the illusion doesn’t work really well when you are too close.

Embedded sketch

The interactivity of p5.js also inspired me to experiment with different ways of breaking the illusion, so I found that adding bold lines between the tiles is a surprisingly effective method.

A highlight of some code that you’re particularly proud of

My favorite pieces of code are the row offset logic and interactive show lines feature:

for (let y=0; y<rows; y++) {
  //all even rows' first tile was pushed half way in   
    let offset = 0;
    if (y%2 == 1) {
      offset = tileSize/2;
    }
    //for every column
    for (let x = 0; x < columns; x++) {
      //all even row tiles are white
      //all odd row tiles are black
      if (x%2 == 0) {
        fill(0);
      } else {
        fill(255);
      }
      //create tileSize tiles
      //created half way in when it's on the even row
      rect(x * tileSize+offset, y * tileSize, tileSize, tileSize)
    }
    
  }
  //display the breaking illusion lines when clicked
  if (showLines) {
    fill(150);
    for (let y=1; y <rows; y++) {
    rect(0, y*tileSize, width, 5);
    }
  }

This small conditional offset, embedded in a loop, shifts every other row half a tile, which is what makes the illusion possible. The most basic function of showing lines gives me the immediate initiative to stop the illusion. I specifically love these parts because it shows how a very minimal algorithm can have a huge impact on the final visual. Without it, the grid reverses back to ordinary.

Reflection and ideas for future work or improvements

This project inspired me to think about how simple loops and conditions can recreate complex psychological effects. It reminded me that coding is not only technical but also artistic—it can play with human perception in surprising ways. In the future, I would like to expand this piece by making the illusion interactive: for example, letting the user adjust the tile size or the offset with a slider, or animating the tiles so that the illusion shifts dynamically. I would also like to try building other illusions, like the Zollner illusion or the Kanizsa triangle, to see how far p5.js can push visual trickery.

Week 2 – Loops

For this week’s task, I wanted to bring together two ideas: my love for the Arabic language and our class discussion about randomness. I decided to focus on the Arabic letter Alef because it’s such a fundamental and visually striking character (also its the letter my name starts with). I thought it would be interesting to combine something very structured and cultural, like the Alef, with something unpredictable, like random color and rotation. The result is a sketch where one large white Alef sits in the center of the screen, steady and grounded, while smaller Alefs surround it, each taking on different colors and rotations whenever I click the mouse. I like the contrast this creates, the main Alef is constant, but the surrounding ones are always changing, almost like a conversation between structure and randomness

Before I even touched the code, I started by sketching my idea out on paper. I drew a large Alef in the center of the page with smaller ones scattered around it, which helped me figure out the overall composition I wanted. Seeing it on paper gave me a clearer sense of how the final sketch should feel. Having this rough plan in front of me made the coding process much smoother, since I wasn’t starting from scratch on the screen, I already had a visual map to follow.

A highlight in my code that I’m proud of is definitely the drawAlef() function. At first, it took me a long time to figure out how to break down the shape of the Alef into basic rectangles. It was a process of trial and error to get the base, and the hamza shape (figure above the base), and the over Arabic letter to look right and accurate together. Once I finally got it to look like an Alef, I was proud because it felt like I had “translated” something cultural into the language of code. It also makes the rest of the sketch easier to manage, since I can just call drawAlef() whenever I want another Alef, no matter the position, size, rotation, or color.

// draws one Alef at (x,y) with scale s, rotation rot, and color col
function drawAlef(x, y, s, rot, col) {
  push();
  translate(x, y);
  rotate(rot);
  scale(s);
  fill(col);

  // alef base
  rect(0, 0, 20, 120);
  
//drawing the hamza (همزه)
  // hamza base
  rect(0, -70, 75, 10);

  // hamza vertical
  rect(0, -90, 10, 40);

  // hamza horizontal
  rect(25, -105, 40, 10);

I really appreciate how P5js allows me to write comments in arabic without messing up the structure left to right, notice how it let me put the word (همزه) in the correct position!

This project was definitely a challenge for me, and I had to look online for a lot of help to figure it out. I came across new ideas like lists (arrays), which let me store lots of values at once, such as the positions, rotations, and colors for my mini Alefs. I also learned about the commands push() and pop(), push adds new values into a list, while pop helps reset drawing settings so my transformations don’t mess up everything else. Another big step for me was understanding how i works in a loop, and how i++ increases it each time the loop repeats. At first, these concepts were confusing, but using them in my own code made them click (no pun intended). Now I feel like I have a better grasp of how loops and arrays work together, even though it took a lot of trial and error to get here.

Looking back, I think the project works well in showing how randomness can bring life to something as simple as repeating a letterform. At the same time, I see room for future improvement. One idea I’d like to try next is adding motion, for example, making the mini Alefs slowly rotate or drift across the canvas, instead of staying frozen until I click. This would create a more dynamic sketch, almost like the Alefs are floating around the central figure. Another idea could be experimenting with gradients or fading effects so that the Alefs don’t just appear instantly in new colors but shift more gradually. Overall, this project gave me confidence in writing loops and using functions creatively.

Week 2 – Video Reflection

Reflection

Throughout my artistic journey, I have learned about the many rules of composition and other elements when it comes to creating an artwork, especially in certain genres. However, more and more artists continue to break these rules, leading to the creation of new genres and pieces of profound meaning and reflection. For this reason, what stood out the most to me was the introduction of  “randomness” to the coding used for the works displayed, such as in the example of the cells where the use of randomness determined what the position and scale of the clusters would be, breaking the order and rules, but at the same time complimenting said order. 

Nonetheless, in my eyes this randomness is a more subtle way of describing chaos. Chaos, the opposite of order, has always been a fascinating concept to me. How it disrupts what brings comfort and despite its unpredictability, its beauty emerges from what encourages artists to twist the horizon of expectations for viewers, offering new perspectives to “cliche” subject matter.   Although I wasn’t foreign to any of these concepts, it was surprising to see them being introduced to systems and codes to produce the works shown. Before this video I always thought that coding relied mostly on the order, the simplicity, the structure, and precision of all the elements presented. This makes me want to explore more of this “randomness” in hope of applying the unpredictable on my codes as I do with my traditional artworks.

Week 2 Assignment_Loops

My concept

This week after learning about loops, for my design I wanted to explore how I could use different shapes and in some way combine or merge them to create different patterns.

For this assignment I created two designs after experimenting the use of loops and shapes. The first one as shown below is composed of a “for ()” loop including two sets of  lines and two sets of ellipses. As shown in the second design, the first layer is a set of lines underneath one set of ellipses which produce a pattern that matches that of scales such of a fish. After this, I explored the use of a second layer of ellipses with a different size for the height and width, thus creating a pattern as shown in the first design.

Highlight code

One of the codes I was most proud of were the loops I used to make the scales. These consisted of lines that followed the code we did in class, but with a slight change in the width, height and their size. The second code was for the scales themselves, consisting of ellipses placed on top of the lines.

 

/// green lines
   stroke(200,200,200);
  for(let x = 0; x <= width; x += 60){
    for(let y = 0; y <= height; y += 60){    
     line(x, y, x+75, y+75);  
      fill( 235, 0, 255);
    }
  }
  
  
  /// Scales
  for(let x = 0; x <= width; x += 30){
    for(let y = 0; y <= height; y += 30){    
     ellipse( x, y, 50, 50);  
      fill( 225, 100, 230);
    }
  }

 

Embedded sketch

 

Reflection and ideas for future work or improvements

One of the things I struggled the most with was getting the loop code right for the lines. At first, I thought it would be the same as we did for the ellipses, however, after testing it out I realized this did not work. Nonetheless, after discussing my situation with the professor, I was able to understand my mistake, and how the code for the lines was different when it came to the variables after the (x, y,), which, unlike the code for the ellipse, required a plus sign to adapt an accurate width and height, resulting in this:

line (x, y, x + 75, y + 75);

For my next project, I will look at more tutorials beforehand to have more preparation and to have a better understanding of the codes I will be using in order to have a more precise result. I will also produce multiple sketches of what I want my final product to be so I can aim towards a specific design in case I don’t have the time to explore different outcomes. Lastly, I would also love to add more animations and movement to my sketches.

Week 2 – Writing Response

In his Eyeo talk, Casey Reas reflects on how randomness can bring life to a system. At one point, he explains that when there is no variation or unpredictability, everything begins to merge into sameness: “If these lines don’t have any bit of noise or jitter, they gradually tend towards one location. The system becomes homogeneous.” I found this idea so powerful because it mirrors real life. If everything was perfectly controlled, predictable, and identical, the world would feel lifeless. For example, if every tree on my walking path looked exactly the same, going on a walk would be dull and uninspiring. But because there’s always a little difference like a twisted branch, a bird flying by or sudden shift in light ,  my walk is always interesting and dynamic. Reas’ point about adding just a “slight bit of noise” to keep a system alive reminds me that unpredictability is what makes both art and life vibrant. I completely agree with his perspective that randomness doesn’t need to feel chaotic; instead, it can be a natural force that keeps things intriguing and gives them life, much like nature itself.

Reas also talks about the tension between chaos and order in art, saying that historically artists have been expected to impose structure and fight against disorder. His work flips that expectation, showing that embracing randomness doesn’t mean giving up control. He designs rules and systems but leaves certain spaces open for chance, allowing surprising outcomes to emerge. This balance really resonates with me. I’ve noticed in my own creative work that when I try to control every single detail, the result feels rigid and forced, it almost seems as if it traps my flow of creativity. On the other hand, if I let go completely, the work fully loses direction and structure. I think the “optimum balance,” as Reas demonstrates, is to create a strong foundation, like the rules of a game, and then allow randomness to bring it to life. This makes me rethink how I approach creativity. Rather than seeing unpredictability as a threat, I want to treat it as a collaborator, trusting that a little randomness will make my work interesting and lively, just as it makes the world around us more beautiful and alive.

Casey Reas’ talk really resonated with me because I go on walks all the time, and I’ve noticed how much the environment affects how I feel. The first photo, with its perfectly symmetrical path and identical trees, reminds me of walking on a treadmill at the gym,  predictable and boring. But the second photo, with its uneven, colorful flowers and natural variety, captures what makes walking outside so special to me. The flowers aren’t perfectly placed, yet that imperfection gives the path life and personality. It doesn’t feel chaotic, just alive, and that’s what keeps my walks meaningful and exciting.

week 2 – patterns

Overview

At first, I wasn’t sure what to create for this project, so I decided to just start by making something simple: dots. My plan was to practice using loops by randomly placing dots on the screen. I used a while loop to create many dots, and once I saw them on the canvas, I realized they looked a lot like stars scattered across a dark night sky.

That gave me the idea to turn my project into a night sky scene. I kept the dots as stars, and then I wanted to make them feel more realistic. To do this, I decided to practice with a for loop to make the stars twinkle. By adjusting their brightness smoothly over time, the stars started to fade in and out, creating a gentle twinkling effect.

In the end, my project isn’t just a pattern of dots, it’s a simple, animated night sky that uses both while and for loops, and I really enjoyed the process of seeing it come to life step by step.

Highlight of code

One part of my code that I really enjoyed working on was where I used the while loop to create all of my stars. At first, I didn’t fully understand how a while loop worked, but through this project, I learned how it keeps running over and over until a certain condition is met.

let count = 0;
  while (count < 500) {  
    stars.push({
      x: random(width),
      y: random(height),
      size: random(1, 3),
      phase: random(TWO_PI) // different twinkle timing
    });
    count++; // increase count each time
  }

I used the while loop to generate 500 stars, each with a random position and size. What I liked about this was how simple it felt to control the number of stars, I just set a limit, and the loop kept creating stars until that limit was reached.

This helped me understand loops better because I could actually see the results on the screen. It also made me realize the difference between a while loop and a for loop. The while loop gave me more control over the setup process, and it was perfect for building the starting starfield for my night sky.

Week 2 Reading Response – Casey Reas

In his talk on chance operations, Casey Reas, an artist, professor, and co-creator of the Processing programming language explores how randomness can be both a force and a generative tool in the making of art.

What drew me in most in Reas’ talk was the tension between control and surrender. His practice shows that randomness in art isn’t just chaos, but a tool for opening up creative possibilities. I found myself agreeing with his point that randomness can act as a “starting point”, like a door cracked open to reveal paths the artist might not have consciously chosen. For me, this resonates with John Cage’s example of random chance operations for musical symbols showed in the video, where unpredictability forces both creator and audience to reconsider what structure even means. At the same time, I can’t help but notice that Reas often reins randomness back into systems of symmetry and geometry, which makes me question whether he is truly embracing chance or ultimately seeking to discipline it. That tension raises a larger question: do artists ever fully give up control, or are they simply redefining the boundaries of authorship?

What challenged me most was his framing of post-WWI art as shifting toward more ‘automatic’ processes in response to destruction. While I see the logic in his argument, it seemed to privilege systematization, order and process as the most meaningful artistic response. This made me wonder if such a view unintentionally downplays the equally powerful role of intuitive or emotional art that also emerged from the same crisis. Personally, I’ve always seen randomness as something threatening, a loss of clarity, but Reas’ examples of layering it into fashion, architecture, or even modeling cancer cells made me reconsider. His work makes me ask: if randomness is unavoidable in life, is the role of the artist to harness it, or to expose its rawness without containment? That question lingers with me, and I think it pushes me to rethink my own preference for order as the only path to meaning in art.

At the same time, Reas’ talk made me consider how much my own creative process relies on hidden forms of randomness. Even when I plan a project down to the details, chance still slips in, through accidents, glitches, or unexpected associations, and often those “mistakes” end up carrying the most meaning. I think I’d like to incorporate random elements into my work as a way to break habits and push past predictable choices. Even something small, like letting code generate unexpected colors or positions, could spark ideas I wouldn’t have considered. For me, the ideal balance is somewhere in the middle: too much randomness feels empty, like the work loses its voice, but too much control risks suffocating the piece. I view randomness as something that works alongside intention, not something that overrides it, a way to keep the process alive and surprising. Reas similarly argues that randomness is not the opposite of intention but a collaborator, and that idea really shifted my perspective. Instead of resisting unpredictability, maybe it’s more useful to design spaces where it can push me outside my comfort zone. This raises a final question I’m left with: in a world increasingly defined by algorithms and precision, is cultivating randomness a way of keeping art (and ourselves) human?

I was so intrigued after the talk that I even explored his personal website, and I loved its throwback, almost nostalgic HTML aesthetic, it felt like a deliberate extension of his philosophy of simplicity and structure. I appreciated how it didn’t feel so commercial. It looked like it was made raw, and for the people who searched for his work. This was a refreshing take compared to the cookie-cutter portfolio websites we see artists use today.

I will link it here: https://reas.com/

Week 2 – Loops

Inspiration: Sound Waves and Chaos

When I first heard the word loops, the first thing that came to mind was sound waves. I imagined smooth, rhythmic waves moving across the canvas, like music frozen in space. I even found a little example of what I hoped to create, but my coding skills weren’t quite ready to match the vision.

 Scrolling through Instagram one day, I stumbled on an image that sparked a new idea. I thought: what if I could combine sound waves with the chaotic little voice in your head when you overthink?  

Concept Development: From Chaos to Calm

The top right of my canvas is extremely chaotic; dense, loud, overwhelming, but as the lines move toward the bottom left, they thin out and eventually fade into empty space. This represents the calm that comes when that inner chatter finally quiets.

This idea lets me visualize the process of overthinking, moving from noise to quiet, using loops and arcs to represent both emotion and structure. 

Coding Process: Adding Randomness

Here’s a snippet I’m proud of:

//arc

for (let x = 250; x <= width; x += 40) {
  stroke(255, random(150, 255), random(100, 255)); // random color
  noFill();
  let randY = 80 + random(-20, 20); // random vertical position
  let randW = 300 + random(-50, 50); // random width
  let randH = 400 + random(-50, 50); // random height
  arc(x, randY, randW, randH, 250, 450);
}

//line

for (let x = 1; x <= width; x += 20) {
  stroke(255, random(150, 255), random(100, 255)); // random green/pink/blue tint
  let endX = width + random(-50, 50);
  let endY = height + random(-50, 50);
  line(x, 1, endX, endY);
}

After watching Casey Reas’ video on randomness, I was inspired to incorporate a bit of chaos into my work. I added randomness to the color and the shape of the arcs, so every frame looks slightly different. This gives the piece a sense of movement and chaos, like thoughts bouncing around in your head—but still following a hidden structure underneath.

Reflection: What I Learned

This project helped me realize that coding can be just as expressive as traditional art—it’s just another medium to visualize thoughts and emotions. I also learned the value of adding randomness, it brought the project to life in ways my original plan didn’t anticipate. I also noticed that art doesn’t always have to be ‘pretty’ it can also be beautifully chaotic. 

Future Improvements

For the future, I’d love to make the sketch more dynamic and interactive, so the patterns could respond to the user’s input or feel more like actual sound waves. I also want to experiment with layering animations to capture the feeling of overthinking versus quiet peace more vividly. I wish one day I could make something as cool as my original inspiration.

Week 2 – Video Reflection

I had to reconsider my approach to structure after watching Casey Reas’ presentation on chance operations and randomness. I have a background in business, so I’ve always thought that control and planning are crucial for projects, schedules, and data analysis. I assumed the same would apply to coding: clearly define the rules and follow them. The 11×11 grid of dots, one of Reas’ examples, showed how controlled randomness functions: each dot moves according to precise rules, but minor variations or “random” steps result in patterns that change from orderly to chaotic. The thought of chaotic work always scared me. He demonstrated how a system can be both rule-based and unpredictable at the same time by describing instructions like moving in a straight line, bouncing off edges, or slightly deviating from a path. It helped me understand that randomness need not imply a lack of control but can be incorporated into a well-organized framework to produce entertaining and captivating results.

I want everything to be flawlessly structured, so as a beginner coder, I frequently question my work. I enjoy doing things the “right” way and abiding by the rules. Reas’s ability to strike a balance between chance and rules has piqued my interest in trying new things. While allowing randomness to dictate specifics like placement, size, or interactions, I hope to establish boundaries in my own projects, such as establishing a color scheme, the quantity of elements, or grid positions. This method seems applicable not only to coding or art but also to business: stability is provided by a clear structure, but creativity and innovation can be stimulated by flexibility and unpredictability.  Reas’ talk taught me that embracing chance within rules doesn’t undermine order; it makes it more interesting, alive, and full of potential surprises.