情報編集(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)‣ 数学的な処理によって、パターンをみつけだす
‣ 頻出パターン抽出 - 高頻度で発生する特徴的なパターン‣ 例:本Aを買う人は、後に本Bを買うことが多い
‣ クラス分類 - 与えられたデータに対応するカテゴリを予測‣ 例:薬品の化合物のデータから,その化合物に薬効がある・ないといったカテゴリを予測
‣ 回帰分析 - 与えられたデータに対応する実数値を予測‣ 曜日、降水確率、今日の売上げなどのデータを元に、明日の売上げという実数値データを予測
‣ クラスタリング - データの集合をクラスタと呼ぶグループに分ける‣ 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)
参考書籍、その3‣ ビジュアル・コンプレキシティ ―情報パターンのマッピング
参考書籍、その3‣ ビジュアル・コンプレキシティ - 目次
‣ 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 未来の行方
次週に続く‣ 来週は、実際の芸大のネットワークデータを題材に、どのようにビジュアライズしてゆけば良いのか、考えていきます!!
Recommended