読者です 読者をやめる 読者になる 読者になる

ともろーの日記

Initializing . . .

Processing ではじめるプログラミング 9日目(色を変えてみる)

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

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

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

f:id:tomorrow63:20160429133231p:plain:w300

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

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

f:id:tomorrow63:20160429133256p:plain:w300

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

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

f:id:tomorrow63:20160429133320p:plain:w300

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);

f:id:tomorrow63:20160429133344p:plain:w300

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


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

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

f:id:tomorrow63:20160429134020p:plain:w300

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


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

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

f:id:tomorrow63:20160429134511p:plain:w300

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


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

f:id:tomorrow63:20160429135141p:plain:w300

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


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

f:id:tomorrow63:20160429135613p:plain:w300

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


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

f:id:tomorrow63:20160429141232p:plain:w300



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

問題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);