はじめに

この記事は福岡明太子クラブ Advent Calendar 2019の１日目の記事です。

やること

本当はprocessingを使用して、mac上で動くグラフィカルなアプリを作成したかったのですが、
processingが上手く動作しなかったので、慣れる意味も込めてp5.jsを触ってみました。

とりあえず作ってみたものがこちらです。

ピンクの円をクリックすると選択状態になり、緑色になる
適当な場所をダブルクリックすると、そこに新たな円を作成して、選択した円と作成した円を線で結ぶ

環境

macOS 10.15.1
p5.js version 0.9.0

準備

適当なディレクトリにindex.htmlとsketch.jsファイルを作成する
index.htmlの中身は下記の通り
- CDNはここ

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>p5.js test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
  <script src="./sketch.js"></script>
</head>
<body>
</body>
</html>

作成

ここからはsketch.jsに記載する内容

準備

まずsetupとdrawというファンクションを用意します。

setup: 開いた際に最初に１度だけ実行される処理
draw: setup後に何度も繰り返し実行される処理
- 1フレームで1回実行されるので、1秒間に60回実行される
- 動きをつけるような処理はここに実装する

// 最初に１回だけ実行される処理
function setup() {
}

// setup後に繰り返し実行される処理（フレーム単位）
function draw() {
}

キャンバスの作成

setup内にキャンバスを作成する処理を書きます。このキャンバスのエリアが図形などを描画するエリアとなります。

const canvasX = 1000;
const canvasY = 1000;

const canvasColor = 'skyblue';

function setup() {
  // キャンバスの作成
  createCanvas(canvasX, canvasY);
  // 背景色の設定
  background(canvasColor);
}

index.htmlをブラウザで開くと、1000px × 1000pxの水色のキャンバスが描画されます。

図形の描画

試しにいくつか図形を描画してみます。

関数	内容
circle(x, y, d)	x, y座標を中心に直径dpxの円を描画する
aquare(x, y, s)	x, y座標を正方形の左上点の基準として1辺spxの正方形を描画する（他に引数あり）


function setup() {
  // キャンバスの作成
  createCanvas(canvasX, canvasY);
  // 背景色の設定
  background(canvasColor);

  // 円の描画
  circle(100, 100, 100);
  // 正方形の描画
  square(250, 100, 200);
}

するとこの様になります。

また、塗りつぶしや線は下記のように設定できます。

function setup() {
  // キャンバスの作成
  createCanvas(canvasX, canvasY);
  // 背景色の設定
  background(canvasColor);

  // 図形をピンクで塗りつぶす
  fill('pink');
  // 線の色を赤にする
  stroke('red');

  // 円の描画
  circle(100, 100, 100);

  // 塗りつぶさない（透明になる）
  noFill();

  // 正方形の描画
  square(250, 100, 200);
}

fillやstrokeなどは、それ以降に描画される図形に適応されるので、それぞれ別々の設定をしたい場合、しっかりと設定する必要があります。

（この場合、stroke('red')が正方形にも適応されている）

詳しくは公式のリファレンスに載っているので、そちらを参照

drawでの図形の描画

drawファンクションではアニメーションを付けるような描画を書くことができます。

試しに円が斜めに動くような実装をしてみます。

let circleX = 100;
let circleY = 100;

function setup() {
  // キャンバスの作成
  createCanvas(canvasX, canvasY);
}

function draw() {
  background(canvasColor);
  fill('pink');
  noStroke();

  circle(circleX, circleY, 100);

  circleX++;
  circleY++;
}

※ gif画像なのでカクカクしていますが、実際はなめらかに移動しています。

circleX, circleYを単純に+1しているだけなので、画面外に出て消えていきます。

イベントのハンドリング

p5.jsにはマウス操作等のイベントのコールバックが用意されています。

function setup() {
  // 省略
}

function draw() {
  // 省略

  // mouseIsPressedはクリックされている間trueを返す
  if (mouseIsPressed) {
    console.log("クリックされ続けている");
  }  
}

// クリックされた際に実行される
function mousePressed() {
  console.log("クリックされた！");

  // mouseButtonでクリックの種類がわかる
  // draw内などでも使用可能
  console.log(mouseButton);

  if (mouseButton === LEFT) {
    console.log('左クリック');
  }

  if (mouseButton === RIGHT) {
    console.log('右クリック');
  }

  // マウスの座標を取得
  console.log(mouseX);
  console.log(mouseY);  
}

// ダブルクリックされた際に実行される
function doubleClicked() {
  console.log('ダブルクリック');
}

最後に

今回は簡単にp5.jsに触れるだけの内容となります。

次回は円をクリックしたときの色の変更や、ダブルクリックして円を追加する処理など、最初の画像になるまでの実装を行います。

p5.js入門