ブラックホールをシミュレートするblack-hole.jsというのを知りました。
これは、JavaScriptを利用して、画像上のマウスカーソルの位置にブラックホールの出現をシミュレートしてくれるスクリプトです。
実際に動作させているのが以下。画像にマウスを乗せると、画像上にブラックホールが出現します。
で、ブラックホールと聞くと、ついオッサン世代が思い出してしまうのが、キン肉マンで出てくるあの超人です。
そう、このお方。
ブラックホール
あまりの残虐ファイトのため超人オリンピック出場を禁止されていた、バッファローマンをリーダーとする7人の悪魔超人の一人。胸に「BH」と書かれた全身黒色のボディと、巨大な穴が開いた顔面を持つ。この顔面の穴（フェイスホール）は四次元空間に通じるブラックホールとなっており、吸い込んだ者を閉じ込めたり、遠隔地へ移動させることができる。
作品中、ブラックホールは、必殺技の「吸引ブラックホール」で、こんな感じにキン肉マンを四次元空間に送り込んだりしていました。
それで、キン肉マンが「吸引ブラックホール」発動時にどのように「ブラックホールのフェイスホール」が見えていたのかシミュレートしてみたくなりました。
で早速、black-hole.jsを使って再現してみました。
画像は、以下のブラックホールの正面バストアップ写真を用いました。（こちらは必殺技発動前。）
必殺技発動時、キン肉マンからは、どのように見えていたかシミュレートしてみると、以下のようになりました。
吸い込まれる瞬間、真正面にキン肉マンがいた場合、このように見えていたのではないでしょうか。
実際のシミュレートは、以下のようになります。（マウスを乗せると動作します）
ブラックホールの重力レンズ効果って、ここまで光の進路を曲げてしまうものなんですね。
black-hole.jsの使い方
ここで一応、black-hole.jsの使い方も紹介しておきます。
black-hole.jsを利用するには、まずcliffcrosland/black-hole.js · GitHubからスクリプトをダウンロードします。
で、中にある「black-hole.min.js」ファイルを「js/black-hole.min.js」あたりに設置します。
あとは、</body>手前あたりで以下のように呼び出せばOKです。
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.js"></script>
<script src="js/black-hole.min.js"></script>
<script>
corsOkImageUrl = '[画像のURL]';
BlackHole.blackHoleifyImage('canvas_placeholder1', corsOkImageUrl);
</script>WordPressで利用する人もいないだろうけど、WordPressで呼び出すには以下のようにblack-hole.js部分を呼び出します。
子テーマで呼び出す場合。
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/black-hole.min.js"></script>
親テーマで呼び出す場合。
<script src="<?php echo get_template_directory_uri(); ?>/js/black-hole.min.js"></script>
Cliff Crosland — black-hole.jsには、物理法則をスクリプトに落とし込む解説みたいなものも載っています。
僕には、難解すぎて分かりませんが、興味のある方はぜひ。
Eye catch photo by NASA Goddard Space Flight Center
