Vue3 Composition API + TypeScriptでp5.jsを動かす

これはなに

タイトル通りの環境をさくさくと作っていこうというものです。
ProcessingのJavaScriptライブラリ、p5.jsに手を出してみようと思ったのでVue.jsで環境を作ることにしました。

TypeScriptは必須ではないですが、ライブラリを使用する際は補完が強力なので追加します。

"vue": "^3.0.0"
"eslint": "^6.7.2"
"prettier": "^2.2.1"
"p5: 1.4.0"
"typescript": "~4.1.5"
"@types/p5: 1.3.1

Vue CLIで環境を構築する

まずvue cliのバージョンを上げます。

yarn global add @vue/cli

vue -V
@vue/cli 4.5.13

CLIの設定でVueの3系を選択。
Linter, TypeScriptにチェック。
このへんの解説は下の記事が詳しいです。
https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2

prettierの設定

自動フォーマットを有効にしたいのでprettierの設定をします。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
をインストールし、settings.jsonに下記を記述する。

{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

これでsave時に自動フォーマットが機能します。

routerの設定

今回はvue routerを使用しているので、不要なrouteを削除します。
またIndex.vueを作成したのでそれを適用させます。

今までコンポーネントをimportしてそれをcomponent要素に充てていたのですが、
関数に置き換えてroute単位で読み込めるみたい。

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Index",
    component: () => import("../views/Index.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

p5.jsをインストール

yarn add p5

型も追加

yarn add @types/p5

描画する

ソースコードはGenerative Design with p5.jsを参考にし、それをVueで動くように修正したものです。
またp5.jsの各関数の動きについてはコード内のコメントをご覧ください。

<template>
  <p>Y座標: {{ positionY }}</p>
  <p>X座標: {{ positionX }}</p>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import p5 from "p5";

export default defineComponent({
  name: "Index",
  setup() {
    const positionY = ref(0);
    const positionX = ref(0);

    const sketch = (p: p5) => {
      p.setup = () => {
        p.createCanvas(720, 720);
        // カラーモデルをHSBに
        p.colorMode(p.HSB, 360, 100, 100);
        // 矩形を描画方法を指定する
        p.rectMode(p.CENTER);
        // 矩形の枠線を隠す
        p.noStroke();
      };

      p.draw = () => {
        positionY.value = p.mouseY;
        positionX.value = p.mouseX;

        // 背景色を現在のカラーモードで指定
        // 色相、再度、明度
        p.background(p.mouseY / 2, 100, 100);
        // 図形の色を現在のカラーモードで指定
        // 背景の反転色を表現する
        p.fill(360 - p.mouseY / 2, 100, 100);
        // 図形の描画（1px ~ 720pxの間で大きさが変わる）
        // X座標, Y座標, width, height
        p.rect(360, 360, p.mouseX + 1, p.mouseX + 1);
      };
    };

    new p5(sketch);

    return {
      positionY,
      positionX,
    };
  },
});
</script>

vueとp5.jsの準備

import { defineComponent, ref } from "vue";
import p5 from "p5";

Composition APIを使用するためのdefineComponentと、
マウス座標を画面に表示するためrefを。
そしてp5をimportします。

マウス座標を参照するrefオブジェクトを用意

const positionY = ref(0);
const positionX = ref(0);

座標を画面に表示するためのrefオブジェクトを用意します。

描画前の準備

p.setup = () => {
  p.createCanvas(720, 720);
  // カラーモデルをHSBに
  p.colorMode(p.HSB, 360, 100, 100);
  // 矩形を描画方法を指定する
  p.rectMode(p.CENTER);
  // 矩形の枠線を隠す
  p.noStroke();
};

p5が持つsetup関数で描画前の準備を定義します。

描画

p.draw = () => {
  positionY.value = p.mouseY;
  positionX.value = p.mouseX;

  // 背景色を現在のカラーモードで指定
  // 色相、再度、明度
  p.background(p.mouseY / 2, 100, 100);
  // 図形の色を現在のカラーモードで指定
  // 背景の反転色を表現する
  p.fill(360 - p.mouseY / 2, 100, 100);
  // 図形の描画（1px ~ 720pxの間で大きさが変わる）
  // X座標, Y座標, width, height
  p.rect(360, 360, p.mouseX + 1, p.mouseX + 1);
};  

draw関数で図形を描画します。
このdraw関数は1秒間に60回レンダリングを行い、
背景色や物体のカラーがレンダリング時のマウス座標で変化します。

p5をnewする

new p5(sketch);

setupとdrawを持つsketch関数を引数にとり、new。

座標の表示

<template>
  <p>Y座標: {{ positionY }}</p>
  <p>X座標: {{ positionX }}</p>
</template>

setup関数でreturnしたrefオブジェクトをtemplateタグ内に置きます。

実行

マウスの位置が変わることで、背景と矩形の色が変わる状態を描画できました。