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

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

【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()は角丸も指定できます。詳しく知りたい方は、リファレンスを確認してください。

参考サイト

» HTML入門のまとめはこちらです。