Recursive Drawing
recursivedrawing.com
recursivedrawing.com
More angles and other great videos available at http://itp.nyu.edu/shows/thesis2012/archives/
I started drawing without watching the video and didn't get it. Thank goodness I didn't give up there.
Recipe for fun:
Make a very thin rectangle by dragging in a square, and holding down shift to resize it. You can basically get a line.
Drag the line onto itself. You now have a spirograph.
I would think these are actually not that big or complicated to store. Each drawing is a list of {pointer, x, y, theta} for each. You might be able to "export to text" pretty easily. Want to see a friend's drawing (and incidentally, entire drawing toolbox)? Import the text.
Edit: came back to add that I left morphing (size, length/width ratios) out of the data structure. Incidentally, maybe morphing is why triangle isn't a primitive. What relation should you set up for a self referencing triangle? Maybe if you label the vertices.
You might be able to handle the self-referencing without any extra members in the text representation. You just have to handle a special case of child pointer == self.
I didn't read the code yet, but it's fun to think about.
Is it a visual interface to define the rule system, rather than the programming language approach? If so does it escape the same traps that other visual languages fall into?
1) A way to delete objects that you placed by accident. (perhaps there is a way to do this which I couldn't find). I keep going back a page and losing everything because I press the delete button.
2) A way to label layers, with generated descriptions of what the layer is. i.e. Here is a new layer called a "heart". A heart is two circles and one square. A "valentines day picture" is two hearts. Likewise, a "tree" is a rectangle, with another a rotated "tree" touching one end of the rectangle. I can imagine this being a great way to explain programming concepts in a visual way, and giving people the vocabulary to talk about them.
As for my artistic abilities... http://cl.ly/251m2k0z1Z0z142r3S42
http://tog.acm.org/resources/RTNews/html/rtnv6n2.html#art11
Copy the postscript into a file and upload to:
You implemented: -variables (shapes in left windows) -objects (collection of variables, the left column, pass by reference) -addition (drag in the middle) -unset (delete) -while(1) loop -multiplication (resize)
I don't know yet where rotation fits into the picture. Maybe its just that "primitive types" in a graphical programming language would be more complex, they could be described with -shape -size -orientation -position
I think I have a use-case for you. Maybe we could talk about it thalter at zupa hu
Congrats, fascinating!
The left column is the shapes library. The center area is the canvas/workspace. The right area is an outline view of the shapes in the canvas.
To add a shape to the canvas, drag your mouse from the shape in the shape library to the workspace.
To move a shape, drag inside it, when the whole shape is highlighted red.
To resize and rotate a shape, drag the edge of it, when it is outlined red.
To delete a shape on the canvas, right-click it and choose Delete Shape. (You currently cannot delete shapes directly from the outline, nor can you delete shapes from the shape library.)
To resize a shape non-uniformly or add skew, hold shift while dragging its outline. You can use this to make line segments and rhombuses, among other things.
Click the + button in the left column to start editing a new shape.
Remember that you can add any shape to the canvas by dragging it from the shape library. This also applies to shapes you create yourself.
Click on any shape in the shape library (except for the starting circle and square) to edit it in the canvas.
You can see the thumbnail of what's in the canvas in the current shape in the shape library. You can also see the shapes your shape is composed of in the outline. Everything is updated live.
To pan across the canvas, drag outside of any shape, in the white area. To zoom into or out from the canvas, scroll with the mouse wheel while pointing inside the canvas.
You can drag even the shape you are currently editing from the shape library into the canvas. That is what makes this recursive drawing rather than merely nested drawing. You will see the current shape repeated relative to itself. (You might call the shape inside itself a "recursive shape instance".)
You can move, rotate, and resize a recursive shape instance to change its repetition pattern. For instance, if you resize the recursive shape instance to be smaller, you will see a line of recursive shapes shrinking forever. If you edit one of the repetitions of a shape, it will edit the whole pattern.
You can go back and edit a sub-shape, and every shape including that shape will update live.
If you don't know what to draw, try drawing one of these: any kind of fractal tree (https://www.google.com/search?q=fractal+tree&tbm=isch...), Koch snowflake (http://en.wikipedia.org/wiki/Koch_snowflake), Sierpinski triangle (http://en.wikipedia.org/wiki/Sierpinski_triangle), Sierpinski carpet (http://en.wikipedia.org/wiki/Sierpinski_carpet), or any other fractal (http://en.wikipedia.org/wiki/List_of_fractals).
I found the demo trees a bit lacking, so I made some with more recursiveness and better fitting near the joints[1]. Fibonacci rarely looked so cool[2].
Second order recursion can give you some interesting stuff[4]. At some point I was successful in drawing a galaxy but things went whacky
I could see myself readily using this to generate artwork or material texture in some game.
This thing desperately needs some more love[3] than shown in the video. I'm dying to export data, be able to remove elements from left and right sidebars, have more basic shapes (triangle?), a persistent shape library (html5 local storage?), and some form of snapping to grid/angles/ratio/edge.
[0] http://imgur.com/a/EneFC#0 [1] http://imgur.com/a/EneFC#1 [2] http://imgur.com/a/EneFC#2 [3] http://imgur.com/a/EneFC#3 [4] http://imgur.com/a/ZUlOZ#1
album link: http://imgur.com/a/Hk7lw
"chain pincer" - http://i.imgur.com/SiCHM.png
"chain device" - http://i.imgur.com/kFZPR.png
"starry squares" - http://i.imgur.com/2TGcT.png
"analyzed alien" - http://i.imgur.com/bGSU6.png
One thing I'd like to see is holding down Ctrl (or something) allowing resizing while doing something like snap-to-grid. I.e. avoid rotation and allow you to change the aspect ratio.
I think this would be useful for making rectangles.
I played for a little while with gimp and recursivedraw.com and came up with this: http://eruditenow.com/recursive/combo.jpeg http://eruditenow.com/recursive/spiders.jpeg http://eruditenow.com/recursive/bollaraweseome.jpeg
http://imgur.com/m0Okt see components on rhs.
Edit: Oh sorry, was confused about which one Sierpinski's was. Can fix it by omitting middle triangle: http://imgur.com/MVmPh
I am probably going to make strange trees until I fall asleep on my keyboard. I hate waking up with keys stuck to my face, but the trees will be there to comfort me in the morning.
[1]: https://github.com/electronicwhisper/recursive-drawing/blob/...