スペインは San Sebastián(サン・セバスティアン)で行われたマラソンランナーを可視化した面白い WebGL デモ

doxas : 2017-05-07 13:57:48

ランナーたちの情報をコースとともに可視化

今回ご紹介するのは、エンターテイメントとはちょっと違いますが非常に面白い「マラソンランナー」を可視化したデモ作品。

スペインにある都市、サン・セバスティアンを舞台にしたハーフマラソンの大会で、ランナーたちのタイムの情報から可視化を行っているものなのかなと推測します。

URL の末尾に URL パラメータを指定できるようになっているようで、複数のランナーたちの進行状況を可視化することができます。

コースの起伏やカーブも見事に再現

今回のデモはランナーさんたちの可視化がメインテーマなのだと思いますが、ハーフマラソンのコースについても見事にその起伏やカーブが再現されており、全体を俯瞰して見ることができる作りになっています。

ランナーを表す白い矩形がバラバラと一斉に動き出すのですが、よーく見てみると一定の速度でずーっと進んでいっているように見えるので、タイムを単に線形に補間した感じで動いているのかなと思います。

URL パラメータを与えると参加者番号を元に個別にランナーを目立たせ、わかりやすくする機能があるみたいです。

上の画像の手前の方には、何枚もたくさんの白い矩形が敷き詰められているのがわかるかと思いますが、これが全て、参加者ひとりひとりを表したランナーの可視化ですね。

そして円錐を逆さにしたようなオブジェクトが、パラメータ有りで参加者を可視化したもの。

参加者の番号さえわかっていれば、ほぼ全ての参加者がピックアップできるようです。

かなり膨大なデータを取得していると思われるので、最初のロード時間こそ少し長めですが、基本的に一度動き出したらあとはスムーズですね。

画面の左側のほうにスライダーが置かれているのがわかるかと思いますが、この左側の部分にいくつか操作できる場所があり、ランナーの番号を指定することもここからできます。

ちなみに、デフォルトの状態では一切ランナーが指定されていないので、逆さ円錐のオブジェクトはひとつも出てきません。

もし自分が参加しているマラソン大会だったら、こんなふうに可視化できたらと思うととても面白いですよね。

ルートの下の部分に柱のような感じでラインが描かれているのですが、これがあるおかげで高低差なども非常にわかりやすくなっていて、三次元のデータ可視化は、こういった工夫ひとつで劇的に見やすくなるのだなということがわかります。

スペインが舞台の大会ということで、あまり日本では馴染みのないマラソン大会かなとは思うのですが、こうしてデータを収集し可視化されるケース自体が珍しく、非常に興味深い内容かなと思います。

WebGL 的にはどちらかというと簡素な外見をしており、あまり技術的に興味深いところがあるわけではないのですが、途中でも書いたように、自分が参加している大会であれば、こういうような可視化コンテンツが後から公開されたら思わず自分の番号を入力してみたくなること間違いなしです。

走るペースまで GPS で細かく収集したようなものではないので、あくまでもトータルでのタイムから移動速度を変化させているだけだとは思うのですが、それでも非常に面白い内容になっています。

ぜひチェックしてみてください。

リンク:

B/SS 2016

share

follow us in feedly

search

search

monthly

sponsor

social