Author: Ahmad Hafizh

Visit the sketch here!

Concept and Inspiration

In the second week, we tapped into the world of vectors. I wanted to make something simple that requires speed, velocity, and everything around us with such aspects. Our class starts with bouncing a ball, and I revisited this concept again this time by applying vectors. What I wanted to recreate is a ball object falling into the water and creating this ripple-like effect.

Sketch

How it works

Using vectors, we can have p5.js calculate the speed of the object. The concept of ‘gravity’ here can be attributed to the y-position of the ball. Each time the ball bounces, its y-position should be decreased by cutting it in half. For the bounce to feel smoother, we introduce a bounciness variable that multiplies with the y-position negatively.

// bounce by multiplying the speed by the bounciness
  if (position.y + diameter / 2 > height) {
    position.y = height - diameter / 2;
    speed.y *= -bounciness;
    speed.x *= bounciness;
  }

Challenges faced

The tutorial that I followed only introduced the concept of ‘gravity’ in scalar methods. Extracting this information, I transformed the modes from scalar to vector. It was quite interesting, and quite the challenge!

As I originally mentioned, I wanted to make the ball form ripples when touching a certain height. While creating the ripples itself is a simple task using for-loops, making sure that it stays without being refreshed by the background is a challenge that I still haven’t overcome yet.

I have been trying to implement a few things, but I do not want my code to become overcomplicated. While I still have the time, I’ll try some stuff up to see if fixing this is possible.

Edit: I finally fixed the ripple problem, check it out here.

Resources Used

Bouncing Ball Simulation – Jeff Thompson

How does one explain the observable universe? One approach, reductionism, dissects each phenomenon as individual events. While this approach specifies its look over the event, in reality, many variables account for this event to happen. But if we combine those events, they create a system of events within the universe. Flake questions whether this outcome can still explain the universe or collections of phenomena that result in the universe instead.

As such, nature is full of randoms. Too many things to account for. Look not only one, but all.

The Computational Beauty of Nature proposes to look at these variables instead of observing them as system interactions. Patterns, evolutions, iterations. Singular events that when grouped create systems which then we can translate into groups of similar procedures, outcomes, or both.

However, in the quest to explain this universe, I believe that looking at both sides of the coin is a notable way to observe it. Why do sunflowers contain gridlike patterns? One could tap into its molecular structure, others can mathematically argue its most efficient way to store seeds. Regardless, approaching this observation of a sunflower with both ways allows us to understand the universe even better.

Star Aviators | p5.js (youtube.com)

Check the sketch here!

How to navigate the stars:

Move around the mouse in, between, and out of the canvas. Observe the stroke behavior!

Concept

I scoured the internet to find some inspiration. One particular video that interested me was this random walker by @Jakim_. Mesmerized by this walker, I messed around with this concept for quite some time.

Applying Shiffman’s tutorials, I wanted to shift beyond just a few pixels and lines forming around. What if there are circular points at the end of each stroke? What if the colors change? By refreshing the background, changing colors, and varying frame intervals, I achieved the desired result: trails of star explorers in the pitch-black space.

//Create ellipse at the end point
ellipse(pos.x + s / 2, pos.y + s / 2, diameter);

let x = frameCount % 100;

// If the mouseX > width/2,
// decrease the frame rate & change background
if (mouseX > width || mouseY > height) {
  frameRate(24);
  background(10, 10, 10, 100);
} else {
  frameRate(20);
  background(100, 100, 100, 6);
}

Reflection

There are infinite ways this small project can be expanded. What if I utilize classes to generate multiple walkers? What about synchronizing the steps to a music beat? Perhaps, I could limit such that the strokes avoid previous ones while maintaining only x or y directions. The possibilities are limitless.

Resources Used

Random Walker with Levy Flights, Daniel Shiffman.

Background fade effect, Ashibe Yoichi.