第2章 数字は形を動かすつまみ

第1章では、ellipse の数字を直接変えました。数字が 1 か所だけなら、直接書くと位置や大きさをすぐ変えられます。同じ数字を何度も使い始めると、「どれが中心の位置だったか」を探す時間が増えます。変数を使うと、center_x のような名前から、その数字が何に使われているか分かります。

キャンバスでは、左上が座標 (0, 0) です。右へ進むほど x が増え、下へ進むほど y が増えます。

2.1 200 ではなく center_x と書く理由

次の 2 行は、同じ位置に円を描きます。

ellipse(200, 150, 100, 100)

center_x = 200
center_y = 150
ellipse(center_x, center_y, 100, 100)

短いのは最初の例です。しかし 200 だけを見ても、それが位置なのか色なのか分かりません。center_x という名前は、その値が中心の横位置だと伝えます。

center_x は「センター・エックス」と読みます。center は中央、x は横の場所を表すために使っている文字です。center_y の y は縦の場所を表します。ここでは x を「横」、y を「縦」の短い名前として使います。

center_x = 200 は、右側の値 200 を、左側の変数 center_x に代入しています。代入とは、「この名前で値を覚えておく」という操作です。= は、ここでは数学の「左右が等しい」ではなく、右側の値を左側の名前へ入れる記号です。

2.2 一つを変えて全体を動かす

同じ中心から複数の形を描いてみます。

def setup
  createCanvas(400, 300)
  background(242)

  center_x = 200
  center_y = 150

  fill(250, 100, 110)
  ellipse(center_x, center_y, 180, 180)

  fill(255)
  ellipse(center_x - 35, center_y - 20, 30, 45)
  ellipse(center_x + 35, center_y - 20, 30, 45)

  fill(40)
  ellipse(center_x - 35, center_y - 15, 12, 20)
  ellipse(center_x + 35, center_y - 15, 12, 20)
end

center_x - 35 は中心から左へ 35、center_x + 35 は右へ 35 という意味です。center_x を 260 へ変えると、顔と両目がまとめて右へ動きます。

center_x - 30 と書くと、「中心から左へ 30」という位置がコードから分かります。

2.3 キャンバス自身に中心を聞く

幅 400 の半分は 200、高さ 300 の半分は 150 です。キャンバスの大きさを変えるたびに計算し直す代わりに、rbCanvas/p5 が持つ width（ウィズ、幅）と height（ハイト、高さ）を使えます。

def setup
  createCanvas(600, 360)
  background(242)

  center_x = width / 2
  center_y = height / 2

  fill(250, 100, 110)
  ellipse(center_x, center_y, 180, 180)
end

/（スラッシュ）は割り算の記号です。ここでは幅が 600 なので、width / 2 は「600 を 2 で割る」という計算で、答えは 300 です。高さの 360 も 2 で割ると 180 になります。

width は現在のキャンバスの幅、height は高さです。キャンバスを幅 600、高さ 360 に変えても、円は中央へ置かれます。

固定値 200 を使う方法が間違いなのではありません。キャンバスのサイズに関係なく中央へ置きたいなら、width / 2 のほうが意図に合います。左から必ず 200 の場所へ置きたいなら、固定値のほうが正確です。

2.4 座標は画面の左上から始まる

キャンバスの原点（位置を数え始める場所）は左上です。そこでは x と y がどちらも 0 です。x は右へ進むほど大きくなり、y は下へ進むほど大きくなります。

(0, 0) ─────────→ x
  │
  │
  │
  ↓ y

紙のグラフでは y が上へ増えることが多いため、最初は逆に感じるかもしれません。画面は上から下へ行を並べて表示してきた歴史があり、ブラウザの 2D 座標も左上を基準にします。

座標を暗記する代わりに、次のコードを新しいスケッチとして実行します。図 2-2 と同じ 400×300 の画面で、左上だけに円が見えます。

def setup
  createCanvas(400, 300)
  background(242)
  fill(255, 0, 0)
  ellipse(0, 0, 120, 120)
end

左上に、大きな円を 4 分の 1 に切ったような形が見えます。円の中心が (0, 0) にあり、残りがキャンバスの外へ出ているためです。直径を 120 にしているのは、キャンバス内へ残った部分を見つけやすくするためです。

図のほとんどが何も描かれていない灰色に見えるのは、エラーではありません。円の中心を左上の角へ置いたため、直径 120 の円のうち、キャンバス内に入った右下部分だけが見えています。見えている円弧の角、つまり画像の左上が円の中心です。

2.5 名前はあとから変えられる

最初は x と書き、目の位置だと分かったところで eye_x へ変えられます。短い実験では x が読みやすく、要素が増えた作品では left_eye_x が役立つこともあります。

まず2.3 のコードを別名で保存します。center_x = width / 2 を center_x = width / 4 へ変えて実行すると、横の位置が 300 から 150 へ変わり、円が左へ動きます。

次に、同じ行を center_x = width * 0.75 へ変えて実行します。*（アスタリスク）は掛け算の記号です。600 * 0.75 は 600 の 4 分の 3 にあたる 450 なので、円は右へ動きます。中央へ戻すときは、その行を center_x = width / 2 へ戻します。

2.6 座標から夜の街を作る

座標は円の場所だけでなく、画面全体の構図を決めます。rect（レクト）は四角形、triangle（トライアングル）は三角形を描くメソッドです。

def setup
  createCanvas(500, 300)
  background(18, 24, 55)
  noStroke

  fill(245, 220, 120)
  ellipse(410, 65, 70, 70)

  fill(35, 45, 75)
  rect(40, 130, 110, 170)
  rect(175, 85, 130, 215)
  rect(335, 155, 120, 145)

  fill(255, 190, 80)
  rect(65, 160, 22, 30)
  rect(105, 210, 22, 30)
  rect(205, 120, 25, 35)
  rect(250, 175, 25, 35)

  fill(35, 45, 75)
  triangle(175, 85, 240, 30, 305, 85)
end

rect(x, y, width, height) は、既定では左上の位置、幅、高さの順です。triangle は 3 つの頂点を、x1, y1, x2, y2, x3, y3 の順で渡します。窓を一つ消すと眠っている建物に、月をビルの後ろへ移すと月が隠れた夜景に見えるかもしれません。どちらか一つを変えて、元の画面と見比べます。

座標を一つ変え、月や窓の見え方が気に入った版を保存します。第3章では、形を重ねた場所の色を変えます。

参考資料

• rbCanvas/p5 0.5.1 API リファレンス — width、height、rect、triangle の説明
• p5.js width・height — キャンバスの幅と高さの概念。サンプルは JavaScript で書かれている