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.