第2章 数字は形を動かすつまみ
第1章では、ellipse の数字を直接変えました。数字が 1 か所だけなら、それで十分です。同じ数字を何度も使い始めると、「どれが中心の位置だったか」を探す時間が増えます。変数は、この探し物を減らし、作品の意図に名前を付けます。
キャンバスでは、左上が座標 (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 へ変えると、顔と両目がまとめて右へ動きます。
数字を減らすこと自体が目的ではありません。「中心からどれだけ離すか」という関係がコードに現れることが重要です。
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
width は現在のキャンバスの幅、height は高さです。キャンバスを幅 600、高さ 360 に変えても、円は中央へ置かれます。
固定値 200 を使う方法が間違いなのではありません。キャンバスのサイズに関係なく中央へ置きたいなら、width / 2 のほうが意図に合います。左から必ず 200 の場所へ置きたいなら、固定値のほうが正確です。
2.4 座標は画面の左上から始まる
キャンバスの原点（位置を数え始める場所）は左上です。そこでは x と y がどちらも 0 です。x は右へ進むほど大きくなり、y は下へ進むほど大きくなります。
(0, 0) ─────────→ x
│
│
│
↓ y
紙のグラフでは y が上へ増えることが多いため、最初は逆に感じるかもしれません。画面は上から下へ行を並べて表示してきた歴史があり、ブラウザの 2D 座標も左上を基準にします。
座標を暗記する代わりに、次の変更部分を setup の中の最後へ一時的に足すと確かめられます。
fill(255, 0, 0)
ellipse(0, 0, 120, 120)
左上に、大きな円を4分の1に切ったような形が見えます。円の中心が (0, 0) にあり、残りがキャンバスの外へ出ているためです。直径を120にしているのは、キャンバス内へ残った部分を見つけやすくするためです。
図のほとんどが何も描かれていない灰色に見えるのは、エラーではありません。円の中心を左上の角へ置いたため、直径120の円のうち、キャンバス内に入った右下部分だけが見えています。見えている円弧の角、つまり画像の左上が円の中心です。
2.5 名前はあとから変えてよい
最初から完璧な変数名を考える必要はありません。x で始め、目の位置だと分かったら eye_x へ変えられます。短い実験では x が読みやすく、要素が増えた作品では left_eye_x が役立つこともあります。
今のコードを壊したくなければ、まず複製を保存します。そのうえで、center_x を width / 4 や width * 0.75 に変えてください。計算式が構図をどう動かすかを見た経験が、次章の色と重なりにもつながります。
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の順で渡します。窓を一つだけ消す、建物を極端に細くする、月をビルの後ろへ移すと、街の物語が変わります。
この章の小さな区切り
- 円の位置を左右か上下へ動かせた
width / 2とheight / 2で中央を使えた- 余裕があれば、夜の街の窓か建物を一つ変えた
座標を一つ変えて画面の違いを確認できれば、保存して次章へ進めます。