はてなブログでProcessing.jsを動かす

Processing

ここ数年、仕事でプログラムを書く機会がすっかりなくなってしまったので、せめてもの抵抗にプログラムに関するブログをひっそり始めてみることにしました。パズドラやテラリアに奪われている時間を取り戻すきっかけになればと思います。

トピックは仕事で扱うことの多いWebやグラフィックス関連の話が多くなる予感がします。

ブログ上でProcessing.jsを動かす

最近、子供にプログラムを教える教材としてProcessingを使っているので、さしあたってはProcessingのJavaScript実装であるProcessing.jsを使って、ちょっとした実験なんかをしてみようと思います。

はてなブログのMarkdown記法ではHTMLタグが直接使えるので、下準備としてブログ上でProcessing.jsを動かしてみます。

Processing.jsの読み込み

まずはcdnjsがホストしているProcessing.jsを読み込ます。バージョンは現時点で最新の1.4.1にしました。

<script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js"></script>

コードと描画先canvasの準備

次にProcessingのコードと描画先のcanvasを用意します。

scriptタグとcanvasタグの間に余計なものが挿入されないように全体をdivタグで囲み、ついでに表示位置をstyle="text-align:center"で中央寄せします。

<div style="text-align:center">
  <script type="text/processing">
    // ここにProcessingのコードを書く
  </script>
  <canvas></canvas>
</div>

動作を確認する

先ほどのscriptタグに実際の描画処理を追加して動かしてみます。

以下、コード全文です。

<script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js"></script>

<div style="text-align:center">
  <script type="text/processing">

void setup() {
  size(200, 200);
  background(0);
  fill(128, 255, 255);
  ellipse(100, 100, 100, 100);
}

  </script>
  <canvas></canvas>
</div>

コードの途中でブロックが分かれているのは、HTMLとJavaそれぞれのシンタックスハイライトを使いたかっただけですので、あまり気にしないでください。

無事、水色の円が描画されました。

終わりに

ここまで書いて何ですが、この手法は同じコードを記載用と実行用で2回書く必要があるので、コードを修正するのが少々面倒です。どうにか一元管理したいものですね。