Self-Avoiding Morphing Creature

Concept

 

For this week’s assignment, I combined a self-avoiding walk with a morphing creature shape. Basically, I wanted to create something that grows organically without ever crossing itself, like a blob that’s aware of its own body.

The creature starts as a small circle and then tries to expand outward by adding new points. Before placing each new point, it checks if that spot is already occupied using a simple grid system. If it’s clear, the point gets added and the shape grows. If not, it tries a different direction.

What makes it feel alive is the constant wiggling, each point shifts slightly every few frames, but only if it won’t cause a collision. This creates this pulsing, breathing effect that’s kinda so cool to watch.

Code Highlight

An interesting part in my code is the collision (closely distant) detection:

isBlocked(x, y, skipIdx) {
  // Check if grid cell is taken
  if (occupied[this.gridKey(x, y)]) return true;
  
  // Check if too close to other points
  for (let i = 0; i < this.points.length; i++) {
    if (i === skipIdx) continue;
    if (dist(x, y, this.points[i].x, this.points[i].y) < cellSize * 1.5) {
      return true;
    }
  }
  return false;
}

It’s doing a double-check: first looking at the grid to see if that cell is occupied, then measuring the actual distance to nearby points. The skipIdx parameter lets a point check if it can move to a new spot without counting itself as a blocker. Simple but effective.

Embedded Sketch

Future Ideas

For future improvements:

  • Add multiple creatures that avoid each other
  • Make the growth pattern follow the mouse or respond to sound
  • Different growth strategies (maybe prefer growing upward, or toward light sources)
  • Color shifts based on age or density of the creature

Reading response – Mustafa

This chapter hit me hard. Flake asks the question I’ve been circling around for years: why can’t we predict everything if we understand the parts? The ant colony example nails it. You can study individual ants all day long. You can catalog their behaviors, map their neural pathways, document their castes. You still won’t predict the emergent sophistication of millions of them working together.

I love how Flake frames computation as nature’s language. We’ve been so focused on dissecting things that we forgot to ask “what does this do?” instead of “what is this?” That shift feels enormous. A duck isn’t just feathers and bones. A duck migrates, mates, socializes, adapts. The doing matters as much as the being.

The pdf’s structure fascinates me. Fractals lead to chaos, chaos leads to complex systems, complex systems lead to adaptation. Everything connects. I’ve read excerpts on chaos theory. I’ve read excerpts on evolution. I’ve never seen someone draw the lines between them so clearly. Simple rules, iterated over time, create everything from snowflakes to stock markets.

The timing matters too. Flake wrote this in 1998, right when computers stopped being tools and became laboratories. We could finally simulate systems too complex to solve analytically. That changed everything. Meteorologists, economists, biologists: they all started speaking the same computational language.

What gets me is the humility baked into this approach. Reductionism promised we could know everything by breaking it down far enough. Flake shows us the limits. Some things are incomputable. Some systems defy long-term prediction. Understanding quarks doesn’t help a doctor diagnose patients. Understanding individual neurons doesn’t explain consciousness.

Mohammed – Assignment 1

Concept

My concept is “Nervous Fireflies” that implements a Levy Flight. Most of the time, the firefly hovers in a small area (small steps), but occasionally it gets startled and zooms to a new location (a very large step).

To visualize this, I mapped the “step size” to the size of the circle. When it’s hovering, it is a tiny dot. When it zooms, it expands into a large burst of light.

Code Highlight

I am proud of this section because it creates the Lévy Flight behavior without using complicated math formulas. I simply used random(100) like rolling a 100-sided die. If I roll a 1 (a 1% chance), the firefly takes a huge jump. Otherwise, it takes a tiny step.

I was also proud of the trigonometry part which is particularly thematic in situations where you want to convert an angle into cartesian coordinates.

step() {
    // CHOOSE DIRECTION
    let angle = random(TWO_PI);

    // CHOOSE DISTANCE (The Lévy Flight Logic)
    // Pick a random number between 0 and 100
    let r = random(100);

    // 2% chance of a BIG jump
    if (r < 2) {
      this.currentStepSize = random(50, 150);
    } 
    // 98% chance of a small step
    else {
      this.currentStepSize = random(2, 5);
    }

    // MOVE
    // convert angle/distance into X and Y
    let xStep = cos(angle) * this.currentStepSize;
    let yStep = sin(angle) * this.currentStepSize;
    
    this.x += xStep;
    this.y += yStep;

 

Reflection & Future Improvements

I realized that “random” doesn’t have to mean “even.” By checking if random(100) < 2, I was able to create a behavior that feels much more organic and alive than just moving randomly every frame.

For the future, I could implement:

Mouse Interaction: I want to make the firefly scared of the mouse, so if the mouse gets too close, it forces a “big jump” immediately.

Interaction Between Fireflies: Right now, the fireflies behave in isolation. It would be cool to have fireflies interact with one another using object to object communication.

Haris – Reading Response

One idea that really stood out to me was the critique of reductionism and emphasis on emergence. The author argues that while breaking a system into parts can help us understand structure, it fails to explain the behavior when many parts interact together. I really liked the example of the ant colonies as the every single ant follows just simple rules, but together the colony displays intelligence, coordination and problem solving. This really made me think how intelligence doesn’t really require complexity at an individual level, it can arise from interactions.

What also really stood out to me was the idea that we should focus less on “What is X” and more on “What will X do in the presence of Y”. This feels really connected to interactive media and computation in general as behavior emerges through systems rather than  isolated elements. The reading made me really think about if complex systems can immerge from simple rules how much creative control do we really have when designing a system? But overall I really enjoyed the reading and I can surely say it has changed how I think about complexity and the connection between systems and nature in general.

Reading Reflection – Week 1

It really blew my mind to read about how scientists usually try to figure things out by breaking them into tiny pieces like atoms or cells. The author explains that you can study a single ant all you want but you will never understand how the whole colony works just by looking at that one bug. It makes me think that the connections between things are actually more important than the things themselves. I used to think science was just about memorizing parts of a system but this chapter makes it seem like the real secret is seeing how simple stuff comes together to make complex patterns.

I also think it is super interesting how the book compares nature to a computer program. It is weird to realize that totally different subjects like biology and physics are actually similar because they both follow these basic rules of logic. The idea that nature is actually kind of lazy and reuses the same simple tricks for everything from snowflakes to economic markets is a really cool way to look at the world. It makes me feel like everything is connected through these hidden patterns that we can finally see now that we have computers to simulate them.

Haris – Assignment 1

Concept

While talking to my friends about randomness in nature we discussed about different organisms in nature and how they move. Specifically we discussed the Brownian motion which explores the seemingly random motion of particles in liquids. I decided that I would try to recreate this motion of particles in a colorful and a bit more hectic way so it has its own twist to it. For this I decided to use Lévy flight which in simple terms would allow the object to “walk” in shorter or longer distances at a time. I also wanted to bring some hue to the mix to make the experience more colorful and in my opinion prettier.  This makes the whole project more expressive and more engaging and brings it to another level. 

What we get in the end is an interesting yet beautiful play of particles on the screen. I also added a shadow to the ellipse, precisely behind it, that changes color depending on the distance the particle has covered. So the hue is actually affected by the random distance.

Code highlight

if (step < 0.1) {
  step = random(20, 90); // the big jump
} else {
  step = random(1, 6); // the small jump
}
let angle = random(TWO_PI);

x += cos(angle) * step;
y += sin(angle) * step;

// wrap around screen
if (x < 0) x += width;
if (x > width) x -= width;
if (y < 0) y += height;
if (y > height) y -= height;

I am proud of this code as this is the main code that controls the movement logic of the “simulation”. I think it was really fun figuring out how to translate something from the real world into code/computer and I think I did a pretty good job at keeping the code clean and short but functional.

Reflection and future improvements

Overall this project was fun to work on and I really enjoyed “translating” real life movement into a program. Also since I haven’t worked in p5js for a bit I think this was a great way to get back into the habit and restart my p5 journey. In the future I would like to possibly add a functionality to add more particles (ellipses) and have them collide with each other.

Version 2.0

Based on the feedback, I revised the movement and color logic to more clearly represent traversal through RGB space. For the movement, I replaced a fully random direction with a Perlin-noise–driven angle. This change preserves the nature of a Lévy flight while producing slower and more readable motion.

For the color, I updated the sketch so that the RGB values of the particle are directly dependent on its position, with the x-coordinate mapped to red, the y-coordinate mapped to blue, and the step size mapped to green. This makes the movement through RGB space explicit and directly tied to the particle’s motion.

Reading Reflection – Week 1

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.

Mustafa Bakir – Assignment 1 – QU4NT0M W4LK

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.

Week 1; Assignment 1A

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:

this.hue = (this.hue + stepSize * 2) % 360;

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.

Yash Raj – Assignment 1

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.