TileUI - A Grid-Tile GUI Panel for Creative Coding

A grid-tile GUI panel with SVG rotary knobs for creative codingクリエイティブコーディングのための SVG ロータリーノブ付きグリッドタイル GUI パネル

npm install @yuske-nakajima/tileui

USAGE使い方

ESM (recommended)ESM（推奨）

import TileUI from '@yuske-nakajima/tileui';

CDN (ESM)

<script type="module">
  import TileUI from 'https://cdn.jsdelivr.net/npm/@yuske-nakajima/tileui/dist/tileui.js';
</script>

CDN (UMD)

<script src="https://unpkg.com/@yuske-nakajima/tileui"></script>
<script>
  const gui = new TileUI();
</script>

EXAMPLES作例

2 COLUMNS2 列

3 COLUMNS3 列

4 COLUMNS4 列

CUSTOM STYLESカスタムスタイル

DOCK (RIGHT DRAWER)ドック（右ドロワー）

Press G to toggle or use the edge buttonG キーで切替、またはエッジボタンを使用

Dock Drawer — Slide-in panel from any edgeドックドロワー — 任意の辺からスライドインするパネル

const gui = new TileUI({
  dock: 'right',
  collapsible: true,
  overlay: true,
  columns: { min: 1, max: 3 },
  title: 'Controls',
  toggleKey: 'g',
});

gui.add(params, 'speed', 0, 100);
gui.addColor(params, 'color');
gui.addBoolean(params, 'enabled');
gui.open();

Try the interactive dock demo with all four directions4 方向のインタラクティブDemoを試す

Go to Demo →Demoへ →