WEBサイトの背景を「cables.gl」で作って埋め込む(設定)する方法

投稿日:2019-12-22



ナカジ(@cp_nakajun)です。

僕の勝手なイメージかもしれませんが
WEBサイトの背景アニメーションと言えば、javascriptなイメージがあります。

僕としてはp5jsで何か作ろうかと思っていたのですが、ふとcables.glを思い出したので試してみることにしました。

cables.glについては以下の記事を読んでいただけたらと思います。

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


cables.glコンテンツをWEBの背景に設定する

まずは背景に設定するコンテンツをcables.glで作ります。

cables.glでのコンテンツの作り方や使い方は本記事では割愛します。

以下をご参照ください。

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


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



今回は以前つくったものを使いまわします。



cables.glからエクスポートする

cables.glのメニューから

  • 「Patch」→「Export」
  • Packageを「Single JavaScript File」にして書き出し

という手順で書き出します。




canvasとscriptをコピー

書き出したZIPファイルを展開すると中に「index.html」と「js」フォルダーがあります。

「index.html」をテキストエディターで開き(以下画像の部分)



canvasタグの部分と2つのscriptタグ部分をコピーコピーします。

それぞれの部分を「埋め込みたいhtml」に貼り付けます。

<canvas id="glcanvas" width="100vw" height="100vh"></canvas>
<!-- 上記のcanvasタグ と 以下のscriptタグ -->
<script type="text/javascript" src="js/patch.js"></script>

    <script>
        /**
         * Called when there was a cables error.
         * @param {string} errId - ID of the error, e.g. 'NO_WEBGL' or 'NO_WEBAUDIO' 
         *                         when the browser does not support the used APIs
         * @param {string} errMsg - The error message
         */
        function showError(errId, errMsg) {
            alert('An error occured: ' + errId + ', ' + errMsg);
        }

        function patchInitialized() {
            // You can now access the patch object (CABLES.patch), register variable watchers and so on
        }

        function patchFinishedLoading() {
            // The patch is ready now, all assets have been loaded
        }

        document.addEventListener('DOMContentLoaded', function(event) {
            CABLES.patch = new CABLES.Patch({
                patch: CABLES.exportedPatch,
                prefixAssetPath: '',
                glCanvasId: 'glcanvas',
                glCanvasResizeToWindow: true,
                onError: showError,
                onPatchLoaded: patchInitialized,
                onFinishedLoading: patchFinishedLoading,
            });
        });
    </script>

また、先に書き出された「js」フォルダーを「埋め込みたいhtml」があるプロジェクトフォルダーに移します。

CSSの設定

「埋め込みたいhtml」が読み込んでいるCSSファイルに以下の記述を追加します。

/* Cables BackGround */
#glcanvas{
    position: fixed; /*canvasを固定*/
    top: 0; /*canvasを上に固定*/
}

まとめ

ということをやったところ一応以下のスクリーンショットのようにWEBサイトの背景に設定することができました。



とりあえず今回は「やってみた」というところなので、また細かい部分などのノウハウについては発見したら共有します。

サポート募集中

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



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

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


ウェブツール

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