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]は覚えてしまいましょう！！

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

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

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

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

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

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

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

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

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

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

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

と

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

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

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

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