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

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

 menu

【Tweakpane】値の範囲の制限: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:複数の値から選択

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

参考サイト