Processing.js

javascript processing

ProcessingがJavaScriptで実装されました！というネタに飛びついた。

描画はどうしてるんだろう？と思ったら、canvasタグを使ってるんですね−。なるほど。
去年、canvasタグについて知ったときにいろいろ可能性を考えていたはずなのだが、なるほど、Processingという既存の技術を乗せる、というのは思いつかなかったな−。

Processing.jsのテストソースを書き実行できましたので、アップしておきます。はてなはjavascriptとかアップできないので、さくらサーバにアップしました。

このエントリの最後にHTMLソースを載せておきます。このHTML一つを、processing.jsと同じフォルダに入れておけば実行できます。

参考URL

テストソース(HTML)

<!DOCTYPE html>
<html>
<head>

<!-- processing.js -->
<script type="text/javascript" src="processing.js"></script>

<!-- processing.jsのコードを読み込み、実行します -->
<script type="text/javascript">
window.onload = function()
{
  // 描画先は一つ目のcanvasタグ.
  var canvas = document.getElementsByTagName("canvas")[0];
  // コードが書かれているHTMLエレメントをIDで引っ張ります.
  var pCodeElement = document.getElementById('processing-code');
  // Processingのコードを取得します.
  var pCode = pCodeElement.textContent || pCodeElement.innerText;
  // Processing.jsを実行します.
  Processing( canvas, pCode );
};
</script>
</head>

<body>

<!-- Processingのコードを書くエレメント -->
<script id="processing-code" type="application/processing">
// The statements in the setup() function 
// execute once when the program begins
void setup() 
{
  size(200, 200);  // Size should be the first statement
  stroke(255);     // Set line drawing color to white
  frameRate(30);
  noLoop();
}

float y = 100;

// The statements in draw() are executed until the 
// program is stopped. Each statement is executed in 
// sequence and after the last line is read, the first 
// line is executed again.
void draw() 
{ 
  background(0);   // Set the background to black
  y = y - 1; 
  if (y < 0) { y = height; } 
  line(0, y, width, y);  
}
</script>

<p>
Processing.jsテスト
</p>
<div>
<!-- Processingの描画先 -->
<canvas width="200" height="200"></canvas>
</div>

<p>
<a href="http://dev.jquery.com/~john/processing.js/">Processing.js</a><br>
<a href="http://dev.jquery.com/~john/processing.js/examples/basic/noloop.html">NoLoopデモ</a>
</p>


</body>
</html>