Welcome to the repository for the online audiovisual experience of h0b0's ๐ป๐ฎ๐ญ๐ธ album. This project is inspired by the underlying circularity of the album's concept. As ๐ป๐ฎ๐ญ๐ธ implies, this circle is ever present โ a loop. Each song is a circle by itself, loopable, infinite. Join these pieces and compose the larger circle, the album.
You can find more on h0b0 in the following places:
- Official website
- Bandcamp โ grab a tape!
You can also listen to it in the usual platforms:
This project was developed using p5.js, a JavaScript library for creative coding. If you would like to learn more, we suggest you look at the official p5.js website and references, along with The Coding Train's tutorials and content.
We can decompose the project into two layers.
The interface gives the user the controls and information on the musical component. The circles allow the tracks to be changed. Below that, you have the display. There you can see the track name, time, loop status, and playback speed.
The background images can be regarded as a separate layer, although still related to the musical component. These visualisations are done through the use of glsl shaders.
You can learn more about shaders in p5js in this guide by Casey Conchinha and Louise Lessรฉl. Aferriss has a great collection of heavily commented p5js Shader Examples. And for even more examples and inspiration you can check Shadertoy.
- Northern Lights Blazing Bright by TEttinger, 2019-01-09
- feedback hueish by aferriss, 2019-08-23
- p5-canvas-crt by kcconch, Lousielessel, ported from MattiasCRT by Mattias, 2013-12-08
- issue: MusicController stop() not working;
- issue: webapp not working in landscape mode;
- issue: speed buttons stay highlighted on click;
- issue: looping songs and changing with keyboard arrows does not remove looping state of previous track;
- download music to cache (faster loading if page is refreshed, save data);