Author: Sunny Sun

Concept

I wanted to create a lines and circles that moved together, similar to one of Memo Akten’s art pieces. Once I created the basic shapes and movement, I added to the aesthetic by making the sketch resemble flowers in a field.

Code Snippet

let elapsedTime = millis() - startTime;

// adjust speed using lerp over time
if (elapsedTime < 10000) {
  speedFactor = lerp(0.05, 0.5, elapsedTime / 10000);
} else if (elapsedTime < 20000) {
  speedFactor = 0.5;
} else {
  speedFactor = lerp(0.5, 0.05, (elapsedTime - 20000) / 10000);
}

Embedded Sketch 

Reflections

I struggled with making the petals for the flower, and I couldn’t get the petals to touch the circumference of flower. With more time, I would tweak the code and experiment more. I would also try to achieve more interesting/complex visual effects, as Memo Akten’s works are very flashy and colourful.

Concept

For this week’s assignment I wanted to create fish swimming towards ripples in the water. The ripple would create attraction for the fish, and the fish would slow down as they reached the ripple. I used force and drag to create these effects.

Code Snippet

if (this.target != null) {
  let force = p5.Vector.sub(this.target, this.pos); // Force towards target
  let dist = force.mag(); // Distance to target
  force.setMag(map(dist, 0, 100, 0, 1)); // Adjust force based on distance
  this.applyForce(force);

  let drag = this.vel.copy().mult(-1.6).mult(0.1); // Create drag force
  this.applyForce(drag); // Apply drag to slow down near target

  if (dist < 10) this.target = null; // Clear target if close
} else {
  // If no target, allow fish to move randomly
  // Add slight randomness to velocity
  if (this.vel.mag() < 1) {
    this.vel.x += random(-0.1, 0.1);
    this.vel.y += random(-0.1, 0.1);
  }
  this.vel.limit(6); // Limit speed to ensure natural movement
}

this.vel.add(this.acc); // Update velocity
this.pos.add(this.vel); // Update position
this.acc.mult(0); // Reset acceleration

Embedded Code

 

Reflections

If I had more time, I would have the fish flow more seamlessly. Additionally, I think the drag continues to slow the fish down indefinitely, and I would trouble shoot that. I would also try to gamify the sketch a bit more, but having a start screen and an animation of fish food entering the water.

Concept

I wanted to create realistic clouds as I was inspired by the beautiful skies and sunsets I grew up seeing in Vancouver. I was not able to capture a video myself as Abu Dhabi is relatively cloudless, so I used a video from the internet as a reference point. The clouds were not moving at a constant rate and did not move in only one directions. I used acceleration to achieve this random effect.

Code Snippet

noiseVector = createVector(0, 0);          // Starting position
noiseVelocity = createVector(0.03, 0);     // Initial velocity moves from left to right
noiseAcceleration = createVector(random(-0.005, 0.005), random(-0.005, 0.005)); // Small acceleration for drift


// Update the noise field
noiseVelocity.add(noiseAcceleration);  
noiseVector.sub(noiseVelocity);       
  
// Move noise field slightly in all directions 
noiseAcceleration.x = random(-0.0005, 0.0005);  
noiseAcceleration.y = random(-0.0005, 0.0005);

 Embedded Sketch

Reflections

I had a lot of trial and error with the cloud movement. Using Perlin noise helped create the cloud like shape, but in the video I was referencing, the clouds were moving and changing constantly. I think modifying the acceleration helped create the cloud movement and make it look more natural/random, but I was not able to modify the acceleration a lot as this would make the movement erratic, so the result ended up being more subtle. In the future, I want to look into other ways to modify Perlin noise.

Concept

I wanted to create a self-avoiding walk and when the walk ended there would be a morphing shape displayed.

Embedded Sketch

Code Highlight

function displayShape() {
  background(50);

  // Rotate the shape around the y-axis
  rotateY(frameCount * 0.05);

  // Draw shape using the curve function
  fill(167, 250, 250);
  curve(-500, 500, 0, 0, 20, 20, 20, 20, 0, 500, 500, 0);
}

Future Improvements

The self-avoiding walk was time-consuming to figure out, and it was my first time using curve(). I had difficulty implementing it into my code as I haven’t worked with “WEBGL”, and thus had to modify my code accordingly. In the future, I want to try to add text to the displayShape screen as well, as I couldn’t figure out how to add it with “WEBGL” interfering.

For this week, I read the introduction of the book Computational Beauty of Nature. The text was centered around reductionism, which is the theory of reducing complex things into basic parts or components. The author points to flaws in reductionism, particularly in observing nature in his example of ants. According to the author, if ants were studied individually as opposed to studied collectively as a colony, scientists would lack a crucial understanding of the complexities of ants and their colonies due to the intricate societies ants form. Through analogies like this one, the author argues that many systems and structures are connected. Thus, the author argues for understanding the interactions between agents being one of the three ways of analysis, with the other two being reductionism and a more holistic perspective. From here, the book is introduced as a way of learning about computer systems and structures. 

I am intrigued by the introduction of the book and I look forward to reading more. I did not know about the reductionism theory, and it made me question if this theory can be applied to computers and technology more successfully than it can be applied to nature. As computers are built through smaller parts and components coming together, shouldn’t they be easily dissected and analyzed from their parts and components? Computers are meant to be predictable, while nature is not.