p5.jsの関数の使用方法

1. setup()関数とdraw()関数: p5.jsのスケッチは、通常、setup()関数とdraw()関数から構成されます。setup()関数はスケッチの初期設定を行い、draw()関数は描画やアニメーションのためのコードを含みます。以下は、基本的なスケッチの例です。

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
  ellipse(200, 200, 50, 50);
}

2. マウスの操作: p5.jsでは、マウスの位置やクリックなどのイベントを検出する関数が提供されています。以下は、マウスの位置に円を描画する例です。

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
  ellipse(mouseX, mouseY, 50, 50);
}

3. キーボードの操作: キーボードの入力を検出する関数もp5.jsにはあります。以下は、特定のキーが押されたときに背景色が変わる例です。

function setup() {
  createCanvas(400, 400);
}
function draw() {
  if (keyIsPressed) {
    background(0);
  } else {
    background(220);
  }
}

4. カスタム関数の作成: p5.jsでは、独自の関数を定義して再利用することもできます。以下は、線を描画するカスタム関数の例です。

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
  drawLine(100, 100, 300, 300);
}
function drawLine(x1, y1, x2, y2) {
  line(x1, y1, x2, y2);
}

これらはp5.jsの関数の一部ですが、さまざまな機能や効果を追加するために使用できる多くの他の関数もあります。p5.jsの公式ウェブサイトやドキュメントを参照して、さらに詳細な情報を入手することをおすすめします。