My First 55ingーいっとうさいしょは 線

//P５のプログラムでは最低次の二つの関数を書く（//で始まる行はコメント）

void setup(){ // P5から最初に一回だけ呼び出される

size(400,300); // ウィンドウの大きさ(P5)

}

void draw() { // P5から繰り返し呼び出される (通常毎秒３０回)

kesu(); // 白い紙を用意する(KAME)
saisho(200,150); // 最初は（下向きで）真ん中から(KAME)
mae(100); // 前に100進む(KAME)

}

//別の関数を【あなた】が書いていれば、上の手順からそれらの関数を呼び出せる。
//　　　　　追加した関数--KAMEコマンド（ライブラリ）

void kesu() { // 白い紙を用意するには、(KAME)

background(255); // 背景を白(255）にする (P5)

}

void saisho(float xloc, float yloc) { // 最初の位置を座標(xloc, yLoc)にするには、(KAME)

resetMatrix(); // 変換行列を初期状態に戻す(P5)
translate(xloc, yloc); // 局所座標の原点を(xloc, yLoc)に平行移動する(P5)

}

void mae(float step) { // 前にstepだけ進むには、(KAME)

line(0,0,0,step); // 現在の座標(0,0)から(0,step)まで、線を引く(P5)
janpu(step); // 線を引かずに前にstepだけ進む(KAME)

}

void janpu(float step) { // 線を惹かずに前にstepだけ進むには、(KAME)

translate(0, step); // 局所座標の原点を(0,step)に平行移動する(P5)

}

上の画像は、ここまでのテキストをP5のエディタにペーストして、右三角（＞）ボタンを押した状態。

---

P５で用意された関数だけで書いてみると、

void setup(){ // P5から最初に一回だけ呼び出される

size(400,300); // ウィンドウの大きさ(P5)

}
void draw() { // P5から繰り返し呼び出される (通常毎秒３０回)

background(255); // 背景を白(255）にする (P5)
resetMatrix(); // 変換行列を初期状態に戻す(P5)
translate(200, 150); // 局所座標の原点を(200, 150)に平行移動する(P5)
line(0,0,0,100); // 現在の座標(0,0)から(0,100)まで、線を引く(P5)
translate(0, 100); // 局所座標の原点を(0,100)に平行移動する(P5)

}

同じ結果になるけど、ちょっと関数を書くだけで扱いやすくなる場合が多い。

---

なお、日本語サポートサイトからたどれるP5インフォメーション→言語が参考になる。
（解説してあるのは一昔前の版だから注意が必要だけど、loop()→draw()の読み替えだけで大抵OK）

次は、【繰り返し】