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

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

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

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

Tweakpane

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

真偽値(true or false)
まとめ
参考サイト

真偽値(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);
}

まとめ

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

参考サイト

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

Tweakpane

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