月曜時計

聞いたことがある、それは月曜日にだけ見ることのできる時計……

災厄の時代、かつて人々は救済を求めてとある教会へと走った。そこには大きな時計があったからだ……。その時計は不思議な力を持っており、疫病、飢餓、圧制に苦しむ民が願うと、たちまち……。

はい、おはようございます。冒頭謎創作ではじまるクソブログの時間です。そういったわけで謎創作ついでに月曜恒例の意味わかんないやつつくった。

まともにテストしてないから動くかどうかは分からんやつ。とりあえず月曜日のときのみアナログ時計が表示されます。

月曜以外で無理やり見たい場合はシステム時間をいじるなりしてやってください。Processing側でDOMと日付の制御をどうやるかわからなかったのでJavaScriptで書いてしまい、なんかアレなコードになってしまった。

なんで作ったのかといえば、これの動作確認的に作ってみたやつです。
Processing.js

Processing.jsは画像、各種データ可視化、動的コンテンツなど描画用に設計されたプログラミング言語であるProcessingのJavaScript移植版である。 Adobe FlashやJavaアプレットを用いることなくウェブブラウザ上で動画、ゲームなどが実装できる。 2-3次元コンテンツをHTMLのcanvas要素（最新バージョンのMozilla Firefox、Opera、Internet Explorer、Safari、Google Chromeなどでサポートしている）にレンダリングするためにJavaScriptを活用している。 2008年にジョン・レシグ氏と大学生達により最初の移植版が公開され、後に12回の再公開、900以上のバグ修正、コミュニティ構築を経て、移植作業が完了した。

JavaScript で Processing を動かせるようにしたものらしいです。

そもそも Processing ってなにさと言うとデジタルアートつくる言語です。教育用言語とかでも使われていたと思う。ちなみに過去に書いた Processing 記事はこちら。ブログ始めたころに書いていたやつだけど、あの頃から僕は全く成長していないですね……。
inujini.hatenablog.com

そんなやつがみんな大好きJSFiddle*1で利用できたので使ってみたのでした。

使い方忘備録

まじめにハウトゥー情報を見てないのでこれが正しいのかは不明だけど、日本語情報が全く見当たらないので残しておきます。
Step 1.
Processing.jsを読み込みます。

<scipt src="processing.js"></scirpt>

Step 2.
CanvasタグとProcessingスクリプトを用意します。

<script type="text/processing" data-processing-target="mycanvas">
void setup()
{
  // 初期設定
}

void draw(){  
  // 描画処理
}
</script>
<canvas id="mycanvas"></canvas>

data-processing-target="canvas id"を使って描画対象を設定する感じっぽいです…。あと、type属性をtype="text/processing"にすればProcessing形式のデータと認識してくれるそうです*2。

Step 3.
setup()とdraw()にゴリゴリ肉付けして動かします。

以上、3ステップでなんかいろいろ図形を描いたりできます。

*1:今のところ僕以外使っている人を見たことがない

*2:これで動かすとJavaScriptの書き方でも動くからtype属性とは一体とかなった……。まあ、HTML的には参考情報ってぐらいの意味だしね……