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.
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.
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.
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.
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.
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.
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.
VVVV.js comes with a constantly improving mechanism to compile your patches in order to decrease loading time and make it fit for production.
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
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:
#edit/assets/patches/mypatch.v4pin 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
/patchesdirectory. So, yes, you can edit it by appending
#edit//patches/header_animation.v4pin the address bar of this window.