Mozilla Demo Studio

  • 送出一個 Demo

Zen photon garden

A real-time interactive raytracer art-toy for sculpting with light.

建立方法 JavaScript, HTML5, Canvas, 字形與類型, Web Workers,

  • 10488 個檢視數
  • 0 條回應

作者所寫的更多關於此 Demo 的資訊

In the course of designing a triangular pixel grid prototype for a larger project, I found myself building a little raytracing toy in Processing. I wanted to optimize the shape of my reflectors in order to get the smoothest and most uniform LED light. Before I could even use this tool for its intended purpose, I got distracted with using it to create art. Then I got distracted with making it run in web browsers, so anyone could use it to create art.

There are plenty of other JavaScript raytracers out there. It makes a great tech demo; an impressive way to show that web browsers can be a serious platform for even the most CPU-intensive applications. And, no doubt, zenphoton needed to invoke some very modern web technologies to run as fast as it does.

But I didn’t write it as a tech demo, I wrote it to try out an interaction model: sculpting with light.

Watch the video to see how a uniform circle of light can be sculpted into a unique shape. For more details about how the raytracer works, see the blog post:

http://scanlime.org/2013/04/zen-photon-garden/

Zen photon garden uses several great new HTML5 features. Currently Firefox nightly builds are the only browser to support every single one!

- Web Workers, for rendering on multiple CPU cores.
- Canvas, for drawing the results.
- Typed Arrays, for efficiently operating on large blocks of data.
- asm.js when available, for compiling a subset of JavaScript to fast native code.

還沒有回應

註冊登入 以新增您的回應。

取得原始碼

下載原始碼 171.79 KB · ZIP 格式

Browse the Source

此 demo 係以 BSD 條款進行授權。