Hey Guys!

Just wanted to share some audio/visual environments I have came across for the web lately. The great things about these is the lack of set-up needed, and the ability to use the synthesis engines that drive them in your own games, apps, websites, ect. Also, compositions created in the standalone environments can be shared on social media and such as well.

Live Coding Environments

Gibber

Gibber is really unique as it is both an audio and visual live coding tool. It also offers both 2D animation and 3D animation that can be controlled and morphed with the audio that you are live-coding. With some clever API use, it will also allow you to trigger samples found on Freesound in your performances.

Here is a good demo of what gibber does best by its creator.

Wavepot

I don't know much about Wavepot, I just found it tonight, but the UI is beautiful. This is something I will defiantly be exploring further soon.

Audio Engines

There are probably much more of these out there for the web, including the native HTML5 Web Audio API, but these are the ones that have caught my eye recently.

Gibberish

Gibberish is the underlying synthesis engine that Gibber is built on top of. It offers slightly lower level access while still abstracting the HTML 5 Web Audio API. Gibberish also has some great tools for scales, chords, ect.

Overtone

I do not know much about Overtone but it's Github states that it is a "Clojure API to the SuperCollider synthesis engine." So I'm guessing it's something a bit like Gibberish, but using SuperCollider syntax.

Visual Libraries

Sadly I can't find much in this area that is solely based in web technologies, but even on the desktop there seems to be more audio tools than visual creative coding tools. If you know of any more please let me know!

P5

While the desktop version of Processing will port the Java code to the web, P5 is a full blown port of Processing to JavaScript. Again, this makes P5 great for your own products, pairing it up with a synthesis engine (Gibber uses P5 for it's 2D visuals) and also for escaping the pretty feature barren Processing IDE.

Threejs

While Threejs is a very widely used 3d engine written in JavaScript, it has also been used in the back end of things like Gibber for real time and reactive 3d rendering. Though it's not quite a live coding tool in itself, with a bit of effort and know how it can surely be used to build something that is.

NOTE: These are the ones that I know of, or that have been of interest to me lately. Please let me know if you know of any more out there that are either made for the web, or have a native JavaScript counterpart.

I plan on turning this post into a more formal blog post eventually once I have spent a little more time with Wavepot, Overtone and any other visual tools that I may discover along the way!