米国大使館共催イベント ♡大好きな音楽が動き出す♡データビジュアライズのキラキラおまじないをかけてみよう！
•
5 likes•1,324 views
Women Who Code Tokyo主催、アメリカ大使館共催イベントでの講義資料です。 http://www.meetup.com/Women-Who-Code-Tokyo/events/227111761/
More Related Content
More from Yuichi Yazaki
More from Yuichi Yazaki (14)
米国大使館共催イベント ♡大好きな音楽が動き出す♡データビジュアライズのキラキラおまじないをかけてみよう！
- 1. http://goo.gl/6og0mM をご覧いただき、ファイルのダウンロードや準備をお願いします。 ♡大好きな音楽が動き出す♡ データビジュアライズの キラキラおまじないをかけてみよう！ × Thursday, December 17, 2015 6:30 PM to 9:00 PM
- 2. 活動紹介
- 7. vol.1…シブヤ大学 vol.2…dots. vol.3…Media Lab Helsinki vol.4…Code for Japan Summit 2015 vol.5…Women Who Code Tokyo
- 29. http://localprojects.net/clients/page/2/?client=911-memorial 9/11 Memorial Names Arrangement Software
- 33. そのことによって… なるほど！ • 自分ごと化する • 記憶に残る • 行動が変わる • 人に話したくなる
- 35. Heinrich Bormann - visual analysis of a piece of music from a color-theory class with Vasily Kandinsky - October 21, 1930
- 36. Notation
- 37. ソル・ルウィット
- 42. http://oharadesigngroup.com/2013/10/14/sol-lewitt/ 3つの壁、20cmの黒と白の帯が交互に連続する形で描く。 壁は20センチメートル黒帯で縁取られる。
- 47. 磯崎新のモンローチェア
- 48. 磯崎新のモンローチェア
- 53. 実体化データ ＋ 自分が訪れた場所の 緯度経度 ネックレス ネックレス meshu • 一見なんでもないアクセサリーの形状に、自分のストーリーを 込められる。 • 「人前式」的なあり方。
- 55. 言葉なしの執筆 ルール ＋データ ＋ 実体化 小説 角度のつけかた 色のつけかた 絵として描く
- 56. ルール ＋データ ＋ 実体化
- 57. エディタの使い方
- 58. • プロジェクト単位 • 1プロジェクト＝1フォルダ • 1つのプロジェクトにはいくつかのファイルが含 まれている • いじるのはindex.htmlとlibraries以外
- 59. 座 標 系
- 61. サンプルファイルの見方
- 62. ParticleSystem.js Particle.js ColorManager.js libraries data sketch.js 指揮者 脳。さわらなく て大丈夫！ 音楽mp3は ここに 色のことは おまかせ！ 全体の動きを 考えてます 一粒ひとつぶを 形づくります
- 63. sketch.js amount = 1024; …何粒表示するか radius = 600; …全体の大きさ fr = 12; …アニメーションの速さ function preload() {}の中 ファイル冒頭 songFile = data/songtitle.mp3 ; …楽曲ファイル function setup() {}の中 viewMode = 3; colorScheme = 1; …色のセットを切り替え drawLineBool = true; …粒と一緒に線を描くかどうか drawLoopBool = false; …粒たち全体を回転させるか どうか
- 64. 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,… 表示したい粒の形
- 65. 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); } ひとつの色をグラデーションとして使いたい場合
- 66. p5.jsとは
- 67. p 5 ?
- 68. p r o c e s s i n g p r o c e 5 5 i n g p 5
- 71. ア ニ メ ー シ ョ ン
- 72. p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 1 初期設定（最初に一度のみ実行） setup() 一定間隔で繰り返し実行 draw()
- 73. p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 2 初期設定（最初に一度のみ実行） setup() 一定間隔で繰り返し実行 ユーザーからの操作 draw() データの更新 画面の描画
- 74. p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 3 ライブラリ読み込みや変数の定義 初期設定（最初に一度のみ実行） setup() 大きいファイルを先読み preload() noLoop() でなければ 一定間隔で繰り返し実行 draw() 必要に応じて実行される something() マウスを押したときに実行される mousePressed()
- 76. ア ニ メ ー シ ョ ン ト ラ ン ジ シ ョ ン （ 状 態 が 変 化 す る こ と ）
- 77. 絵 を 描 い て み よ う
- 78. 座 標 系
- 79. 円 を 描 く
- 85. 点 を 描 く
- 86. 線 を 描 く
- 87. 長 方 形 を 描 く
- 88. 三 角 を 描 く
- 89. 四 角 を 描 く
- 90. 弧 を 描 く
- 91. 自 由 な 形 を 描 く
- 92. 絵 を た く さ ん 出 す
- 93. 同 じ こ と を 繰 り 返 す
- 95. 状 態 ご と に 違 う こ と を す る
- 97. 変 数 の 中 身 を 確 か め る
- 98. 音 を 鳴 ら す
- 99. 曲 を 読 み 込 ん で 再 生 す る
- 100. マ ウ ス ク リ ッ ク で 再 生 ／ 停 止 す る
- 101. 音 か ら デ ー タ を 取 り 出 す
- 103. 配 置 順 と 表 現 を 変 え る
- 104. 配 置 順 ： 左 か ら 右 へ 表 現 ： 線 の 位 置
- 105. 配 置 順 ： 左 か ら 右 へ 表 現 ： 円 の 位 置
- 106. 配 置 順 ： 左 か ら 右 へ 表 現 ： 円 の 大 き さ
- 107. 配 置 順 ： 下 か ら 上 へ 表 現 ： 円 の 大 き さ
- 108. 配 置 順 ： 円 形 表 現 ： 円 の 大 き さ
- 110. デ ー タ 手 に 入 れ た も の
- 112. 音 を 表 現 す る か た ち 手 に 入 れ た も の
- 114. い ろ 手 に 入 れ た も の
- 116. 操 作 手 に 入 れ た も の
- 117. 同 じ こ と を 繰 り 返 す 状 態 ご と に 違 う こ と を す る
- 118. 配 置 順 手 に 入 れ た も の
- 120. データ かたち いろ 操作 配置順
- 121. http://bit.ly/sb-sb-