Core library for the FlowAV project; a livecoding audiovisual language built ontop of VideoContext and gibberish.js
npm install flowav-coreFlowAV is a live coding programming language built on top of VideoContext and Gibberish. FlowAV gets its name from the Flow-Based Programming paradigm, and while not strictly a FBP, the syntax heavily implies a logical flow of data.
The best way to describe FlowAV's syntax is to breakdown a small example.
```
$ Video('01')
: loop
| Output()
$ Video('02')
: scale -> 0.5
: pos -> -0.5 0
| Output()
$ Video('http://www.example.com/video.mp4')
: scale -> 0.5
: pos -> 0.5 0
| Effect('monochrome')
| Output()
The snippet of code will do the following:
- Open the video '/video/01.mp4' and display it fullsize and loop continuously.
- Open the video '/video/02.mp4'.
- Scale the video to 50% width and height.
- Centre the video vertically and position it in the left half of the canvas
- Open the video from the url 'http://www.example.com/video.mp4'
- Scale the video to 50% width and height.
- Centre the video vertically and position it in the right half of the canvas
- Apply a monochrome filter to the video
The code is split into blocks and follows a tree-like branching structure.
for video and # for audio. Currently only the video context is functional.$3
What follows after a block declaration is a root node; these are video or image sources for the video context. The current nodes are valid root nodes:-
Video('path/to/video')
- Image('path/to/image')The above code snippet demonstrates that FlowAV expects video files to be placed in a
/video folder in the root directory. Doing so allows users to type the file name rather than the whole path. It also demonstrates loading a video from an external URL. While this is currently functional, it is possible this feature is dropped in the future.Additionally, a third
Canvas() node is planned.$3
These are used to define parameters for a node, they follow the syntax
: param -> (value) where value is optional. If left blank, the value will implicitly be true; useful for parameters such as loop.$3
Connections to other nodes are notated with a pipe. An arbitrary number of connections can be made, and those connections can have parameters and connections themselves; allowing for complex effects chains.
Getting started
If you'd just like to play around with FlowAV, check out the sister project FlowAV-Live to build an environment or head here to try it in the browser.If you'd like to contribute to FlowAV-Core or use it in an existing project follow these steps.
* Clone the repository:
git clone https://github.com/FlowAV/FlowAV-Core.git* Install dependencies:
npm installTo build the project into a UMD file as
/dist/FlowAV.js run:
npm run build
To run a webpack dev server with hot reloading enabled run:
npm run dev`