Mozilla Demo Studio

  • デモを投稿

Zen photon garden

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

利用技術: JavaScript, HTML5, Canvas, Fonts & Type, Web Workers,

  • 閲覧数 10670
  • コメント数 0

このデモについての作者の詳細コメント

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

このデモは BSD ライセンスの下で公開されています。