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

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【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);
}

まとめ

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

参考サイト