良いもの。悪いもの。

東日本大震災(東北関東大震災)により被害を受けられた方々には心よりお見舞い申し上げます。 以前、 日本全国コンビニ店舗分布地図 を Processing で作ったが、今回の地震の震源とその大きさについて視覚的に表した地図を作成した。少しでも何かの役に立てば良いのだが。 震源とその大きさを 日本地図 上に円として表現している。円の大きさはマグニチュードと震源の深さに依存している(これは大まかな目安であり、揺れた地域や震度・エネルギーに正確に対応しているわけではない)。また、震源の深さによって円の色が変わり、浅ければ赤に、深ければ緑に近づく。海の色は時刻を現しており、正午が最も明るい青で表現され、深夜であれば真っ黒となる。データについては、 日本気象協会 が提供している3月9日から20日までの 地震情報 を利用させて頂いた。 操作方法は、スペースキーでポーズ、'N'キーで3時間進め、'B'キーで3時間戻る。'+'キーで時間の進みが速くなり、'-'キーで遅くなる。マウスの左クリックでドラッグすれば地図を動かすことができ、右クリックで上下にドラッグすれば拡大・縮小となる。 This browser does not have a Java Plug-in. Get the latest Java Plug-in here. 可視化地図から、3月11日14時46分のマグニチュード9.0の地震の起こる二日ほど前から、三陸沖で中規模の地震が頻発していることが分かる。ところが、M9.0の地震の数時間前からは揺れが全て途絶え、嵐の前の静けさの様相となる。そして、M9.0の地震の直後からはひっきりなしに揺れが続き、数日してやや沈静化してきている。ただ、M6程度の地震は未だに起こっているので、安心するにはまだ早いかもしれない。最近の地震では福島県沖や茨城県沖に多く、ややと南下している様子が分かる。 以下、ソースコードを示す。 earthquake.pde /* earthquake.pde by nox, 2011.3.22 */ String convData ...

以前、 Processing を使って 日本全国のコンビニ店舗の分布地図 を作成したが、今回はハンバーガーショップの分布地図を作成してみた。 個人的にハンバーガーショップには小さい頃から思い入れがあって、小学生の頃、初めてマクドナルドのハンバーガーを食べたときに「なんて美味しいんだろう」と感動した覚えがある。しかし、今でこそ安価な食べ物という認識だが、当時は他の食べ物に比べて割高であまり頻繁に食べられなかった。 その後はだんだんとハンバーガーから離れていったが、モスバーガーと出会ったときに二度目の感動を覚えた。冷たくてジューシーな野菜と熱々のハンバーグが絶妙にマッチしてそれまで食べたことのないハンバーガーだった。少々食べにくくはあったが、逆にそれが溢れる美味しさを表現していたようにも思う。 最近気に入っているハンバーガーは、アトレヴィ 秋葉原2階にある Chelsea Market のアボガドバーガーだ。少々値は張るが、普通のチェーン店に比べて味は飛び抜けていると思う。チェーン店ではないハンバーガー専門店なら他にも美味しいハンバーガーがいろいろとありそう。 閑話休題。以下に作成したプログラムを示す。 This browser does not have a Java Plug-in. Get the latest Java Plug-in here. 左上の店名をクリック: 分布の表示・非表示を切り替える。起動時はマクドナルドのみ表示。 右クリックしたままマウス移動: 地図を平行移動する。 左クリックしたままマウス上下移動: 地図を拡大・縮小する。 プログラムの作成方法は 前回のコンビニ店舗分布地図を作成した方法 とほとんど変わらない。まず、住所をネットから取得する。それを Google Maps API で緯度経度変換し、さらにPythonスクリプトでUTM図法に合わせてXY座標変換する。そのデータをtar/gzipでアーカイブし、Processingを使って読み込み、 日本地図 に表示する。ブログへの貼り付けはProcessingでJavaアプレットにエクスポートできるのでそれを使う。 今回の分布地図を見て、マクドナルドよりもかなり後に出てきたモスバーガーの店...

前回 に引き続き今回も Processing による日本全国コンビニ店舗分布地図について書いてみる。前回は大きさが固定された地図で拡大・縮小や移動ができなかったので、高解像度インタラクティブ版として、それをできるようにしてみた。 まず、日本地図がPNG画像なのでこれをベクタ画像に変更する。フォーマットはSVGだ。前回と同様に「 カビパン男と私 」で提供されている日本地図のSVGファイルを若干加工して利用させてもらった。 次にこのSVGデータをProcessingで利用する方法について述べる。「 ビジュアライジング・データ 」にもSVGの利用方法(processing.candy.*)が書いてあるのだが、実はここに書いてある情報は古くて現在では使用できない。現在では、PShapeを使ってSVGを利用する。 PShape mapShape = loadShape("japan.svg"); こんな感じだ。画面の(x, y)座標に表示するにはdraw関数内で以下のように記述すればいい。 shape(mapShape, x, y); 詳しくは Processingのリファレンス に書かれているので、下記のソースコードなどを参考にして調べてみて欲しい。 さて、これでSVG画像が利用できるようになったので、今度はこれを使って、 マウスの左ボタンのドラッグで平行移動 を行えるようにしてみる。やり方としてはmouseDragged関数を使う。移動したピクセル分だけ画像も移動する。mouseDragged関数内で移動分のオフセットを変数に入れるようにし、上述のshape関数でオフセット分だけ移動した位置に描画すればいい。 次に画像の拡大・縮小を行う。 マウスの右ボタンのドラッグで操作 する。 マウスを上に移動すれば拡大、下に移動すれば縮小 だ。SVG画像の縮小・拡大はscaleメソッドを使う。例えば、上記の例で元の画像を1.5倍にしたければ以下のようにする。 mapShape.scale(1.5); scaleメソッドによる拡大・縮小は画像の位置やそのオフセットなどもちゃんと正しい位置になるようにしなければならないのだが、それらについてはソースコードを参考にして欲しい。 上記はSVG画像による日本...

「ビジュアライジング・データ Processingによる情報視覚化手法」を読んでみたのだが、 Processing の情報処理とその視覚化がとても興味深いものだった。そこで、日本地図を使って何らかの情報を視覚化したいと考え、それならば全国に存在するコンビニ店舗の分布を調べてみようと思い、Processingで作ってみることにした。 因みに以前にも「 Processingで分子動力学計算 」や「 Processingを使ってWebカメラを監視カメラにする 」などのブログ記事を書いているように、プログラミング言語Processingはビジュアル関連で広範に応用でき、そのポテンシャルはとても大きい。 まずは、コンビニの店舗情報が必要なので、gooの コンビニ店舗検索 を利用し、ここから住所情報を得ることにした。ただ、一度に検索できる件数は5,000件までなので5,000件以上存在するコンビニに対してはPythonで都道府県ごとに検索してマージした。データはHTMLで書かれているのでPythonのre.findallのパターンマッチを使って一気に必要なデータに変換した。 次に、Google Mapsの HTTPリクエスト経由のジオコーディング を使って住所情報を経度・緯度に変換した。この辺もPythonを使えばちょちょいのちょいだ。以下のAPIを利用する。 http://maps.google.com/maps/geo?q=住所情報&output=json&sensor=false&key=APIキー ただし、変換は1日につき15,000件の制限が掛かっているので4万件以上ある住所情報を取得するには3日かかることになる。もっともIPアドレスによる制限なので別のIPを使えば問題ないようだ。 日本地図上にデータを表示するためには、経度・緯度情報からXY座標に変換する必要がある。日本地図は国土地理院によるとユニバーサル横メルカトル(UTM)図法が使われているらしい。簡単に言うと世界地図でよく使われているメルカトル図法の赤道に合わせている中心線を6°ごとの経度線に合わせて作成する方法らしい。そのための変換関数をPythonで以下のように作成した。本当は縮尺の微調整が入るようなのだが、今回はそこまで厳密にする必要はないのでその辺は省い...

Processing の videoライブラリ を利用して、手持ちのWebカメラを防犯・監視カメラにしてみることにした。監視カメラとして、以下の2点を満たすこととする。 動くものを捕らえたときだけ写真を残す。 写真は指定のメールアドレスに直ちに送信される。 今回、コードを書くに当たって、Webカメラ関連については 建築発明工作ゼミ2008 、メール送信については E-mail Processing を参考にさせてもらった。特に 建築発明工作ゼミ2008 については他にもProcessing関連の有益な情報があって重宝する。 因みに、今回用いたWebカメラはずいぶん前に購入したLogitechのQuickCam for Notebooks Proだ。多分、大抵のWebカメラで問題なく動作すると思う。 それでは、早速作成してみる。 下準備 まず、ProcessingでWebカメラを利用するには、 QuickTime が必要になるので予め用意しておく。また、WindowsについてはQuickTimeでWebカメラを利用するための VDIG (QuickTime-compatible video digitizer) をインストールする必要がある。このとき、最新バージョン(1.04/1.05)では動作時にエラーが起こるようなので、バージョンは1.01を用意すること。 次に、Processingでメール送信を行うために、 JavaMail と JavaBeans Activation Framework (JAF) をダウンロードする。JavaMailからmailapi.jarとsmtp.jar、JAFからactivation.jarを取り出す。そして、Processingの作業フォルダ(コーディングしているファイルの存在するフォルダ)にcodeという名前のフォルダを作成し、その中にその3つのjarファイルをコピーする。 これで下準備は完了だ。 コーディング ライブラリについては、ビデオ関連でprocessing.video、電子メール関連でjavax.mailをインポートする。setup関数でvideoオブジェクトを作成し、draw関数で映像を表示する。今回は320×240の解像度に設定した。次にカメラの映像から、以前の画像と現...

Processing 面白いなぁ。以前はhttp://proce55ing.orgが公式サイトだったことから、Proce55ingとしても知られている。Java仕様のビジュアルデザイン用プログラミング言語なのだが、とても簡単に扱うことができる。プログラミングでアートする感じ。 そこで今回はなんちゃって分子動力学計算プログラムを作ってみた。もちろん原子をリアルタイムに計算しながら表示させている。ただし、コードを短くするために分子ではなく疑似原子単体同士の相互作用にしている。そのため計算している相互作用はvdW力とクーロン力のみだ。また特に工夫をしているわけでもなく全原子同士のすべての相互作用をそのまま計算している。分子動力学計算の詳細については PEACHによる生体分子の分子動力学シミュレーション(1)原理と方法 あたりを参考にすると良いと思う。 実際のプログラムを以下に示す。num_atomsで原子数を指定しており、初期配置を比較的密集させてその状態で力を計算させている。また、左上にエネルギーを表示している。初期の高エネルギー状態から低エネルギー状態に安定化するのが見て取れる。その他の詳しいことは実際にソースコードを読めば分かると思う。短いしね。 This browser does not have a Java Plug-in. Get the latest Java Plug-in here. 以下、ソースコード。 simple_md.pde /** * Simple molecular dynamics by nox, 2008.10.21. * * Perform molecular dynamics for pseudo-atoms without internal * interactions, such as bonds, angles, dihedrals. Only vdW and * Coulomb interactions. */ final int num_atoms = 20; Atom[]...