50 ms·
Recursive Drawing
- deleted 14y ago[deleted]
- jstanley 14y agoThis is unbelievably cool. The demo video is worth watching, for anyone who doesn't get it.
- nextstep 14y agoI like this a lot. I wish there were smaller starting shapes, or that you could draw a starting shape with your cursor.
- jstanley 14y agoWatch 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!).
- pacaro 14y agoThis is non-responsive for me at the moment, how does this compare to http://www.contextfreeart.org/ 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?
- jstanley 14y agoIt is extremely awesome. Demo video is at http://vimeo.com/41822151 http://vimeo.com/41822151
- apgwoz 14y agoI 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.
- lambdapilgrim 14y agoAbsolutely the best thing I have seen in a long time! Great tool to illustrate recursion to anyone and also to surprise yourself.
- eck 14y agoOld 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.)
- biot 14y agoOr even better: http://tog.acm.org/resources/RTNews/html/rtnv6n2.html#art11 http://tog.acm.org/resources/RTNews/html/rtnv6n2.html#art11 Copy the postscript into a file and upload to: http://www.ps2pdf.com/convert.htm http://www.ps2pdf.com/convert.htm
- kika 14y agoPS is basically Forth
- kjhughes 14y agoFair casual observation. More here on the relationship between Forth and Postscript: http://c2.com/cgi/wiki?ForthPostscriptRelationship http://c2.com/cgi/wiki?ForthPostscriptRelationship
- RodgerTheGreat 14y agoIt's not even really that archaic- concatenative languages just never hit mainstream among programmers. PostScript has built-in datatypes for dictionaries and lists, first-class procedures, closure-like mechanisms, clean, uniform syntax... refreshingly modern for something designed in 1982. I wrote a Forth compiler and VM in PostScript a while back: https://github.com/JohnEarnest/Four.Ps/blob/master/four.ps https://github.com/JohnEarnest/Four.Ps/blob/master/four.ps
- DivisibleByZero 14y agoCan't seem to figure out how to draw Sierpinski's triangle. The hello world of fractals.
- throwaway15289 14y agoDraw a triangle and put 4 shrunk copies of itself in the triangle (center one flipped)? http://imgur.com/m0Okt 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 http://imgur.com/MVmPh
- bryogenic 14y agoOr you can do the inverse http://i.imgur.com/tMbrj.png http://i.imgur.com/tMbrj.png
- ktizo 14y agoThis 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 14y agoMaybe they'll grow overnight!
- prezjordan 14y agoI can't even imagine how you managed to develop this. Seriously awesome.
- roryokane 14y agoTextual 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&biw=1280&bih=1252 https://www.google.com/search?q=fractal+tree&tbm=isch...), Koch snowflake (http://en.wikipedia.org/wiki/Koch_snowflake http://en.wikipedia.org/wiki/Koch_snowflake), Sierpinski triangle (http://en.wikipedia.org/wiki/Sierpinski_triangle http://en.wikipedia.org/wiki/Sierpinski_triangle), Sierpinski carpet (http://en.wikipedia.org/wiki/Sierpinski_carpet http://en.wikipedia.org/wiki/Sierpinski_carpet), or any other fractal (http://en.wikipedia.org/wiki/List_of_fractals http://en.wikipedia.org/wiki/List_of_fractals).
- Kopion 14y agoDoes anybody have any insights into how this was developed? Does the author care to chime in?
- guelo 14y agoctrl-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 http://recursivedrawing.com/compiled/app.js
- notJim 14y agoIt'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/gh-pages/src https://github.com/electronicwhisper/recursive-drawing/tree/....
- mrmaddog 14y agoThis 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 http://cl.ly/251m2k0z1Z0z142r3S42
- megamark16 14y agoRight clicking on a shape brings up a Delete Shape option.
- jacktoole1 14y agoRight click on the shape, and you can choose to delete it.
- rdsoze 14y agowow .. pretty awesome :) is it possible to download the drawings ?
- jedahan 14y agoDo 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-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 http://itp.nyu.edu/thesis/spring2012_archives/thesis-Heching... More angles and other great videos available at http://itp.nyu.edu/shows/thesis2012/archives/ http://itp.nyu.edu/shows/thesis2012/archives/
- tehwalrus 14y ago...this is by Toby Schachman (you knew that right?) just check out the github author http://github.com/electronicwhisper http://github.com/electronicwhisper
- jedahan 14y agoI 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.
- terrapinbear 14y agoNo
- Trufa 14y agoPlease only make comments that add to the conversation / discussion of the post. Thanks.
- conductr 14y agoThis is quite clever and interesting. props
- stephenhandley 14y agothis is awesome. support for deltas on transparency and colors would be really cool. also snapshot to save and share a picture
- skeletonjelly 14y agoYeah 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 14y agoword. 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 http://look.person.sh/tagged/recursivedrawing
- skeletonjelly 14y agoThat's some cool art. Should hang those in individual square frames in a series
- rdsoze 14y agoa few clicks, drags and I got this !! http://yfrog.com/z/oe7eoickj http://yfrog.com/z/oe7eoickj
- nreece 14y agoPoster here. Disclaimer: I didn't build this.
- ynniv 14y agoIt 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 14y agoUnder System Preferences -> Trackpad -> More Gestures set the swipe gesture to 3 fingers only
- RKearney 14y agoThen you don't get the nice page sliding animation when swiping to go forward/back in Safari.
- middus 14y ago"nice page sliding animation" vs "[losing] all of your data" does not sound like a difficult decision to me.
- lloeki 14y agoContrary 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.
- flotblot 14y agoError: too much recursion
- signa11 14y agowould you mind putting a 'line' primitive ? it can lead to all sorts of very weird (but healthy!) fun. beautiful project!!!
- sp332 14y agoHold the shift key while resizing a rectangle, and you can make your own line :)
- benihana 14y agoThis is awesome. But why isn't the triangle, the most basic polygon, a primitive? Is there a specific reason for this?
- uniclaude 14y agoWell, 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/gh-pages/src/app.coffee https://github.com/electronicwhisper/recursive-drawing/blob/...
- spatten 14y agoThat'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.
- bubfranks 14y agothere goes my productivity ... bye-bye o/
- ejostrom 14y agoBenoit Mandelbrot would be very proud. Very proud.
- deleted 14y ago[deleted]
- vmyy99 14y agolove the simplicity of the interface - would be cool to make an iPad app out of it..
- djrconcepts 14y agothis is great. in the next version, please include undo with ctrl + z
- ok_craig 14y agoThis seems basically like a web-based version of Chris Coyne's CFGD. http://www.contextfreeart.org/ http://www.contextfreeart.org/
- tlrobinson 14y agoVery cool. It's a bit reminiscent of Bret Victor's concepts: http://vimeo.com/36579366 http://vimeo.com/36579366
- hsshah 14y agoAnyone else thought of fractals when watching this? This is a great interface to manipulate fractal drawings. Great work.
- msg 14y agoThis 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.
- rorrr 14y agoIt's fun, but needs colors, and maybe some optional randomness. http://i.imgur.com/ForAV.png http://i.imgur.com/ForAV.png
- thenonsequitur 14y agoAgree 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).
- petegrif 14y agoVery cool.
- daralthus 14y agoGreat! Looks similar to some scripts in scriptographer (a js scripting layer for illustrator) and paper.js http://scriptographer.org/ http://scriptographer.org/
- hackermom 14y agoLooks like a plain old IFS fractal wannabe to me. http://en.wikipedia.org/wiki/Iterated_function_system http://en.wikipedia.org/wiki/Iterated_function_system
- eru 14y agoThe UI is the new and interesting aspect here.
- exolab 14y agoPure genius.
- tehwalrus 14y agothis. 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
- gegenschall 14y agoThis 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. :-/
- zupa 14y agoI 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!
- tripzilch 14y agoDoesn't work on Opera! :-/
- tripzilch 14y agoIt does now! Great work!
- terrapinbear 14y agoterrible. I should just start drawing immediately.
- pepijndevos 14y agoDone before: http://www.youtube.com/watch?v=mOZqRJzE8xg http://www.youtube.com/watch?v=mOZqRJzE8xg
- wtracy 14y agoI fail to see any actual recursion going on in your video.
- 7952 14y agoThis plus minecraft!
- rijoja 14y agoIt 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/combo.jpeg http://eruditenow.com/recursive/spiders.jpeg http://eruditenow.com/recursive/spiders.jpeg http://eruditenow.com/recursive/bollaraweseome.jpeg http://eruditenow.com/recursive/bollaraweseome.jpeg
- rpwverheij 14y agoCan't stop! So much fun! http://imgur.com/a/GNvbZ#0 http://imgur.com/a/GNvbZ#0
- Trufa 14y agoThose are really beautiful. I'm really impressed with this concept!
- roryokane 14y agoSome of my drawings: album link: http://imgur.com/a/Hk7lw http://imgur.com/a/Hk7lw "chain pincer" - http://i.imgur.com/SiCHM.png http://i.imgur.com/SiCHM.png "chain device" - http://i.imgur.com/kFZPR.png http://i.imgur.com/kFZPR.png "starry squares" - http://i.imgur.com/2TGcT.png http://i.imgur.com/2TGcT.png "analyzed alien" - http://i.imgur.com/bGSU6.png http://i.imgur.com/bGSU6.png