01-03 初めてのコーディング

1 図形を描いてみよう
2 ソースコードのルール
3 エラーに注意！
- 3.1 練習問題1-3-1
4 座標の違い
- 4.1 練習問題1-3-2
- 4.2 練習問題1-3-3

図形を描いてみよう

p5.jsのエディターに以下のコードをコピーして、再生ボタン（▶）を押してみよう。

function setup() {
  createCanvas(400, 400); // キャンバスのサイズを 400x400 に設定
  background(220); // 背景色をグレー (0:黒 〜 255:白)
  circle(130, 200, 200); // 座標(130, 200)に直径200の円を描く
}

画面に白い丸が描かれます。

ソースコードのルール

function setup() { … } の中にコードを書きます。
命令（関数）は英語 で書き、カッコの中に「引数」 を入れます。
文の最後には ; をつけます。

📌
引数（ひきすう）は、命令を補助する情報です。
命令によって、必要な引数の数や意味が変わります。
例：circle(x, y, d)
x, y → 円の中心の座標
d → 円の直径

エラーに注意！

コードのスペルを間違えたり、ルールを守らないとエラーになります。

circle を cercle や sircle と書くとエラーになる
文末の ; を忘れるとエラー！
引数が足りない・多すぎるとエラー！（例： circle(200, 200);）

練習問題1-3-1

わざと間違えてみよう！
circleをsircleにしてエラーが出るか確認しなさい。

座標の違い

Scratchと違い、左上が（0, 0）です。右に行くほど x が増え、下に行くほど y が増えます。

練習問題1-3-2

中央に描かれた円を左に 70 ピクセルずらしなさい。

練習問題1-3-3

左右対称になるように右側にもう一つ同じ大きさの円を描きなさい。