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

データとプログラミングで絵を描こう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/gal lery/

アニメーション

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-