ほとんどチュートリアルやってないのに cables.gl なら簡単にできた!初めて作ったコンテンツをさらします

投稿日:2019-05-12



ナカジ(@cp_nakajun)です。

前回、「ブラウザで作るノードベース WebGlビジュアルクリエイティブ環境」のcables.glをご紹介しました。

【 cables.gl 】完全ブラウザベースのノードベース ビジュアルクリエイティブ環境!個人的には大注目!



cablesは個人的な所感ですが制作画面がわかりやすい印象で、と言うのも

cablesはVVVVToollからインスピレーションを受けていると公式サイトに記述があります。

Cables inspiration
cables is inspired by the excellent desktop tools tooll and vvvv.

仮にVVVVやToollに触れたことがなくても、他のノードベースツールを利用したことがある人は慣れた感覚で使えると思います。

また、初めてノードベースツールに触れるとしても、これまで実績のあるツールを周到しているので恐れることはないと思います。

僕は普段あたらしいこの手のツール(環境)を使ってみようとすると先ずはUIと操作方法の理解が必要なこともありチュートリアルをやってみるのですが

今回、まずは「ほぼノリ」でコンテンツを作ってみたので『ちょっと見てもらえたらなぁ~」

うんちく長いな…

伝えたいことは大それたコンテンツではないけど
「僕ぐらいのレベルでも簡単にこんなの作れるcablesっておもしろそうじゃない?どうですか?」
です。

cables.glで初めてつくった

こんな感じのものを作ってみました。



コンセプトは、せっかくWebベースだからと思い「自分のWEBサイト&ちょっとしたcablesのデモ」です。

まっ、うまくいってないとこもありますが、以下のURLで公開しているので触ってみて頂けたら嬉しいです。
※iOSなどスマホブラウザだと正しく動きません。

www.creative-plus.net

ちょっとしたインタラクティブ機能を持ってます。

  • ロゴをクリックするとコンテンツが切り替わります
  • コンテンツはマウスでぐりぐり動かせます

今現在、一応4種類のコンテンツがありますので簡単に紹介します。

1.トップ ロゴ表示コンテンツ



最初に表示されるコンテンツです。

  • ロゴがマウスのY軸位置に応じて光る
  • ロゴの色は時間に応じて変化する

このコンテンツは他のコンテンツにも反映されます。

2.GLSL sandboxの移植テスト

GLSL Sandboxを移植させて頂きました。

お借りしたGLSLのコードは
こちら(http://glslsandbox.com/e#41143.0)



これは…時間を取得して動かすことしかできませんでした、です。

3.ブログの紹介

当ブログの紹介コンテンツです。

英語にしたのは、日本人だからなのか?僕の感覚ではこういう時のこの感じは英語の方がカッコいいかな、と


  • センターホイール、右or左ドラッグしたままマウス移動
  • スクリーンショットをクリックで別ウインドウでブログを表示

4.トライアングルコンテンツ

前にToollのチュートリアルをやった時の感じ、同じような感じでやってみました。



インタラクティブはマウス動作だけです。

  • センターホイール、右or左ドラッグしたままマウス移動

と、本当に簡単なコンテンツでした。

ちょっと傾向に偏りありますし、全然表現できてない機能とかポテンシャルもたくさんありますけど

少しでも魅力的に感じてもらえてたら嬉しいです。

サポート募集中

この記事はお役に立てましたか。
よかったら、コーヒー ☕ をご馳走いただけたら励みになります。



おすすめのクリエイティブ・コーディング関連カテゴリー

ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します