Tweakpane

ボタンを追加し、クリックで値を変更できるようにしていきます。ボタンの追加とボタンがクリックされたときの処理を書きます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 ボタンの追加:addButton() まとめ 参考サイト ボタンの追加:addButton() addButton():ボタンの追加 refresh():ペインの更新 ここでは、立体のY軸方向の大きさをボタンでランダムに変更する。変更した値をrefresh()で、ペインのY軸のスライダーと数値に反映させる。 const params = { radiusX: 50, radiusY: …

入力項目がたくさん増えると分かりにくくなります。そのため、入力項目をフォルダ毎に分けて、グループ分けします。視覚的に分かりやすくなるように、区切り線も使います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 フォルダでグルーピングする:addFolder() まとめ 参考サイト フォルダでグルーピングする:addFolder() ペインにフォルダを追加 フォルダに入力項目を追加 適当なところで区切り線を引く:addSeparator() ここでは、サイズ用のフォルダ(sizeFolder)を用意する。sizeFolderに、radiusX、radi…

チェックボックスを追加して、立体の回転を操作していきます。チェックボックスの「オン」と「オフ」で、回転するしないを操作します。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 真偽値(true or false) まとめ 参考サイト 真偽値(true or false) 真偽値を持つプロパティは、チェックボックスとして表示される。回転を操作する処理を追記する。 const params = { radiusX: 50, radiusY: 50, radiusZ: 50, canRotate: true, //回転するかどうかの真偽値 }; funct…

色の値を「数値」と「カラーピッカー」で入力できるようにします。今回は、背景色を変更することで、色の調整方法を見ていきます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 色の調整 まとめ 参考サイト 色の調整 paramsオブジェクトに色を表す書き方(rgbや16進数)で色を指定すると、数値とカラーピッカーで値を入力できるようになる。paramsオブジェクトに色を定義する方法はいくつかあるようなので、詳細はリファレンスを参照。 const params = { radiusX: 50, radiusY: 50, radiusZ: 50, backg…

パラメータ調整用のライブラリであるTweakpanをp5.jsと組み合わせて使います。パラメータの値の変更が、即座に反映されるので、作業の効率化になります。今回は、Tweakpaneの導入までの内容を記します。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 Tweakpaneとは Tweakpaneのイメージ Tweakpaneの導入 下準備(立体の表示) まとめ 参考サイト Tweakpaneとは パラメータ調整用のGUI。インタラクティブに値を変えることができるので、シミュレーションやジェネラティブデザインをするときに便利なライブラリ。 公式サ…