p5.js スケッチの基本構造

p5.js スケッチの基本構造

空っぽのスケッチ

p5.js Web Editor (あるいはその他、お使いの環境)の操作確認も兼ねて、
以下のコードを実行してみてください。
1
2
3
4
5
6
7
function setup() {
  createCanvas(800, 600); // 800 x 600 ピクセル。今回このサイズでやっていきます
}

function draw() {
  background(0); // 黒背景。後で自由に変えていただきます
}
  • 最初に1回だけ setup() が実行される
  • draw() が繰り返し実行されることで、動いているように見せられる(この時点では真っ黒)
    • この1回1回を「フレーム」と呼ぶ
    • デフォルトでは毎秒60回実行される。
      これを「フレームレートは 60 FPS」などと言う(FPS = frames per second)

リンク

p5.js チートシート

https://bmoren.github.io/p5js-cheat-sheet/ja.html

ここに書いていないものとしては、システム変数 frameCount なども使う
draw() が呼ばれるたびに1ずつ増える値)

公式のリファレンス

https://p5js.org/reference/