4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

p5.js入門

はじめに

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

やること

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

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

sample.gif

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

環境

  • macOS 10.15.1
  • p5.js version 0.9.0

準備

  • 適当なディレクトリにindex.htmlsketch.jsファイルを作成する
  • index.htmlの中身は下記の通り
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に記載する内容

準備

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

  • setup: 開いた際に最初に1度だけ実行される処理
  • draw: setup後に何度も繰り返し実行される処理
    • 1フレームで1回実行されるので、1秒間に60回実行される
    • 動きをつけるような処理はここに実装する
// 最初に1回だけ実行される処理
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の水色のキャンバスが描画されます。

sample1.png

図形の描画

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

関数 内容
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);
}

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

sample2.png

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

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

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

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

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

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

sample3.png

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

(この場合、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++;
}

sample4.gif

※ 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に触れるだけの内容となります。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?