「JavaScript」タグアーカイブ

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() を呼び出すと、手元でも動かすことができました。

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

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

is-vegan 菜食主義者のための食品判定ライブラリ in JavaScript

肉や魚だけでなく、牛乳など直接は命を奪わない食材も忌避する完全菜食主義(ヴィーガン)のためのライブラリが is-
vegan
です。

利用例はこんな感じ。牛乳はダメで、豆乳はOKと。


import * as isVegan from 'is-vegan';

// example for single ingredient
isVegan.isVeganIngredient('soy'); // true
isVegan.isVeganIngredient('milk'); // false

作りとしては src/util/canbevegan.json と nonvegan.json に食材の名前が列挙してあるだけのシンプルなもの。これを訳せば日本語でも使えるかもしれないですね。レシピサイトの材料リストを見て、菜食主義対応かどうかを表示する、なんていう拡張を作ったりできそうです。

食べ物の規制ということだとイスラム教のハラールについても is-haral 的なライブラリが有ったりするのかな、とGitHub を探してみましたが、見つかりませんでした。あちらは単純に食材の種類で決まるわけではないので同じ手は使えないのかもしれませんね。

via Hacker News

「ギャンブラーの誤謬」ダイスプログラム

「ギャンブラーの誤謬(ごびゅう)」と呼ばれる言葉がある。コイン投げで表、表、表と連続して表が出ると、次は裏が出そうな気がする心理傾向である。実際は何回表が連続して出ようとも、次に表が出る確率は1/2である。なぜなら、コイン投げは、毎回独立事象(前回の結果と次のコイン投げは無関係)だからである。

ギャンブラーの誤謬 : カイジに学ぶ

現実のサイコロをまっとうにプログラムで再現すれば、乱数を使って毎回同じ確率で出るようになりますが、あえてギャンブラーが間違うような結果を出すサイコロを書くこともできます。Javascript で書かれたギャンブラーダイス

このダイスクラス、コンストラクタで与えた数字の面のサイコロとなります。6ならD6, 20ならD20。物理的な制約がないのでD7でもD13でも何でもできます。

このダイスでは、6面サイでたとえば1が出ると、次回は1が出にくくなります。何度も1が出れば、次に1が出る確率はどんどん下がっていきます。「これだけ1が続いたから、次は1は来ないだろう」というギャンブラーの思い込みが、本当に再現してしまうわけですね。

ボードゲームでこのようなダイスを用意するのは大変ですが、コンピューターゲームなら、こういった判定機を使うことで、プレイヤーがギャンブラーの誤謬のせいで「こんなはずはない」「騙されている気がする」と感じにくいようにすることもできるんでしょうね。実際やってるゲームがあるのかも。

via Hacker News
image credit: Flickr James Bowe