More Related Content
Similar to CfJSummit2015 Day2 データとプログラミングで絵を描こう (8)
More from Yuichi Yazaki (13)
CfJSummit2015 Day2 データとプログラミングで絵を描こう
- 17. p r o c e s s i n g
p r o c e 5 5 i n g
p 5
- 18. こ れ !
こ れ !
( どちらか )
http://p5js.org/download/
- 21. p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 1
初期設定(最初に一度のみ実行)
setup()
一定間隔で繰り返し実行
draw()
- 22. p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 2
初期設定(最初に一度のみ実行)
setup()
一定間隔で繰り返し実行
ユーザーからの操作 draw()
データの更新
画面の描画
- 23. p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 3
ライブラリ読み込みや変数の定義
初期設定(最初に一度のみ実行)
setup()
大きいファイルを先読み
preload()
noLoop()
でなければ 一定間隔で繰り返し実行
draw()
必要に応じて実行される
something()
マウスを押したときに実行される
mousePressed()
- 25. ア ニ メ ー シ ョ ン
ト ラ ン ジ シ ョ ン
( 状 態 が 変 化 す る こ と )
- 44. 状 態 ご と に
違 う こ と を す る
- 48. 曲 を 読 み 込 ん で
再 生 す る
- 49. マ ウ ス ク リ ッ ク で
再 生 / 停 止 す る
- 50. 音 か ら デ ー タ を 取 り 出 す
- 53. 配 置 順 : 左 か ら 右 へ
表 現 : 線 の 位 置
- 54. 配 置 順 : 左 か ら 右 へ
表 現 : 円 の 位 置
- 55. 配 置 順 : 左 か ら 右 へ
表 現 : 円 の 大 き さ
- 56. 配 置 順 : 下 か ら 上 へ
表 現 : 円 の 大 き さ
- 57. 配 置 順 : 円 形
表 現 : 円 の 大 き さ
- 60. 音 を 表 現 す る か た ち
手 に 入 れ た も の
- 65. 同 じ こ と を
繰 り 返 す
状 態 ご と に
違 う こ と を す る