データとプログラミングで絵を描こう
Code for Japan Summit 2015 Day2 - 2015.11.7
http://bit.ly/ddd-4
をご覧いただき、ファイルのダウンロードや準備をお願いします。

自 己 紹 介

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

絵の話

エイブルアート 大倉 史子さんの絵

p 5 . j s と は

p 5 ?

p r o c e s s i n g
p r o c e 5 5 i n g
p 5

こ れ ！
こ れ ！
( どちらか )
http://p5js.org/download/

http://p5js.org/gallery/

ア ニ メ ー シ ョ ン

p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 1
初期設定（最初に一度のみ実行）
setup()
一定間隔で繰り返し実行
draw()

p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 2
初期設定（最初に一度のみ実行）
setup()
一定間隔で繰り返し実行
ユーザーからの操作 draw()
データの更新
画面の描画

p 5 に よ る ア ニ メ ー シ ョ ン 構 造 − 3
ライブラリ読み込みや変数の定義
初期設定（最初に一度のみ実行）
setup()
大きいファイルを先読み
preload()
noLoop()
でなければ 一定間隔で繰り返し実行
draw()
必要に応じて実行される
something()
マウスを押したときに実行される
mousePressed()

ア ニ メ ー シ ョ ン
ト ラ ン ジ シ ョ ン
（ 状 態 が 変 化 す る こ と ）

絵 を 描 い て み よ う

座 標 系

円 を 描 く

https://color.adobe.com/

点 を 描 く

線 を 描 く

長 方 形 を 描 く

三 角 を 描 く

四 角 を 描 く

弧 を 描 く

自 由 な 形 を 描 く

絵 を た く さ ん 出 す

同 じ こ と を
繰 り 返 す

状 態 ご と に
違 う こ と を す る

変 数 の 中 身 を
確 か め る

音 を 鳴 ら す

曲 を 読 み 込 ん で
再 生 す る

マ ウ ス ク リ ッ ク で
再 生 ／ 停 止 す る

音 か ら デ ー タ を 取 り 出 す

配 置 順 と 表 現 を 変 え る

配 置 順 ： 左 か ら 右 へ
表 現 ： 線 の 位 置

配 置 順 ： 左 か ら 右 へ
表 現 ： 円 の 位 置

配 置 順 ： 左 か ら 右 へ
表 現 ： 円 の 大 き さ

配 置 順 ： 下 か ら 上 へ
表 現 ： 円 の 大 き さ

配 置 順 ： 円 形
表 現 ： 円 の 大 き さ

デ ー タ
手 に 入 れ た も の

音 を 表 現 す る か た ち
手 に 入 れ た も の

い ろ
手 に 入 れ た も の

操 作
手 に 入 れ た も の

同 じ こ と を
繰 り 返 す
状 態 ご と に
違 う こ と を す る

配 置 順
手 に 入 れ た も の

データ かたち いろ 操作 配置順

http://bit.ly/sb-sb-