This is a personal project and it is highly experimental and is not ready for production use.
The Visual Fiha extension for VS Code is the third version of an application aimed to provide a live-coding VJing environment using web technologies.
- Live coding
- Multi-display
- Audio analysis
- Custom, function based, 2D canvas rendering context API
- ThreeJS based 3D rendering
- Assets support
The extension on the Visual Studio Code marketplace and can be installed from the extension panel of Visual Studio Code too.
Select Visual Fiha: Scaffold project from the Command Palette (Ctrl+Shift+P).
https://github.com/zeropaper/visual-fiha/projects/2
A display is a web page that can is used to render. Typically, this is the page that you want to show to your audience with a projector.
Tip: You can double-click the display to enter full screen mode.
Like many other graphical softwares, Visual Fiha has a layer system that allows compositing of images.
Layers can be sorted, rendered or only activated (invisible as layer but re-usable in others, e.g. 3D texture).
The live-coding uses scriptable context that have a setup and an animation scripts.
The setup script allows to define initial cache and data values that can be then used by the animation script.
Each scriptables have an object cache that can hold any values used for the scriptable instance scripts.
You can read and write the cache values from the setup and animation scripts.
The data is an object that is serializable and shared between the worker scripts and the layers scripts.
You can define values in the data object by returning an object from the setup script.
Each display spawns a worker that is responsible for rendering the layers and send back the result to the display thread.
The capture page is aimed to react to different inputs (audio, MIDI, mouse, keyboard, touch, etc.) and forwards these inputs to the extension (that, in turn, broadcasts them to the display workers).
Note: In order for the audio capture to work properly, you should keep the capture page open in a separate window that has no other tabs open.
Gives the VJ some controls over the layers and the project settings.
The above "key concepts", graphically arranged.
Obviously, Visual Studio Code is required.
- Clone the repository
- Ensure that you are using the right NodeJS version with NVM:
nvm use - Install the dependencies with
npm install - Press the F5 key to start the VS Code extension development
See LICENSE