dat.GUI入門

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

#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()

2018年1月16日

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

ギャラリー

12/05

最終更新日: 2018年1月16日 (691日前)
バージョン情報: datGUI 0.6.5 p5js 0.5.16
関連キーワード (7): 基礎講座 (283) 初心者向け (286) HTML (69) CSS (75) JavaScript (127) p5.js (3) 開発ツール (51)

3分動画でマスターできるプログラミング学習サービスです。