投稿日:2019-12-22ナカジ(@cp_nakajun)です。僕の勝手なイメージかもしれませんがWEBサイトの背景アニメーションと言えば、javascriptなイメージがあります。僕としてはp5jsで何か作ろうかと思っていたのですが、ふとcables.glを思い出したので試してみることにしました。cables.glについては以下の記事を読んでいただけたらと思います。ビジュアルクリエイティブ環境!個人的には大注目!cables.glコンテンツをWEBの背景に設定するまずは背景に設定するコンテンツをcables.glで作ります。cables.glでのコンテンツの作り方や使い方は本記事では割愛します。以下をご参照ください。以前つくったものを使いまわします。File」にして書き出しという手順で書き出します。書き出したZIPファイルを展開すると中に「index.html」と「js」フォルダーがあります。「index.html」をテキストエディターで開き(以下画像の部分)canvasタグの部分と2つのscriptタグ部分をコピーコピーします。それぞれの部分を「埋め込みたいhtml」に貼り付けます。</script>また、先に書き出された「js」フォルダーを「埋め込みたいhtml」があるプロジェクトフォルダーに移します。「埋め込みたいhtml」が読み込んでいるCSSファイルに以下の記述を追加します。/*canvasを上に固定*/}まとめということをやったところ一応以下のスクリーンショットのようにWEBサイトの背景に設定することができました。今回は「やってみた」というところなので、また細かい部分などのノウハウについては発見したら共有します。サポート募集中この記事はお役に立てましたか。ご馳走いただけたら励みになります。クリエイティブ環境PureDataProcessingTidalCyclesOpenFrameworksMAX(max/msp)ウェブツール機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。運営者:ナカジインタラクティブ映像の仕事してました。現在はメディアアート、クリエイティブコーディング、デジタルアートなどの表現活動に興味を持つ人に向けて「制作環境やツール」を中心にエバンジェリスト的な活動をしています。日本のメディアアーティスト大国化に貢献したい。KAHNA】2024-05-25ローバーミニのエンジン音とマフラー音を録音する2024-05-06宮ヶ瀬ダムに行く途中の景色がいいカフェ【仏果堂(ぶっかどう)】ウェブツールにゅ〜ギア。