Package Exports

flow-av

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (flow-av) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

FlowAV-Core

Core library for the FlowAV project. Use this if you'd like to include FlowAV into an existing project.

FlowAV 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.

Syntax

The best way to describe FlowAV's syntax is to breakdown a small example.

FlowAV 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.

`$` and `#`

Declares the context for the following block. $ for video and # for audio. Currently only the video context is functional.

`Node('argument')`

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.

`:` and `->`

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.

`|`

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 install

To 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

At the moment webpack compiles all the dependencies as part of the build process. This might not be a good idea but honestly I don't have a clue...

flow-av