Processing.jsは画像、各種データ可視化、動的コンテンツなど描画用に設計されたプログラミング言語であるProcessingのJavaScript移植版である。 Adobe FlashやJavaアプレットを用いることなくウェブブラウザ上で動画、ゲームなどが実装できる。 2-3次元コンテンツをHTMLのcanvas要素（最新バージョンのMozilla Firefox、Opera、Internet Explorer、Safari、Google Chromeなどでサポートしている）にレンダリングするためにJavaScriptを活用している。 2008年にジョン・レシグと大学生達により最初の移植版が公開され、後に12回の再公開、900以上のバグ修正、コミュニティ構築を経て、移植作業が完了した。
積極的な開発が停止されてから2年後の2018年12月に開発を終了した。 構文 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 } 脚注
関連項目 Processing JavaScript HTML5
外部リンク 公式サイト ProcessingによるWeb描画 Studio Sketchpad, Processing.jsのブラウザベースIDE カーンアカデミー内情報科学講座