Tweakpane入門 (全9回)
パラメータ調整用のライブラリであるTweakpaneについて基本的な使い方を見ていきます。
このレッスンでは Tweakpane 1.0.4 / p5.js 0.7.3 / JavaScript (ES2017) を使用しています。
-
#01 Tweakpaneを使ってみよう (03:00)
- 概要の説明
- 公式サイト
- index.htmlの作成
-
#02 p5.jsを導入しよう (02:57)
- p5.jsの読み込み
- アニメーションの実装
-
#03 パラメーターを調整してみよう (02:57)
- tweakpaneの読み込み
- addInput()
-
#04 値の範囲を制限してみよう (02:17)
- min, max
- step
- options
-
#05 色を調整してみよう (01:55)
- パラメータの追加
- 色の調整
-
#06 チェックボックスを追加しよう (01:21)
- パラメータの追加
- チェックボックスの追加
-
#07 フォルダを追加してみよう (01:33)
- addFolder()
- addSeparator()
-
#08 ボタンを追加してみよう (01:42)
- addButton()
- refresh()
-
#09 調整した値を書き出してみよう (02:10)
- exportPreset()
- JSON.stringify()
補足情報 p5.jsのレッスンについて
p5.jsの詳細については以下のレッスンを参照してください。
・p5.js入門 (全14回)
https://dotinstall.com/lessons/basic_p5js