A blog for fans of Bananagrams, word games, puzzles, and amazing things

Friday, May 18, 2012

The power of recursive drawing

An MIT student has released a simple CoffeeScript/JavaScript-based tool for creating recursive drawings - combinations of rectangles and ellipses that can have a fractal-like structure. It is available at RecursiveDrawing.com. This video briefly explains and demonstrates how the tool works: Essentially, you can:
  1. Drag shapes into the canvas area.
  2. Move a shape around by clicking on its center and dragging.
  3. Resize a shape by clicking on its edge and dragging in and out with respect to the center.
  4. Rotate a shape by clicking on it edge and dragging sideways.
  5. Change the aspect ratio of a shape by clicking on its edge and dragging while holding the SHIFT key.
  6. Move around on the canvas by clicking and dragging the canvas.
  7. Zoom in and out by scrolling on a mouse or trackpad.
You can make more drawings by clicking on the "+" button in the sidebar, and shift between them by clicking on them. And then, by dragging the little representation of the canvas in the sidebar into the main canvas, you get the magical recursive effect.
I found it very easy to form a close approximation to a golden rectangle, subdivided into squares...
...or this spiral of home-plate-like pentagons:
I then made a pretty cool fractal tree:
Every time I play with this tool, I make something even better.
The interface is intuitive and powerful, making it terrific fun to play with. I would like to see a triangular shape, some control over color, and perhaps some kind of symmetry operator to allow flipping and reflecting of drawings. And since the source code is available, maybe someone will eventually add these features...