Skip links
鑑賞用Webギャラリー「深淵フラクタル」

数式の底へ、ただ落ちていく時間。鑑賞用Webギャラリー「深淵フラクタル」を公開しました。


鑑賞用Webギャラリー「深淵フラクタル」

作業の合間に、何も考えずに眺めていられる画面がほしくなることがあります。動画は終わってしまうし、スクリーンセーバーはすぐ飽きる。そんなときのための、終わりのない風景です。

ASOBOADは、マンデルブロ集合の縁へ永遠にズームし続けるだけの鑑賞用Webサイト「深淵フラクタル(Mandelbrot · Eternal Dive)」を公開しました。画面はすべてリアルタイム計算で描かれており、動画の再生ではありません。インストールやアカウント登録は不要で、ブラウザを開けばそのまま潜行が始まります。

「深淵フラクタル」を使ってみる

 

どんなサイトか

深淵フラクタルは、画面いっぱいに描かれたマンデルブロ集合の境界へ、カメラがゆっくりと沈み込んでいくWebギャラリーです。渦、触手、稲妻、そしてまた小さなマンデルブロ集合。拡大するほどに新しい模様が際限なく現れ続けます。集合の内部は藍黒で塗られ、外側は「何回目の計算で発散したか」に応じた琥珀のグラデーションで彩色されます。

操作はほとんど必要ありません。開いたまま置いておくのが正しい使い方で、必要なら止めることも、別の場所へ飛ぶこともできる、というくらいの作りです。ページを開くと「潜行の準備」という暗幕が一瞬だけ挟まり、それが解けると潜航が始まります。

描画にはWebGLのフラグメントシェーダーを使い、全画素で並列に漸化式を反復計算しています。あなたの端末のGPUがその瞬間ごとに一画素ずつ計算しているため、同じ潜行はふたつとなく、色相も潮のように少しずつ漂い続けます。PCでもスマートフォンでも動作し、モバイルでは解像度と上限フレームレートを抑えて負荷を軽くする作りになっています。

 

マンデルブロ集合とは

マンデルブロ集合は、数学者ブノワ・マンデルブロにちなんで名付けられた、複素平面上の点の集まりです。定義は驚くほど短く、`z(n+1) = z(n)² + c` というたったひとつの漸化式で書けます。複素数 c を決めて z₀=0 からこの計算を繰り返したとき、値が無限大へ飛んでいかない c の全体がマンデルブロ集合です。

興味深いのはその境界です。集合の縁はどこまで拡大しても滑らかにならず、無限に細かい構造を持ち続けます。拡大するほどに新しい模様が現れるのは、この図形がフラクタル(自己相似図形)だからです。1行の数式から宇宙のように深い風景が立ち上がる。それが、この図形が半世紀近く人を惹きつけてきた理由です。

そして境界の上には、探検家たちに愛されてきた名所が点在しています。深淵フラクタルはその中から8つの座標を選び、潜行のたびにランダムに巡ります。「タツノオトシゴの谷」「北の樹冠」「螺旋の環」「針の岬」「双子の渦」「雷紋の入江」「西の尖塔」「黄金の触手」の8点で、それぞれ現れる模様の性格がまったく違います。

 

「永遠に潜り続ける」仕組み

フラクタル

ズームは対数空間で等速に進みます。体感速度が一定のまま深度だけが指数的に増えていくため、いつまでも同じ速さで落ち続けているように見えます。一度の潜行にかける時間は約7分半で、その間に倍率はおよそ6万倍まで上がります。深く潜るほど必要な計算回数も増えるので、反復深度は拡大率に応じて自動的に引き上げられ、開始時の110回前後から最大880回まで伸びていきます。

ただし、GPUの単精度浮動小数点数には精度の限界があります。この限界を越えると座標の刻みが足りなくなり、繊細な縁がブロック状に崩れてしまう。深淵フラクタルは精度の底が近づく手前で画面を静かに暗転させ、あらかじめ選ばれた別の座標へ潜り直します。暗転は拡大がまだ進んでいる途中で始まるので、動きが完全に止まる瞬間がありません。潜行そのものには終わりがあっても、暗転を挟んで次の座標へ移り続けるため、眺めていられる時間は実質的に果てがありません。「永遠」の内訳はこの繰り返しです。

 

HUDが示す座標の意味

画面の四隅には、潜航の状態を示す観測データが小さく表示されています。左下の「Re」「Im」は、いま潜っている複素平面上の座標(実部・虚部)を小数10桁で示したもの。「拡大率」は潜行開始時からの倍率で、指数表記で増えていきます。「反復深度」は各画素で漸化式を最大何回計算しているかの値で、その下の細いバーが今回の潜行の進捗を表します。

右下には「DIVE 01 / ∞」のように潜行の通し番号が並びます。座標が切り替わるたびに番号が増えていくので、どれだけの時間そこにいたかが分かります。数字を追うつもりがなくても、これらが小さく光っているだけで、画面がただの映像ではなく「いま計算されているもの」に見えてきます。HUDはそのための装置でもあります。

 

主な機能・特徴

  • WebGLによる全画面リアルタイム描画です。動画ファイルの再生ではないため、同じ景色が二度現れることはありません。
  • 8つの潜行地点をランダムに巡ります。座標が切り替わるたびに配色の位相も変わり、同じ場所でも印象が変わります。
  • 「次の深淵へ →」で、待たずに次の座標へ転移できます。画面をクリック/タップしても同じ動作になります。
  • 「STOP — 静止」でズームをその場で止められます。静止中はボタンが「PLAY — 再開」に変わり、画面中央に「静止中 タップで再開」の案内が出ます。キーボードのSpaceキーでも切り替えられます。
  • 右上のアイコンから、宇宙飛行士の表示/非表示、ゆっくりとした画面回転(Rキー)、BGMのオン/オフ、UIを隠す没入モード(Hキー)を操作できます。UIを隠したあとは、画面をタップすればまず表示が戻ります。
  • 画面回転は1周およそ9分というゆるやかな速度で、開始角度にも控えめなランダムの傾きが入ります。
  • 負荷を抑える作りにしています。上限フレームレートはモバイルで30fps、PCで60fpsに制限され、静止中は再描画をおこないません。タブが非表示になると自動的に静止し、宇宙飛行士を隠すとそのレイヤーの描画も止まります。
  • 「動きを減らす」設定(prefers-reduced-motion)を有効にしている環境では、起動時に静止した状態で始まり、暗転の演出も短縮されます。

 

見かたと操作

まずは何もせず、そのまま眺めてみてください。数十秒ごとに景色の細部が入れ替わり、数分すると最初とはまったく違う模様の中にいることに気づきます。飽きたら画面をクリックすれば、別の座標へ飛びます。気に入った模様が現れたら「STOP — 静止」で止めて、その一枚をじっくり見るのもいい使い方です。

音を添えたいときは、右上のスピーカーアイコンでBGMをオンにします。初期状態は無音なので、勝手に音が鳴ることはありません。壁紙のように置いておきたいときは、Hキー(またはUIアイコン)でHUDとボタンをすべて隠すと、画面には風景だけが残ります。数式の解説や8つの潜行地点の座標を確かめたいときは、右下の「ABOUT」からページ内の解説へ進めます。夜、部屋を暗くして開くと、暗部の階調まで見えるようになります。

 

潜航を演出する宇宙飛行士とBGM

宇宙飛行士

画面の中央付近には、小さな宇宙飛行士がゆっくり回りながら漂っています。これはThree.jsで読み込んだ3Dモデルを、フラクタルの上・HUDの下のレイヤーで重ねて描いているものです。カメラとの距離は変わらないので、飛行士自身は近づきも遠ざかりもしません。背景だけが拡大し続けることで、落下しているように見えます。そういう作りになっています。

動きは既存のアニメーションではなく、骨(ボーン)の回転をその場で計算して作っています。腕は左右で逆位相に振り出され、肘と手首、膝と足首、背骨・首・頭にもそれぞれ周期の違う揺れが入り、全身はゆっくり軸をさまよわせながらタンブルします。開始姿勢と揺れの位相はランダムなので、いつ開いても「途中から」に見えます。光源は奥のフラクタル側に置いた琥珀の主光源が中心で、手前からはごく弱いフィルだけ。背景の明るさに人物が抜かれて見えるのは、この配置のためです。

BGMは初期状態でオフのループ再生です。読み込んだ音源のRMS(平均的な音圧)を測って音量を自動で合わせ、ピークでクリップしないよう抑える処理が入っているため、音量が急に大きくなることはありません。タブが非表示になると音は一時停止し、戻ってくると再開します。

切れ目をどこに置くかが、体験のすべてを決める?

無限に拡大できるものを見せる、と言葉にするのは簡単ですが、実装すると必ず「終わり」がやってきます。単精度の浮動小数点では数万倍あたりで縁の計算が崩れ始め、そのまま押し切ればブロックだらけの汚い画面になる。ここで私が大事だと思うのは、限界を隠すのではなく、限界の手前に切れ目を置いてしまうことです。深淵フラクタルは精度の底に届く前に暗転を始め、しかも「まだ拡大している最中」に始めます。もし完全に止まってから暗転したら、観る人は必ず「止まった」と気づく。動いているうちに暗くなり、暗いうちに座標が入れ替わり、また動きながら明るくなる。そうすると、体験としては一度も止まっていないことになります。

ズームを対数空間で等速にしているのも同じ理屈で、実際の倍率は指数的に増えているのに、体感の速度は変わらない。人間が感じるのは絶対量ではなく変化の比率だから、そこを合わせておくと「ずっと同じ速さで落ち続けている」という嘘が成立します。宇宙飛行士を近づけも遠ざけもしないのも、落下感を背景側だけに担わせるための判断です。演出とは足すことだと思われがちですが、こういう仕事の大半は、破綻する場所を先に見つけて、その手前に幕を用意しておくことでした。切れ目の置き場所ひとつで、有限は無限のふりができます。

 

こんな時に

  • 作業の合間に、何も考えずに眺めていたいとき
  • 打ち合わせの待ち時間や休憩中に、目を休めたいとき
  • サブディスプレイやプロジェクターに映して、空間の背景にしたいとき
  • フラクタルや複素数の話を、数式ではなく風景として見せたいとき
  • 音を添えて、集中する前の切り替えに使いたいとき

 

よくある質問

Q. 利用は無料ですか?

A. はい。無料でご利用いただけます。インストールも会員登録も不要で、WebGLに対応したブラウザで開くだけで動作します。

Q. 本当に永遠にズームし続けるのですか?

A. 一度の潜行ではGPUの計算精度が許す範囲まで潜り、限界に達すると暗転を挟んで別の座標へ潜り直します。潜行自体には終わりがありますが、次々と座標を移りながら潜り続けるため、眺めていられる時間には実質的に果てがありません。

Q. 画面の座標や「反復深度」は何を表していますか?

A. Re / Imは現在潜行中の複素平面上の座標(実部・虚部)、拡大率は潜行開始時からの倍率、反復深度は各画素で漸化式を最大何回計算しているかを示す観測データです。

Q. 音は自動で鳴りますか?

A. いいえ。BGMは初期状態でオフです。右上のスピーカーアイコンを押したときだけ再生され、もう一度押すと止まります。

Q. スマートフォンでも動きますか?

A. 描画はGPUでおこなわれるため、近年のスマートフォンであれば滑らかに動作します。モバイルでは解像度と上限フレームレートを抑える設定になっています。

 

ご利用にあたって

本サイトは鑑賞・実験を目的としたWebコンテンツであり、現状有姿(as-is)で提供されます。ご利用は利用者ご自身の責任においておこなってください。WebGLに対応したブラウザで動作しますが、ご利用の端末・OS・ブラウザによっては表示や動作が異なる、または正しく動作しない場合があります。画面の描画には継続的にGPUを使用するため、長時間の利用により端末が発熱したり、バッテリーを消費することがあります。適度に休憩を挟みながらご利用ください。BGMをオンにすると音が出ますので、公共の場ではご注意ください。

なお「動きを減らす」設定(prefers-reduced-motion)を有効にしている環境では、起動時に静止した状態で始まります。本サイトの利用、または利用できなかったことにより生じたいかなる損害についても、AMIXは責任を負いかねます。本サイトの仕様・内容は、予告なく変更または公開を停止する場合があります。

たったひとつの数式が、これだけ深い風景を持っている。深淵フラクタルで、その底をのぞいてみてください。

「深淵フラクタル」を使ってみる

 

▶︎ デザイン制作実績を見る / ▶︎ デザインのブログ記事一覧 / ▶︎ デザイン制作のガイド・媒体の特徴

最後までお読みいただきありがとうございます。共感する点・面白いと感じる点等がありましたら、【いいね!】【シェア】いただけますと幸いです。ブログやWEBサイトなどでのご紹介は大歓迎です!(掲載情報や画像等のコンテンツは、当サイトまたは画像制作者等の第三者が権利を所有しています。転載はご遠慮ください。)

この記事について

執筆: ASOBOAD編集部

デザインの潮流や作例調査をもとに記事制作・編集を行っています。

運営: ASOBOAD(アソボアド)

デザイン事務所AMIXが運営するオンライン完結型のデザインサービスです。