Processing tutorial 3

Processingチュートリアル第３回。
今回も前回に引き続き基本的な関数や命令を説明する。
ちなみに、動くものを作るのはもう少し先だ。

まずはいつものようにProcessingを起動しよう。

まずは、（前回紹介するべきだったかもしれないけど、）四角形を描く関数を説明する。
この関数はこれから動きを付けるときにとてもよく使うことになるから絶対に忘れてはいけない。
それではこういう風に打ってみよう。

size(400,400);
rect(100,20,150,300);

四角形が出てきたと思う。rect関数の文法は

rect(左上のx座標, 左上のy座標, 横の長さ, 縦の長さ);

だ。
もう一つ、rectMode();という命令を。
rectMode();の括弧の中身を変えることでrectの使い方が変わる。
３種類ある。具体例とともに見てみよう。

size(400,400);
rectMode(CORNER);
rect(100,20,150,300);

size(400,400);
rectMode(CENTER);
rect(100,20,150,300);

size(400,400);
rectMode(CORNERS);
rect(100,20,150,300);

CORNER・・・デフォルトの値。rectの文法は

rect(左上のx座標, 左上のy座標, 横の長さ, 縦の長さ);

CENTER・・・一番直感的かな。rectの文法は

rect(中心のx座標, 中心のy座標, 横の長さ, 縦の長さ);

CORNERS・・・rectの文法は

rect(左上のx座標, 左上のy座標, 右下のx座標, 右下のy座標);

これでrectの説明は終わり。

ellipse();にも同様にellipseMode();というのがある。それは自分で調べてほしい。

では、色の説明をしよう。
Processingで色を数値で表現する方法には、グレースケール, RGB, HSB, アルファチャンネルの４つがある。
RGB, HSBというものの説明をしよう。
RGBというのはお馴染みのRed, Green, Blueの光の三原色で色を指定する方法だ。
HSBにはあまり馴染みが無いかもしれないが、Hue（色相）, Saturation（彩度）, Brightness（輝度）の３つの成分で指定する方法だ。
色にもModeがある。colorMode();という命令を使う。

colorMode(RGB);

・・・以降のカラーモードをRGB指定にする。デフォルトではこれだ。

colorMode(HSB);

・・・以降のカラーモードをHSB指定にする。

colorMode( カラーモード(RGB/HSB), 色指定の範囲 );

colorMode( カラーモード(RGB/HSB), RまたはHの範囲, GまたはSの範囲, Bの範囲 );

・・・カラーモードと指定する色の範囲を指定する。

色範囲というのは上限値のことだ。
たとえば、

colorMode(HSB,100);

とするとカラーモードはHSB, 0から99の間で指定するということになる。

また、上記以外にも、16進数で表されたカラーコードで色を指定する方法もある。

で、実際色を使うのは主に

background();

fill();

stroke();

の３つだ。
background();は背景色を指定するためのもの。
fill();は図形を塗りつぶすためのもの。
stroke();は直線や輪郭などの線を塗るためのもの。
ちなみに、

noFill();

とすると以降の図形の背景は透ける。

noStroke();

とすると以降の線や輪郭は引かれない。
いずれもグレースケールで指定する場合は、

size(400,400);
background(30);
fill(150);
ellipse(width/2,height/2,300,300);

のように一つの値だけを入れる。

普通の色は次のように普通にやればいい。

size(400,400);
colorMode(HSB,100);
background(10,99,99);
fill(90,99,99);
ellipse(width/2,height/2,300,300);

こういう風に。
では、透明な色はどうするのか。
方法は簡単。色指定をしたあとに数値を付け足すだけだ。

size(400,400);
colorMode(HSB,100);
smooth();
background(10);
stroke(50,99,99,30);
strokeWeight(9);
fill(0,99,99);
ellipse(150,200,200,200);
fill(60,99,99,20);
ellipse(250,200,200,200);

重なり合った部分が透けているのが分かると思う。
注）背景色(background)には透明度は設定できない。

ちなみに

strokeWeight(数値);

で線の太さを指定する。

smooth();

を入れると以降滑らかになる。
逆に、以降滑らかにしないときは

noSmooth();

とする。