ドットインストール - 3分動画でマスターできるプログラミング学習サービス

dat.GUI入門

アニメーションなどのパラメーターをインタラクティブに試すことができるJavaScript用のライブラリ、dat.GUIについて学んでいきます。

このレッスンはアーカイブされました

このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。

#01 dat.GUIを使ってみよう (02:29)
- 公式サイトの確認
- index.htmlの作成
- main.jsの作成
#02 コードを書く準備をしよう (01:59)
- dat.GUIの読み込み
- p5.jsの読み込み
#03 簡単なアニメーションを作ろう (02:37)
- 直方体の描画
- 回転角の設定
#04 パネルの基本操作をおさえよう (01:27)
- dat.GUIパネルの表示
- パネルの操作方法の確認
#05 刻み値、最小値、最大値を指定してみよう (02:47)
- 刻み値、最大値、最小値の設定
- 動作確認
#06 セレクトボックスを使えるようにしよう (01:19)
- セレクトボックスの表示
- ラベルの設定
#07 カラーピッカーを表示させてみよう (02:15)
- 塗りパネルの表示
- 線パネルの表示
#08 チェックボックスを表示させよう (01:27)
- チェックボックスの表示
- 動作確認
#09 イベントを仕込んでみよう (02:03)
- メソッドの設定
- onChange()
- onFinishChange()
#10 パネルをフォルダに格納してみよう (01:31)
- パネルのフォルダ分け
- open()

今回のレッスンについては以下も参考にしてみてください。