Veda
⚡VJ / Live Coding on Atom⚡
Install / Use
/learn @fand/VedaREADME
TOC
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
uniformvariables useful for live coding- Audio input
- MIDI input
- OSC input
- Webcam input
- Keyboard input
- Gamepad input
- Auto completion (thx to autocomplete-glsl)
- Linting (thx to linter-glsl)
Tutorial
Install
Just install from Atom GUI or apm.
$ apm install veda
Sometimes Atom shows an error like below. If you see this, please 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-shaderautomatically.
- Watch active tab and run
stop-watching(key:ctrl-.)- Stop
watch-shaderandwatch-active-editor.
- Stop
toggle-fullscreen(key:ctrl-escape)- Show the output fullscreen in the window
A typical workflow can be like this:
- Enable
VEDAby runningveda:togglefrom the Command Palette of Atom. - Edit your GLSL code.
- Hit
ctrl-enterto runveda:load-shader.
Preset uniform variables
float time:- The elapsed time since
VEDAhas started.
- The elapsed time since
vec2 resolution- The resolution of the screen.
vec2 mouse- Current position of mouse.
vec2(0)tovec2(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
.vedarc. - 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 .vedarc or valid comments, VEDA will use the global settings as default.
Project Settings: .vedarc
Project settings is loaded from .vedarc on your project root.
.vedarcmust be located in your project's root directory..vedarcis parsed as JSON5 format.- You can write comments in
.vedarc.
- You can write comments in
.vedarcis loaded on startup and reloaded automatically when you edit it.
For example, when you write .vedarc like this:
{
"IMPORTED": {
"image1": {
"PATH": "./1.jpg",
},
},
"vertexMode": "LINES",
"pixelRatio": 2,
"audio": true,
"midi": true,
}
Then VEDA interpret like this:
- Load
./1.jpgas a textureimage1 - 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 .vedarc.
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 .vedarc 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 onevent 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.
OSC Inputs
VEDA accepts OSC messages on the port written in osc property of the settings.
When you write "osc": 4000 to .vedarc or the header comment, messages will be stored and passed as textures:
- Texture name will be automatically generated from addresses.
/foo:sampler2D osc_foo/foo/bar:sampler2D osc_foo_bar
- Arguments are translated to float. Strings are ignored.
/foo 0.1 hello 100yields a texture that contains[0.1 0 100]
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 .vedarc or header comments.
If you write the path or URL of
