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

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

 メニュー

【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);
}

まとめ

  • paramsオブジェクトで、色をrgbや16進数で定義する。
  • 色の調整は、数値とカラーピッカーでできる

参考サイト