Tweakpane|色の調整

色の値を「数値」と「カラーピッカー」で入力できるようにします。今回は、背景色を変更することで、色の調整方法を見ていきます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

色の調整
まとめ
参考サイト

色の調整

paramsオブジェクトに色を表す書き方(rgbや16進数)で色を指定すると、数値とカラーピッカーで値を入力できるようになる。paramsオブジェクトに色を定義する方法はいくつかあるようなので、詳細はリファレンスを参照。

const params = {
  radiusX: 50,
  radiusY: 50,
  radiusZ: 50,
  backgroundColor: '#000000',  //背景色(16進数)
};

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, 'backgroundColor');
}

function draw(){
  // 背景色のパラメータ
  background(color(params.backgroundColor));
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);

  noFill();
  stroke(255);
  // 立体のパラメータ
  ellipsoid(params.radiusX, params.radiusY, params.radiusZ);
}