The visual programming language VVVV brought to your web browser.

VVVV.js is a great toolkit for prototyping and developing rich data visualisation, advanced user interfaces, games, and more — all by connecting nodes, spreading slices and letting the dafa flow. From simple 2D charts to complex 3D animations: the possibilities grow with your patching skills.

Try itin the VVVV.js Lab DownloadVersion 1.1

Features

VVVV.js is fun to play with, yet it's more than a toy. Rather than being a standalone web application, it comes with a development workflow designed to integrate VVVV.js with your web application and enhance it in an unobtrusive way.

In-Browser Patch Editor

Using the patch editor you can work on your patches and see the results immediatly. This kind of "real-time coding" is what makes VVVV (and VVVV.js) fun and effective. The best thing: it runs entirely in your browser, no additional software needed.

Subpatches

Once you are caught in a patching spree, things can get messy after a while. In order to create well-structured applications, VVVV.js supports VVVV's subpatch concept, which allows you to box patches into smaller, reusable modules.

Graphics

Besides covering the better part of the HTML5 Canvas API, VVVV.js is cool with WebGL: Meshes, shaders, blend modes, multi-pass rendering, and whatnot. It even comes with a built-in Shader code editor, which you can use to (again) real-time code shader nodes.

DOM Interface

VVVV.js is designed to be part of a website and interact with it. A patch can plant Canvas and WebGL output anywhere on the page, query and manipulate DOM elements, and react to events.

VVVV Compatibility

All the concepts, best practices, tricks and hacks common in VVVV also apply to VVVV.js. You can even copy and paste from and to classic VVVV, as both use the same XML format under the hood. If you already know VVVV, you know VVVV.js. While learning VVVV.js, you also learn VVVV.

Packaging

VVVV.js comes with a constantly improving mechanism to compile your patches in order to decrease loading time and make it fit for production.

Examples

Understanding how VVVV.js works is best done by viewing examples. Thanks to the way VVVV.js is designed and its built-in patch editor, patches can be explored and modified easily and effortless. A good starting point is the VVVV.js lab with a variety of experiments created by developers who already had a go on VVVV.js.

Go to the Lab

View at the Lab

Getting Started

There are a lot of different ways to integrate VVVV.js with your project, have a look at the Docs Section to read everything about it. However, getting a first VVVV.js patch up and running takes you four steps:

Download VVVV.js and extract it (or clone the github repo) to the location in your project where you keep your JavaScript. Here, we are using javascripts/vvvv_js. Some webservers seem to have problems with dots in directory names, so make sure to really rename the 'vvvv.js' from the archive to 'vvvv_js'.
Create a new patch. You do so by just creating an empty .v4p file at the location you'd like to have it, for example, assets/patches/mypatch.v4p.
Include VVVV.js and the mypatch.v4p file in your website (e.g. index.html) like this:
<head> ... <script language="JavaScript" src="javascripts/vvvv_js/lib/jquery/jquery-1.8.2.min.js"></script> <script language="JavaScript" src="javascripts/vvvv_js/vvvv.js"></script> <script language="VVVV" src="assets/patches/mypatch.v4p"></script> <script language="JavaScript"> $(document).ready(function() { VVVV.init("javascripts/vvvv_js/", 'full', function() { console.log('VVVV.js initialized'); }); }); </script> ... </head>
Launch the Editor by appending #edit/assets/patches/mypatch.v4p in the address bar. The editor will open in a new popup, so make sure you allow them for this page. You see what we did here? Here is another example: this websites header animation is in the file header_animation.v4p in the /patches directory. So, yes, you can edit it by appending #edit//patches/header_animation.v4p in the address bar of this window.