01-05 プログラムを作ってみよう

プログラムを作ってみよう

p5.jsのプログラムを作るには以下のサイトにアクセスします。Google Driveを連携することによって作ったプログラムの呼び出しと保存ができるようになります。

https://editor.p5js.org/

スケルトン

サイトにアクセスするとスケルトンが表示されます。p5.jsが予め作成しているスケルトン(骨格)にはsetup関数とdraw関数が含まれていますが、はじめのうちはsetup関数のみを使用しましょう。

// スケルトン
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}
// スケルトン(修正版)
function setup() {
  // ここにプログラムを書いていく
}

print文

プログラミングの第一歩は「print文」です。文字列をコンソール(動作確認用画面)に表示する役割があります。計算結果や、処理の途中の状態を出力して確認することができます。p5.jsに限らず、print文から出発することで、プログラミングの基礎を着実に学ぶことができるようになります。

例題1-5-1

自分の名前を表示する。

コード

function setup() {
  print('私の名前は山田太郎です')
}

結果

練習問題1-5-1

各自の名前と趣味を表示しなさい。

練習問題1-5-2

松尾芭蕉の俳句を表示しなさい。