「JavaScript」タグアーカイブ

ブラウザのファビコンでライブストリーム

ファビコンでアニメーションとかは以前からあるネタなので、その延長にあるアイデアというか。ファビコンでカメラが映した映像を表示させるというプログラムです。

作者の方がツイッターに動画を上げています。

ウェブカムに向かって手を振ってる様子がわかるでしょうか?

自分で試したい場合、こちらのサイトをChrome/Firefoxなどで開き、カメラへのアクセスを許可する必要があります。

# Safari では動かないというレポートがあります

ソースコードはこちら。短いですね。

via Hacker News

ブラウザのアドレスバーをイコライザーっぽく

URL のハッシュ部分を書き換えることで、ブラウザのアドレスバーをグラフィックイコライザーにするというアイデアです。

これのソースコードがなんと2ツイートに収まるサイズ。

MediaDevices.getUserMedia()でマイクからの音声を取り込み、

動いた!

しかし、ブラウザの履歴がたいへんなことに!

replaceState()を使った、履歴が壊れないバージョンも提案されています。

AgentMaps – 地図上で多数の人が動くシミュレーションを作るためのライブラリ

AgentMapsは、JavaScript 上で地図ベースの社会シミュレーターを作るためのライブラリです。

インタラクティブ地図作成のライブラリ Leaflet.js 上に構築されていて、

  • 道沿いに建物を建てる
  • エージェントを地図上に配置
  • エージェントの建物間の移動をスケジュールする
  • エージェントの見た目を変える

などができるということ。町の中を行き来する住人のモデルを作って、住人間でうつる病気とその伝染率を定義すれば、伝染病がどのように広まっていくか、あるいは一定の範囲でとどまるか、といったことをシミュレーションできます。

こちらのデモでは、人々の移動の速度や、病気の伝染しやすさのパラメーターをスライダーで変化させて、全体の様子がどうなるかを観察することができます。

ツールの使い道ですが、たとえば、イベントで多数の人が集まってきた時に出店や通路を人がどう動くか、とか、ゾンビ物のお話を作る時に、感染が広まる様子をシミュレートしてそれを基に書くとリアリティが高まったりするのかなあ、とか、どうでしょうね。

都市の道路が向いてる方角を調べられるインタラクティブ地図

Road Orientations Interactive Mapは、都市の道路の方角を円形のヒストグラムにまとめたインタラクティブ地図です。

360度を64分割し、それぞれの方角を向いた道路の長さをカウントしていくと、表示中の都市がどの方角に向いた道路をどれぐらい持っているか、が右上に表示されます。

東京都心部を表示すると、こんな分布に。どの方角にも同じぐらいの長さの道路が存在する、つまり、特に方角など気にせず、ランダムに近い方角に道路が伸びているというのがわかります。

対して、京都を表示してみるとこんな結果に。ほとんどの道路は東西・南北に向いていて、それ以外の方角に向いた道は非常に少なそう。

こちらは札幌。札幌も碁盤目の街という印象でしたが、こちらは京都と違って東西南北の向きには向いてないのですね。また、場所によって四方の方角が異なっていて、集計結果としては多い方角は8つ出てくるのがわかります。

右下の検索ボックスで、世界中のどの場所でも表示できるのがいいですね。

この地図、OpenStreetMap のデータを使ったMapboxのサービスを使って描画されています。表示されている地図の範囲の道路データから方角と距離を取り出し、集計するのはコンパクトな JavaScript で済んでいます。

# 作者はMapboxの中の人のようです

作者のウラディミール・アガフォンキンさん(Vladimir Agafonkin)は、アメリカの主要都市について同様の円形ヒストグラムをまとめたVizual Statistix の記事を見て、「地図の任意の都市について簡単に同じように調べられたらいいな」と思って今回の開発を思い立ったということ。

ニュージーランドがない世界地図

blocks で公開されたスニペットMaps with New Zealand(ニュージーランドのある地図)は、ページの右下に常にニュージーランドを表示するというJavaScriptコードです。でもなんのために?

ニュージーランドのない地図(Maps without New Zealand on them) という名前の reddit 掲示板があり、ここではニュージーランドを描き忘れている世界地図の事例を、様々な人が報告しています。

「日本で見た」というのもいろいろと出てきます。

日本だって端っこの島国なので、仲良く両方ないケースも。

毎日のように投稿があるのがすごいですね。毎日世界のどこかで、ニュージーランドを忘れた世界地図が見つかっている。それぐらい忘れられている(笑)。

この reddit グループについてはBBCニュースも過去に取り上げています。このreddit掲示板を元ネタに、イギリスの街頭で人々に「この世界地図に欠けている国があります。さあどこでしょう?」というクイズを出す様子を伝えているのですが、とてもイギリスっぽい企画。

さらには、ニュージーランド政府自身のサイトで、存在しないページを表示しようとすると、エラーページとしてこんなのが表示されます。

「申し訳ありません。何かが足りないようです…」 一緒に表示されるのは、ニュージーランドのない世界地図…

忘れられることが多すぎるから慣れちゃっているのか、忘れられてしまうような遠くて小さな存在であることを逆に特徴として楽しんでいるのか。やたらに怒ったり抗議したりするのとは一味違う対応ですね。

via Maps Mania

人が見ていると恥ずかしがってちゃんと動かないソート関数

Lynnさん(@chordbug)がツイッターで公開したデモがこちら。

https://twitter.com/chordbug/status/1005701513719754752

「見てる時だけちゃんと動くソート関数を書いてみた」

JavaScript で書かれた sort() という関数に配列を与えて呼び出しています。

カメラに正面から顔が映っている状態では正しくソートされた結果が返ってくるのに対して、横を向いたリ顔を隠したりした状態で呼んだ時には、結果は毎回異なる適当な順番になっています。

もう一つの動画もあって、こちらは逆に「見ていると緊張して正しくソートできない」関数のデモ

https://twitter.com/chordbug/status/1005703638323429377

リプライでの質問に対して、Lynnさんはこのウェブページのソースコードを公開してくれています。

tracking.jsという人の顔を認識するライブラリのサンプルをベースに、顔が認識されている時のフラグを用意して、フラグがオンの時だけ正しくソートし、そうでない時はランダムに並べていることがわかります。

ブラウザのカメラ入力を許可し、JavaScriptコンソールで同じように sort() を呼び出すと、手元でも動かすことができました。

手近にあった顔の映った写真を使いました。仕組み上は視線の向きは関係ないので…

ブラウザ上のカメラ入力からの顔認識、こんなに手軽に使えるようになっているんですね。今回の「顔が映ってたら画面を見てることにする」というアイデアだけでなく、これまで無かったページ上のギミックが考えられそうです。