dat.GUI入門 (全10回)
アニメーションなどのパラメーターをインタラクティブに試すことができるJavaScript用のライブラリ、dat.GUIについて学んでいきます。
このレッスンでは datGUI 0.6.5 p5js 0.5.16 を使用しています。
-
#01 dat.GUIを使ってみよう (02:29)
- 公式サイトの確認
- index.htmlの作成
- main.jsの作成
-
#02 コードを書く準備をしよう (01:59)
- dat.GUIの読み込み
- p5.jsの読み込み
-
#03 簡単なアニメーションを作ろう (02:36)
- 直方体の描画
- 回転角の設定
-
#04 パネルの基本操作をおさえよう (01:26)
- dat.GUIパネルの表示
- パネルの操作方法の確認
-
#05 刻み値､最小値､最大値を指定してみよう (02:46)
- 刻み値、最大値、最小値の設定
- 動作確認
-
#06 セレクトボックスを使えるようにしよう (01:19)
- セレクトボックスの表示
- ラベルの設定
-
#07 カラーピッカーを表示させてみよう (02:15)
- 塗りパネルの表示
- 線パネルの表示
-
#08 チェックボックスを表示させよう (01:26)
- チェックボックスの表示
- 動作確認
-
#09 イベントを仕込んでみよう (02:02)
- メソッドの設定
- onChange()
- onFinishChange()
-
#10 パネルをフォルダに格納してみよう (01:30)
- パネルのフォルダ分け
- open()
補足情報 必要となる知識について
今回のレッスンについては以下も参考にしてみてください。
・JavaScript入門 (全24回)
https://dotinstall.com/lessons/basic_javascript_v2
・p5.js入門 (全14回)
https://dotinstall.com/lessons/basic_p5js