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タグの部分と２つの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サイトの背景に設定することができました。

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

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