GUIで操作した値を書き出す方法をご紹介します。値を書き出しておくと、後で必要になったときに便利です。また、書き出した値を扱いやすいように、JSON形式に変換しておきます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。
値の書き出し:exportPreset()
ここでは、エクスポートボタンを作り、値を書き出す。書き出した値を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 }