cables.gl で遊ぶために必要な「超基礎」だけをサクっとまとめてみた!【インターフェース(UI)編】

投稿日:2019-05-18



ナカジ(@cp_nakajun)です。

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

先に公式のドキュメント(英語)を紹介しておきますね。

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

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

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


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



今回はインターフェース面(UI)を取り上げます。

cables.gl 新規プロジェクトの作成・保存

先の記事でも書きましたが、今この記事を書いている時点でcables.glはベータ中です。

ベータテスターの招待に申し込み、無事ログインができると下記のようなページにアクセスします。



「Create」タブから「Empty New Project」で新規プロジェクトが作成され、下記のようなcablesの制作画面に遷移します。



画面上部、真ん中あたりの「歯車マーク」をクリックするとプロジェクト名を変更したりできる設定画面が開きます。


サイドバーのカスタマイズ

cables.glは左にあるサイドバーを自分好みにカスタマイズすることができます。

方法はサイドバーの一番下(左下)にある「⋮」をクリックするとウインドウが開きます。



ドラック&ドロップで追加したり、並び順を変更することができます。

cables ユーザーインターフェース

cablesの制作画面です。


  1. パッチングスペース
  2. プレビュースペース
  3. パラメータースペース
  4. タイムライン

この名称が公式ではありませんが、役割的にはこんな感じです。

各スペースの大きさは境目をドラックすることで変更することができます。

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

①のパッチングスペースでオペレータをつなぎ
③パラメータースペースで各オペレーターが持つパラメーターを調節します。

②のプレビュースペースで制作しているもののアウトプットを確認しながら上記の作業を繰り返し制作していきます。

④のタイムラインは各パラメータの左にある「時計マーク」をクリックするとそのパラメータをタイムラインに設定できます。

今回はここまでです。

サポート募集中

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



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

ウェブツール

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