cables.gl, the stunning, free, and open-source media creation environment for visuals and sound, is back with its June update. The Web-powered, Web-or-offline tool is faster, editing is easier, it’s more future-proof and reliable, and they’ve updated their roadmap for what they envision this to be. Even alongside other tools, it’s great to patch like this on the Web.
cables is the most powerful tool you can run with the Web short of coding it yourself. It’s MIT-licensed and free. It runs happily in the browser, but you can also download a standalone version, with builds available for macOS (Intel and Apple Silicon), Windows, and Linux (AppImage).
Credit where it’s due: just browsing through the online library, pictured at top and above, we get Noche tranquila en Bogotá by wander_nb. (Hate to see what the lively nights are like, but awesome!) And you can open this up right now in the editor – editing and hosting is also free:
New features for June
They’ve got a detailed blog post on what’s new, but let’s summarize:
Improved editor with constrained dragging (hold shift for vertical or horizontal alignment), better keyboard-only accessibility, shortcut search, and lots of tools for managing and copying assets and other UI tweaks.
Ability to open standalone in “presentation mode” automatically.
Tools for managing JavaScript dependencies. Okay, this gets right at why you absolutely need cables even if you’re a power user in other great tools like TouchDesigner. cables is a bada** JavaScript prototyping tool, and it lets you whip together ideas before you dive into coding. It also does this with human-driven code, not a bunch of AI-created garbage. (Ahem.) So the depedency management tools they added here are fantastic, as you can try what-if scenarios with libraries before you commit.
HTML and CSS ops. These are super-useful additions for quickly adding user interfaces and interactions – they needed it for a client, and I can immediately see prototyping applications for it. From a recent tutorial:
Other useful visual Ops. Going to quote the whole thing, because again – I can totally see tasks where I’d need to do this and I’m sure you could, too:
Ops.Ui.VizImageUrl let’s you show/debug images in your patch that are not a texture, like uploaded assets for URLs ourside cables. The Ops.Sidebar namespace has gotten two new members to add custom HTML and a date picker. Ops.Html.CanvasToBase64 let’s you create a base64 string from any canvas, you could use Ops.Html.QuerySelector to get any external canvas and grab a screenshot from that with Ops.Gl.Textures.Base64ToTexture. Use Ops.Color.GradientColorArray and Ops.Color.ColorArraySort to create and work with color arrays and put in Ops.Gl.ShaderEffects.VertexArea to freely transform an area of you mesh.
Backups. Yes.
Now about that roadmap: there’s great stuff coming. They’re looking at improved 3D file support for GLTF, texture formats, bones, rigged meshes – all the kinds of stuff you’d want to do. They’re working on keyframing and animation (which reminds me, I need to talk about Unreal 5.6, too). And there’s a lot of planned support for AI, shaders, xR/VR, physics, gaussian splats, and more. A lot of this stuff people have already hacked into the system, but it’ll be great to see more fleshed-out, advanced support.
It’s wonderful to see this stuff happening in an open-source project. I doubt that the audience is large enough to support another commercial tool; we’ve got tools in that category that are incredibly deep and mature. But having this kind of open tool is perfect for interfacing with open libraries on the Web. It’s an ideal counterpart to those commercial offerings, and I suspect ideal for anyone whose budget is restricted to free tools and Web delivery, which expands access to this kind of art.
Audio and music applications
Oh, by the way – I think visual work is the strong suit here, but if you’re wondering if you can work with audio, yes, you can. There’s even MIDI support. Because it’s web-based, you could go further if you so choose. For starters:
https://cables.gl/ops/Ops.Audio
Plus what you can do with Web Audio, you can do here. The June release adds some bug fixes for audio support, too, plus one key addition – “Add webaudio-context info to browserpage.”
Via WebAudio, there are tons of powerful features. You get direct buffer access, FFTs, audio recording, visualization, mixing, and even some clever visualization tools and a Waveshaper. I’d dare say this is now one of the easiest ways to visualize audio, which isn’t as obvious in environments like the JavaScript Processing variants (P5.js etc.). Check out the Ops:
https://cables.gl/ops/Ops.WebAudio
It even plays nice with Ableton Link:
And, holy crap, this saves time versus what happens when relative JavaScript newbies try to work out how to set up the dev environment, libraries, and get something working. Like I said – prototyping. Prototyping needs to be fast. And using an LLM for that task risks generating garbage code you have to fix later.
More tutorials
Some of these are a bit older, but they’re all still relevant.
Photosensitivity warning on this one, but there’s some dazzling work you can do with visualization:
You can send data through the Web, yes, you can:
Their monthly meetup looked at spatializing audio:
And “can it VJ?” For sure.
Get cabled up
Details on this update: