VJ / Live Coding on Atom — glsl-livecoder

<UPDATE>

glsl-livecoder is now renamed to VEDA! Check out the release:

VEDA v1.0 — VJ app for Atom #VEDAJS

</UPDATE>

Recently I published an Atom package for VJ / Live Coding — glsl-livecoder!!!

glsl-livecoder

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.

There are some Atom packages for Live Coding, such as TidalCycles, Gibber, etc. So you can play both DJ and VJ on Atom at the same time. Cool!!

Features

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!

- Auto completion w/ autocomplete-glsl
- Linting w/ linter-glsl

As a GLSL runtime, glsl-livecoder provides following features:

- GLSL Sandbox style uniform variables
- Load images / videos
- Audio input
- MIDI input

Installation

Install glslangValidator

glsl-livecoder depends on glslangValidator. Follow the below steps to install glslangValidator.

in macOS

You can install it with homebrew. If you don't have homebrew now, install it first from here:

homebrew.github.io

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:

Vulkan SDK - What's in the SDK - Where to Download

In Windows, glslangValidator will be installed in C:\VulkanSDK\(VERSION)\Bin. Add it to your PATH and check if the command is available.

Install glsl-livecoder

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 Rebuild Packages.

Now glsl-livecoder should be installed correctly.
Open the command palette and run glsl-livecoder:toggle!

HOOORAY!!
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!!!

First, clone glsl-livecoder-examples and open it with Atom.

git clone https://github.com/fand/glsl-livecoder-examples
cd glsl-livecoder-examples
atom .

Open the command palette and run glsl-livecoder:toggle.
glsl-livecoder will be started and show you the result of default code.

Files in glsl-livecoder-examples are created to show the features of glsl-livecoder.
Let's open sample2.frag and run it by ctrl-enter.
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.
Add p *= fract(time); on the line 7 and hit ctrl-enter, then the animation will be updated soon.

Now let's try loading videos.
Open video.frag and hit ctrl-enter.
You will see multiple videos mixed on the screen.

The paths of videos are specified in .liverc.
You can load any videos and images by editing .liverc.
When you edit .liverc it will be loaded immediately.

// .liverc
{
  "IMPORTED": {
    // Videos are located in ./videos/
    "video1": {
      "PATH": "./videos/1.mp4",
    },
    "video2": {
      "PATH": "./videos/2.mp4",
    },
    "video3": {
      "PATH": "./videos/3.mp4",
    },
  },
}

Of course you can add some effects to the videos!!
Un-comment // uv *= uv; on line 21 and hit ctrl-enter again.
Then the video will be distorted!

Woohoo!!
Now you've started a journey as a VJ / Livecoder.

If you’re interested in audio / MIDI inputs, take a look at audio.frag or midi.frag :)

Wanna learn more about GLSL?

“The book of shaders” is a good place to start.

The Book of Shaders

Beware that the names of `uniform` variables are different in the book.

• u_resolution is same as resolution in glsl-livecoder
• u_mouse is same as mouse in glsl-livecoder
• u_time is same as time in glsl-livecoder

Upcoming features

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!
Pull-Requests welcome!!

• Twitter: @amagitakayosi
• GitHub: https://github.com/fand/glsl-livecoder

I’ll be happy for any kind of feedback 😸

⚡⚡⚡ Enjoy Livecoding!!! ⚡⚡⚡