Processing.js

Processing.js
Processing logo
作者 ジョン・レシグ
初版 2008年 (2008)
最新版
1.4.8 / 2014年3月25日 (10年前) (2014-03-25)
リポジトリ
ウィキデータを編集
プログラミング
言語		 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
}

脚注

[編集]

関連項目

[編集]

外部リンク

[編集]
スタブアイコン

この項目は、ソフトウェアに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。