Processingとは?

Processingとは電子アートとビジュアルデザインのためのプログラミング言語です。

[caption id=“attachment_1642” align=“alignnone” width=“300”]Marius Watz: Abstract01js Marius Watz: Abstract01js[/caption]

実際、こんなのとか、 こんなのが書いたりできるプログラミング言語です。

Processingを使うには専用の開発環境をダウンロードする必要があるのですが、Processing.jsを使えばJavascriptで記述して、ブラウザで確認できるようになります。

Processing.jsを使うための準備

1.まず下記のサイトからProcessing.jsをダウンロードします。

Processing.js - http://processingjs.org/

2.pdeという拡張子のファイルを用意します。 2.HTMLにcanvasタグを用意します。 3.こんな風に書きます。 ~~~ html

<!doctype html> Document ~~~ pdeというファイルにprocessingのコードを記述していきます。

Processing.jsの書き方

試しにHello worldを記述してみます。

pdeファイルに以下のコード記述してブラウザで確認します。 ~~~ html

void setup() { size(200, 200); //描画する画面のサイズ background(100); //背景の色 stroke(255); //描画する形の線の色      fill(255)//描画する形の中の色 rect(50, 50, 100, 100); //四角形を描く(xの始点,yの始点,xの長さ,yの長さ); println(“hello world!”);//コンソールにhello world!と書く } ~~~

これを実行すると白い四角形と、hello worldの文字が出ます。 *chromeでローカル環境で閲覧する場合はエラーが出て表示されません。 ローカルでみる場合は他のブラウザを使用してください。

もうちょっと動いたものを書いてみたい場合はこんな感じに


void setup() {
    size(200, 200);
    background(100);
    noStroke;
     fill(255)//描画する形の中の色
}

void draw(){

}