第3章 色と重なりで画面を作る
形の種類が少なくても、色と描画順が変われば別の画面になります。第1章の三日月は、背景と同じ色の楕円を重ねて作りました。この章では、色を「赤、青」と名付けるだけでなく、数値として混ぜ、透明度で重ねます。
3.1 RGB は 3 本の光の量
fill(235, 90, 120) の 3 つの値は、赤、緑、青の光の強さです。RGB は Red、Green、Blue の頭文字です。通常は 0 から 255 の範囲で指定します。
def setup
createCanvas(420, 180)
background(245)
noStroke
fill(255, 0, 0)
ellipse(100, 90, 100, 100)
fill(0, 255, 0)
ellipse(210, 90, 100, 100)
fill(0, 0, 255)
ellipse(320, 90, 100, 100)
end
noStroke は形の輪郭線を描かない設定です。赤だけが最大なら赤、緑だけなら緑、青だけなら青になります。3 つとも 255 なら白、3 つとも 0 なら黒です。
絵の具は混ぜるほど暗くなることがありますが、画面の光は加えるほど明るくなります。RGB を絵の具と同じ感覚で考えると、予想と違う色が出ます。その違いも、数値を動かして知るほうが早くつかめます。
3.2 透明度は色の 4 番目の値
fill に 4 番目の値を加えると、透明度を指定できます。0 は完全に透明、255 は完全に不透明です。
def setup
createCanvas(360, 280)
background(250)
noStroke
fill(255, 70, 90, 150)
ellipse(150, 120, 160, 160)
fill(40, 120, 255, 150)
ellipse(210, 120, 160, 160)
fill(250, 210, 40, 150)
ellipse(180, 175, 160, 160)
end
円が重なった場所には、どれか 1 色ではない色が現れます。透明度は「薄くする」だけの機能ではなく、形同士の関係を見せる方法です。
3.3 background を毎回塗る意味
この章では setup の中だけで描いているため、背景は 1 回塗れば足ります。第4章から draw を使うと、同じ画面を何度も描き直します。そのとき background をどこへ置くかで、前のフレームを消すか残すかが変わります。
今は、描画順だけを変えて比べます。次の変更部分を新しい setup の中へ入れ、先に createCanvas と background を実行してから試します。
fill(255, 70, 90, 150)
ellipse(150, 120, 160, 160)
fill(40, 120, 255, 150)
ellipse(210, 120, 160, 160)
赤の円と青の円の順番を入れ替えると、重なった場所の見え方がわずかに変わります。透明な色は、手前の色だけで決まらず、その下に何があるかにも影響されます。
3.4 色の役割へ変数名を付ける
背景色や主役の色へ変数名を付けると、どの役割の色を変えているか分かりやすくなります。ここでは第2章で使った変数だけを使い、赤、緑、青を別々に覚えます。
def setup
createCanvas(400, 300)
paper_red = 245
paper_green = 237
paper_blue = 220
ink_red = 35
ink_green = 48
ink_blue = 70
background(paper_red, paper_green, paper_blue)
fill(ink_red, ink_green, ink_blue)
noStroke
ellipse(width / 2, height / 2, 180, 180)
end
コードは長くなりましたが、paper_red を変えれば背景の赤成分、ink_blue を変えれば円の青成分だと名前から分かります。短い実験なら background(245, 237, 220) と直接書くほうが読みやすいこともあります。変数を使うこと自体が目的ではなく、後から安心して変えられる場所を作ることが目的です。
3.5 三色だけで作る制約
色を増やすほど、作品が面白くなるとは限りません。背景色、主役色、差し色の 3 色だけを選ぶと、どの色がどんな役割を持つか見えやすくなります。
- 背景を 1 色で塗る
- 同じ形を主役色で 3 つ以上描く
- そのうち 1 つだけ差し色へ変える
- 位置か大きさを一つだけ崩す
これは正解へ近づく手順ではなく、選択肢を一度減らして遊びやすくする制約です。窮屈に感じたら 4 色目を足してかまいません。
第1部で、形、位置、色を数値として扱いました。第2部では、その数値を時間とともに変え、静止画を動かします。
3.6 色を選んで小さなポスターを作る
色の練習を、色見本で終わらせず、一枚のポスターへまとめます。
def setup
createCanvas(420, 300)
background(245, 225, 185)
noStroke
fill(235, 75, 90)
rect(35, 35, 210, 230)
fill(45, 70, 120, 210)
ellipse(270, 115, 190, 190)
fill(255, 210, 70, 220)
triangle(170, 260, 390, 260, 330, 70)
end
ここでは形の意味を決めていません。建物、夕日、旗に見えても、ただの色面に見えてもかまいません。まず背景、主役、差し色のどれか一色だけを変えます。その後、形の重なる順番を変えます。「好きな色」だけでなく、「隣の色によってどう見え方が変わったか」を観察します。
色の見え方や、区別しやすい組み合わせは人によって違います。差を色だけで伝える必要はありません。主役だけ大きくする、輪郭線を足す、位置を離す、動きを付けるなど、別の手掛かりを重ねてかまいません。この章は色名を正しく当てる課題ではなく、自分に見える関係を試す章です。
この章の小さな区切り
- RGBの数字を一つ変え、どの色がどう変わったか見つけた
- 三色の役割を「背景・主役・差し色」から一つ選べた
- 色だけで見分けにくい場所へ、形・大きさ・位置の手掛かりを一つ足した
いちばん気になった重なりを一つ保存します。次へ進む前に、最初に目が行く場所と、空けておきたい余白を一言だけ残します。