Processing.js

この項目「Processing.js」は途中まで翻訳されたものです。(原文:en:Processing.js)
翻訳作業に協力して下さる方を求めています。ノートページや履歴、翻訳のガイドラインも参照してください。要約欄への翻訳情報の記入 をお忘れなく。(2013年10月)

Processing.js
Processing logo
作者	ジョン・レシグ
初版	2008年 (2008)

最新版	v1.6.6 / 2017年5月6日 (8年前) (2017年05月06日)
リポジトリ	github.com/processing-js/processing-js ウィキデータを編集
プログラミング言語	JavaScript
サイズ	61 KB (gzipped) / 209 KB (production) / 754 KB (development)
サポート状況	開発終了
種別	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以上のバグ修正、コミュニティ構築を経て、移植作業が完了した。

積極的な開発が停止されてから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
voidsetup()
{
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
}
floaty=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.
voiddraw()
{
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
}