元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【p5.js】p5.jsの基本的な書き方

この記事では、「p5.jsの基本的な書き方」と「描画できる図形の種類」について書いています。まず、p5.jsの書き方を知り、基本形に慣れていきます。その上で図形を描きます。それから徐々にコードを変更して、色々と試していくことをおススメします。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

setup()とdraw()

まず、setup()とdraw()を書く。始めは、この関数の中にコードを記述していく。

function setup(){
  //最初に1回だけ実行する処理を記述する
}

function draw(){
  //繰り返し実行する処理を記述する
}
  • setup()
    • 最初に1回だけ実行する関数。
    • 初期設定を定義したり、画像などを読み込む。
  • draw()
    • setup()の直後に実行される関数で、繰り返し実行する。

createCanvas()とbackground()

  • createCanvas()
    • 描画領域の作成。
  • background()
    • 背景色の指定。

createCanvas()で、HTMLドキュメントにcanvasタグ(描画領域)を作成する。指定したサイズで描画領域を作成する。左上が(0, 0)の座標。横軸がx軸で右方向にプラス。縦軸がy軸で下方向にプラス。

function setup(){
  //createCanvas(w, h);
  //w:キャンバスの幅, h:キャンバスの高さ
  createCanvas(200, 200);

  //背景色を指定する
  background(127);
}
f:id:shiroyuki2020:20210422144839p:plain

背景色がグレーの描画領域が作成される。

図形の種類

図形を描画するのに9つの関数がある。

  • point():点
  • line():線
  • triangle():三角形
  • square():正方形
  • rect():長方形
  • quad():角の角度が90度に固定されない四角形
  • arc():円弧
  • circle():円
  • ellipse():楕円

rect()を使う

長方形を描画する。

function setup(){
  createCanvas(200, 200);
  background(127);

  //長方形を描画する
  //rect(x, y, w, h)
  //x:x座標, y:y座標, w:幅, h:高さ
  rect(50, 50, 100, 100);
}
f:id:shiroyuki2020:20210422144836p:plain

まとめ

  • setup():初期設定
  • draw():繰り返し処理(再描画の処理)
  • createCanvas():描画領域の作成
  • background():背景色の指定
  • rect():長方形の描画

この記事で説明しきれなかったことがたくさんありますが、それらはリファレンスに載っています。例えば、rect()は角丸も指定できます。詳しく知りたい方は、リファレンスを確認してください。

参考サイト