情報編集(Web)HTML5 実践3Processingによるデータの可視化と生成的表現

2013年7月2日東京藝術大学 芸術情報センター(AMC)担当：田所淳

本日の予定‣ 最終プロジェクトに向けて

‣ 最終プロジェクト:‣ 「芸大のネットワーク情報のビジュアライズ」‣ 東京藝術大学内のネットワークの情報をビジュアライズ(視覚化)した表現を発表してください

‣ ツールとしては、Processing.jsを使用

‣ 今日はそのヒントとなる基本知識の整理から

「可視化 (= Visualization)」とは

「可視化 (= Visualization)」とは‣ 可視化 = Visualization‣ 人間が直接「見る」ことのできない現象や事象、あるいは関係性を、「見る」ことのできるものにすること

‣ 見ることのできるもの → 画像、映像、グラフ、図、表など‣ 視覚化意外の方法‣ 可聴化 - 音によって聴くことができるようにする‣ 可触化 - 触れることによって表現する

参考書：「ビジュアライジングデータ」‣ ビジュアライジング・データ ―Processingによる情報視覚化手法

‣ Ben Fry (著), 増井 俊之 (監訳) (監修), 加藤 慶彦 (翻訳) ‣ オライリージャパン (2008/12/1)

情報の視覚化の7ステップ‣ Ben Flyによる、情報視覚化の7ステップ‣ 「ビジュアライジング・データ」より

1. データ収集 (acquire)2. 解析 (parse)3. フィルタリング (filter)4. マイニング (mine)5. 表現 (reporesent)6. 精緻化 (refine)7. インタラクション (interact)

‣ いつも、全てのステップが必要というわけではない

情報の視覚化の7ステップ‣ データ収集 (acquire)

‣ データをする‣ ディスク上のファイル‣ ネットワーク上のデータ‣ この授業では、Arduinoとセンサーを用いて収集した、植物などの生体情報のデータ

情報の視覚化の7ステップ‣ 解析 (parse)

‣ データの意味をもとに構造を付加する‣ データをカテゴリに分ける‣ データの個々の部分の形式が明確になる

情報の視覚化の7ステップ‣ フィルタリング (filter)

‣ 用途にあわない部分を除去する‣ データの中で必要とならないレコードを除去‣ 数理モデルをあてはめ‣ 正規化‣ 数学的な処理

情報の視覚化の7ステップ‣ マイニング (mine)‣ 数学的な処理によって、パターンをみつけだす

‣ 頻出パターン抽出 - 高頻度で発生する特徴的なパターン‣ 例：本Ａを買う人は、後に本Ｂを買うことが多い

‣ クラス分類 - 与えられたデータに対応するカテゴリを予測‣ 例：薬品の化合物のデータから，その化合物に薬効がある・ないといったカテゴリを予測

‣ 回帰分析 - 与えられたデータに対応する実数値を予測‣ 曜日、降水確率、今日の売上げなどのデータを元に、明日の売上げという実数値データを予測

‣ クラスタリング - データの集合をクラスタと呼ぶグループに分ける‣ ebの閲覧パターンのデータから、類似したものをまとめることで、閲覧の傾向が同じ利用者のグループを発見する

情報の視覚化の7ステップ‣ 表現 (reporesent)

‣ 基本的な表示の形式、視覚化のモデルを決定する‣ 棒グラフ‣ リスト‣ 木構造 ...etc

情報の視覚化の7ステップ‣ 精緻化 (refine)

‣ グラフィックデザインの手法をつかって表現をさらに明快に‣ より魅力的な表現へ‣ 色、形‣ 特定のデータに注意を引き付ける工夫 (階層の導入)

情報の視覚化の7ステップ‣ インタラクション (interact)

‣ 対話的な機能を追加‣ ユーザによるデータの探索や制御‣ サブセットの選択‣ 視点の切り替え

‣ この授業での、ネットワークとの連携 (TwitterやPachube)もインタラクションの一環と考えられる

情報の視覚化の7ステップ1. データ収集 (acquire)2. 解析 (parse)3. フィルタリング (filter)4. マイニング (mine)5. 表現 (reporesent)6. 精緻化 (refine)7. インタラクション (interact)

様々な可視化の手法に触れる‣ Visual Complexty - 700以上のプロジェクトを紹介‣ http://www.visualcomplexity.com/vc/

Similar Diversity‣ Philipp Steinweber, Andreas Koller‣ 世界5大宗教の聖典を分析し、宗教と信仰について視覚化している

‣ http://similardiversity.net/

Visualizing information flow in science‣ Moritz Stefaner ‣ 論文の引用のネットワークを視覚化‣ http://well-formed.eigenfactor.org/

Opte Project‣ Barrett Lyon‣ インターネットの地図‣ http://www.opte.org/

The Remotest place on Earth‣ Joint Research Centre (European Commission) & World Bank

‣ 「最も遠い場所はどこか?」‣ 世界の主要の都市から移動にかかる時間‣ http://www.newscientist.com/gallery/small-world

subblue, Fractal Lab‣ Tom Beddard‣ 生成的な手法を駆使した形態を視覚化‣ http://www.subblue.com/‣ http://fractal.io/

Partitura‣ Quayola‣ 音響を視覚化 (vvvv)‣ http://www.quayola.com

生成的な表現‣ 生成的 (Generative) な表現について考える

‣ 生成的な表現 (Generative Art)‣ コンピュータのソフトウェアによるアルゴリズムから生成される表現

‣ ある基本原則や数式やテンプレートなどの素材を設定し、そこに無作為または半無作為のプロセスが作用するよう設定する

生成的な表現‣ 生成的な表現の例：ウルフラムの1次元セル・オートマトン‣ ある特定の時刻(t)における、自分自身とその左右のセルの状態によって、次の時刻(t+1)の状態が決まる

‣ セルのon/offを、0と1で表現すると可能性は8つ‣ 111, 110, 101, 100, 011, 010, 001, 000

‣ それぞれの状態での次の値をルールとして定める‣ ルールの可能性は全部で256個となる (2の8乗、 8bit)

‣ 例：ルール30

内部状態

次の値

111 110 101 100 011 010 001 000

0 0 0 1 1 1 1 0

生成的な表現‣ Processingで、ウルフラムのCAを試してみる‣ Processingのサンプル‣ 「Topics」→ 「Cellular Automata」→「Wolfram」‣ プログラム内のルールセットを変更してみる‣ setup()関数内の以下で定義されている‣ int[] ruleset = {0,1,0,1,1,0,1,0};

生成的な表現‣ ルール90 = {0, 1, 0, 1, 1, 0, 1, 0}

生成的な表現‣ ルール30 = {0, 0, 0, 1, 1, 1, 0}

生成的な表現‣ ルール110 = {0,1,1,0,1,1,1,0}

生成的な表現‣ ウルフラムのクラス分類‣ クラス 1 - 線形系‣ 単一の平衡状態に収束する．つまり，全てのセルが，0 または 1 になってしまう．

‣ クラス 2 - 非線形系 (周期解)‣ 縞模様のような，周期的に無限に繰り返すパターンに収束する．

‣ クラス 3 - 非線形系 (カオス)‣ 単一の状態にも，周期的な状態にも収束せず，カオス的な振舞いをする．

‣ クラス 4 - 非線形系 (その他)‣ 予測しがたい，複雑なパターンで，周期，非周期が交互に現われたり，パターンが消えたりする．

生成的な表現‣ コンウェイのライフゲーム‣ 2次元のCA - ルール‣ 誕生 ‣ 死んでいるセルの周囲に3つの生きているセルがあれば次の世代では生きる（誕生する）。

‣ 維持 ‣ 生きているセルの周囲に2つか3つの生きているセルがあれば次の世代でも生き残る。

‣ 死亡 ‣ 上以外の場合には次の世代では死ぬ。

生成的な表現‣ コンウェイのライフゲーム

Generative Gestaltung‣ 膨大な数の生成的なアートの実例を紹介した書籍‣ http://www.amazon.co.jp/dp/3874397599/‣ サンプルは全てProcessingで作成されている‣ 全てダウンロード可能!!

Generative Gestaltung‣ オフィシャルサイト‣ http://www.generative-gestaltung.de/

Generative Gestaltung‣ Generative Gestaltungのサンプルをみてみる‣ いくつか環境設定が必要‣ まず全てのサンプルコードのパッケージをダウンロード‣ http://www.generative-gestaltung.de/downloads/Generative-Design-Code-Package.zip

‣ ダウンロードしたパッケージを展開して、~/Documents/Processing/以下にコピーする

Generative Gestaltung‣ Generative Gestaltung環境設定つづき‣ 必要となるライブラリをインストール

‣ Generative Design Lib 1.0.3‣ controlP5‣ Geomerative‣ treemap

Generative Gestaltung‣ 4つのライブラリ(Generative Design Lib、controlP5、Geomerative、treemap) のフォルダを、Processingフォルダのlibraryにコピーする

Generative Gestaltung‣ オフシャルサイトの「Codes」から、気になったサンプルを選び、対応するコードを起動してみる

‣ http://www.generative-gestaltung.de/code‣ いろいろ起動して、自分の好きなコードを選択

Generative Gestaltung での生成的表現‣ Generative = 生成的‣ Gestaltung = 形態 (ゲシュタルト)‣ 様々な要素を用いた生成的表現‣ 色 (Color)‣ 形 (Form)‣ 文字 (Type)‣ 画像 (Picture)‣ 乱数とノイズ (Random & Noise)‣ 発振、振動 (Ocillation figures)‣ 組織化 (Formulated bodies)‣ アトラクター (Attractor)‣ 木構造 (Tree structure)

Generative Gestaltung‣ 例：M_4_3_01_TOOL

参考書籍、その2‣ FORM+CODE -デザイン／アート／建築における、かたちとコード [単行本（ソフトカバー）]

FORM + CODE での分類‣ Form+Code での整理‣ 反復 (Repeat)‣ 変形 (Transform)‣ パラメータ化 (Parameterize)‣ 可視化 (Visualize)‣ シミュレート (Simulate)

参考書籍、その３‣ ビジュアル・コンプレキシティ ―情報パターンのマッピング

参考書籍、その３‣ ビジュアル・コンプレキシティ - 目次

‣ 01 | The Tree of Life 生命の樹‣ 02 | From Trees to Networks ツリーからネットワークへ‣ 03 | Decoding Networks ネットワークの解読‣ 04 | Infinite Interconnectedness 無限の相互接続性‣ 05 | The Syntax of a New Language 新しいビジュアル言語の構文

‣ 06 | Complex Beauty 複雑性の美‣ 07 | Looking Ahead 未来の行方

次週に続く‣ 来週は、実際の芸大のネットワークデータを題材に、どのようにビジュアライズしてゆけば良いのか、考えていきます!!