【Tweakpane】値の範囲の制限:min,max,step,options - 元Webデザイナー兼コーダーの備忘録

入力値の範囲を制限する方法を書きます。前回は、数値の入力のみでした。今回からは、それ以外の入力(スライダー、プルダウンメニュー)について書きます。値の範囲の制限と合わせて確認してください。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

値の範囲の制限:min, max
ステップ数:step
リストから値を選択:options
まとめ
参考サイト

値の範囲の制限:min, max

addInput()内で、その値がとれる最小値と最大値を設定する。

min:最小値を設定
max:最大値を設定

const params = {
  radiusX: 50,
  radiusY: 50,
  radiusZ: 50,
};

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

  const pane = new Tweakpane.Pane({
    title: 'Parameters',
  });
  // 値の範囲を制限する。最小値、最大値を設定する。
  pane.addInput(params, 'radiusX', {
    min: 0,
    max: 100,
  });
  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);
}

ステップ数:step

step:ステップ数(刻み数)を設定する。いくつ刻みで値を変更するのかを決める。

const params = {
  radiusX: 50,
  radiusY: 50,
  radiusZ: 50,
};

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

  const pane = new Tweakpane.Pane({
    title: 'Parameters',
  });
  // 値の範囲を制限する。最小値、最大値を設定する。
  pane.addInput(params, 'radiusX', {
    min: 0,
    max: 100,
  });

  // step数を設定する。いくつ刻みにするかを設定する。
  pane.addInput(params, 'radiusY', {
    step: 10,
    min: 0,
    max: 100,
  });

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

リストから値を選択:options

options:値に名前を付けて、複数の中から選択できるようにする。

const params = {
  radiusX: 50,
  radiusY: 50,
  radiusZ: 50,
};

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

  const pane = new Tweakpane.Pane({
    title: 'Parameters',
  });
  // 値の範囲を制限する。最小値、最大値を設定する。
  pane.addInput(params, 'radiusX', {
    min: 0,
    max: 100,
  });

  // stepを設定する。いくつ刻みにするかを設定する。
  pane.addInput(params, 'radiusY', {
    step: 10,
    min: 0,
    max: 100,
  });

  // リストから値を選択するようにする。
  pane.addInput(params, 'radiusZ', {
    options: {
      small: 10,
      medium: 50,
      large: 100,
    }
  });
}

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

  noFill();
  stroke(255);
  // パラメータを置き換える
  ellipsoid(params.radiusX, params.radiusY, params.radiusZ);
}

まとめ

値の範囲の制限
- min:最小値を設定
- max:最大値を設定
ステップ数
- step:ステップ数を設定
リストから値を選択
- options:複数の値から選択

入力の種類は、スライダーとプルダウンメニュー以外もあります。気になる方は、リファレンスを確認してください。

参考サイト

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

Tweakpane