Inspired by the ChucK programming language, this tool allows you to use a similar (but much, much more limited) version of that language to create visual output.
This is a quick/dirty hack language, so don't expect great feedback or ergonomics. It's a toy that I enjoy playing with, and I hope you do too.
You can access a demo from here.
The UI has a canvas area where the output draws, a text area where you can enter code, a run button which will execute your code, and a small console area which will output any errors in your code.
The VSynth language consists of two kinds of statements: generator declarations, and wireups.
To spawn a generator, you use the following statement:
GeneratorType label;
Or, concretely:
Trig t;
This creates a generator of the specified type, which can be referred to by label. While many times, you'll be wiring together generators via ports, you may wish to control ports directly when creating the generator.
GeneratorType label(portName=defaultValue, otherPortName=defaultValue);
Or, concretely:
Trig t(frequency=0.125);
NB: this language doesn't have datatypes, so whatever you pass into the initalizer will be passed exactly as specified, and it's up to the generator to parse the value. This is important on the Beats generator.
Once generators have been declared, they can be wired together via their labels. A wireup statement looks like:
genLabel.portName->otherGenLabel.otherPortName;
Or, for a "hello world" program, which draws a circle:
Trig t(frequency=0.2);
Line l;
t.sin->l.x;
t.cos->l.y;
This connects the sin output of the Trigonometry generator to the x port on the Line generator, and cos to the y.
There are a number of generators you can use in a drawing. Each generator may have Input ports, and Output ports. When wiring, you should wire Outputs to Inputs (though there's nothing in the language which enforces this, but you probably will get meaningless results).
Any port can be given an initial value using the generator declaration syntax above.
NB: all screen coordinates (any x/y/w/h ports) are mapped so that the screen area ranges from -1..1.
The Value generator outputs just a steady value, useful as a constant. This generator has only one port, but that port is both an input and an output.
| Inputs | Outputs |
|---|---|
|
|
The Tick generator outputs an incrementing series of values within a range. When it hits the end of the range, it loops back to the beginning.
| Inputs | Outputs |
|---|---|
|
|
The Trigonometry generator outputs the result of trig functions with a specified frequency.
| Inputs | Outputs |
|---|---|
|
|
The Math generator can perform basic arithmetic on its inputs.
| Inputs | Outputs |
|---|---|
|
|
The Gate gen allows a value to pass through when a key is pressed. NB, because there are no types, you shouldn't wrap the key expression in quotes.
Gate g(key=page down) is correct, Gate g(key="page down") is wrong.
| Inputs | Outputs |
|---|---|
|
|
The Beat generator is a version of a gate which outputs its in value, not based on keystrokes, but based on a beat pattern.
| Inputs | Outputs |
|---|---|
|
|
The Pixel generator colors in pixels each frame, based on its inputs.
NB: the r/g/b values accept valuse in the range from -1..1, but take the absolute value- so -1,-1,-1 would be white, as would 1,1,1
| Inputs | Outputs |
|---|---|
|
No ports - draws pixels on the screen |
The Line generator works as the pixel generator, but "connects" the dots, by drawing a line from each pixel to the next.
| Inputs | Outputs |
|---|---|
|
No ports - draws lines on the screen |
The Rotate generator rotates the coordinate system about the origin (the center of the screen).
| Inputs | Outputs |
|---|---|
|
No ports - rotates the screen |
The Clear generator clears some or all of the screen, by drawing a black rectangle over that area of the screen.
| Inputs | Outputs |
|---|---|
|
No ports - draws pixels on the screen |
The Log generator will accept inputs and dump them to the browser console. It can be useful for debugging.
The input ports are all named value0-value9. This has no output ports.