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