cables.gl で遊ぶために必要な「超基礎」だけをサクっとまとめてみた!【制作・操作方法編】

投稿日:2019-05-18



ナカジ(@cp_nakajun)です。

前回に続きcables.glで遊ぶための第一歩をお伝えしようと思います。

公式のドキュメント(英語)

これからクリエイティブツールを使って何かを作ってみたいというような方にも
cables.glの雰囲気を知って頂くことで踏み出す一歩の一助となればうれしいです。

cables.glって何??という方は以下も併せてご覧いただけたらと思います。

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


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



今回はcablesでの制作と操作方法を取り上げます。

cables.glで制作する

前回の記事でも書きましたが

cablesはオペレータという特定の役割を持つボックスを線でつなぐことで処理(動作)をプログラミングし制作していきます。

なのでまずはパッチングスペースにオペレーターを置く(配置)するのですが

上部メニューバーの「op」→「add」。もしくは左サイドバーの「add op」を押します。



するとオペレーター選択ダイアログが開きます。



ここでオペレーターを選び、クリックするかEnterキーで配置します。

オペレーター選択ダイアログをみるとcablesには相当量のオペレーターが用意されています。
カテゴリーごとに分けられてますし、色でも区別されています。

cables.glでの制作は極端な話オペレーターの結線とパラメータの調整でしかないので、オペレーター選択ダイアログのショートカット[Tab]or[Esc]は覚えてしまいましょう!!

キーボードショートカット

ショートカットに触れたのでここでその他の最初に覚えてしまうと便利なものを紹介します。

  1. [esc] or [tab]:オペレーター追加 / オペレーター追加ダイアログ
  2. [space]:タイムラインのスタートとストップ
  3. [space] + mouse drag:パッチエリアの移動(= 右クリックドラック)
  4. [a]:選択中のオペレーターを水平に揃える
  5. [alt]+[a]:選択中のオペレーターを垂直に揃える
  6. [d]:選択中のオペレーターを無効にする
  7. :パッチホーム(センター)に移動
  8. [f]:レンダリングの流れを表示する

マウス操作系

ついでにパッチングにあたってのマウス操作も

  • 左クリック:オペレーター(選択・パッチング・複数選択・追加)etc…
  • 中ボタンホイール:ズームイン・ズームアウトアウト
  • 右クリック:パッチエリアの移動・結線解除

パッチング方法と便利技

さて、ここで簡単なパッチングの方法と便利技を紹介します。

※以降のgifは先の公式のドキュメントから引用させて頂きました。

先ずはパッチングの方法です。

以下のGifがcablesでの最小構成になると思います。



[circle]オペレーターにより円を表示させるのですが、cablesでは[MainLoop]オペレーターぶら下げることでレンダリングされ表示されます。

Gifは[MainLoop]を配置し、アウトプットをドラックすることでオペレーター選択ダイアログを表示し[circle]を結線した状態で配置する方法ですが

[MainLoop]と[circle]をそれぞれ配置した後で、[MainLoop]のアウトプットから[circle]のインプットにつなぐ、でもOKです。

次に便利技を2つ紹介します。


既に結線されているオペレータの間に別のオペレーターを入れたい場合は線の真ん中の円のにドラック&ドロップ。



逆にオペレータを取り除きたい場合はドラックして振る。

あと、マウス操作のところにも書きましたが

単純に結線を解除したい場合は「線の真ん中の円」を右クリックすると解除されます。

さて、「超基礎」はとりあえず以上です。

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

クリエイティブコーディング系 講座


ウェブツール

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