ビジュアルプログラミング言語processingをHUGOブログに埋め込む

processingとは視覚的表現などを簡単にできることを目指したC言語ライクなプログラミング言語です。 C言語などと異なり、描画のための関数などが最初から準備されており、プログラミングに詳しくないアーティストや子供でも視覚的作品を作ることができます。

今回はprocessingのjavascript移植版であるp5.jsをHUGOブログに埋め込んで見たいと思います。

ショートコード

静的サイトジェネレーターであるHUGOにはショートコードという機能があり、事前に設定したhtmlを任意の位置に展開することができます。また、展開先にパラメータを渡すこともできます。今回はこのショートコードを使ってp5.jsを実行する環境を作りました。

<div class="p5js">
    <iframe srcdoc="  <head>
        <script src=&quot https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js&quot></script>
        <script src=&quot https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js&quot></script>
        <link rel=&quotstylesheet&quot type=&quottext/css&quot href=&quotstyle.css&quot>
        <meta charset=&quotutf-8&quot />
    
      </head>
      <body>
        <script src=&quot/p5js/{{.Get 0}}.js&quot></script>
      </body>"
      width="100%" height="400px"></iframe>
</div>

このショートコードはiframeにsrcdocでページの全体を文字列として渡しています。パラメーターとしてファイル名を渡すことで、/p5jsディレクトリ以下のp5.jsファイルを実行できます。

使い方

使用しているテーマ内のlayouts/partilas/に上記のp5js.htmlを配置します。これでショートコードp5jsが定義され、使えるようになりました。

あとはブログの任意の個所で"{ {< p5js (ファイル名).js >} }"と記述すれば/p5jsディレクトリに配置されてある(ファイル名).jsが実行されます。 (二つの{の間のスペースは削除してください。)

具体例

test.js

function setup() {
    var myCanvas = createCanvas(windowWidth, windowHeight);
    myCanvas.class('backgroundsketch');
}

function mouseMoved() {
	ellipse(mouseX, mouseY, 100, 100);
}

参考文献

p5.jsのサイトへの埋め込みかた Embedding p5.js
p5.jsについて From p5.js to Web Dev
HUGOのショートコードの作り方 Create Your Own Shortcodes - HUGO

ブログにp5.jsを埋め込む

TOC

ビジュアルプログラミング言語processingをHUGOブログに埋め込む

ショートコード

使い方

具体例

参考文献

FEATURED TAGS