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

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

 menu

【Tweakpane】値の書き出し:exportPreset(),JSON.stringify()

GUIで操作した値を書き出す方法をご紹介します。値を書き出しておくと、後で必要になったときに便利です。また、書き出した値を扱いやすいように、JSON形式に変換しておきます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

値の書き出し:exportPreset()

  • exportPreset():値の書き出し
  • JSON.stringify():JSON形式に変換

ここでは、エクスポートボタンを作り、値を書き出す。書き出した値をJSON形式に変換し、コンソールに表示する。

const params = {
  radiusX: 50,
  radiusY: 50,
  radiusZ: 50,
  backgroundColor: '#000000',
  canRotate: true,
};

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

  // 区切り線を入れる
  pane.addSeparator();
  // 色を調整するパネルを追加する
  pane.addInput(params, 'backgroundColor');
  // 回転を操作するパネルを追加する
  pane.addInput(params, 'canRotate');
  // エクスポートボタンを作る
  pane.addButton({
    title: 'Export',
  }).on('click', () => {
    // 調整後の値を取得する
    const results = pane.exportPreset();
    // console.log(results);
    console.log(JSON.stringify(results, null, 2)); //JSON形式に変換。第三引数は、スペースの数
  });
}

function draw(){
  background(color(params.backgroundColor));

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

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

エクスポートすると以下のように出力される。

{
  "radiusX": 50,
  "radiusY": 50,
  "radiusZ": 50,
  "backgroundColor": "#000000",
  "canRotate": true
}

まとめ

  • exportPreset():値の書き出し
  • JSON.stringify():JSON形式に変換

参考サイト