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

2018年1月16日

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

3分動画でマスターできる、初心者向けプログラミング学習サイトです。

ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト