第3章 色と重なりで画面を作る

形の種類が少なくても、色と描画順が変われば別の画面になります。第1章の三日月は、背景と同じ色の楕円を重ねて作りました。この章では、色を「赤、青」と名付けるだけでなく、数値として混ぜ、透明度で重ねます。

3.1 RGB は 3 本の光の量

fill(235, 90, 120) の 3 つの値は、赤、緑、青の光の強さです。RGB は Red、Green、Blue の頭文字です。通常は 0 から 255 の範囲で指定します。

fill(40) や background(245) のように数字が一つだけなら、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. 背景を 1 色で塗る
2. 同じ形を主役色で 3 つ以上描く
3. そのうち 1 つだけ差し色へ変える
4. 位置か大きさを一つだけ崩す

使う色を三つに絞ると、一つずつ変化を比べやすくなります。窮屈に感じたときは、4 色目を足した画面とも比べられます。

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

ここでは形の意味を決めていません。建物、夕日、旗に見える場合も、ただの色面に見える場合もあります。まず背景、主役、差し色のどれか一色だけを変えます。その後、形の重なる順番を変えます。「好きな色」だけでなく、「隣の色によってどう見え方が変わったか」を観察します。

色の見え方や、区別しやすい組み合わせは人によって違います。主役だけ大きくする、輪郭線を足す、位置を離す、動きを付けるなど、色以外の手掛かりも重ねられます。この章は色名を正しく当てる課題ではなく、自分に見える関係を試す章です。

3.7 リファレンスで確かめ、次の形を見つける

リファレンスには、命令の名前、引数、短いサンプルが載っています。忘れた使い方を確かめるだけでなく、まだ知らない命令を見つけるためにも使えます。

rbCanvas/p5 0.5.1 API リファレンスを開き、ここまでに使った ellipse を探します。本書の ellipse(200, 150, 120, 80) と見比べると、最初の二つの数字が位置、後ろの二つが幅と高さだと確認できます。知っているコードを手掛かりにすると、リファレンスのどこに命令の書き方やサンプルが載っているか分かります。

ellipse を確認したら、形を扱う項目に戻り、まだ使っていない名前を眺めます。名前やサンプルの実行結果が気になったものがあれば、一つだけ開いてみます。試したくなった場合は、作りかけの作品を保存してから、別のブラウザタブで rbCanvas/p5 エディタを開き、掲載されたサンプルを実行します。

第1部で、形、位置、色を数値として扱いました。第2部では、その数値を時間とともに変え、静止画を動かします。

参考資料

• rbCanvas/p5 0.5.1「色（カラー）に関する情報」 — RGB と透明度の指定
• HTML Standard「Canvas compositing」 — Canvas に描く色や画像のアルファ合成