Enlightenment

July 4, 2013 2:54 PM

Zen photon garden is a 2D ray tracer in your browser. A blog post gives examples of what's possible and explains some of the unique details of its implementation.
posted by Rhomboid (14 comments total)

That's really quite lovely.
posted by Stonestock Relentless at 3:42 PM on July 4, 2013

Ooo nice find. This is really cool!
posted by meta87 at 4:04 PM on July 4, 2013

This is really nice. I'd love to see some animations using similar techniques.

The author's blog is also well, well worth a read, because holy shit is she doing all sorts of interesting things.

Actually - animated version here.
posted by Jon Mitchell at 4:04 PM on July 4, 2013

Just screwing around with it.
posted by klangklangston at 4:53 PM on July 4, 2013

Why is this not a thing I've ever thought of or seen before? Mindblowing.
posted by Jimbob at 4:59 PM on July 4, 2013

klangklangston's link doesn't load for me, so I won't post mine, but I did my name and was quite happy with the results. Neat stuff.
posted by cjorgensen at 5:21 PM on July 4, 2013

What I find most interesting is the variety of textures and effects you can achieve by modulating the material properties. Here's a doodle that I was working on that doesn't use a single reflecting surface, just a bunch of tiny radial dots of varying opacity. Watching that one render is almost better than the final product. And here's another one I was working on that used a lot of hard reflection to emphasize the overlapping plaid-like patterns.

If you haven't figure it out, the three material property sliders (Diffuse, Reflective, Transmissive) apply to the next line segment that you place, and each segment has its own properties. Set all three to zero and you get something that's completely opaque. Set it to 100% reflective and zero of the other two, and you get a perfect mirror. Set it to 50% reflective and 50% transmissive and you get a nice half-mirror. Increase the diffusivity if you want to give a segment a visible glow or if you want some random spill rather than hard perfect reflection.
posted by Rhomboid at 5:48 PM on July 4, 2013 [2 favorites]

The more I play with this the better it gets.
posted by quazichimp at 6:55 PM on July 4, 2013

This thing is like a desktop background creation device for me.

Here's my doodle from before I saw the Diffuse/Reflective/Transmissive sliders. I guess the first one always looks like a skyscraper-choked sky.
posted by fleacircus at 8:59 PM on July 4, 2013 [2 favorites]

Here's my doodle from before I saw the Diffuse/Reflective/Transmissive sliders. I guess the first one always looks like a skyscraper-choked sky.

I was thinking midtown Manhattan with a power blackout on a full moon
posted by kanemano at 10:21 PM on July 4, 2013

Apparently you can use Shift-click to relocate the point source. Here's my resulting attempt at a collimated beam. It's kinda fun to stick reflectors at random places in the beam and see what happens. (But I guess you could say that about any of these doodles.)
posted by Rhomboid at 11:23 PM on July 4, 2013

Hmm. Maybe trying again (shifted the light source): here. But it's got a lot of lines in it, so that may be blowing the HTML parser (like, seriously, 20 lines of the comment box).
posted by klangklangston at 12:49 AM on July 5, 2013

I just put 'em on imgur here and here.
posted by klangklangston at 12:52 AM on July 5, 2013 [2 favorites]

This is super cool. Those animated versions are amazing, but she calls it "batch mode" so I imagine it's not interactive render times. Too bad, I'd love to have multiple light sources with colors in the toy.

Here's source code on GitHub. "built for modern web browsers with a fast JavaScript engine, Web Workers, Typed Arrays, and Canvas". The author is Micah Elizabeth Scott. LinkedIn says she works at Sifteo, this funky little toy / computer thing that deserves its own Metafilter post.
posted by Nelson at 7:48 AM on July 5, 2013