Home > Javascript > Javascriptのすごいライブラリみつけた  Processing.js

Javascriptのすごいライブラリみつけた  Processing.js

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

以上

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://red-treasure.com/report/wp-trackback.php?p=209
Listed below are links to weblogs that reference
Javascriptのすごいライブラリみつけた  Processing.js from コスミー報告書[社外秘]

Home > Javascript > Javascriptのすごいライブラリみつけた  Processing.js

Search
Feeds
Meta
 合計:011636
 今日:0107 昨日:0165

Return to page top