すべての点には引力があって、お互いに引き寄せあっています。
赤い点が感染者で青い点が非感染者です。

青い点は赤い点に1秒間接触しているごとに約10%の確率で感染します。
赤い点は7秒間で回復して青い点に戻ります。回復したあとも再感染します。
赤い点は回復までの7秒間に約2%の確率で死亡します。

再読み込みごとに、最初の人口が50〜700人の間でランダムに、最初の感染者数は1〜5人の間でランダムに設定されます。

お互いに引き寄せあう点は時間がたつとクラスターを形成します。
画面内をクリックするとクラスターを分散させることができます。

死亡者数を増やさずに、感染者数を0にできたら封じ込め成功です。

コロナウイルスの性質や影響を正しく反映しているものではありませんが、ソーシャルディスタンスが大切なことは間違いなさそうです。

infection spread | 感染拡大シミュレーション | p5.js Generative Design >>

■参考資料
https://www.openprocessing.org/sketch/868181
クリエイティブコーディング入門 技術評論社

【関連記事】
独学Processingの趣味的なたのしさ

あなたの街の大気と比べて世界の大気汚染はどのくらいヒドいかを体験できるニューヨーク・タイムズのサイトのコンテンツ

ニューヨーク・タイムズのサイトで公開されているインタラクティブで体験型のインフォグラフィックとでもいうようなコンテンツ。
リサーチ、デザイン、テクニックのバランスがいいと思います。
こんなコンテンツを作りたいです。

PCではシンプルなパーティクルの濃度による表現ですが、スマホだとARで自分のいる空間のなかで汚染度合いを体験できます。NYTのアプリをインストールさせるキャンペーンでもあります。
そういうところもうまくデザインされています。

シンプルなグラフィックで訴えるべき情報を伝えるデザインがいいです。
ていねいにリサーチされていて、メッセージがあって、的確なデザインがされている。
こういうコンテンツがいいです。

See How the World’s Most Polluted Air Compares With Your City’s >>

2019年12月13日 ウェブサイト

2017年7月から2018年7月までの世界中の地震が表示されています。
それぞれの震源地の深さが視覚化されてます。
すばらしいインフォグラフィック。
それぞれの地震についての詳細も表示されます。

古い話ですが・・・
1996年のインターネットワールドエキスポでの日本パビリオンに「センソリウム」にも世界中の地震データを球体の上に視角化したコンテンツがありました。
そのコンテンツは地震が発生した時間軸をスライダーで動かせたように記憶しています。
当時、遅い通信環境ともっさりしたブラウザで見たそのコンテンツが衝撃的だったことを覚えています。

優れたインフォグラフィックは鑑賞者に新しい「気づき」を与えてくれます。
そういう「気づき」を与えることができるなら、インフォグラフィックは美しい必要もないのかも。

httpsEarthquakes with exaggerated depth >>

Glitchというコミュニティ(?)を活用して制作しているようです。
Glitch >>

センソリウムについてはこちら >>

2019年11月20日 ウェブサイト

Lusion_01

Lusion_02

Lusion_03

Lusion_04

ひさしぶりに見応えのあるサイト。「愛と献身で作り込む」というメッセージも熱いです。

展示やWEBなど分野で、代理店やデザイン会社からの依頼でリアルタイム・グラフィックを提供するようですが、いまどきのWEBの主流ではないかも。

個人的にはこういうリアルタイムの視覚化の技術は社会の中で重要な役割を担うようになる気がしてます。
こういうサイトがあっていいと思ってます。

Lusion >>

hamonsyu_01

hamonsyu_02

hamonsyu_03

いい描線。
伝統的な水の形だけの膨大なイラスト集。
1903 年に刊行された「波紋集」という図案集。
作者は森雄山(?)という日本画家のようです。
いい素材集。

archive.org で 上巻、中巻、下巻 が無料で閲覧・ダウンロードできます。
波紋集 上巻 >>
波紋集 中巻 >>
波紋集 下巻 >>

conservethesound_01

conservethesound_02

conservethesound_03

あー、そういえばこういう音だった。と記憶が蘇るモノもあります。

かつては生活の周囲に多くのモノがあって、それぞれが個性的な音を発していて、それらの音はデジタル化とともに私たちの周囲から消えていったんだと実感させられます。

ひさしぶりにいいサイト見た気がする。

CTS – conserve the sound >>

Picular_prince

Picular_ferrari

Googleの画像検索の上位20件の画像の支配的な色をタイル表示してくれるサービス。
もちろん「coca-cola」だったら赤一色です。
HTMLのカラーコードと元画像がどんなものか確認できます。

なるほどそういう色だなー、と納得できる感じがあります。
デザイナーのためのカラーツールというよりも、キーワードと色の繋がりを集合知としてボンヤリ眺めてみるとおもしろいです。

色を説明のための語彙を増やすのにもいいかも。

Picular >>

制作したのはこちらの会社だそうです。
Future Memories >>

TheNewYorkTimes_redesign

リニューアルのために40人の読者の意見を聞き、全読者の4%でプロトタイプをテストしたそうです。

「どこからでも」
どのデバイスからでも、あなたに合わせたストーリーを提供。

「使いやすく」
類似の記事をまとめて、詳細なコンテクストを提供。

「見つけやすい」
古い記事でもあなたの読みたい記事を簡単に見つけられる。

というデザインで、今後も読者のフィードバックを受けて改善を続けるようです。
勉強になりそう。

Meet Our New Home Page – The New York Times >>

FME is a web design company in Dubai that is serving since 2008 to its customers. Its main services are website design
website development
[url=https://www.fmeextensions.ae/]SEO[/url]
logo designing

fme

2018年6月8日 ウェブサイト

Google Trend のデータをもとにしたインタラクティブなインフォグラフィック。
日別に地球の各都市に現在進行形でマップし続けているようです。

2017年秋頃のハリウッドのプロデューサーが糾弾されたのをきかっけに盛り上がったようです。
各都市ごとにトピックがあって、地域差もあるようです。

いずれにせよ、こんなサイトを作れるようになりたいです。

Me Too Rising >>

元記事はこちら
Watch How #MeToo Caught Fire Around The World, In Real Time >>