CCreative Coding Experiments

In order to learn more about generative design and how to use algorithms to create visual effects, I wanted to experiment with P5.js (and soon three.js). These are some examples that represent the very first steps with these technologies.

Noisy Colors (P5.js)

Very first P5.js project that focuses on the concept random walk. The idea is that colors move in a noise-based behavior. If two colors get close enough to each other, they will rush towards each other - merging their colors and affect the overall background of the canvas.

Code and demo as P5.js Sketch

Infinite Cyclist (P5.js)

Inspired by a personal cycle-journey, the project simulates an infinite run towards objects in the distance. The illusion of depth is created with using 2D graphics only. The cyclist does not make any progress. However, the use of parallax scrolling, moving ground, speed effects, and animated parts of the cyclist give the impression of moving forward. Lastly, a user can give input left or right of the cyclist to make a turn, thereby exploring the infinite surrounding that loops in every direction.

Code and demo as P5.js Sketch