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

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

 メニュー

【Tweakpane】チェックボックスの追加(真偽値を扱う)

チェックボックスを追加して、立体の回転を操作していきます。チェックボックスの「オン」と「オフ」で、回転するしないを操作します。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

真偽値(true or false)

真偽値を持つプロパティは、チェックボックスとして表示される。回転を操作する処理を追記する。

const params = {
  radiusX: 50,
  radiusY: 50,
  radiusZ: 50,
  canRotate: true,  //回転するかどうかの真偽値
};

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', {
    step: 10,
    min: 0,
    max: 100,
  });
  pane.addInput(params, 'radiusZ', {
    options: {
      small: 10,
      medium: 50,
      large: 100,
    }
  });
  // ペインにパラメータの情報(回転するかどうか)をセット
  pane.addInput(params, 'canRotate');
}

function draw(){
  background(0);

  // 回転を操作する
  if(params.canRotate){
    rotateX(frameCount * 0.01);
    rotateY(frameCount * 0.01);
  }

  noFill();
  stroke(255);
  ellipsoid(params.radiusX, params.radiusY, params.radiusZ);
}

まとめ

  • 真偽値を持つプロパティは、チェックボックスとして表示される。
  • 回転を操作する処理を追記する

参考サイト