VJ / Live Coding on Atom — glsl-livecoder
glsl-livecoder is now renamed to VEDA! Check out the release:
I recently released VEDA v1.0, it was formerly named glsl-livecoder.medium.com
Recently I published an Atom package for VJ / Live Coding — glsl-livecoder!!!
At GitHub, we're building the text editor we've always wanted: hackable to the core, but approachable on the first day…atom.io
In this article, I'm gonna show how to do VJ / Live Coding on Atom with glsl-livecoder.
What you can do with glsl-livecoder
You can VJ on Atom editor, like this:
This video was taken when I VJ'd with glsl-livecoder. The graphics was generated by GLSL along with images and videos loaded as textures.
GLSL is a programming language used in 3D graphics such as OpenGL, WebGL. Using GLSL we can draw high quality graphics because it's executed on GPU in parallel.
glsl-livecoder accepts MIDI events. This means that videos can be controlled by MIDI controller, so you can VJ without coding so much if you don’t wanna write GLSL.
glsl-livecoder executes the GLSL file on the active tab, and shows the result on the background like GLSL Sandbox or Shadertoy. Thanks to existing Atom packages, we can write GLSL code more comfortably!
As a GLSL runtime, glsl-livecoder provides following features:
- GLSL Sandbox style uniform variables
- Load images / videos
- Audio input
- MIDI input
glsl-livecoder depends on glslangValidator. Follow the below steps to install glslangValidator.
You can install it with homebrew. If you don't have homebrew now, install it first from here:
After that, run
brew install glslang and glslangValidator will be installed in your PATH.
in Windows or Linux
The easiest way to install glslangValidator is to install Vulkan SDK from here:
LunarG® Vulkan™ SDK As the first comprehensive Vulkan SDK for Windows® and Linux operating systems, the LunarG® Vulkan…www.lunarg.com
glslangValidator will be installed in
C:\VulkanSDK\(VERSION)\Bin. Add it to your PATH and check if the command is available.
glsl-livecoder can be installed from Atom's Settings pane or
apm. Just type
glsl-livecoder in the search window and click the `Install` button.
In some cases, you may see some errors like this:
Failed to require the main module of 'glsl-livecoder' because it requires an incompatible native module.
Run `apm rebuild` in the package directory to resolve.
If you see this, click the bug icon on the bottom and execute
Now glsl-livecoder should be installed correctly.
Open the command palette and run
This is your first Live Coding experience!!!!
Tutorial — getting started as a livecoder
If you're already familiar with GLSL, go ahead, do livecoding as you like!
If not, I'm gonna show you how to be a livecoder!!!
glsl-livecoder-examples and open it with Atom.
git clone https://github.com/fand/glsl-livecoder-examples
Open the command palette and run
glsl-livecoder will be started and show you the result of default code.
glsl-livecoder-examples are created to show the features of glsl-livecoder.
sample2.frag and run it by
You will see the result of the code like this:
glsl-livecoder is designed for Live Coding so you can edit the code and re-evaluate the code very easily.
p *= fract(time); on the line 7 and hit
ctrl-enter, then the animation will be updated soon.
Now let's try loading videos.
video.frag and hit
You will see multiple videos mixed on the screen.
The paths of videos are specified in
You can load any videos and images by editing
When you edit
.liverc it will be loaded immediately.
// Videos are located in ./videos/
Of course you can add some effects to the videos!!
// uv *= uv; on line 21 and hit
Then the video will be distorted!
Now you've started a journey as a VJ / Livecoder.
If you’re interested in audio / MIDI inputs, take a look at
Wanna learn more about GLSL?
“The book of shaders” is a good place to start.
This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. Patricio Gonzalez…thebookofshaders.com
Beware that the names of `uniform` variables are different in the book.
u_resolutionis same as
u_mouseis same as
u_timeis same as
Though it works well, glsl-livecoder is still in early beta.
I’m trying to solve these issues:
- Improve performance
- Support Webcam inputs
- Support glslify
If you want help or wanna request features, feel free to contact me!
I’ll be happy for any kind of feedback 😸
⚡⚡⚡ Enjoy Livecoding!!! ⚡⚡⚡