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

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

 メニュー

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

【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形式に変換

参考サイト

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