第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 として読み取り、最初から動かし直す合図です。数字を変えただけでは右側が変わらない場合があります。そのときは、もう一度このボタンを押します。

最初の長いコードにある ellipse(200, 150, 120, 120) の、左から 3 番目の 120 だけを 220 へ変えて実行します。円が横へ広がります。次に、最後の 120 も 220 へ変えて、もう一度実行します。次の 1 行は、二つ目の変更が終わった変更部分です。この行だけを実行せず、最初のコードの同じ行を書き換えます。

ellipse(200, 150, 220, 220)

幅と高さがそろい、大きな円になります。エラーが出たら、変更した行を ellipse(200, 150, 120, 120) へ戻して実行します。コード中の数字を変えると、画面を直接調整できます。

この短いコードには、初めて見るメソッドが 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 が高さです。

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 はメソッドの終わりを見つけられず、確認が必要な場所をエラーとして表示します。直前に消した 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 0.5.1 API リファレンス — createCanvas、background、fill、ellipse、noStroke の説明
• Ruby 公式「Ruby とは」 — Ruby のメソッドや変数を含む言語の特徴