SlideShare a Scribd company logo
1 of 69
Download to read offline
データとプログラミングで絵を描こう
Code for Japan Summit 2015 Day2 - 2015.11.7
http://bit.ly/ddd-4
をご覧いただき、ファイルのダウンロードや準備をお願いします。
自 己 紹 介
http://codefor.tokyo/
Code for Tokyo
Founder
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
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
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
絵の話
エイブルアート 大倉 史子さんの絵
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()
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
ア ニ メ ー シ ョ ン
ト ラ ン ジ シ ョ ン
( 状 態 が 変 化 す る こ と )
絵 を 描 い て み よ う
座 標 系
円 を 描 く
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
https://color.adobe.com/
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
点 を 描 く
線 を 描 く
長 方 形 を 描 く
三 角 を 描 く
四 角 を 描 く
弧 を 描 く
自 由 な 形 を 描 く
絵 を た く さ ん 出 す
同 じ こ と を
繰 り 返 す
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
状 態 ご と に
違 う こ と を す る
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
変 数 の 中 身 を
確 か め る
音 を 鳴 ら す
曲 を 読 み 込 ん で
再 生 す る
マ ウ ス ク リ ッ ク で
再 生 / 停 止 す る
音 か ら デ ー タ を 取 り 出 す
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
配 置 順 と 表 現 を 変 え る
配 置 順 : 左 か ら 右 へ
表 現 : 線 の 位 置
配 置 順 : 左 か ら 右 へ
表 現 : 円 の 位 置
配 置 順 : 左 か ら 右 へ
表 現 : 円 の 大 き さ
配 置 順 : 下 か ら 上 へ
表 現 :     円 の 大 き さ
配 置 順 : 円 形
表 現 : 円 の 大 き さ
デ ー タ
手 に 入 れ た も の
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
音 を 表 現 す る か た ち
手 に 入 れ た も の
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
い ろ
手 に 入 れ た も の
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
操 作
手 に 入 れ た も の
同 じ こ と を
繰 り 返 す
状 態 ご と に
違 う こ と を す る
配 置 順
手 に 入 れ た も の
 CfJSummit2015 Day2 データとプログラミングで絵を描こう
データ かたち いろ 操作 配置順
http://bit.ly/sb-sb-

More Related Content

Similar to CfJSummit2015 Day2 データとプログラミングで絵を描こう

20150417デザイン勉強会33
20150417デザイン勉強会3320150417デザイン勉強会33
20150417デザイン勉強会33Takashi Kitamura
 
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいのドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいのheriet
 
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25Tomonori Watanabe
 
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいのドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいのmanaten
 
写真歴20年の写真生成アプローチ.pdf
写真歴20年の写真生成アプローチ.pdf写真歴20年の写真生成アプローチ.pdf
写真歴20年の写真生成アプローチ.pdfinfo553825
 
10分で分かるr言語入門ver2.8 14 0712
10分で分かるr言語入門ver2.8 14 0712 10分で分かるr言語入門ver2.8 14 0712
10分で分かるr言語入門ver2.8 14 0712 Nobuaki Oshiro
 
WP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura TahWP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura TahTakashi Kitamura
 
第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」Takashi Kitamura
 

Similar to CfJSummit2015 Day2 データとプログラミングで絵を描こう (8)

20150417デザイン勉強会33
20150417デザイン勉強会3320150417デザイン勉強会33
20150417デザイン勉強会33
 
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいのドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいの
 
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25
 
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいのドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいの
 
写真歴20年の写真生成アプローチ.pdf
写真歴20年の写真生成アプローチ.pdf写真歴20年の写真生成アプローチ.pdf
写真歴20年の写真生成アプローチ.pdf
 
10分で分かるr言語入門ver2.8 14 0712
10分で分かるr言語入門ver2.8 14 0712 10分で分かるr言語入門ver2.8 14 0712
10分で分かるr言語入門ver2.8 14 0712
 
WP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura TahWP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura Tah
 
第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」
 

More from Yuichi Yazaki

シビックテックとデザイン
シビックテックとデザインシビックテックとデザイン
シビックテックとデザインYuichi Yazaki
 
Japanese Open and Generative Design
Japanese Open and Generative DesignJapanese Open and Generative Design
Japanese Open and Generative DesignYuichi Yazaki
 
データビジュアライゼーションの地理空間情報分野への応用可能性
データビジュアライゼーションの地理空間情報分野への応用可能性データビジュアライゼーションの地理空間情報分野への応用可能性
データビジュアライゼーションの地理空間情報分野への応用可能性Yuichi Yazaki
 
心地良さのインタラクションデザイン ワークショップ
心地良さのインタラクションデザイン ワークショップ心地良さのインタラクションデザイン ワークショップ
心地良さのインタラクションデザイン ワークショップYuichi Yazaki
 
「価値観カルテ」
「価値観カルテ」「価値観カルテ」
「価値観カルテ」Yuichi Yazaki
 
「シャボン玉を飛ばそう」
「シャボン玉を飛ばそう」「シャボン玉を飛ばそう」
「シャボン玉を飛ばそう」Yuichi Yazaki
 
Code for Tokyoとは
Code for TokyoとはCode for Tokyoとは
Code for TokyoとはYuichi Yazaki
 
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1Yuichi Yazaki
 
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
データをわかりやすく可視化する「データビジュアライゼーション」勉強会データをわかりやすく可視化する「データビジュアライゼーション」勉強会
データをわかりやすく可視化する「データビジュアライゼーション」勉強会Yuichi Yazaki
 
ワークショップ「D3.js」入門
ワークショップ「D3.js」入門ワークショップ「D3.js」入門
ワークショップ「D3.js」入門Yuichi Yazaki
 
World Asian Fab Cup entry presentation at FAN1.
World Asian Fab Cup entry presentation at FAN1.World Asian Fab Cup entry presentation at FAN1.
World Asian Fab Cup entry presentation at FAN1.Yuichi Yazaki
 
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動についてYuichi Yazaki
 
[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際
[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際
[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際Yuichi Yazaki
 

More from Yuichi Yazaki (13)

シビックテックとデザイン
シビックテックとデザインシビックテックとデザイン
シビックテックとデザイン
 
Japanese Open and Generative Design
Japanese Open and Generative DesignJapanese Open and Generative Design
Japanese Open and Generative Design
 
データビジュアライゼーションの地理空間情報分野への応用可能性
データビジュアライゼーションの地理空間情報分野への応用可能性データビジュアライゼーションの地理空間情報分野への応用可能性
データビジュアライゼーションの地理空間情報分野への応用可能性
 
心地良さのインタラクションデザイン ワークショップ
心地良さのインタラクションデザイン ワークショップ心地良さのインタラクションデザイン ワークショップ
心地良さのインタラクションデザイン ワークショップ
 
「価値観カルテ」
「価値観カルテ」「価値観カルテ」
「価値観カルテ」
 
「シャボン玉を飛ばそう」
「シャボン玉を飛ばそう」「シャボン玉を飛ばそう」
「シャボン玉を飛ばそう」
 
Code for Tokyoとは
Code for TokyoとはCode for Tokyoとは
Code for Tokyoとは
 
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
LOCAL GOOD YOKOHAMA データビジュアライズソンvol.1
 
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
データをわかりやすく可視化する「データビジュアライゼーション」勉強会データをわかりやすく可視化する「データビジュアライゼーション」勉強会
データをわかりやすく可視化する「データビジュアライゼーション」勉強会
 
ワークショップ「D3.js」入門
ワークショップ「D3.js」入門ワークショップ「D3.js」入門
ワークショップ「D3.js」入門
 
World Asian Fab Cup entry presentation at FAN1.
World Asian Fab Cup entry presentation at FAN1.World Asian Fab Cup entry presentation at FAN1.
World Asian Fab Cup entry presentation at FAN1.
 
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
[朝日新聞 データジャーナリズム・ハッカソン] Code for Japan の活動について
 
[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際
[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際
[HTML5J 第47回HTML5とか勉強会] データ・ビジュアライゼーションの現況と実際
 

CfJSummit2015 Day2 データとプログラミングで絵を描こう