Processing.js

Processing.js
作者	ジョン・レシグ
初版	2008年
最新版	1.4.8 / 2014年3月25日 (10年前)
リポジトリ	github.com/processing-js/processing-js;
プログラミング; 言語	JavaScript
サイズ	61 KB (gzipped) / 209 KB (production) / 754 KB (development)
サポート状況	Active
種別	Webアプリケーションフレームワーク
ライセンス	MIT
公式サイト	processingjs.org
	テンプレートを表示

Processing.jsは画像、各種データ可視化、動的コンテンツなど描画用に設計されたプログラミング言語であるProcessingのJavaScript移植版である。 Adobe FlashやJavaアプレットを用いることなくウェブブラウザ上で動画、ゲームなどが実装できる。 2-3次元コンテンツをHTMLのcanvas要素（最新バージョンのMozilla Firefox、Opera、Internet Explorer、Safari、Google Chromeなどでサポートしている）にレンダリングするためにJavaScriptを活用している。 2008年にジョン・レシグ氏と大学生達により最初の移植版が公開され、後に12回の再公開、900以上のバグ修正、コミュニティ構築を経て、移植作業が完了した。

構文編集

setup()関数はコンテンツの大きさや画面書換速度などの一般的なプロパティ定義に使用し、 draw()関数は動的処理の制御に使用するなど、基本構文はProcessingとほぼ一致している。ライブラリは、単一のJavaScriptファイルとしてWebページのheadタグ内に含めることができる：

<html>
<head>
  <script type="text/javascript" src="processing.js"></script>
</head>

Bodyタグ内で宣言されるcanvas要素の「data-processing-sources」属性にて、外部ファイルの場所を指定できる。

<body>
  <canvas data-processing-sources="example.pde"></canvas>
</body>

任意の拡張機能が外部ファイルを通じて利用できる。例えば、.pde拡張がProcessingファイルとして実行されている。

/* example.pde */

// The statements in the setup() function 
// execute once when the program begins
void setup() 
{
  size(200, 200);  // Sets the canvas size to 200 by 200 pixels
  stroke(255);     // Set line drawing color to monochrome white
  frameRate(30);   // Set up draw() to be called 30 times per second
}

float y = 100;

// The statements in draw() are executed until the 
// program is stopped. The function is called as many
// times per second as the frameRate. If no explicit
// rate is set, this is 45 times per second.
void draw() 
{ 
  background(0);   // Set the background to monochrome black
  y = y - 1; 
  if (y < 0) { y = height; } 
  line(0, y, width, y);  // draw a horizontal line at height y
}