パラメータを調整できるように入力フォームを作ります。数値を入力して値を指定できるようになります。これができると、インタラクティブに値を変更できるようになります。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。
パラメーターの調整:addInput()
ここでは、パラメータの値の変更を立体に反映させる。実装内容は以下の通り。
- パラメータの情報を持つparamsオブジェクトの定義
- ペイン(GUI用の領域)の生成
- addInput()で、ペインにパラメータの情報をセット。
- 図形のパラメータに、ユーザーから入力されたパラメータを設定。
// paramsオブジェクトの定義 const params = { radiusX: 50, radiusY: 50, radiusZ: 50, }; function setup(){ createCanvas(200, 200, WEBGL); // ペインの生成 const pane = new Tweakpane.Pane({ title: 'Parameters', //ペインにタイトルを設定 }); // ペインにパラメータの情報をセット pane.addInput(params, 'radiusX'); pane.addInput(params, 'radiusY'); pane.addInput(params, 'radiusZ'); } function draw(){ background(0); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); noFill(); stroke(255); // ユーザーから入力されたパラメータに置き換える ellipsoid(params.radiusX, params.radiusY, params.radiusZ); }
まとめ
- addInput()で、ペインにパラメータの情報をセットする。
ユーザーからの入力値を受け取り、インタラクティブに変更を反映できるようになりました。しかし、値の範囲を設定していないので、現状ではマイナスの値が指定できてしまいます。今後、値の制限について書いていきます。
