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

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

 メニュー

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

Tweakpane

【Tweakpane】Tweakpaneの記事まとめ

当ブログで紹介したTweakpaneの記事を一覧にまとめました。 Tweakpaneの記事まとめ Tweakpaneとは Tweakpaneの記事まとめ 【Tweakpane】Tweakpaneの導入 【Tweakpane】パラメータの調整 【Tweakpane】値の範囲の制限:min,max,step,options 【Tweakpane】色の…

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

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

【Tweakpane】ボタンの追加:addButton(),refresh()

ボタンを追加し、クリックで値を変更できるようにしていきます。ボタンの追加とボタンがクリックされたときの処理を書きます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 ボタンの追加:addButton() ま…

【Tweakpane】グルーピング:addFolder()

入力項目がたくさん増えると分かりにくくなります。そのため、入力項目をフォルダ毎に分けて、グループ分けします。視覚的に分かりやすくなるように、区切り線も使います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考…

【Tweakpane】チェックボックスの追加(真偽値を扱う)

チェックボックスを追加して、立体の回転を操作していきます。チェックボックスの「オン」と「オフ」で、回転するしないを操作します。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 真偽値(true or false…

【Tweakpane】色の調整

色の値を「数値」と「カラーピッカー」で入力できるようにします。今回は、背景色を変更することで、色の調整方法を見ていきます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 色の調整 まとめ 参考サイ…

【Tweakpane】値の範囲の制限:min,max,step,options

入力値の範囲を制限する方法を書きます。前回は、数値の入力のみでした。今回からは、それ以外の入力(スライダー、プルダウンメニュー)について書きます。値の範囲の制限と合わせて確認してください。なお、この記事はドットインストールというプログラミン…

【Tweakpane】パラメータの調整

パラメータを調整できるように入力フォームを作ります。数値を入力して値を指定できるようになります。これができると、インタラクティブに値を変更できるようになります。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考…

【Tweakpane】Tweakpaneの導入

パラメータ調整用のライブラリであるTweakpanをp5.jsと組み合わせて使います。パラメータの値の変更が、即座に反映されるので、作業の効率化になります。今回は、Tweakpaneの導入までの内容を記します。なお、この記事はドットインストールというプログラミ…

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