「毎日Unity」の技術ブログ

開発で役立つ情報を発信する

【Processing入門4】プログラミング(2)

今回もProcessingでのプログラミングについてを記事にしました。

[ プログラムの実行順序について ]

プログラムは基本的に上から下に順番に実行されます。下記のスクリプトを例に挙げると、上から下まで「size()」「background()」「rect()」「ellipse()」の順で実行され、実行結果は下記の画像の様になります。

size(500, 500);
background(0, 255, 0);
rect(200, 200, 200, 200);
ellipse(200, 200, 200, 200);

f:id:EDunity:20200524004651p:plain
ここで下記のスクリプトを見てみましょう。下記のスクリプトは上記のスクリプトと異なり、上から下まで「size()」「background()」「ellipse()」「rect()」の順で実行されます。このような順番になると実行結果は下記の画像の様に変化します。

size(500, 500);
background(0, 255, 0);
ellipse(200, 200, 200, 200);
rect(200, 200, 200, 200);

f:id:EDunity:20200524004714p:plain
つまり何が言いたいのかというと、プログラムは上から下の順で実行されるので出現させる複数の図形に重なる部分がある場合、後に描かれる図形が上にきます。

[ 図形の縁の太さを変更させよう ]

下記のスクリプトを下記の画像のようにエディタ領域に打ち込んで実行ボタンをクリックしてみてください。

//strokeWeight(太さ);
strokeWeight(10);

f:id:EDunity:20200524004812p:plain
無事にプログラムを実行できた場合、下記の画像と同じように楕円と長方形の縁が太くなると思います。上記のスクリプトは以降の線や図形の輪郭の太さを変更させる「strokeWeight()」という関数でした。
f:id:EDunity:20200524004836p:plain

[ 図形の縁の色を変更させよう ]

下記のスクリプトを下記の画像のようにエディタ領域に打ち込んで実行ボタンをクリックしてみてください。

//stroke(赤濃度, 緑濃度, 青濃度);
stroke(0 , 0 , 255);

f:id:EDunity:20200524004919p:plain
無事にプログラムを実行できた場合、下記の画像と同じように楕円と長方形の縁の色が黒から青になると思います。上記のスクリプトは以降の線や図形の縁の色を変更させる「stroke()」という関数でした。ちなみに「noStroke()」という関数を使えば線や図形の縁を透明化することができます。
f:id:EDunity:20200524004939p:plain

[ 図形の内側の色を変更させよう ]

下記のスクリプトを下記の画像のようにエディタ領域に打ち込んで実行ボタンをクリックしてみてください。

//fill(赤濃度, 緑濃度, 青濃度);
fill(0 , 255 , 0);

f:id:EDunity:20200524005104p:plain
無事にプログラムを実行できた場合、下記の画像と同じように楕円と長方形の内側の色が白色から緑色になると思います。上記のスクリプトは以降の線や図形の内側の色を変更させる「fill()」という関数でした。ちなみに「noFill()」という関数を使えば図形の内側の色を透明化することができます。
f:id:EDunity:20200524005124p:plain

[ コンソールに出力させてみよう ]

下記のスクリプトを下記の画像のようにエディタ領域に打ち込んで実行ボタンをクリックしてみてください。

//println(データ);
println("Hello world.");

f:id:EDunity:20200524005222p:plain
無事にプログラムを実行できた場合、下記の画像と同じようにコンソール領域に「Hello world.」と出力されると思います。上記のスクリプトはコンソールにデータを出力させる「println()」という関数でした。文や単語などの文字列をコンソールに出力したい時は、それらを「"」で囲ってください。数字を出力したい場合は「"」は必要ないです。
f:id:EDunity:20200524141722p:plain