Processing ではじめるプログラミング ９日目（色を変えてみる）

今日は、processingで色の変え方を勉強しましょう。

前回の復習です。画面サイズ300,300の中心に直径が100の円を描いてみましょう。

size(300,300);
ellipse(150,150,100,100);

かけましたか?　外の線を消してみます。noStroke()と入れると線が無くなります。

size(300,300);
noStroke();
ellipse(150,150,100,100);

次に円の色を変えてみます。fill(R,G,B)で色を変えることができます。

size(300,300);
noStroke();
fill(255,0,0);
ellipse(150,150,100,100);

RGBとは？

RGB（またはRGBカラーモデル）とは、色の表現法の一種で、赤 (Red)、緑 (Green)、青 (Blue) の三つの原色を混ぜて幅広い色を再現する加法混合の一種である。RGBは三原色の頭文字である

つまり、真っ赤にしたければRの値を最高値である255してその他を0にします。

プログラムは上から順番に読み込まれますので、線や図形を描く前に色の指定をしなければなりません。

size(300,300);
noStroke();
ellipse(150,150,100,100);
fill(255,0,0);
ellipse(250,250,100,100);

中央にある円はfillで色を変える前に描かれているので、白色のままです。

背景を変えるには、background(R,G,B);を使います。

size(300,200);
noStroke();
background(255,255,255);
fill(255,0,0);
ellipse(150,100,100,100);

上のプログラムはすべての値を最大にして白色にしています。背景が白色になっていることを確認できると思います。

ここからはクイズ形式にします。

問題1 バングラディシュの国旗を作ってください。

ヒント：緑は R 0, G 111, B 80でつくることができます。

問題2 ペルーの国旗を作ってください

長方形はrect(左上のx座標,左上のy座標,幅,高さ);で作れます。白色は R 255, G 255, B 255　赤色は R 230, G 0, B 0　でできます。

問題3 イタリアの国旗を作ってください。

緑色はR 0, G 154, B 74　白色は R 255, G 255, B 255　赤色は R 218, G 0, B 38　でできます。

問題4 発展問題　アメリカ風の国旗を作ってください。ただし、前回学んだfor文を使うこと。

コードの書き方にはいろいろな方法があります。同じものが作れたら正解です!

問題1の答え (例)

size(300,200);
noStroke();
background(0,111,80);
fill(255,0,0);
ellipse(150,100,100,100);

問題2の答え（例）

size(300,200);
noStroke();
background(230,0,0);
fill(255,255,255);
rect(100,0,100,200);

問題3の答え（例）

size(300,200);
noStroke();
fill(0,154,74);
rect(0,0,100,200);
fill(255,255,255);
rect(100,0,100,200);
fill(218,0,38);
rect(200,0,100,200);

問題4の答え（例）

size(570,300);
noStroke();
background(255,255,255);
int i = 0;
for(i=0;i<7;i++){
  fill(189,0,39);
  rect(0,i*46,570,23);  
}
fill(64,53,111);
rect(0,0,230,161);