Processing.js
これはハンパねえ。
ProcessingをJavascriptに移植したものらしい。Processingというのもよく知らんのだけど、イメージやらアニメーションを簡単に使えるようにしたプログラミング言語。で、それをJavascript上で実現したというのがProcessing.js。
まあ、デモ見てください。
下にもサンプルからのコピペ。WordPressうざいのでiframeで。
ソース：
<html
<head>
<script type="text/javascript" src="http://red-treasure.com/js/processing.js"></script>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("canvas");
Processing( canvas, canvas.previousSibling.textContent );
};
</script>
</head>
<body>
<script type="application/processing">
// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];
void setup()
{
size(200, 200);
smooth();
noStroke();
fill(255, 153);
}
void draw()
{
background(51);
// Reads throught the entire array
// and shifts the values to the left
for(int i=1; i<num; i++) {
mx[i-1] = mx[i];
my[i-1] = my[i];
}
// Add the new values to the end of the array
mx[num-1] = mouseX;
my[num-1] = mouseY;
for(int i=0; i<num; i++) {
ellipse(mx[i], my[i], i/2, i/2);
}
}
</script><canvas height="200" width="200" id="canvas" name="canvas" />
</body>
</html>
もちろんどんなブラウザで動くと言うわけではなく、むしろFirefox3をターゲットにしてるようですが、IE以外ならまあ動くんじゃないでしょうか。IEでなぜだめかってcanvas使ってるから。
あと、すごい重いらしい。
まだまだベータって感じですが、Processingの2D関連のAPIはすでにほとんど移植済みっぽい。
いろいろデモもあるし、これから発展するんじゃないかなあ。
適当な抜粋デモへのリンク：
http://ejohn.org/apps/processing.js/examples/basic/storinginput.html
http://ejohn.org/apps/processing.js/examples/topics/reflection1.html
http://ejohn.org/apps/processing.js/examples/custom/molten.html
以上
