Language: English or Japanese

Description

次の画像はwww.Proce55ing.net上にあるものである。関連事項はReferenceから Environmentを押して参照してもらいたい。.



「なんて単純なインターフェイスなんだろう、これが本当にFlashやDirectorのような 優れた機能を持つのか」と画面を見た瞬間思うかもしれない。 DirectorやFlashには多くの入力や共用の編集機能が付属している。 Processingではこれらの機能は既に他のプログラムやJAVAにより作成されている。 例として、Flashは簡易Illustratorを、またDirectorは簡易Photoshopをそれぞれ提供している。 Processingにおいては(JAVAにおいても同様)ユーザは自らベクターパスのリストやgifファイルを作成し、 それらのデータをプログラムにより描画する。ユーザはプログラムを用いるこによりもっと直接的に スクリーン上のピクセルを自らのつくり出した構文や形式によって制御することが出来る。 また、各ユーザが独自に作成した構文や形式の提供があればProcessingは更に利用しやすいシステムとなるだろう。

次にインターフェイス左部の6つのボタンについて説明する。

FlashMXを使用したことのある者にとっては復習になるが、下記の例はskeches内にあるstructure00である。

またJAVAの変数については次に示す。

Flashユーザへ：Processingには変数(var)という概念が無い。
変数についての詳細情報は公式のJAVAチュートリアルを参照うること。

if-then文について。

条件分岐における比較部分の記述方法がLingoと若干異なる。Processingのプログラムは一つの''=''を変数の値を代入する際に使用する。 また、二つの''==''を双方の値を比較して同じ値か否かを調べる際に使用する。このとき同じ値ではないという記号は ''''ではなく''!=''と記載されることに注意してほしい。その他の比較記号('''',''='')の使用方法 はLingoと同様である。比較条件に関する詳細情報は consult the authorityを参照すること。

繰り返し文について。

Lingoユーザへ：このプログラムは''repeat with i = 0 to 4''と同じ意味を持つ。 ()の中身は三つの特別な構文がセミコロンで分けられて並んでいる。一つ目の構文は一時的な変数を作成。 二つ目の構文は何度繰り返し処理を行うかの状態を定める。変数iが５を超えた大きな数値となった後に繰り返し処理が終了する。三つ目の構文はiの変化量を定めることができる。''i++''は''i = i + 1''の省略した形である。 JAVAを提供するSunならば 繰り返し文に関するさらに多くの知識を与えてくれる。

While文はif-then分と似ている。

If you are この現象について興味のある者はJAVAチュートリアル内に記述されている the part about flow-controlについてを参照するとよい。

次に基本的な関数についての話を述べる前に、描画関数について触れておく。 全てに目を通す必要はないが、描画機能を使いこなすためには必要なものである。

命令文に関する他のプログラム言語との言語比較 並びにProcessingプログラムコード例の詳細に関しては各リンク先を参照すること。

size(200,100); background(0,0,0); stroke(255,0,0); point(50,50); stroke(0,255,0); point(100,50); stroke(0,0,255); point(150,50);

このコードを実行すれば次のような黒く横に長いスクリーンに三つの色付きピクセル(赤、青、緑)が出力されるはずである。

次にこのコードを行ごとにわけて解説していく。

基礎知識として、スクリーンはそれぞれの位置情報を持つピクセルと言う集合からできている。 その原点は長方形の左上を(0,0)とする。Y方向に値を増やせば下方向に、X方向に値を増やせば右方向に動く。これはボードゲームのBattleShipと良く似ている。 また、FlashやDirectorも同様である。

size(200,100);

size関数は画面上のキャンバスの大きさを設定する。この場合は縦200ピクセル、横100ピクセルのキャンバスが出来上がる。 この関数をはじめにコールしない場合、デフォルト値としてサイズは100x100ピクセルとなる。

background(0,0,0);

background関数はキャンバス全体の色を決定する。 Directorではステージカラー、Flashではドキュメントの背景を指す。 また、0,0,0は黒色を表す。背景を決定しなかった場合デフォルトは灰色となる。

stroke(255,0,0);

stroke関数は描く色を決定する際に用いる。 この関数の後に続く描画コマンドは先にstroke関数で示された色で描画する。 描画色を指示しない場合黒色がデフォルトとなる。

point(50,50);

point関数はその与えられたアドレス(50,50)に前行のstrokeで設定された色(この場合は赤色)のピクセルを描く。

stroke(0,255,0);
point(100,50);

このコードはキャンバスの中心に緑色の点を描く。

stroke(0,0,255);
point(150,50);

このコードはキャンバスの右方に青色の点を描く。


以上の解説より、使用されている命令コードはLingoのdraw関数や、 FlashActionScriptの描画関数にとても似ている。 ユーザはこれらの描画命令を理解して、目の前に表示されているスクリーンをデジタルキャンバスとして作品を創作することが可能となる。 更に複雑な形の描画方法をいかに示す。

次に組み立て式の形を紹介する。

triangle関数 は三つの頂点を持つ図形を描く。これには六つのパラメータがあり、 パラメータ1,2は一番目の頂点のx-y座標、パラメータ3,4は二番目の頂点のx-y座標、 パラメータ5,6は三番目の頂点のx-y座標を示す。

triangle(x1, y1, x2, y2, x3, y3);

quad関数 will は四つの頂点を持つ図形を描く。これには八つのパラメータが存在し、その記述方法は 四番目頂点の頂点のx-y座標を示すパラメータ7,8が追加される以外はtriangle関数の場合と同じである。

quad(x1, y1, x2, y2, x3, y3, x4, y4);

rect関数 は長方形を描く関数である。パラメータ1,2は長方形を描く開始位置を決定し、 パラメータ3,4で高さと幅を決定する。

rect(x, y, width, height);

ellipse関数は楕円を描く関数である。パラメータの設定方法はrect関数の場合と同じである。

ellipse(x, y, width, height);

ここから新しい命令を紹介する。新たに表記されているものは橙色で記載されている。

(注意：色の設定法は前述までのRGB法では無くHTMLの表記方法で行うこともできる)

Fill関数はstroke関数と同じような意味を持ち、図形の中を塗りつぶす。 図形を囲む線については先に学んだstroke関数を用いて設定する。 またfill関数のデフォルトは白色と設定されている。

noFill関数を使用すれば図形の中を塗りつぶさない線分のみのアウトライン図形を描くことが出来る。 また、これと同様にstrokeにもnoStroke関数が存在する。noStroke関数は図形のアウトラインを無くした状態の図形を描画できる。

曲線を描くには、直線よりも少し複雑になる。Processingではcurve関数とbezier関数を提供している。

curve(x1, y1, x2, y2, x3, y3, x4, y4);
bezier(x1, y1, x2, y2, x3, y3, x4, y4);

curve関数 のパラメータ1,2は線の始点を表し、パラメータ7,8は線の終点を表す。 間に挟まれた各パラメータの対はカーブを定義する際に通過する点を表す。

bezier関数のパラメータ1,2,3,4は curve関数のそれらと同じものを示す。また、間に挟まれたパラメータの対は曲線を定義する際に 必要な制御点を表す。

上記の例において表示されている図形のオレンジ色の線分は隠れた制御点を現している。

以上のように予め定義された基本的な図形描画関数は存在するが、ユーザは自らの好きな形を 構築することも可能である。

beginShape関数とendShape関数、 これらの関数は複雑な形状の図形を描画する際に鍵となる。 beginShape関数は図形の頂点を記録を順次行う。一方、endShape関数はその記録を終了する。 beginShape関数には記録していく頂点の値を使用してどのような図形を描くかのパラメータを 引数として設定する必要がある。 このときに記すパラメータはLINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, QUADS, QUADS_STRIP, そしてPOLYGONのいずれか一つである。 beginShape関数の後にはvertex関数を並べる必要がある。図を描くのを終了するときはendShape関数を 入れる。 vertex関数はパラメータの数により２Dまたは３Dの頂点を定めることが出来る。 ２Dの頂点座標を設定する際はx-yの座標値を、一方３Dの頂点座標を 設定する際はx-y-zの座標値を 定義する。各図形は予めstroke関数で定義されていた色でアウトラインが縁取られ、fill関数で塗りつぶされる。

また、Processingの取り扱いについて以下の注意が必要である:

凸面多角形の作品例またそれらのプログラムはサイト内に展示してあるものを見てもらいたい。

以下にProce55ing.net上に展示されている作品を作成例として紹介する。

int x = 0;

void setup( ){
noStroke( );
}

void loop( ){
rect(x, 0, 5, 100);
x=x+1;
}

void loop( ){
print(month( )+"/");
print(day( )+"/");
print(year( )+" ");
print(hour( )+":");
print(minute( )+":");
println(second( ));
}

void loop( ) {
rect(mouseX-5, mouseY-5, 10, 10);
}

void mousePressed( ) {
fill(0);
}
void mouseReleased( ) {
fill(255);
}

void loop( ) {
if(keyPressed) {
fill(102, 0, 0);
} else {
fill(204, 102, 0);
}
rect(30, 20, 55, 55);
}

int x = 50;
int y = 50;

void loop( ){
rect(x,y,10,10);
}

void keyPressed( ){
if(key=='w'||key=='W'){
y--;
}else if(key=='s'||key=='S'){
y++;
}else if(key=='a'||key=='A'){
x--;
}else if(key=='d'||key=='D'){
x++;
}
}

このサンプルでは指定されたキーを押すと画面上の正方形が移動する。

FlashとDirectorにおいてはキーコントロールとメニューバーよりディスプレイ全体を使用してプログラムを 実行させることが出来る。フルスクリーンモードは調整時や発表時にとても有効である。 ProcessingでもメニューのskechからPresentを選択するか、Ctrl + P(apple + p on Mac)を押すことによりフルスクリーンモードにすることが出来る。 (+P on a Mac)更に試してもらいたいことがある。SHIFTキーを押しながらplayボタンを押してもらいたい。 スクリーン全体が濃いグレーに変わり、中央に描き出したものが表示される。 元の状態に戻す際はescキーか画面左下のstopボタンを押して終了となる。

size(150,150);
BImage b = loadImage("twombly.jpg");
image(b,0,0,150,150);

translate(58, 48, 0);
rotateY(0.5);
box(40);

int width = 100;
int height = 100;
BImage b; // declare variable "b" of type BImage
b = loadImage("basel.gif");

image(b, 0, 0);
for (int i=30; i for(int j=20; j color here = getPixel(30, j);
setPixel(i, j, here);
}
}

size(200,100);
hint(SMOOTH_IMAGES);
background(#FFFFFF);
fill(#000000);
BFont f = loadFont("Bodoni-Italic.vlw.gz");
setFont(f, 50);
text("handglove", 14, 60);

size(200,100);
hint(SMOOTH_IMAGES);
noStroke( );
BFont f = loadFont("Univers66.vlw.gz");
setFont(f, 50);
fill(#FFFFFF);
ellipse(-50,-55,150,150);
fill(#CC6600);
for(int i=0;i rotateZ(0.2);
text("dizzy", 90,0);
}

sub main()
delay 0.5
do
debug.print cStr(getADC(13))
delay 0.1
loop
end sub

String buff = "";
int val = 0;

void setup() {
beginSerial(19200);
}

void loop() {
background(val,val,val);
}

void serialEvent() {
if(serial!=10){
buff += (char)serial;
}else{
buff = buff.substring(0,buff.length()-1);
val = Integer.parseInt(buff)/4;
buff = "";
}
}