皆さまごきげんよう。
気づけば年の瀬、すっかり寒くなりましたね。このサイトでも冬恒例の雪を降らせ始めました♪ jsファイルを読み込ませるだけで簡単に実装出来るんですよ。jQueryで雪を降らせてみよう
さて本日は、webGLで何か作ってみようと思った時に、実験をもっと簡単にするためのパラメーター調整GUI、『dat.GUI』を使ってみて、とても便利だったのでその導入方法の備忘録です。
目次
1.dat.guiとは
3Dシーンを作成するために、アニメーションや色などのプロパティを調整したいことはよくありますが、適切な値になるまで何度もコードを書き換えるのは実に大変な作業です。
しかし、この作業を簡単に行えるライブラリがありました！それが、コード内の変数の値を変更するためのユーザーインターフェース、dat.GUIです。
2.htmlファイルでライブラリを読み込む
bodyタグまたはheadタグの中にdat.guiのライブラリを読み込む記述をします。
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="js/main.js"></script>
</body>今回は画像をアニメーションさせるので、dat.GUIと共にp5.jsのライブラリも一緒に読み込んでおきます。
p5.jsはProcessingのJavascript版で、ブラウザ上でリッチなアニメーションを動作させることが出来るライブラリです。
(p5.jsについてはまた改めて書く予定です。)
3.変化する値を持つjavascriptオブジェクトを用意する
大まかな流れを順番に説明します。
今回は、変化する値を持つオブジェクトに立方体を選びました。dat.GUIを利用して以下の項目を変更できるようにしてみようと思います。
- 立方体の幅（w）、高さ（h）、奥行き（d）
- 線の色
- 塗りの色
- 線の表示、非表示
- インフォメーションの表示
先ずはこちらのDEMOをご覧ください。
See the Pen three.js-dat.GUI by kowalski k (@polkadotsandsky) on CodePen.
(jsのコメントアウトにて詳しく説明しておりますので参考にしてみて下さいね)
さて、これら値を変化させたい項目を、最初の関数の中でデフォルト値を定義しておきます。ここで言うとfunction myCube()の部分です。
次にdat.GUIの設定で、これらのプロパティの範囲を設定します。function setup()の部分です。
最後のfunction draw()で立方体を描画しています。
これで、簡単に値を変更できるユーザーインターフェースが表示されるようになりました！いろんな表示方法を試してみたので、ちょっと統一感が無いですが(笑)
dat.GUI入門という講座がドットインストールにありますので、じっくり取り組みたい方はぜひ！
4.クリエイティブコーディングについて少々
毎年のように”今年はVR元年だ！”と言われて久しいですが、やはりまだ（あのヘッドセットのゴツさのせいか？）イマイチ世間に浸透していないような気がします。
しかし、来たるべきVR時代に自分の作ったVR空間に入りたい！という夢があり(笑)、3D空間はthree.js、processing、p5.js あたりで表現出来そうじゃないか？と思いまして、アートなフログラミング、「クリエイティブコーディング」をかじり始めた今日この頃です。
元々動きのあるものやアートが好きなこともあり、おなじみのjavascriptで楽しみながら勉強も出来るなんて一石二鳥じゃないかと。
で、勢いでオライリーの分厚い本、『初めてのthree.js』を買ってしまったので(^^; 、見よう見まねでthree.jsでひとつ作ってみましたよ。
初めての、という割にめちゃ難しいんですけど、なんであれ動き始めると楽しいんですよこれが( ^ω^ )
See the Pen three.js fog by kowalski k (@polkadotsandsky) on CodePen.
クリエイティブコーディングは、ちょっとしたパラメーターの変化で思ってもみなかった美しいアートが偶然出来るんです。クリエイティブコーディングでなくても、部品などを作っていて値を変えて実験したい時もあるでしょう。
そんな時にとても便利なdat.GUI、ぜひ一度お試しくださいませ (^^)/