元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

» HTML入門のまとめはこちらです。

【Tweakpane】グルーピング:addFolder()

Tweakpane

入力項目がたくさん増えると分かりにくくなります。そのため、入力項目をフォルダ毎に分けて、グループ分けします。視覚的に分かりやすくなるように、区切り線も使います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

フォルダでグルーピングする:addFolder()
まとめ
参考サイト

フォルダでグルーピングする:addFolder()

ペインにフォルダを追加
フォルダに入力項目を追加
適当なところで区切り線を引く:addSeparator()

ここでは、サイズ用のフォルダ(sizeFolder)を用意する。sizeFolderに、radiusX、radiusY、radiusZを格納して、グループ化する。backgroundColorとcanRotateは、今まで通りペインに配置する。ちなみに、フォルダは折りたためる。

const params = {
  radiusX: 50,
  radiusY: 50,
  radiusZ: 50,
  backgroundColor: '#000000',
  canRotate: true,
};

function setup(){
  createCanvas(300, 300, WEBGL);

  const pane = new Tweakpane.Pane({
    title: 'Parameters',
  });

  // サイズフォルダを作る
  const sizeFolder = pane.addFolder({
    title: 'Size',
  });
  // サイズフォルダに入力項目を追加
  sizeFolder.addInput(params, 'radiusX', {
    min: 0,
    max: 100,
  });
  sizeFolder.addInput(params, 'radiusY', {
    step: 10,
    min: 0,
    max: 100,
  });
  sizeFolder.addInput(params, 'radiusZ', {
    options: {
      small: 10,
      medium: 50,
      large: 100,
    }
  });

  // 区切り線を入れる
  pane.addSeparator();

  //ペインに色調整の入力フォームを追加
  pane.addInput(params, 'backgroundColor');
  //ペインに回転操作の入力フォームを追加
  pane.addInput(params, 'canRotate');
}

function draw(){
  background(color(params.backgroundColor));

  // 回転を操作する
  if(params.canRotate){
    rotateX(frameCount * 0.01);
    rotateY(frameCount * 0.01);
  }

  noFill();
  stroke(255);
  ellipsoid(params.radiusX, params.radiusY, params.radiusZ);
}

まとめ

フォルダに入力項目を格納してグルーピングする
必要に応じて、区切り線を引く

参考サイト

Tweakpane入門 (全9回) - プログラミングならドットインストール

Tweakpane

» HTML入門のまとめはこちらです。