ojack/atom-veda

VJ / Live Coding Environment for Atom ⚡⚡⚡

VEDA

VJ / Live Coding on Atom with GLSL.

TOC

• Features
• Install
• Usage
• Examples

What's this?

VEDA is a GLSL runtime environment for Atom. When you write GLSL code in Atom, VEDA immediately evaluates it and shows the result on the background. It's just like GLSL sandbox or Shadertoy, but you can use autocomplete and linter by using existing Atom packages. Moreover, It supports Audio inputs , MIDI inputs, loading videos and images, etc...!!!!

VEDA has following features.

• Fragment shaders runtime like GLSL Sandbox
• Vertex shader runtime like vertexshaderart.com
• Loading images / videos
• Additional uniform variables useful for live coding
  • Audio input
  • MIDI input
  • Webcam input
  • Keyboard input
  • Gamepad input
• Auto completion (thx to autocomplete-glsl)
• Linting (thx to linter-glsl)

Tutorial

• English
• 日本語

Install

Install glslangValidator

VEDA requires glslangValidator.
Follow the below steps to install glslangValidator.

macOS

If you are uning macOS, glslangValidator can be installed by homebrew.

brew install glslang

Windows or Linux

If you are uning Windows or Linux, the best way to install glslangValidator is to install Vulkan SDK.
Get the SDK from here:

https://www.lunarg.com/vulkan-sdk/

After that, add installed glslangValidator to your PATH environment variable.
In Windows, glslangValidator will be installed in C:\VulkanSDK\( version )\Bin.

The path of glslangValidator can also be specified in the settings of VEDA.

Install VEDA

Just install from Atom GUI or apm.

$ apm install veda

If Atom shows an error like below, try rebuilding the package from 🐞 icon on the footer.

Failed to require the main module of 'veda' because it requires an incompatible native module.
Run `apm rebuild` in the package directory to resolve.

Features

Commands

VEDA installs following commands to Atom.

• toggle
  • Start / Stop VEDA.
• load-shader (key: ctrl-enter)
  • Load the shader on current editor.
• watch-shader (key: ctrl-shift-enter)
  • Watch current tab and load the shader automatically.
• watch-active-editor (key: ctrl-alt-enter)
  • Watch active tab and run watch-shader automatically.
• stop-watching (key: ctrl-.)
  • Stop watch-shader and watch-active-editor.

A typical workflow can be like this:

1. Enable VEDA by running veda:toggle from the Command Palette of Atom.
2. Edit your GLSL code.
3. Hit ctrl-enter to run veda:load-shader.

Preset uniform variables

• float time:
  • The elapsed time since VEDA has started.
• vec2 resolution
  • The resolution of the screen.
• vec2 mouse
  • Current position of mouse.
  • vec2(0) to vec2(1)
• sampler2D backbuffer
  • Rendered result of last frame.
  • RGBA format
• sampler2D samples
  • Samples of the audio input.
• sampler2D spectrum
  • FFT result of the audio input.
• float volume
  • The volume of the audio input.
• sampler2D midi
  • Last MIDI event for each channel of MIDI devices.
  • x: 3rd byte of the event
• sampler2D note
  • States of note numbers of MIDI devices.
  • x: the volume of the note

Settings

The settings of VEDA can be configured in 3 ways: global settings, project settings, and file settings.

• Global settings are loaded from Settings page of Atom.
• Project settings are loaded from .liverc.
• File settings are loaded from the comments of the shader.

The order of priority is as follows:

File Settings > Project Settings > Global Settings

When File Settings and Global Settings has same properties, File Settings are used.

Global Settings

Global settings are most general settings. You can change settings in Settings page of Atom.

If there are no project .liverc or valid comments, VEDA will use the global settings as default.

Project Settings: .liverc

Project settings is loaded from .liverc on your project root.

• .liverc must be located in your project's root directory.
• .liverc is parsed as JSON5 format.
  • You can write comments in .liverc.
• .liverc is loaded on startup and reloaded automatically when you edit it.

For example, when you write .liverc like this:

{
	"IMPORTED": {
		"image1": {
			"PATH": "./1.jpg",
		},
	},
    "vertexMode": "LINES",
    "pixelRatio": 2,
    "audio": true,
    "midi": true,
}

Then VEDA interpret like this:

• Load ./1.jpg as a texture image1
• Draw lines on vertex shaders
• Enable audio input
• Enable MIDI input

File Settings

You can also write settings specific for the file. Write comments on the head of the file like this:

/*{ "audio": true }*/

void main() {
    ...
}

The comment must be written in the same format as .liverc.

Examples

Fragment Shaders

You can write fragment shaders like GLSL Sandbox.

Fragment shaders must be named like *.frag. Create a file foo.frag like this:

precision mediump float;
uniform float time;
uniform vec2 resolution;

void main() {
    vec2 uv = gl_FragCoord.xy / resolution.xy;
    gl_FragColor = vec4(uv, 0.5 + 0.5 * sin(time), 1.0);
}

Then save it and hit ctrl-enter to run it. VEDA will show the result on the background.

See examples for actual usage.

Vertex Shaders

VEDA also supports vertex shaders like vertexshaderart.com.

Vertex shaders must be named like *.vert. Create a file foo.vert like this:

/*{ "vertexCount": 300 }*/
precision mediump float;
attribute float vertexId;
uniform float vertexCount;
uniform float time;
uniform vec2 resolution;
varying vec4 v_color;

void main() {
  float i = vertexId + time *2.;

  vec3 pos = vec3(
    cos(i * 1.0),
    sin(i * 1.1),
    cos(i * 1.2)
  );

  gl_Position = vec4(pos.x, pos.y, pos.z, 1);

  v_color = vec4(fract(vertexId / 3.), 1, 1, 1);
}

Then save it and hit ctrl-enter to run it. VEDA will show the result on the background.

See examples for actual usage.

Optional Inputs

To use these features, you have to enable them by adding following lines to .liverc or header comments.

• Audio inputs: "audio": true
• MIDI inputs: "midi": true
• Webcam inputs: "camera": true
• Keyboard inputs: "keyboard": true
• Gamepad inputs: "gamepad": true

Audio inputs

You can use audio data of the audio input. These data are obtained by AnalyserNode of Web Audio API.

sampler2D samples stores the most recent 256 frames from the audio input. This is useful for drawing waveforms.

sampler2D spectrum stores the FFT result. This is useful to draw the volume of specific frequency band, such as spectrum visualizer.

float volume is the average of all the frequency bands in spectrum. See examples for actual usage.

MIDI Events

sampler2D midi stores MIDI events obtained by Web MIDI API. The size of midi is 256x128. Each pixel stores the last event of the corresponding MIDI Events.

For example, texture2D(midi, vec2(144. / 256., 0)).x yields the note number of last note on event of MIDI Channel 1.

• 144. (0x90): note on event of MIDI Channel 1
• .x (2nd byte): Note number

See examples for actual usage.

sampler2D note stores the volumes for each note number The size of midi is 128x1. Each pixel stores the volume of the last event for corresponding MIDI note.

For example, texture2D(note, vec2(60. / 128., 0)).x yields the volume of note C4 (Middle C).

See examples for actual usage.

Webcam Inputs

sampler2D camera stores the images from the webcam. texture2D(camera, uv) returns vec3 color.

See examples for actual usage.

Keyboard Inputs

sampler2D key stores the status of keyboard. The size of keyboard is 256x1.

For example, texture2D(key, vec2(65. / 256., 0.)) returns 1.0 when a is pressed.

Hitting ESC key resets the states of all key inputs.

See examples for actual usage.

Gamepad Inputs

sampler2D gamepad stores the status of gamepads connected to the PC. The size of gamepad is 128x2. The status of buttons and axes are stored in y = 0.0 and y = 1.0.

For example, texture2D(gamepad, vec2(3. / 128., 0.)) returns 1.0 when the 3rd button is pressed.

See examples for actual usage.

Loading images / videos

You can load images and videos by adding IMPORTED property in .liverc or header comments. If you write the path or URL of the resourece, it will be loaded automatically:

/*
{
  "IMPORTED": {
    "image1": {
      "PATH": "1.jpg",
    },
    "image2": {
      "PATH": "../2.png",
    },
    "video1": {
      "PATH": "/Users/foo/Movies/1.mp4",
    },
    "video2": {
      "PATH": "http://example.com/2.mp4",
    },
  },
}
*/
precision mediump float;
uniform vec2 resolution;

uniform sampler2D image1;
uniform sampler2D image2;
uniform sampler2D video1;
uniform sampler2D video2;

void main() {
	vec2 uv = gl_FragCoord.xy / resolution;

	gl_FragColor = (
		texture2D(image1, uv) +
		texture2D(image2, uv) +
		texture2D(video1, uv) +
    texture2D(video2, uv)
  );
}

The structure of IMPORTED properties is based on Interactive Shader Format.

See these examples for actual usage.

• .liverc
• image.frag
• video.frag

Multipass Rendering

VEDA supports multipass rendering. You can define passes in PASSES property in .liverc or header comments.

/*
{
  "PASSES": [
    { "TARGET": "buffer" },
    {},
  ],
}
*/

The structure of PASSES property is based on Interactive Shader Format. However, VEDA doesn't support PERSISTENT, WIDTH and HEIGHT property.

See these examples for actual usage.

• multipass.frag
• multipass.vert

Combining VS and FS

In PASSES you can specify vertex shader path from fragment shader, and vice versa. For example, when you write header comments like below in fragment shader, VEDA will use ./vertex.vert for vertex shader instead of default vertex shader.

/*
{
  "PASSES": [{
    "vs": "./vertex.vert",
  }],
}
*/

See these examples for actual usage.

• combination.frag and combination.vert
• particles.frag and particles.vert

glslify

VEDA supports glslify.

If "glslify": true is in the settings, VEDA bundles the code with glslify before evaluating. Note that it will cause lint errors because linter-glsl doesn't support glslify.

See examples for actual usage.

Server Mode

If you wanna hide code and show only the shaders, you can use server mode. When server is specified, VEDA launches a web server instead of running shaders in the background of Atom.

In this example, VEDA runs server on http://localhost:3000. You can run shaders on the browsers by opening the url.

/*
{
  "server": 3000,
}
*/

Warning: Currently we can't use videos/images outside the project directory in server mode.

See an example for actual usage.

Author

Takayosi Amagi

• Twitter: @amagitakayosi
• GitHub: fand
• Blog: マルシテイア

License

MIT