CCreative Coding Experiments

JavaScriptP5

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

Sound Driven Noise (P5.js)

Starting for an experiment with a pattern of dots animated by noise, the project leaned towards sound visualization. First project to use the P5.js sound library. Amplitude and peaks have effect on the random noise pattern and increase the speed, size of dots, colors as well as waves on the pattern. As a last step, a dark mode was added to use the experiment in a projector setup. This experiment could be more sophisticated with having sound as driving source in mind from the beginning. Instead, this serves more as a proof of concept to use P5.js for audio visualizations.

Code and demo as P5.js Sketch

Image to Noise (P5.js)

Another noise based project. Originally, I wanted to recreate the project "Fragments of RGB" by onformative, that splits up pixels of an image into multiple fragments and distorts them. When prototyping with P5 and thereby running in performance limitations, it instead appeared interesting to create a transition between images that works by shifting the pixels into noise and form back to another image.

Code and demo as P5.js Sketch (Note: runs a bit too slow on P5 playground compared to running locally.)

Three colored circles on a green background.

Colored circles moving around and collapsing into each other.

Cyclist moving infinitely towards mountains.

Wall with an image of a cyclist in a landscape projected onto.

Wall with a dot pattern projected onto it.

Distorted grid of pixels on black background.

Image of a plane with foggy background consisting of dots placed on black.

Dots in noise pattern on black background.