vvvv ＂clone＂ in javascript/web

ThreeNodes.js

Experimental

This is an experiment to make something like "vvvv" in javascript, html and webgl.

Live demo: http://idflood.github.com/ThreeNodes.js/

Key principles modular creating a custom "node" must be as easy as possible should be possible to switch interface for live performance (selection of buttons/toggle) Some ideas Field array input could have multiple input connections. local timelines ? automatic layout of node graph grouping (multiple nodes in one, possibility to have multiple instances) ability to take a group, ungroup it, make some changes an regroup it so there are 2 slightly different group definitions (and maybe easier workflow, like 'make this a new group definition') some kind of library panel like in flash to manage images/fonts/groups... preloader (+preloader node so the preloader can be customized) maybe add processingjs.org as an alternative to three.js sound nodes (Audiolet for instance) server with possibility to login, save (public/private), browse, fork, +1, ... (a bit like audiotools) when server + grouping are completed, ability to share custom group of nodes (tags, public repository, ...) script nodes (js). Create input/outputs from parsing js vars or simply define a standard way of doing it, 1 return, inputs injected in an array. Be careful when sharing if there is a server with login... glsl nodes (vert/frag) make threenodes.js compatible with other programs (load/export vvvv file (or vvvv.js), meemoo, ...) publish to chrome webstore use most chrome apps features (offline, chromeless renderer, ...) use google drive api (save, load, simultaneous collaboration, ...) more three.js (and other) nodes... native app based on chrome like adobe/brackets with "permissive" settings to easily allow image loading (CORS), ... soundcloud node (or simply a way to put an url in the SoundInput node) flickr image node when they allow CORS, google drive, freesound.org, archive.org, ... possibility to enable/disable plugins so the nodes list is not filled with unnecessary things search in workspace nodes (quickly find a named node, search all 'time' inputs for instance, ...) drag and drop image/movies from desktop to threenodes "MIDI" timeline when sound generation is added (tempo, ...) music and sound start/finish/volume/... should be possible to handle in node and in timeline if needed (like after effects) curves in timeline like after effect websocket node with example of server/client in flash/processing/java/scala or other ability to run an instance of a saved workspace from command line (send email alert when some inputs have a certain value for instance) csv, xml, ... node parser (and possibly d3.js renderer, or others) MidiFileInput (and similar) when sound generation is done directly select/move/rotate/scale objects in the renderer like any 3d software (and selecting an object3d (or subclass) node should display a x/y/z axis in renderer window to allow move/rotate/scale) gui button/knob/slider/textfield/bang/toggle/select/... nodes key shortcuts + possibility to assign custom key bindings on toggle buttons, ... ? more flexible webgl renderer (image in node or fixed in corner) procedural texture (layers with multiply/add/color..., canvas image, effects, ...) more UI fun inspired by what other programs do (but stay in 2D and keep performance a priority) make it easy to add a theme (+ add a white version, and make the dark one nicer) record values while playing like it is done in music applications (automation) when sound synthesis is done, add drum machine, sequencer, reverb, ... nodes ability to change layout mode (vertical/horizontal/smaller nodes expanded on hover/...) menu to automatically arrange nodes (spring based solution or other) nice user & dev documentation export sequence of png (or video if possible) like a render in ae (time start/end, fps, resolution, ...) better "flow" highlight (when a node is selected, make the inputs and outputs nodes more visible (maybe optional)) display some attribute directly in the node (sliders/textfields/..., add a checkbox in the attribute editor to enable this) display scaled down subchilds of nodes inside a group node. Seeing the global workspace it should be possible to have an insight of the complexity of different group nodes (maybe optional) different color of bullet for each field types (or more general classifications like number, string, vectors and others) when dragging from one field to another, highlight only real possible connections (not all inputs like it is now, but based on field type) ... Development setup

This will automatically compile coffescript files to javascript, sass to css and haml to html.

install node.js 0.8.x or later (http://nodejs.org/) install compass (http://compass-style.org/install/) install grunt (http://gruntjs.com/getting-started#installing-the-cli) cd in ThreeNodes npm install -d Build / Deploy cd in ThreeNodes grunt build Known limitations It is recommended to always access ThreeNodes.js from http since chrome has a highly restrictive file access when using file://. (see http://code.google.com/p/chromium/issues/detail?id=40787) Howto create a simple scene

First, create a webglrenderer node. Then add a scene and connect it to the "scene" of the webgl node. On the scene children you would connect a "merge" and to it a mesh. With that there should be a red cube showing in the renderer window.