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

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

 menu

【Tweakpane】ボタンの追加:addButton(),refresh()

ボタンを追加し、クリックで値を変更できるようにしていきます。ボタンの追加とボタンがクリックされたときの処理を書きます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

ボタンの追加:addButton()

  • addButton():ボタンの追加
  • refresh():ペインの更新

ここでは、立体のY軸方向の大きさをボタンでランダムに変更する。変更した値をrefresh()で、ペインのY軸のスライダーと数値に反映させる。

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

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.addButton({
    title: 'Randomize width',
  }).on('click', () => {  //ボタンクリック時の処理
    params.radiusY = Math.random() * 100;
    pane.refresh(); // ペインを更新する
  });
  sizeFolder.addInput(params, 'radiusY', {
    step: 10,
    min: 0,
    max: 100,
  });
  sizeFolder.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);
}

まとめ

  • addButton():ボタンの追加
  • refresh():ペインの更新

参考サイト