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

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

 メニュー

【Tweakpane】パラメータの調整

パラメータを調整できるように入力フォームを作ります。数値を入力して値を指定できるようになります。これができると、インタラクティブに値を変更できるようになります。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

パラメーターの調整:addInput()

ここでは、パラメータの値の変更を立体に反映させる。実装内容は以下の通り。

  • パラメータの情報を持つparamsオブジェクトの定義
  • ペイン(GUI用の領域)の生成
  • addInput()で、ペインにパラメータの情報をセット。
  • 図形のパラメータに、ユーザーから入力されたパラメータを設定。
// paramsオブジェクトの定義
const params = {
  radiusX: 50,
  radiusY: 50,
  radiusZ: 50,
};

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

  // ペインの生成
  const pane = new Tweakpane.Pane({
    title: 'Parameters',  //ペインにタイトルを設定
  });
  // ペインにパラメータの情報をセット
  pane.addInput(params, 'radiusX');
  pane.addInput(params, 'radiusY');
  pane.addInput(params, 'radiusZ');
}

function draw(){
  background(0);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);

  noFill();
  stroke(255);
  // ユーザーから入力されたパラメータに置き換える
  ellipsoid(params.radiusX, params.radiusY, params.radiusZ);
}

まとめ

  • addInput()で、ペインにパラメータの情報をセットする。

ユーザーからの入力値を受け取り、インタラクティブに変更を反映できるようになりました。しかし、値の範囲を設定していないので、現状ではマイナスの値が指定できてしまいます。今後、値の制限について書いていきます。

参考サイト