ほとんどチュートリアルやってないのに cables.gl なら簡単にできた！初めて作ったコンテンツをさらします
ナカジ(@cp_nakajun)です。
前回、「ブラウザで作るノードベース WebGlビジュアルクリエイティブ環境」のcables.glをご紹介しました。
cablesは個人的な所感ですが制作画面がわかりやすい印象で、と言うのも
cablesはVVVVとToollからインスピレーションを受けていると公式サイトに記述があります。
Cables inspiration
cables is inspired by the excellent desktop tools tooll and vvvv.
仮にVVVVやToollに触れたことがなくても、他のノードベースツールを利用したことがある人は慣れた感覚で使えると思います。
また、初めてノードベースツールに触れるとしても、これまで実績のあるツールを周到しているので恐れることはないと思います。
僕は普段あたらしいこの手のツール（環境）を使ってみようとすると先ずはUIと操作方法の理解が必要なこともありチュートリアルをやってみるのですが
今回、まずは「ほぼノリ」でコンテンツを作ってみたので『ちょっと見てもらえたらなぁ～」
うんちく長いな…
伝えたいことは大それたコンテンツではないけど
「僕ぐらいのレベルでも簡単にこんなの作れるcablesっておもしろそうじゃない？どうですか？」
です。
cables.glで初めてつくった
こんな感じのものを作ってみました。
コンセプトは、せっかくWebベースだからと思い「自分のWEBサイト＆ちょっとしたcablesのデモ」です。
まっ、うまくいってないとこもありますが、以下のURLで公開しているので触ってみて頂けたら嬉しいです。
※iOSなどスマホブラウザだと正しく動きません。
ちょっとしたインタラクティブ機能を持ってます。
- ロゴをクリックするとコンテンツが切り替わります
- コンテンツはマウスでぐりぐり動かせます
今現在、一応４種類のコンテンツがありますので簡単に紹介します。
1.トップ ロゴ表示コンテンツ
最初に表示されるコンテンツです。
- ロゴがマウスのY軸位置に応じて光る
- ロゴの色は時間に応じて変化する
このコンテンツは他のコンテンツにも反映されます。
2.GLSL sandboxの移植テスト
GLSL Sandboxを移植させて頂きました。
お借りしたGLSLのコードは
こちら(http://glslsandbox.com/e#41143.0)
これは…時間を取得して動かすことしかできませんでした、です。
3.ブログの紹介
当ブログの紹介コンテンツです。
英語にしたのは、日本人だからなのか？僕の感覚ではこういう時のこの感じは英語の方がカッコいいかな、と
- センターホイール、右or左ドラッグしたままマウス移動
- スクリーンショットをクリックで別ウインドウでブログを表示
4.トライアングルコンテンツ
前にToollのチュートリアルをやった時の感じ、同じような感じでやってみました。
インタラクティブはマウス動作だけです。
- センターホイール、右or左ドラッグしたままマウス移動
と、本当に簡単なコンテンツでした。
ちょっと傾向に偏りありますし、全然表現できてない機能とかポテンシャルもたくさんありますけど
少しでも魅力的に感じてもらえてたら嬉しいです。
