第1章 最初の 5 分で絵を変える

プログラムの最初の楽しさは、説明を読み終えた先にあるものではありません。コードを 1 行変え、画面が変わった瞬間に始まります。この章では、正確に入力する練習より先に、動くサンプルを自分の手で変えます。

1.1 まず動く 6 行

rbCanvas/p5 のエディタを開き、次のコードを貼り付けて実行します。開き方やボタンの場所が分からないときは、先に始める前に エディタの使い方を開いてください。

def setup
  createCanvas(400, 300)
  background(245, 238, 220)
  fill(235, 90, 120)
  ellipse(200, 150, 120, 120)
end

薄い背景の中央に、赤みのある円が表示されれば成功です。各行の意味がまだ分からなくても、そのまま先へ進めます。

エディタの左上にある三角形のボタンが実行ボタンです。0.5.1では、標準設定だと実行結果が新しいタブに表示されます。ツールメニューの「実行画面」にチェックを付けると、コードの右側に実行結果を表示できます。画面の配置は、使う端末やウィンドウの広さによって変わることがあります。

実行ボタンは、書いたコードを Ruby として読み取り、最初から動かし直す合図です。数字を変えただけでは右側が変わらない場合があります。そのときは、もう一度このボタンを押します。

この短いコードには、初めて見るメソッドが 4 つあります。メソッドは、コンピューターに頼める処理へ付けられた名前です。

• createCanvas（クリエイト・キャンバス）は、絵を描く場所を作る
• background（バックグラウンド）は、キャンバス全体を一色で塗る
• fill（フィル）は、このあと描く形の内側の色を決める
• ellipse（イリプス）は、楕円を描く

コードは上から順に実行されます。そのため、「描く場所を作る→背景を塗る→色を決める→楕円を描く」という順番になっています。fill はそれ自身では形を描きません。次に描く ellipse の色を準備しています。

それぞれの名前の後ろにある丸括弧には、その処理へ渡す値が入ります。background(245, 238, 220) と fill(235, 90, 120) の3つの値は色を表します。色の数値は第3章で、ellipse の4つの値はこのあとの1.2節で詳しく試します。

ここで、コードの形だけ先に確認します。

def setup
  # この間に、最初に実行したい処理を書く
end

def は「これからメソッドを定義する」という Ruby の目印です。メソッドは、いくつかの処理へ名前を付けたものです。ここでは名前が setup です。最後の end は「定義はここまで」という目印です。

setup の内側にある行は、行頭を半角スペース 2 個ぶん右へ下げています。これをインデントと呼びます。Ruby はこのスペースだけで処理範囲を決めませんが、どこからどこまでが setup か読みやすくなります。

# から行末まではコメントです。人が読むためのメモで、Ruby は処理として実行しません。上のコメント行は説明用なので、実際のスケッチへ加えなくてもかまいません。

次に、丸括弧を見ます。ここからの短いコード欄は、最初の長いコードから取り出した変更部分です。短い部分だけを実行するのではなく、最初のコードの同じ行を探して書き換えます。

createCanvas(400, 300)

createCanvas が呼び出す機能の名前です。丸括弧の中には、その機能へ渡す値を書きます。この値を引数と呼びます。カンマは引数の区切りです。ここでは 400 が横幅、300 が高さです。

最初の長いコードにある ellipse の、2つの 120 を 220 へ変えてください。次の1行は変更後の部分です。

ellipse(200, 150, 220, 220)

もう一度実行すると、円が大きくなります。コード中の数字は、覚える対象ではなく、画面を動かすつまみです。

1.2 4 つの数字と円の形

ellipse は、楕円を描くためのメソッドです。丸括弧の中には 4 つの値があります。次の1行も、最初の長いコードの ellipse と置き換える変更部分です。

ellipse(200, 150, 120, 80)

左から順に、中心の x 座標、中心の y 座標、幅、高さです。x は横方向、y は縦方向の位置を表します。

4 つを一度に変えると、どの数字が何をしたか分かりにくくなります。まず 1 つだけ変え、実行し、違いを見ます。この「一度に一つ」は、動かないコードを調べるときにも役立つ方法です。

1.3 setup は最初に一度だけ呼ばれる

def setup から end までが、先ほど確認した setup メソッドの定義です。rbCanvas/p5 は実行開始時に setup を 1 回呼びます。その中で、キャンバスを作り、背景を塗り、円を描いています。

def setup
  createCanvas(400, 300)
end

createCanvas(400, 300) は、幅 400、高さ 300 の描画領域を作ります。ここで作る領域がキャンバスです。

end を消すと、Ruby はメソッドの終わりを見つけられません。エラーが出たら、コードが壊れた証拠ではなく、Ruby が「ここを確認して」と教えている状態です。直前に消した end を元と同じ行へ戻し、もう一度実行すれば先へ進めます。

1.4 順番を変えると消える理由

描画は上から順に重なります。次のコードでは、円を描いたあとに背景を塗っています。

def setup
  createCanvas(400, 300)
  fill(235, 90, 120)
  ellipse(200, 150, 120, 120)
  background(245, 238, 220)
end

円が見えません。ellipse が失敗したのではなく、あとから塗った背景に隠れました。紙の上に絵の具を重ねる場合と同じです。

描画命令の順番は、単なる書式ではありません。何が前に見え、何が後ろへ隠れるかを決める制作上の選択です。

1.5 元の絵を離れる 3 つの改造

ここからは、好きなものを 1 つ選びます。

• background の 3 つの数字を変え、落ち着く色や驚く色を探す
• ellipse をもう 1 行追加し、少しずらして重ねる
• ellipse の幅と高さを別々にして、円ではない形にする

たとえば、2 つの楕円を重ねると次のようになります。

def setup
  createCanvas(400, 300)
  background(28, 32, 50)
  noStroke

  fill(255, 190, 70)
  ellipse(175, 150, 160, 160)

  fill(28, 32, 50)
  ellipse(225, 125, 160, 160)
end

noStroke（ノー・ストローク）は、このあと描く形の輪郭線を表示しないメソッドです。同じ背景色の楕円を上に重ねたため、手前の形が穴のように見えます。特殊な月の命令は使っていません。楕円と描画順だけで三日月が生まれました。

好きな画面になったら、そこで止めてかまいません。次章では、数字に名前を付け、同じ値を何度も使う方法を試します。

丸を生き物へ変える

丸を練習で終わらせず、顔とも機械とも分からない生き物へ育てられます。次のコードを、三日月の例とは別の新しいコードとして試します。

def setup
  createCanvas(400, 300)
  background(210, 235, 245)

  fill(255, 190, 80)
  ellipse(200, 155, 190, 150)

  fill(30)
  ellipse(165, 135, 18, 28)
  ellipse(235, 135, 18, 28)

  fill(255, 100, 120)
  ellipse(200, 185, 70, 25)
end

同じellipseだけでも、位置と縦横の大きさを変えると、頭、目、口という役割が生まれます。目を上下でずらす、口を画面の外へはみ出すほど大きくする、背景を夜の色にする、のどれか一つを選んでください。かわいくする必要はありません。「どんな性格に見えるか」を数字で探す作品です。

この章の小さな区切り

• コード全体をエディタへ貼り、円を表示できた
• 数字を一つだけ変え、画面の変化を見つけた
• 三日月または生き物の、残したい版を一つ保存した

全部できなくても、最初の円が表示できれば次章へ進めます。困ったら章の最初の6行へ戻ります。

参考資料

• rbCanvas/p5 概要
• p5.js Reference: createCanvas
• p5.js Reference: ellipse
• Ruby 3.4 リファレンスマニュアル: メソッド定義