p5.js パラメータ化(GUI)

p5js, 公開資料
p5.guiとは?

p5.gui」とはグローバル変数をパネル上で変更できるようにしてくれるp5.jsの拡張機能(ライブラリ)です。作成したグローバル変数にGUI(グラフィカルユーザーインターフェイス)を結びつけて、あたかもアプリのようにスライダーやメニューで変更できるようにしてくれます。

サンプルファイルを用意したので下記のリンクから開いて、実行ボタンをクリックしてみてください。キャンバスの左上にパラメータが並ぶパレットのようなものが表示されると思います。

p5.guiの使い方

p5.guiを使用するためには以下の6つの手順が必要となります。

  1. p5.guiパネル用グローバル変数を定義
  2. パラメータ化するグローバル変数を定義
  3. p5.guiパネルの作成
  4. スライダー範囲を設定(数値データの場合のみ)
  5. p5.guiパネルにパラメータ追加

p5.guiの特筆すべき点はデータの種類に応じて自動的にパラメータのGUIの種類を変更してくれるというところです。例えば数値データなら自動的にスライダーになりますし、ブール値であればチェックボックスとなります。

ライブラリーについて

p5.guiはライブラリーと呼ばれる拡張機能です。ライブラリを追加すると、標準では実現が難しい処理が簡単に実現できるようになるなど、柔軟に機能を拡張することができます。どんなライブラリがあるかはこちらで確認できます。

Related Posts

No results found

メニュー