
Recursive Drawing - nreece
http://recursivedrawing.com/
======
jedahan
Do yourself a favor, and watch Toby Schachman (the author) explaining his ITP
thesis. This is just one expression of a larger vision for alternative
programming which he describes very succinctly. These two videos include him
and the slides: [http://itp.nyu.edu/thesis/spring2012_archives/thesis-
Heching...](http://itp.nyu.edu/thesis/spring2012_archives/thesis-
Hechinger-2012_Toby%20Schachman_3_Large.mp4)
[http://itp.nyu.edu/thesis/spring2012_archives/thesis-
Heching...](http://itp.nyu.edu/thesis/spring2012_archives/thesis-
Hechinger-2012_Toby%20Schachman_4_Large.mp4)

More angles and other great videos available at
<http://itp.nyu.edu/shows/thesis2012/archives/>

~~~
tehwalrus
...this is _by_ Toby Schachman (you knew that right?) just check out the
github author <http://github.com/electronicwhisper>

~~~
jedahan
I did mention (the author). Maybe I should have been more explicit (the author
of this application & thesis). I've worked with him before, super sharp,
straightforward dude.

------
msg
This is so cool!

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.

------
ynniv
It would be quite nice if the page popped an alert before leaving. OSX/Chrome
has the irritating "feature" whereby dragging two fingers loses all of your
data. err... navigates backwards. Looking to disable this, but asking before
navigating would be an improvement.

~~~
wdewind
Under System Preferences -> Trackpad -> More Gestures set the swipe gesture to
3 fingers only

~~~
RKearney
Then you don't get the nice page sliding animation when swiping to go
forward/back in Safari.

~~~
middus
"nice page sliding animation" vs "[losing] all of your data" does not sound
like a difficult decision to me.

~~~
lloeki
Contrary to Chrome which pops the history stack instantly, Safari's "nice page
sliding animation" is completely reversable if you don't release the gesture
and "put things back in place". The animation is not a gimmick, it has a very
real usability purpose.

~~~
etherealG
actually, there's an animation on the side of the page in chrome that's
reversible as well

~~~
wdewind
To complicate things even further: only for 2 finger swipe, not three.
Gestures in Lion are a sad affair.

------
pacaro
This is non-responsive for me at the moment, how does this compare to
<http://www.contextfreeart.org/> ?

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?

~~~
apgwoz
I work with the original author of CFDG, who described this _exact_ idea to me
just last week. My jaw about hit the floor when I saw this. Though, it's
possible that he knows the author of this.

------
mrmaddog
This is really cool, and playing with it made me smile. I wish it had two
things:

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>

~~~
jacktoole1
Right click on the shape, and you can choose to delete it.

------
eck
Old trick. Go search for [postscript snowflake] sometime. Great fun for
drawing psychedelic images and/or crashing network printers. (It turns out
that .ps is actually an archaic programming language and not just a page
description language.)

~~~
kika
PS is basically Forth

~~~
kjhughes
Fair casual observation. More here on the relationship between Forth and
Postscript: <http://c2.com/cgi/wiki?ForthPostscriptRelationship>

------
roryokane
Textual instructions (if you don't want to watch the demo video):

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...](https://www.google.com/search?q=fractal+tree&tbm=isch&biw=1280&bih=1252)),
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>).

~~~
lloeki
After trying my hand on some Sierpinski carpet and pseudo-dragon curve, I was
experimenting with some texture stuff, my hand slipped, and now I don't have
the foggiest idea how I did this[0] (it took ~10 minutes to completely render)

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>

------
tlrobinson
Very cool. It's a bit reminiscent of Bret Victor's concepts:
<http://vimeo.com/36579366>

------
jstanley
This is unbelievably cool. The demo video is worth watching, for anyone who
doesn't get it.

------
rpwverheij
Can't stop! So much fun! <http://imgur.com/a/GNvbZ#0>

~~~
Trufa
Those are really beautiful. I'm really impressed with this concept!

------
roryokane
Some of my drawings:

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>

------
gegenschall
This might actually be cool, but if you do not watch the video (read: RTFM)
you will most likely think something like "This is an april's fool, right?"
and immediately close the window. At least that's what happened to me until I
saw the comments in here. Anyways, watching the video was fun. Doing it myself
is rather boring. :-/

------
spatten
That's pretty fun!

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.

------
rijoja
It would be awesome if this was integrated into gimp or made as a standalone
program. With the ability to give the shapes colors etc.

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>

------
zupa
I think you are onto creating a graphical programming language.

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!

------
lambdapilgrim
Absolutely the best thing I have seen in a long time! Great tool to illustrate
recursion to anyone and also to surprise yourself.

------
Kopion
Does anybody have any insights into how this was developed? Does the author
care to chime in?

~~~
guelo
ctrl-u is your friend. Libraries used include jquery and knockout.js. The meat
of the app seems to be here <http://recursivedrawing.com/compiled/app.js>

~~~
notJim
It's actually considerably easier to read in the GitHub repo, where it's in
its native coffeescript, and not combined into one file:
[https://github.com/electronicwhisper/recursive-
drawing/tree/...](https://github.com/electronicwhisper/recursive-
drawing/tree/gh-pages/src).

------
DivisibleByZero
Can't seem to figure out how to draw Sierpinski's triangle. The hello world of
fractals.

~~~
throwaway15289
Draw a triangle and put 4 shrunk copies of itself in the triangle (center one
flipped)?

<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>

~~~
bryogenic
Or you can do the inverse <http://i.imgur.com/tMbrj.png>

------
prezjordan
I can't even imagine how you managed to develop this. Seriously awesome.

------
daralthus
Great! Looks similar to some scripts in scriptographer (a js scripting layer
for illustrator) and paper.js

<http://scriptographer.org/>

------
ok_craig
This seems basically like a web-based version of Chris Coyne's CFGD.

<http://www.contextfreeart.org/>

------
ejostrom
Benoit Mandelbrot would be very proud. Very proud.

------
pepijndevos
Done before: <http://www.youtube.com/watch?v=mOZqRJzE8xg>

~~~
wtracy
I fail to see any actual recursion going on in your video.

------
rdsoze
a few clicks, drags and I got this !! <http://yfrog.com/z/oe7eoickj>

------
hsshah
Anyone else thought of fractals when watching this? This is a great interface
to manipulate fractal drawings. Great work.

------
nreece
Poster here. Disclaimer: I didn't build this.

------
nextstep
I like this a lot. I wish there were smaller starting shapes, or that you
could draw a starting shape with your cursor.

~~~
jstanley
Watch the demo video. You can resize the shapes by just dragging, it's
actually really intuitive (if only we hadn't been trained that only little
dots at the corner mean you can resize or rotate!).

------
vmyy99
love the simplicity of the interface - would be cool to make an iPad app out
of it..

------
djrconcepts
this is great. in the next version, please include undo with ctrl + z

------
rdsoze
wow .. pretty awesome :) is it possible to download the drawings ?

------
tehwalrus
this. is. awesome. I can't wait for some Schachman projects to end up in my
IDE (imagine manipulating code paths like those fractal trees...) <3

------
stephenhandley
this is awesome. support for deltas on transparency and colors would be really
cool. also snapshot to save and share a picture

~~~
skeletonjelly
Yeah it's so close to being a nice little "toy" to share around. Just needs a
slightly more intuitive UI (deleting isn't immediately obvious) and a share
button and the server will get hammered.

~~~
stephenhandley
word. yeah there's some bugs tho. after making something recurse with some
circles, adding squares really turned it on its head for me. i dug the
glitches tho. fun to watch it render too..the dynamics are pretty nice. got
some screenshots here <http://look.person.sh/tagged/recursivedrawing>

~~~
skeletonjelly
That's some cool art. Should hang those in individual square frames in a
series

------
signa11
would you mind putting a 'line' primitive ? it can lead to all sorts of very
weird (but healthy!) fun. beautiful project!!!

~~~
sp332
Hold the shift key while resizing a rectangle, and you can make your own line
:)

------
conductr
This is quite clever and interesting. props

------
tripzilch
Doesn't work on Opera! :-/

~~~
tripzilch
It does now! Great work!

------
7952
This plus minecraft!

------
terrapinbear
terrible. I should just start drawing immediately.

------
exolab
Pure genius.

------
flotblot
Error: too much recursion

------
bubfranks
there goes my productivity ... bye-bye o/

------
petegrif
Very cool.

------
ktizo
This is the new best thing ever.

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.

~~~
skeletonjelly
Maybe they'll grow overnight!

------
rorrr
It's fun, but needs colors, and maybe some optional randomness.

<http://i.imgur.com/ForAV.png>

~~~
thenonsequitur
Agree with the colors. That would turn your screenshot there into a Jackson
Pollock :). It could also use some more base shapes, I think (triangle, line).

------
benihana
This is awesome. But why isn't the triangle, the most basic polygon, a
primitive? Is there a specific reason for this?

~~~
uniclaude
Well, looking at the source code [1], I think they thought about it. Have you
tried to modify it and run again?

[1]: [https://github.com/electronicwhisper/recursive-
drawing/blob/...](https://github.com/electronicwhisper/recursive-
drawing/blob/gh-pages/src/app.coffee)

------
hackermom
Looks like a plain old IFS fractal wannabe to me.
<http://en.wikipedia.org/wiki/Iterated_function_system>

~~~
eru
The UI is the new and interesting aspect here.

