Creating fancy real-time computer graphics surely is one of the original VVVV's core strengths. Shifting those capabilities to the web has been the initial idea behind developing VVVV.js.

One could do some HTML element animation, by animating style attributes, or create SVG output by just building SVG XML strings. But that would not cope with VVVV's huge range of functionality in the scope of graphics output. Here's a discussion of more advanced technologies.

3D rendering with WebGL

While VVVV relies mainly on DirectX when it comes to 3D rendering, WebGL seems to be the right counterpart in the realm of VVVV.js. As a prove of concept, several nodes you might know from VVVV's EX9 category have been partially implemented, such as Renderer, Quad, FileTexture, as well as some transformation nodes. The idea is, to make the Renderer node render into any <canvas> element within the website. You choose the canvas element by giving the Renderer node the regarding dom selector as a "Descriptive Name". See the example below, and click the "View Patch" link to the right, to get the clou.

Show Patch > This canvas object has the id 'renderer-2', and is
referenced to by the Renderer Node with the Descriptive Name '#renderer-2', seen?

2D graphics with Canvas

WebGL is fun, no doubt, but not supported very well. Chances are not too good, that the example above works on your browser. However, 3D is not everything, so a way of creating pure Canvas graphics output with VVVV.js would be great.

While there are the EX9 nodes in pure VVVV, which correspond directly to the WebGL nodes of VVVV.js, we can't really map any original VVVV nodes to Canvas drawing techniques. Well, there is the GDI node group, which allows drawing 2D shapes, but those nodes don't cover all the possibilities of Canvas.

Therefore, there is going to be a VVVV.js-specific Canvas group, which contains nodes for drawing into a Canvas graphics context.

Show Patch >