1a-03 円を描く、色を使う

• 円を描く
• 色を表現する方法
• 色の付け方（背景、線、塗り）
• 練習、課題

ellipse 円（楕円、正円）を描く

「中心(240,160), 横直径180, 縦直径120の楕円を描く」

size(480,320);
ellipse(240,160,180,120);

「中心(100,80), 直径120の円を描く」

size(480,320);
ellipse(240,160,120,120);

色を表現する方法

RGBとHSB

• RGB: ウィキペディアでRGBについて詳しく読む
• HSB: ウィキペディアでHSBについて詳しく読む

参考：イラストレータのカラーパネルで色を作る

黒

• RGB: R:0, G:0, B:0
• HSB: H:0°〜360°, S:0%〜100%, B:0%

赤

• RGB: R:255, G:0, B:0
• HSB: H:0°, S:100%, B:100%

黄

• RGB: R:255, G:255, B:0
• HSB: H:60°, S:100%, B:100%

緑

• RGB: R:0, G:255, B:0
• HSB: H:120°, S:100%, B:100%

シアン（水）

• RGB: R:0, G:255, B:255
• HSB: H:180°, S:100%, B:100%

青

• RGB: R:0, G:0, B:255
• HSB: H:240°, S:100%, B:100%

マゼンタ（紫）

• RGB: R:255, G:0, B:255
• HSB: H:300°, S:100%, B:100%

白

• RGB: R:255, G:255, B:255
• HSB: H:0°〜360°, S:0%, B:100%

不透明度（アルファチャンネル）

アルファ値が100%未満の場合、下が透けて見える。0%で完全に見えなくなる。

colorMode カラーモードを指定する

背景や図形に色を塗り色を指定する前に、カラーモード（RGBまたはHSB）を指定する

「RGBモード（R,G,B:各256段階）で指定する」

colorMode(RGB,256);

「HSBモード（H:360段階, S,B:各100段階）で指定する」

colorMode(HSB,360,100,100);

「HSBモード（H:360段階, S,B,Alpha:各100段階）で指定する」

colorMode(HSB,360,100,100,100);

background 背景（ウィンドウの地色）に色を付ける

「背景色に青を指定（RGBモードで）」

size(480,320);
colorMode(RGB,256);
background(0,0,255);

stroke 線に色を付ける

「縁が青い線の円を描く」

size(480,320);
colorMode(RGB,256);
stroke(0,0,255);
ellipse(240,160,100,100);

noStroke 線なし

「縁線のない円を描く」

size(480,320);
noStroke();
ellipse(240,160,100,100);

strokeWeight 線の太さを設定する

「縁線が青・太さ10の円を描く」

size(480,320);
colorMode(RGB,256);
stroke(0,0,255);
strokeWeight(10);
ellipse(240,160,100,100);

fill 塗りに色を付ける

「青く塗られた円を描く」

size(480,320);
colorMode(RGB,256);
noStroke(); // 縁線を消す
fill(0,0,255);
ellipse(240,160,100,100);

noFill 塗りつぶしなし

「縁線が青・太さ10、塗りつぶしなしの円を描く」

size(480,320);
colorMode(RGB,256);
stroke(0,0,255);
strokeWeight(10);
noFill();
ellipse(240,160,100,100);

smooth 図形のエッジを滑らかにする（アンチエイリアス）

「エッジの滑らかな円を描く」

size(480,320);
colorMode(RGB,256);
smooth();
stroke(0,0,255);
strokeWeight(10);
ellipse(240,160,100,100);

練習1

ウィンドウサイズは幅480px,高さ320pxとする。

1. 「背景色に赤を指定（RGBモードで）」
2. 「背景色に赤を指定（HSBモードで）」
3. 「背景色に黄を指定（カラーモードはどちらでも良い）」

練習2

ウィンドウサイズは幅480px,高さ320pxとする。以下のような3つの円を描く（1つのウィンドウにまとめて描くこと）。

課題「国旗を描く」

ウィンドウサイズは幅480px,高さ320pxとする。1つのウィンドウに、以下の国旗を並べて描く。 締め切りは今週木曜日の18時までとする。

• 日本
• オランダ
• ベルギー
• スウェーデン

課題の提出はこちらから