Processing.js

Processing.js

作者	ジョン・レシグ
初版	2008年 (2008)

最新版	1.4.8 / 2014年3月25日 (10年前) (2014-03-25)
リポジトリ	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
}

脚注

Glassner, Andrew (August 9, 2010), Processing for Visual Artists: How to Create Expressive Images and Interactive Art (1st ed.), A K Peters/CRC Press, pp. 955, ISBN 1-56881-716-9, http://www.crcpress.com/ecommerce_product/product_detail.jsf?isbn=9781568817163
Reas, Casey; Fry, Ben (June 17, 2010), Getting Started with Processing (1st ed.), Make, pp. 208, ISBN 1-4493-7980-X
Noble, Joshua (July 21, 2009), Programming Interactivity: A Designer's Guide to Processing, Arduino, and Openframeworks (1st ed.), O'Reilly Media, pp. 736, ISBN 0-596-15414-3, http://oreilly.com/catalog/9780596154141/
Terzidis, Kostas (May 11, 2009), Algorithms for Visual Design Using the Processing Language (1st ed.), Wiley, pp. 384, ISBN 0-470-37548-5, http://www.wiley.com/WileyCDA/WileyTitle/productCd-0470375485.html
Reas, Casey; Fry, Ben; Maeda, John (September 30, 2007), Processing: A Programming Handbook for Visual Designers and Artists (1st ed.), The MIT Press, pp. 736, ISBN 0-262-18262-9, http://mitpress.mit.edu/catalog/item/default.asp?ttype=2&tid=11251
Fry, Ben (January 11, 2008), Visualizing Data (1st ed.), O'Reilly Media, pp. 382, ISBN 0-596-51455-7, http://oreilly.com/catalog/9780596514556/
Greenberg, Ira (May 28, 2007), Processing: Creative Coding and Computational Art (Foundation) (1st ed.), friends of ED, pp. 840, ISBN 1-59059-617-X, http://friendsofed.com/book.html?isbn=159059617X
Shiffman, Daniel (August 19, 2008), Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction (1st ed.), Morgan Kaufmann, pp. 450, ISBN 0-12-373602-1, http://www.learningprocessing.com/