Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
http://goo.gl/6og0mM
をご覧いただき、ファイルのダウンロードや準備をお願いします。
♡大好きな音楽が動き出す♡
データビジュアライズの
キラキラおまじないをかけてみよう!
×
Thursday, December 17, 2...
活動紹介
http://codefor.tokyo/
Code for Tokyo
Founder
http://data-visualization.jp
Data Visualization Japan
Founder
http://data-visualization.jp
vol.1…シブヤ大学
vol.2…dots.
vol.3…Media Lab Helsinki
vol.4…Code for Japan Summit 2015
vol.5…Women Who Code Tokyo
データ
ビジュアライゼーション
事例紹介
ヨーグルトの栄養成分比較
http://bl.ocks.org/n1n9-jp/raw/98cd563b2de325e258f9/
Nicholas Felton
http://feltron.com/
TPP 巨大経済圏の実力
http://vdata.nikkei.com/prj2/tpp/
Data Visualization
http://www.nytimes.com/interactive/2015/05/28/
upshot/you-draw-it-how-family-income-affects-
childrens-c...
http://lauren-mccarthy.com/usplus/
us+
http://spending.jp/
http://structure-and-representation.com/works/prefecturalMigrants/
http://structure-and-representation.com/works/odd/
http://localprojects.net/clients/page/2/?client=911-memorial
9/11 Memorial Names Arrangement Software
データ
ビジュアライゼーション
とは?
人間の認知能力に合わせて抽象化して、
特徴を理解できるものにする
「なるほど!」と思って共感する
なるほど!
そのことによって…
なるほど!
• 自分ごと化する
• 記憶に残る
• 行動が変わる
• 人に話したくなる
データ×プログラミング
で絵を描く
Heinrich Bormann - visual analysis of a piece of music from a color-theory class with Vasily Kandinsky - October 21, 1930
Notation
ソル・ルウィット
http://oharadesigngroup.com/2013/10/14/sol-lewitt/
http://oharadesigngroup.com/2013/10/14/sol-lewitt/
ソル・ルウィット
•ミニマルアート。コンセプチュアルアート。
•自分の手で描く代わりに、描きかたを文章として提示。
•展示する会場、設営するスタッフの解釈によって、作品
に揺らぎが生じる。
ルール
描画
(実体化)
+
作家 設営スタッフ
http://oharadesigngroup.com/2013/10/14/sol-lewitt/
3つの壁、20cmの黒と白の帯が交互に連続する形で描く。
壁は20センチメートル黒帯で縁取られる。
レシピや楽譜に似てる
ルール
描画
(実体化)
+
http://www.kyounoryouri.jp/recipe/4810_%E3%81%9D%E3%81%B0%E7%B2%89%E3%81%AE%E3%82%AC
%E3%83%AC%E...
ギリシャ…熊 日本…柄杓中国…雲の上に座っ
ている王朝
星座…たとえば北斗七星
北斗七星
データ +
星の座標や輝度 星を線でつないで
何かに見立てる
実体化
データエクスチェンジコンソーシアム:データの可視化分科会講演 - 矢崎裕一
磯崎新のモンローチェア
磯崎新のモンローチェア
磯崎新のモンローチェア
データ +
マリリン・モンローの
身体の曲線
椅子
実体化
磯崎新のモンローチェア
データ +
マリリン・モンローの
身体の曲線
椅子
マリリン・モンローに背中を預けて、椅子に腰掛ける
実体化
ネックレス meshu
http://meshu.io/
実体化データ +
自分が訪れた場所の
緯度経度
ネックレス
ネックレス meshu
http://meshu.io/
実体化データ +
自分が訪れた場所の
緯度経度
ネックレス
ネックレス meshu
• 一見なんでもないアクセサリーの形状に、自分のストーリーを
込められる。
• 「人前式」的なあり方。
ステファニー・ポサヴェック
言葉なしの執筆
ジャル・ケルアックの小説「路上」
の第一部を可視化
言葉なしの執筆
ルール +データ + 実体化
小説 角度のつけかた
色のつけかた
絵として描く
ルール +データ + 実体化
エディタの使い方
• プロジェクト単位
• 1プロジェクト=1フォルダ
• 1つのプロジェクトにはいくつかのファイルが含
まれている
• いじるのはindex.htmlとlibraries以外
座 標 系
サンプルファイルの見方
ParticleSystem.js Particle.js ColorManager.js
libraries data
sketch.js
指揮者
脳。さわらなく
て大丈夫!
音楽mp3は
ここに
色のことは
おまかせ!
全体の動きを
考えて...
sketch.js
amount = 1024; …何粒表示するか
radius = 600; …全体の大きさ
fr = 12; …アニメーションの速さ
function preload() {}の中
ファイル冒頭
songFile = dat...
particle.js
Particle.prototype.run = function(_x, _y) {}の中
this.size = map(spectrum[this.id], 0, 255, 0, 60);
入力データの最小と最大値...
ColorManager.js
var ColorManager = function(_amount) {}の中
case 0:
for (var i=0; i<_amount; i++) {
var _c = map(i, 0, _amou...
p5.jsとは
p 5 ?
p r o c e s s i n g
p r o c e 5 5 i n g
p 5
ア ニ メ ー シ ョ ン
p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 1
初期設定(最初に一度のみ実行)
setup()
一定間隔で繰り返し実行
draw()
p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 2
初期設定(最初に一度のみ実行)
setup()
一定間隔で繰り返し実行
ユーザーからの操作 draw()
データの更新
画面の描画
p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 3
ライブラリ読み込みや変数の定義
初期設定(最初に一度のみ実行)
setup()
大きいファイルを先読み
preload()
noLoop()
でなければ 一定間隔で繰り返し実行
d...
ア ニ メ ー シ ョ ン
ト ラ ン ジ シ ョ ン
( 状 態 が 変 化 す る こ と )
絵 を 描 い て み よ う
座 標 系
円 を 描 く
https://color.adobe.com/
点 を 描 く
線 を 描 く
長 方 形 を 描 く
三 角 を 描 く
四 角 を 描 く
弧 を 描 く
自 由 な 形 を 描 く
絵 を た く さ ん 出 す
同 じ こ と を
繰 り 返 す
状 態 ご と に
違 う こ と を す る
変 数 の 中 身 を
確 か め る
音 を 鳴 ら す
曲 を 読 み 込 ん で
再 生 す る
マ ウ ス ク リ ッ ク で
再 生 / 停 止 す る
音 か ら デ ー タ を 取 り 出 す
配 置 順 と 表 現 を 変 え る
配 置 順 : 左 か ら 右 へ
表 現 : 線 の 位 置
配 置 順 : 左 か ら 右 へ
表 現 : 円 の 位 置
配 置 順 : 左 か ら 右 へ
表 現 : 円 の 大 き さ
配 置 順 : 下 か ら 上 へ
表 現 :     円 の 大 き さ
配 置 順 : 円 形
表 現 : 円 の 大 き さ
デ ー タ
手 に 入 れ た も の
音 を 表 現 す る か た ち
手 に 入 れ た も の
い ろ
手 に 入 れ た も の
操 作
手 に 入 れ た も の
同 じ こ と を
繰 り 返 す
状 態 ご と に
違 う こ と を す る
配 置 順
手 に 入 れ た も の
データ かたち いろ 操作 配置順
http://bit.ly/sb-sb-
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!
Upcoming SlideShare
Loading in …5
×

米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!

Women Who Code Tokyo主催、アメリカ大使館共催イベントでの講義資料です。

http://www.meetup.com/Women-Who-Code-Tokyo/events/227111761/

  • Login to see the comments

米国大使館共催イベント ♡大好きな音­楽­が動き出す♡データビジュアライズの­キラ­キラおまじないをかけてみよう!

  1. 1. http://goo.gl/6og0mM をご覧いただき、ファイルのダウンロードや準備をお願いします。 ♡大好きな音楽が動き出す♡ データビジュアライズの キラキラおまじないをかけてみよう! × Thursday, December 17, 2015 6:30 PM to 9:00 PM
  2. 2. 活動紹介
  3. 3. http://codefor.tokyo/ Code for Tokyo Founder
  4. 4. http://data-visualization.jp Data Visualization Japan Founder
  5. 5. http://data-visualization.jp
  6. 6. vol.1…シブヤ大学 vol.2…dots. vol.3…Media Lab Helsinki vol.4…Code for Japan Summit 2015 vol.5…Women Who Code Tokyo
  7. 7. データ ビジュアライゼーション 事例紹介
  8. 8. ヨーグルトの栄養成分比較 http://bl.ocks.org/n1n9-jp/raw/98cd563b2de325e258f9/
  9. 9. Nicholas Felton http://feltron.com/
  10. 10. TPP 巨大経済圏の実力 http://vdata.nikkei.com/prj2/tpp/
  11. 11. Data Visualization http://www.nytimes.com/interactive/2015/05/28/ upshot/you-draw-it-how-family-income-affects- childrens-college-chances.html
  12. 12. http://lauren-mccarthy.com/usplus/ us+
  13. 13. http://spending.jp/
  14. 14. http://structure-and-representation.com/works/prefecturalMigrants/
  15. 15. http://structure-and-representation.com/works/odd/
  16. 16. http://localprojects.net/clients/page/2/?client=911-memorial 9/11 Memorial Names Arrangement Software
  17. 17. データ ビジュアライゼーション とは?
  18. 18. 人間の認知能力に合わせて抽象化して、 特徴を理解できるものにする
  19. 19. 「なるほど!」と思って共感する なるほど!
  20. 20. そのことによって… なるほど! • 自分ごと化する • 記憶に残る • 行動が変わる • 人に話したくなる
  21. 21. データ×プログラミング で絵を描く
  22. 22. Heinrich Bormann - visual analysis of a piece of music from a color-theory class with Vasily Kandinsky - October 21, 1930
  23. 23. Notation
  24. 24. ソル・ルウィット
  25. 25. http://oharadesigngroup.com/2013/10/14/sol-lewitt/
  26. 26. http://oharadesigngroup.com/2013/10/14/sol-lewitt/
  27. 27. ソル・ルウィット •ミニマルアート。コンセプチュアルアート。 •自分の手で描く代わりに、描きかたを文章として提示。 •展示する会場、設営するスタッフの解釈によって、作品 に揺らぎが生じる。 ルール 描画 (実体化) + 作家 設営スタッフ
  28. 28. http://oharadesigngroup.com/2013/10/14/sol-lewitt/ 3つの壁、20cmの黒と白の帯が交互に連続する形で描く。 壁は20センチメートル黒帯で縁取られる。
  29. 29. レシピや楽譜に似てる ルール 描画 (実体化) + http://www.kyounoryouri.jp/recipe/4810_%E3%81%9D%E3%81%B0%E7%B2%89%E3%81%AE%E3%82%AC %E3%83%AC%E3%83%83%E3%83%88.html
  30. 30. ギリシャ…熊 日本…柄杓中国…雲の上に座っ ている王朝 星座…たとえば北斗七星
  31. 31. 北斗七星 データ + 星の座標や輝度 星を線でつないで 何かに見立てる 実体化
  32. 32. データエクスチェンジコンソーシアム:データの可視化分科会講演 - 矢崎裕一
  33. 33. 磯崎新のモンローチェア
  34. 34. 磯崎新のモンローチェア
  35. 35. 磯崎新のモンローチェア データ + マリリン・モンローの 身体の曲線 椅子 実体化
  36. 36. 磯崎新のモンローチェア データ + マリリン・モンローの 身体の曲線 椅子 マリリン・モンローに背中を預けて、椅子に腰掛ける 実体化
  37. 37. ネックレス meshu http://meshu.io/
  38. 38. 実体化データ + 自分が訪れた場所の 緯度経度 ネックレス ネックレス meshu http://meshu.io/
  39. 39. 実体化データ + 自分が訪れた場所の 緯度経度 ネックレス ネックレス meshu • 一見なんでもないアクセサリーの形状に、自分のストーリーを 込められる。 • 「人前式」的なあり方。
  40. 40. ステファニー・ポサヴェック 言葉なしの執筆 ジャル・ケルアックの小説「路上」 の第一部を可視化
  41. 41. 言葉なしの執筆 ルール +データ + 実体化 小説 角度のつけかた 色のつけかた 絵として描く
  42. 42. ルール +データ + 実体化
  43. 43. エディタの使い方
  44. 44. • プロジェクト単位 • 1プロジェクト=1フォルダ • 1つのプロジェクトにはいくつかのファイルが含 まれている • いじるのはindex.htmlとlibraries以外
  45. 45. 座 標 系
  46. 46. サンプルファイルの見方
  47. 47. ParticleSystem.js Particle.js ColorManager.js libraries data sketch.js 指揮者 脳。さわらなく て大丈夫! 音楽mp3は ここに 色のことは おまかせ! 全体の動きを 考えてます 一粒ひとつぶを 形づくります
  48. 48. sketch.js amount = 1024; …何粒表示するか radius = 600; …全体の大きさ fr = 12; …アニメーションの速さ function preload() {}の中 ファイル冒頭 songFile = data/songtitle.mp3 ; …楽曲ファイル function setup() {}の中 viewMode = 3; colorScheme = 1; …色のセットを切り替え drawLineBool = true; …粒と一緒に線を描くかどうか drawLoopBool = false; …粒たち全体を回転させるか              どうか
  49. 49. particle.js Particle.prototype.run = function(_x, _y) {}の中 this.size = map(spectrum[this.id], 0, 255, 0, 60); 入力データの最小と最大値 表現したいもののサイズ ellipse(this.position.x, this.position.y,… 表示したい粒の形
  50. 50. ColorManager.js var ColorManager = function(_amount) {}の中 case 0: for (var i=0; i<_amount; i++) { var _c = map(i, 0, _amount, 0, 360); this.colorArray[i] = color(_c, 100, 100, 0.2); } いろんな色を使いたい場合 case 1: for (var i=0; i<_amount; i++) { var _c = map(i, 0, _amount, 30, 70); this.colorArray[i] = color(150, 20, _c, 0.2); } ひとつの色をグラデーションとして使いたい場合
  51. 51. p5.jsとは
  52. 52. p 5 ?
  53. 53. p r o c e s s i n g p r o c e 5 5 i n g p 5
  54. 54. ア ニ メ ー シ ョ ン
  55. 55. p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 1 初期設定(最初に一度のみ実行) setup() 一定間隔で繰り返し実行 draw()
  56. 56. p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 2 初期設定(最初に一度のみ実行) setup() 一定間隔で繰り返し実行 ユーザーからの操作 draw() データの更新 画面の描画
  57. 57. p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 3 ライブラリ読み込みや変数の定義 初期設定(最初に一度のみ実行) setup() 大きいファイルを先読み preload() noLoop() でなければ 一定間隔で繰り返し実行 draw() 必要に応じて実行される something() マウスを押したときに実行される mousePressed()
  58. 58. ア ニ メ ー シ ョ ン ト ラ ン ジ シ ョ ン ( 状 態 が 変 化 す る こ と )
  59. 59. 絵 を 描 い て み よ う
  60. 60. 座 標 系
  61. 61. 円 を 描 く
  62. 62. https://color.adobe.com/
  63. 63. 点 を 描 く
  64. 64. 線 を 描 く
  65. 65. 長 方 形 を 描 く
  66. 66. 三 角 を 描 く
  67. 67. 四 角 を 描 く
  68. 68. 弧 を 描 く
  69. 69. 自 由 な 形 を 描 く
  70. 70. 絵 を た く さ ん 出 す
  71. 71. 同 じ こ と を 繰 り 返 す
  72. 72. 状 態 ご と に 違 う こ と を す る
  73. 73. 変 数 の 中 身 を 確 か め る
  74. 74. 音 を 鳴 ら す
  75. 75. 曲 を 読 み 込 ん で 再 生 す る
  76. 76. マ ウ ス ク リ ッ ク で 再 生 / 停 止 す る
  77. 77. 音 か ら デ ー タ を 取 り 出 す
  78. 78. 配 置 順 と 表 現 を 変 え る
  79. 79. 配 置 順 : 左 か ら 右 へ 表 現 : 線 の 位 置
  80. 80. 配 置 順 : 左 か ら 右 へ 表 現 : 円 の 位 置
  81. 81. 配 置 順 : 左 か ら 右 へ 表 現 : 円 の 大 き さ
  82. 82. 配 置 順 : 下 か ら 上 へ 表 現 :     円 の 大 き さ
  83. 83. 配 置 順 : 円 形 表 現 : 円 の 大 き さ
  84. 84. デ ー タ 手 に 入 れ た も の
  85. 85. 音 を 表 現 す る か た ち 手 に 入 れ た も の
  86. 86. い ろ 手 に 入 れ た も の
  87. 87. 操 作 手 に 入 れ た も の
  88. 88. 同 じ こ と を 繰 り 返 す 状 態 ご と に 違 う こ と を す る
  89. 89. 配 置 順 手 に 入 れ た も の
  90. 90. データ かたち いろ 操作 配置順
  91. 91. http://bit.ly/sb-sb-

×