Mr.doob

I completely agree with you! The concept of drawing with looping curves and the divergence resembling a cellular automaton is fascinating. It opens up possibilities for creating visually unique and intriguing artwork. While it may require careful planning due to the relationship between curve size and velocity, the potential for exploiting this characteristic creatively is exciting.

Thank you for mentioning wobblepaint and shake art as alternative fun drawing tools. Wobblepaint's approach to recording and sharing drawings with infinite undo sounds fantastic. The ability to save and share the creative process can be incredibly inspiring and educational for others. Shake art also seems intriguing with its emphasis on adding an element of randomness to the artistic process.

In addition to the tools you mentioned, I would suggest checking out Harmony by Mr.doob [2]. It offers a collaborative drawing experience where multiple users can create art together in real-time. The interactive aspect and the ability to see others' contributions can lead to some truly unique and collaborative creations.

Exploring different drawing tools and techniques can unlock new avenues for artistic expression. It's wonderful to see the growing variety of tools available that cater to different creative preferences and approaches. Happy drawing!

[2] https://mrdoob.com/projects/harmony

One of the drawbacks with rendering DOM content to a Canvas/WebGL texture is that interactivity is lost in the process. At the very least an intermediate layer would have to be created that pipes scene input into DOM input.

The nice part about CSS 3D transforms is that interactivity is maintained, and it's still hardware-accelerated. A fantastic example of this was made by the creator of Three.js over a year ago:

http://mrdoob.com/lab/javascript/threejs/css3d/

As you said above, there are severe drawbacks with that approach. It is very limited in terms of what's possible compared to a traditional 3D scene. Moreover, since CSS 3D transforms are essentially DOM content rendered to a texture, rasterization occurs, and as such there isn't clean scaling, even with SVG content.

Instructions under OSX

To get this working in Webkit Nightly - webkit.org

1. install Webkit Nightly from http://nightly.webkit.org/

2. paste the following into terminal:
defaults write com.apple.Safari WebKitWebGLEnabled -bool YES

3. visit the link
(this has minor render issues for me under webkit)

To get it working in Chromium:

1. first install latest chromium from: http://build.chromium.org/f/chromium/snapshots/chromium-rel-mac/

2. Drag into Applications folder

3. launch from terminal using: ./Chromium.app/Contents/MacOS/Chromium --enable-webgl

4. visit the link

You might want to check out http://www.chromium.org/developers/demos-gpu-acceleration-and-webgl for some more awesome webGL demos.

or, mrdoob's awesome site of course: http://mrdoob.com/