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

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

» HTML入門のまとめはこちらです。

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

Tweakpane

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

ボタンの追加:addButton()
まとめ
参考サイト

ボタンの追加: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():ペインの更新

参考サイト

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

Tweakpane

» HTML入門のまとめはこちらです。