Week 1 | Star Aviators

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.