Category: S2026 – Jack

Reading Reflection on The Computational Beauty of Nature by Gary William Flake

Before reading The Computational Beauty of Nature by Gary William Flake, I honestly never connected nature to computer programs at all. In my mind, computers were something artificial that humans fully control, while nature was something completely different and separate. For example, when I write code, I usually think about building apps or solving clear technical problems, not about how birds move, how ants organize, or how weather behaves. This reading changed the way I see that. The author explains that we should focus “not with ‘What is X?’ but with ‘What will X do?’” (p. 5), and this made me realize that code can be used to study real life behavior, not just screens. He also says, “The goal of this book is to highlight the computational beauty found in nature’s programs” (p. 5), which helped me understand that many natural systems follow rules, just like programs. The idea that “simple units… when combined, form a more complex whole” (p. 4) made me think of things I see every day, like how traffic in Abu Dhabi sometimes looks chaotic even though each driver is just following simple rules. I do not feel the author is biased, because he supports his ideas using examples from many different fields like biology, economics, and computing. This also made me wonder how far we can really simulate nature before systems become too complex to fully control.

Another part that affected me was the discussion of reductionism and holism. The author defines reductionism as the idea that “a system can be understood by examining its individual parts” (p. 2), but he also explains that “the whole of the system [can be] greater than the sum of the parts” (p. 4), which is what holism means. This really connects to how I usually solve problems by breaking them into pieces, especially in programming, but it also shows why that is sometimes not enough. The ideas of agents and interactions also made a lot of sense to me, especially when the book explains that scientists study “agents … and interactions of agents” (p. 3). For example, one person in a group project is simple, but when many people work together, the result can become very different and sometimes unpredictable. The book also says, “Interesting systems can change and adapt” (p. 5), and this reminded me of how humans, over many years, gain experience, learn from their mistakes, and slowly improve. This reading even made me rethink my capstone idea. Instead of only building something purely technical, I started thinking about working on a project related to nature or real life systems, something that can actually make life easier or better, not just something that runs on a screen.

 

Assignment 1a – Code

Concept : My sketch simulates one simple agent moving over time, like one driver moving through traffic. The agent switches between two behaviors: random drifting and following the mouse. The switch happens only when a time cycle ends, and probability decides which behavior will happen next. The agent leaves a fading trail so we can see its full path and how small decisions over time create a larger pattern. The trail color changes using HSB color space, which means the color slowly moves through different hues instead of using fixed RGB values. In this version, the color also responds to the agent’s movement speed, so faster motion causes quicker hue changes and stronger saturation and brightness. A timer bar on top shows how close the system is to switching behaviors.

Code Highlight : One part of the code I am proud of is the visual timer bar at the top of the screen. It shows the passage of time before the agent switches behavior, and it also changes color from green to red as the end of the cycle approaches. This makes the system easier to understand instead of hiding the logic.

// "timer" increases every frame
// "currentLimit" is how long the current mode should last

// Convert timer into a value between 0 and 1
let p = timer / currentLimit;

// Change color based on progress:
// 120 = green at start, 0 = red at end
let barHue = map(p, 0, 1, 120, 0);

// Set the fill color using HSB
fill(barHue, 90, 100);

// Draw the bar:
// barW * p makes the bar grow as time passes
rect(barX, barY, barW * p, barH, 7);

Embedded Sketch:

Reflection / Future Ideas : This project helped me understand how a very simple rule and one agent can create a long and interesting path over time. Instead of only seeing the current position of the agent, the fading trail shows the history of its movement, which made me think more about time and process, not just results. I also understood better how systems work in cycles, using a timer, and how behavior changes depending on simple conditions.

In the future, I would like to add more than one agent and see how their paths interact. I am especially interested in trying an example similar to traffic, where one agent (one driver) can create a big effect on the whole system, even though it is only one small part of it. I also want to experiment with different types of movement, like smoother motion or more natural behavior, and see how that changes the overall pattern.

This sketch was inspired by Quantum Cloud by Antoney Gormley 

Sources utilized: (514) Coding Challenge #112: 3D Rendering with Rotation and Projection – YouTube

Concept

I was talking to my friend Youssab William about decision trees, specifically binary decision trees and the thought lingered in my head for a little bit. Then when I started reading the assignment prompt, I read about the 3D walk and say Quantum Cloud. I got an idea of merging the logarithmic growth of binary trees with the random walk on a 3D plane in quadrantal angles. This is where QU4NT0M W4LK was born.

Also, im a big big fan of glitching and RGB offsets as a motion designer and video editor. I include RGB offsets (appropriately) in almost all my projects, so I also loved to add it here.

function draw() {
  background(255);

  // track rotation changes from dragging
  if (mouseIsPressed) {
    let deltaX = mouseX - pmouseX; // built in coords
    let deltaY = mouseY - pmouseY;
    rotY += deltaX * 0.01; // have to manually track rotation cus its not built in
    rotX += deltaY * 0.01;
  }
  
  // calculate rotation delta for RGB offset
  let deltaRotX = rotX - prevRotX;
  let deltaRotY = rotY - prevRotY;
  let deltaZoom = zoom - prevZoom;
  
  // update RGB offsets based on camera rotation and zoom
  blueOffset = lerp(blueOffset, deltaRotY * 500, 0.15);   // horizontal drag -> Blue
  greenOffset = lerp(greenOffset, deltaRotX * 500, 0.15); // vertical drag -> Green
  redOffset = lerp(redOffset, deltaZoom * 100, 0.15);     // zoom -> Red
  
  // decay offsets back to zero when not moving
  blueOffset *= 0.92;
  greenOffset *= 0.92;
  redOffset *= 0.92;
  
  // store previous values
  prevRotX = rotX;
  prevRotY = rotY;
  prevZoom = zoom;

  // apply camera transformations
  scale(zoom);
  rotateX(rotX);
  rotateY(rotY);

I am particularly proud of this segment of the code as everything else was something I have done before. But this camera movement was something I thought was extremely complex. What motivated me to embark on this idea is my recent project in motion graphics with camera movements that I genuinely was proud of, so I wanted to make camera movements I’m proud of using P5 as well. Both instances were something I was dreading before but once I started working on them they turned out to be much much simpler than I thought.

 

Future considerations would optimization. because of the fast growth of the segments, I had to decrease the number of segments. it looks much cooler with more segments, but I assume, i dont know yet, but I assume that the RGB channels are always drawn which technically *3’s the amount of processing. Another thing I wanna try but i’m dreading ins implementing dynamic 3d lighting with shadows and highlights, but maybe in future assignments.

 

Resubmission

 

In this resubmission, I edited the walk such that x walks in the red channel, y walks in the green channel, and blue walks in the blue channel.

Concept

For this assignment, I made a random walker to explore motion in a very basic but visual way. The walker moves around the canvas using randomness, but not in a totally chaotic way. Most of its steps are small, with occasional larger jumps, because the step size comes from a Gaussian distribution.

Half of the time, the walker is influenced by the mouse position, and the other half of the time it moves randomly. I liked this balance because it feels like a mix of control and letting go. On top of that, the walker also moves through color. As it travels, its color changes based on how much it moves, so motion is shown not just by position, but also through hue.

Code Highlight

This line is one of my favorite parts of the sketch:

What I like about it is how simple it is, but how much it does. The color changes depending on how far the walker moves. Small movements create small color shifts, and bigger movements create more noticeable changes. It helped me understand how motion can be translated into something visual without making the code complicated.

Embedded Sketch

Reflection and Future Ideas

This project helped me better understand how randomness works in code, especially the difference between regular random values and Gaussian randomness. The movement felt much more natural and less jittery when I used randomGaussian(). I also realized how much small visual choices, like opacity, line weight, and color mode, affect how the sketch feels overall.

If I continue working on this, I would like to experiment with multiple walkers instead of just one, and see how they interact visually. I’m also interested in adding noise to make the movement smoother over time, or applying the same motion logic to something other than color, like scale or sound.

Reading Response on Computational Beauty of Nature

 

I honestly used to think that biology and computer science were totally different worlds but reading the first chapter of The Computational Beauty of Nature really changed my perspective. The reading explains that usually science tries to understand things by breaking them down into tiny pieces like atoms or cells but that does not always tell you how the whole system works. It is super interesting to see that nature is actually a lot like the code we write because it uses simple rules and parallel processing to build complex things like ant colonies or even the human brain.

What really stuck with me is how this idea challenges the way I’ve been trained to think about problems. In computer science, I am used to focusing on algorithms, logic, and efficiency, while in biology I always assumed things were more descriptive and observational. This reading made me realize that both fields are actually asking the same question which is how do simple interactions give rise to complex behavior? Seeing natural systems as computational systems made biology feel much more relatable and even exciting to me, especially because it connects directly to ideas like emergence and self-organization that we also see in simulations and programs.

It changes how i look at the world when i realize that everything from a snowflake to the stock market is just processing information. It makes me wonder if we can actually simulate everything if we just find those basic rules. I wonder will we ever be able to write a program that perfectly copies nature or is there something random in the universe that we can never predict?

Personally, this question keeps bothering me the more I think about it. Part of me feels optimistic, like maybe with enough data, computing power, and better models, we could simulate almost anything. At the same time, I also feel that there might always be some level of unpredictability, whether it comes from randomness, chaos, or limits in our understanding. That uncertainty is what makes this topic so fascinating to me. Instead of seeing nature as something separate from computation, I now see it as the ultimate computational system something that we are still only beginning to understand.

Code Production

Concept

I wanted to make something that feels alive but simple. A leaf sits in the middle and a small caterpillar wanders on it. As it moves it eats away the leaf and the eaten parts turn white. The leaf slowly changes shades of green based on where the caterpillar is and how it moves. New leaves pop up nearby when you click so the scene keeps growing. I imagined the caterpillar as both a painter and a tiny critic of the leaf, leaving a trail that tells the story of its path. The motion mixes a random walker for direction with a gaussian walk for color so the visual change feels organic and a little surprising.

Why this feels right to me

I like the idea of a creature that only moves on a surface and changes that very surface while it moves. It gives a simple rule set but the result looks like a small life form making a mark. The interaction is gentle. A click resets and gives a new canvas so you can explore again. It feels playful and quiet at the same time.

Code highlight I am proud of

The most complex part of this sketch for me was designing the caterpillar movement so that it feels random but still intentional. I did not want it to just jitter around the screen. I wanted it to look like it is exploring the leaf but also aware of its boundaries.

To do this I created a random walker with dynamic probabilities. The caterpillar has two different states depending on where it is on the leaf. When it is close to the edge it is much more likely to turn back toward the center and only rarely continue forward. When it is in a safe area it mostly moves straight but sometimes turns left or right. This balance took time to get right because small changes in probability made the motion feel either too mechanical or too chaotic.

What makes this challenging is that the movement still remains random but it is guided by invisible rules. The caterpillar never explicitly checks for the leaf shape yet it almost always stays on it which makes the motion feel natural rather than scripted.

This logic is what gives the sketch its personality.

// Pick a new random target for the caterpillar to move towards
pickNewTarget() {
  let distanceFromCenter = dist(this.headPos.x, this.headPos.y, width/2, height/2);
  let stepSize = 15;
  let newAngle;

  let randomVal = random(1.0); 

  // If near edge, turn back towards center
  if (distanceFromCenter > 140) {
    let angleToCenter = atan2(height/2 - this.headPos.y, width/2 - this.headPos.x);
    
    if (randomVal < 0.95) {
      // Usually go towards center
      newAngle = angleToCenter + random(-0.5, 0.5); 
    } else {
      // Sometimes keep going
      newAngle = this.currentAngle; 
    }
    
  } else {
    // Normal foraging behavoir in safe zone
    if (randomVal < 0.70) {
      // Go straight most of the time
      newAngle = this.currentAngle + random(-0.3, 0.3);
    } else if (randomVal < 0.85) {
      // Turn left sometimes
      newAngle = this.currentAngle - random(0.5, 1.5);
    } else {
      // Turn right sometimes
      newAngle = this.currentAngle + random(0.5, 1.5);
    }
  }

  this.currentAngle = newAngle;

  // Calculate new target position
  let xStep = cos(newAngle) * stepSize;
  let yStep = sin(newAngle) * stepSize;
  this.target = createVector(this.headPos.x + xStep, this.headPos.y + yStep);
}

Embedded sketch

Reflection and ideas for future work

1. Add more life like feel by giving the caterpillar inertia and a sense of rest when it eats too much. Maybe make it slow down after a long run.

2. Try a self avoiding walk so the caterpillar learns to avoid recently visited areas and patterns will become more complex. This could make the eaten shapes more deliberate.

3. Make the leaf grow back slowly so the scene becomes a cycle of eat and heal. That would make the sketch feel like a small ecosystem.

4. Link sound to movement so each bite triggers a soft tone and the pitch depends on the distance from the center. Then the piece becomes both visual and sonic.

5. Let multiple caterpillars share the leaf and give them simple rules for interaction. Sometimes they could follow each other and sometimes they could compete for space.

Reading on Computational Beauty of Nature

Reductionism is a concept that is new to me and the more I think about it the more true and relevant it feels. In everyday life, I often try to understand problems by breaking them down into smaller parts. Whether that is understanding my own emotions, solving schoolwork etc. it’s just part of human nature. This approach makes things feel more manageable which makes reductionism very important. However, this reading helped me realize that while breaking things down is useful, it does not always tell the whole story. 

In the reading, the author mentions the example of ants, and how a single ant is simple and limited, but an ant colony can build complex structures, organize labor, and survive in ways that no individual ant ever could. An ant cannot live alone, just as humans cannot truly function in isolation. Even though we often think of ourselves as independent individuals, much of who we are and how we behave comes from our interactions with others, and this is truly something I started to believe mostly after the COVID pandemic. 

Prior to reading this, I actually was very fascinated by the ant colonies as I stumbled across a video that shows what ant colonies look like and I feel it is relevant to share. It is so fascinating how a tiny species can create such structures as a collective:

@smartspeakenglish_

How a Billion Ants Built a City 🤯 #history #historyfacts #storytelling #story

♬ original sound – Smart Speak English

Code Production 

Concept

My concept is inspired by the assigned reading for the week and by observing natural systems, specifically the behavior of ants. The random walkers resemble how ants wander, react, and respond to their environment. Ants often appear to move unpredictably, yet their behavior changes instantly when they sense danger.

In this sketch, the walkers behave similarly. When the mouse approaches, they move away, mimicking how ants scatter when something comes too close. The mouse acts as a source of disturbance or threat. When the walkers enter the mouse’s radius, their color shifts to signal “danger.” This color shift, combined with their movement away from the cursor, represents a moment of survival instinct and reaction.

(I chose “Create a random walker with dynamic probabilities” from list 1, and combined it with the walkers shift through a small region of HSB space based on proximity to the mouse from list 2)

Code Highlight

A part of the code I’m particularly proud of is the color shifting behavior that happens when a walker enters the mouse radius. I wanted to keep the code relatively simple since this is my first assignment and I’m still re-familiarizing myself with p5.js after not using it for a long time. I intentionally focused on techniques I remembered from Intro to IM.

// color shifts only inside mouse radius
let r = mouseRadius();
let d = dist(this.x, this.y, mouseX, mouseY);

if (d < r) {
  
  let energy = map(d, 0, r, 1.0, 0.0);

  this.h = BASE_H + 35 * energy;           

  this.s = BASE_S;                       
  this.b = constrain(BASE_B + 25 * energy, 0, 100); 
} else {
  // return smoothly to base
  this.h = lerp(this.h, BASE_H, 0.08);
  this.s = lerp(this.s, BASE_S, 0.08);
  this.b = lerp(this.b, BASE_B, 0.08);
}

Sketch

Reflection & Future Work

Overall, I think this sketch successfully communicates the basic idea, but it is still visually very simple. In the future, I would like to make the piece more aesthetically refined. This could include adding more walkers, adjusting visual textures. Also the walker shift left when the mouse leave the canvas. 

I am also interested in researching ways to make the walkers look more like ants. Right now, the behavior suggests ants, but the visuals do not fully match that idea. Exploring more natural shapes, trails, or even segmented bodies could help strengthen the connection between the concept and the visuals.

test