SlideShare a Scribd company logo
Processing Workshop
3/17-19 @ 東大
Processing WS, by R.ISHIHARA / Kuma Lab.
Day 3 -Design of Design Tool
本日の内容
1 setup(),draw()
2 関数
3 Array,ArrayList
4 class
5 今後覚えて欲しい内容
Processing WS, by R.ISHIHARA / Kuma Lab.
1. setup(), draw()
昨日のおだい
01 inth=4;
02 intfloorNum=100/h;
03
04 size(300,1000);
05 background(0);
06 stroke(255);
07
08 for(inti=0;i < floorNum;i++){
09    if(i!=12 & i!=23){
10 floatdelta=width/(4*(i+2));
11 floataltitudeDown=(floorNum-i)*h*10;
12 floataltitudeUp =(floorNum-i-1)*h*10;
13 for(floatj=0;j < width;j+=delta){
14 line(j+.5*delta,altitudeUp,j+.5*delta,altitudeDown);
15 }
16 }
17 }
18 save("drawing.jpg");
Processing WS, by R.ISHIHARA / Kuma Lab.
1. setup(), draw()
codeがなんとなく3つに分かれていることがわかる
01 //数を書く(最初の値)
02 inth=4;
03 intfloorNum=100/h;
04
05 //windowのサイズとか設定
06 size(300,1000);
07 background(0);
08 stroke(255);
09
10 //図
11 for(inti=0;i < floorNum;i++){
12 if(i!=12 & i!=23){
13 floatdelta=width/(4*(i+2));
14 floataltitudeDown=(floorNum-i)*h*10;
15 floataltitudeUp =(floorNum-i-1)*h*10;
16 for(floatj=0;j < width;j+=delta){
17 line(j+.5*delta,altitudeUp,j+.5*delta,altitudeDown);
18 }
19 }
20 }
21 save("drawing.jpg");
Processing WS, by R.ISHIHARA / Kuma Lab.
1. setup(), draw()
1回きりしか見ないsetup()
何回も計算するdraw()
今までのコードは上から下に一回しかコンピュータが読まない。
次第に変化するプログラムにはループが必要。
シミュレーション
インタラクション
動画
ができるようになる。
Processing WS, by R.ISHIHARA / Kuma Lab.
1. setup(), draw()
01 //数を書く(最初の値)
02 inth=4;
03 intfloorNum=100/h;
04
05 //windowのサイズとか設定
06 voidsetup(){
07 size(300,1000);
08 background(0);
09 stroke(255);
10 }
11
12 //図
13 voiddraw(){
14 for(inti=0;i < floorNum;i++){
15    if(i!=12 & i!=23){
16   floatdelta=width/(4*(i+2));
17     floataltitudeDown=(floorNum-i)*h*10;
18     floataltitudeUp =(floorNum-i-1)*h*10;
19
20     for(floatj=0;j < width;j+=delta){
21 line(j+.5*delta,altitudeUp,j+.5*delta,altitudeDown);
22     }
23    }
24        }
25   save("drawing.jpg");
Processing WS, by R.ISHIHARA / Kuma Lab.
2. 関数
setup(),draw()を書けばループさせるだけでなく
"関数"が使えるようになる
関数とは??
1. 関数=function=機能をひとまとめにしたもの
2. 一回書いたら名前を呼ぶだけで同じ機能が使える
3. 何かの数を出力する事ができる
4. *関数型言語教団が怖いので以上のことは「仮初めの姿」としてください
Processing WS, by R.ISHIHARA / Kuma Lab.
2. 関数
再びモンドリアン
与えた数値でサイズと色を決めて矩形を描き、データをprintln()する
1 voidmondrect(floatposX,floatposY,floatsizeX,floatsizeY){
2 fill(255*sizeX/width,255*sizeY/height,255*(posX+posY)/(width+height));
3 rect(posX,posY,sizeX,sizeY);
4 println(sizeX+"x"+sizeY);
5 }
Processing WS, by R.ISHIHARA / Kuma Lab.
2. 関数
アニメーションしてみる
1ループごとにx座標が1増える
01 floatposX;
02 voidsetup(){
03 size(400,400);
04 posX=0;
05 background(0);
06 }
07
08 voiddraw(){
09 // background(0);
10 noStroke();
11 fill(255);
12 ellipse(posX,height/2,10,10);
13 move();
14 }
15
16 voidmove(){
17 posX++;
18 }
Processing WS, by R.ISHIHARA / Kuma Lab.
2. 関数
例題:二次元的な運動に書き換えよ.
Processing WS, by R.ISHIHARA / Kuma Lab.
2. 関数
アニメーションしてみる
壁で弾む
move()関数だけ書き換え
01 voidmove(){
02 if(right){
03 posX++;
04 }
05 else{
06 posX--;
07 }
08 if(posX>width){
09 posX=width;
10 right=false;
11 }elseif(posX<0){
12 posX=0;
13 right=true;
14 }
15 }
Processing WS, by R.ISHIHARA / Kuma Lab.
3. Array, ArrayLsit
いくつかの同じタイプのモノを一つにまとめる.
Arrayは個数が決まっている
ArrayListは個数が変化できる
どちらも番号を指定して取り出したり入れたりする
タイプ[] 名前s = new タイプ[個数];
ArrayList< タイプ > 名前s = new ArrayList< タイプ >();
Processing WS, by R.ISHIHARA / Kuma Lab.
4. Class
何個も似たようなものがあるときテンプレートのようなものがあると
嬉しい
たとえば
たくさんのボールがバウンドしているアニメーション
段数や寸法の違う幾つかの階段を含んだモデル
いわゆるMulti Agent System
などなど。
そういうときにclassというものが使える。
Processing WS, by R.ISHIHARA / Kuma Lab.
4. Class
クラスの背後にはオブジェクト指向という概念があるのだけれど…
本当はこの内容はとても難しい。いろいろ解説を読んでください。
Processing Tutorial-Object
Processing WS, by R.ISHIHARA / Kuma Lab.
4. Class
クラスを使って書き換え。
1 Ballball;
2
3 voidsetup(){
4 size(600,600);
5 colorMode(HSB,360);
6 ball=newBall(0,0,2,3,10);
7 }
8
9 voiddraw(){ball.draw();}
Processing WS, by R.ISHIHARA / Kuma Lab.
5. 今後覚えて欲しい内容
ちゃんと説明していないけどおそらく使いそうな内容
1. library
2. データの読み込み
3. 座標変換pushMatrix(),popMatrix()
4. CUI, GUIの作り方keyPressed(),controlP5
5. 3Dの考え方
Processing WS, by R.ISHIHARA / Kuma Lab.
今日のお題
手作業だとできなそうなパターンをつくる道具
ワークショップ中に身につけた技術で手作業やGHでは作れない2Dのパターンをつくる。
もちろん3Dでもいい。
インタラクティブ上等。
1. プログラムはパラメトリックなスタディができるものとする
2. 画像もしくはdxfの出力を保存する。
3. 建築的な意味(タイリング、マッピング、ゾーン分け)を説明すること
Processing WS, by R.ISHIHARA / Kuma Lab.

More Related Content

What's hot

さるでも分かりたい9dofで作るクォータニオン姿勢
さるでも分かりたい9dofで作るクォータニオン姿勢さるでも分かりたい9dofで作るクォータニオン姿勢
さるでも分かりたい9dofで作るクォータニオン姿勢
ytanno
 
ElGamal型暗号文に対する任意関数演算・再暗号化の二者間秘密計算プロトコルとその応用
ElGamal型暗号文に対する任意関数演算・再暗号化の二者間秘密計算プロトコルとその応用ElGamal型暗号文に対する任意関数演算・再暗号化の二者間秘密計算プロトコルとその応用
ElGamal型暗号文に対する任意関数演算・再暗号化の二者間秘密計算プロトコルとその応用
MITSUNARI Shigeo
 
Scala 初心者が Hom 函手を Scala で考えてみた
Scala 初心者が Hom 函手を Scala で考えてみたScala 初心者が Hom 函手を Scala で考えてみた
Scala 初心者が Hom 函手を Scala で考えてみた
Kazuyuki TAKASE
 
モナドをつくろう
モナドをつくろうモナドをつくろう
モナドをつくろう
dico_leque
 
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーションメディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーションAtsushi Tadokoro
 
PSpiceのデジタル素子を活用したイメージ
PSpiceのデジタル素子を活用したイメージPSpiceのデジタル素子を活用したイメージ
PSpiceのデジタル素子を活用したイメージ
Tsuyoshi Horigome
 
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するAtsushi Tadokoro
 
Nds meetup8 lt
Nds meetup8 ltNds meetup8 lt
Nds meetup8 lt
ushiboy
 
Coqでsprintf
CoqでsprintfCoqでsprintf
Coqでsprintf
Masaki Hara
 
Coqでsprintf
CoqでsprintfCoqでsprintf
Coqでsprintf
Masaki Hara
 
YAPC::KANSAI 2017 LT
YAPC::KANSAI 2017 LTYAPC::KANSAI 2017 LT
YAPC::KANSAI 2017 LT
maka2donzoko
 
.NET Core 3.0時代のメモリ管理
.NET Core 3.0時代のメモリ管理.NET Core 3.0時代のメモリ管理
.NET Core 3.0時代のメモリ管理
KageShiron
 
始めよう!OpenStreetMap Developing
始めよう!OpenStreetMap Developing始めよう!OpenStreetMap Developing
始めよう!OpenStreetMap Developing
Yasuyuki Uno
 
timeVaringMappedFixedValueについて
timeVaringMappedFixedValueについてtimeVaringMappedFixedValueについて
timeVaringMappedFixedValueについて
Daisuke Matsubara
 
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oFメディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oFAtsushi Tadokoro
 
KETpic できれいな図を書こう
KETpic できれいな図を書こうKETpic できれいな図を書こう
KETpic できれいな図を書こう
Yoshitomo Akimoto
 

What's hot (20)

さるでも分かりたい9dofで作るクォータニオン姿勢
さるでも分かりたい9dofで作るクォータニオン姿勢さるでも分かりたい9dofで作るクォータニオン姿勢
さるでも分かりたい9dofで作るクォータニオン姿勢
 
ElGamal型暗号文に対する任意関数演算・再暗号化の二者間秘密計算プロトコルとその応用
ElGamal型暗号文に対する任意関数演算・再暗号化の二者間秘密計算プロトコルとその応用ElGamal型暗号文に対する任意関数演算・再暗号化の二者間秘密計算プロトコルとその応用
ElGamal型暗号文に対する任意関数演算・再暗号化の二者間秘密計算プロトコルとその応用
 
Scala 初心者が Hom 函手を Scala で考えてみた
Scala 初心者が Hom 函手を Scala で考えてみたScala 初心者が Hom 函手を Scala で考えてみた
Scala 初心者が Hom 函手を Scala で考えてみた
 
モナドをつくろう
モナドをつくろうモナドをつくろう
モナドをつくろう
 
minagawa m
minagawa mminagawa m
minagawa m
 
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーションメディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
 
kasawaki b
kasawaki bkasawaki b
kasawaki b
 
PSpiceのデジタル素子を活用したイメージ
PSpiceのデジタル素子を活用したイメージPSpiceのデジタル素子を活用したイメージ
PSpiceのデジタル素子を活用したイメージ
 
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
 
Nds meetup8 lt
Nds meetup8 ltNds meetup8 lt
Nds meetup8 lt
 
Coqでsprintf
CoqでsprintfCoqでsprintf
Coqでsprintf
 
Coqでsprintf
CoqでsprintfCoqでsprintf
Coqでsprintf
 
YAPC::KANSAI 2017 LT
YAPC::KANSAI 2017 LTYAPC::KANSAI 2017 LT
YAPC::KANSAI 2017 LT
 
.NET Core 3.0時代のメモリ管理
.NET Core 3.0時代のメモリ管理.NET Core 3.0時代のメモリ管理
.NET Core 3.0時代のメモリ管理
 
始めよう!OpenStreetMap Developing
始めよう!OpenStreetMap Developing始めよう!OpenStreetMap Developing
始めよう!OpenStreetMap Developing
 
timeVaringMappedFixedValueについて
timeVaringMappedFixedValueについてtimeVaringMappedFixedValueについて
timeVaringMappedFixedValueについて
 
python-geohex
python-geohexpython-geohex
python-geohex
 
Processing
ProcessingProcessing
Processing
 
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oFメディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
 
KETpic できれいな図を書こう
KETpic できれいな図を書こうKETpic できれいな図を書こう
KETpic できれいな図を書こう
 

Viewers also liked

P5utda day1
P5utda day1P5utda day1
P5utda day1
Ryuyu Ishihara
 
P5utda day2
P5utda day2P5utda day2
P5utda day2
Ryuyu Ishihara
 
建築の遺伝子
建築の遺伝子建築の遺伝子
建築の遺伝子
Ryuyu Ishihara
 
組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015
組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015
組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015
SaitoTsutomu
 
pythonでオフィス快適化計画
pythonでオフィス快適化計画pythonでオフィス快適化計画
pythonでオフィス快適化計画Kazufumi Ohkawa
 
PyQtではじめるGUIプログラミング
PyQtではじめるGUIプログラミングPyQtではじめるGUIプログラミング
PyQtではじめるGUIプログラミング
Ransui Iso
 
Python東海Vol.5 IPythonをマスターしよう
Python東海Vol.5 IPythonをマスターしようPython東海Vol.5 IPythonをマスターしよう
Python東海Vol.5 IPythonをマスターしよう
Hiroshi Funai
 
Gensim
GensimGensim
Gensim
saireya _
 
「Python言語」はじめの一歩 / First step of Python
「Python言語」はじめの一歩 / First step of Python「Python言語」はじめの一歩 / First step of Python
「Python言語」はじめの一歩 / First step of Python
Takanori Suzuki
 

Viewers also liked (9)

P5utda day1
P5utda day1P5utda day1
P5utda day1
 
P5utda day2
P5utda day2P5utda day2
P5utda day2
 
建築の遺伝子
建築の遺伝子建築の遺伝子
建築の遺伝子
 
組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015
組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015
組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015
 
pythonでオフィス快適化計画
pythonでオフィス快適化計画pythonでオフィス快適化計画
pythonでオフィス快適化計画
 
PyQtではじめるGUIプログラミング
PyQtではじめるGUIプログラミングPyQtではじめるGUIプログラミング
PyQtではじめるGUIプログラミング
 
Python東海Vol.5 IPythonをマスターしよう
Python東海Vol.5 IPythonをマスターしようPython東海Vol.5 IPythonをマスターしよう
Python東海Vol.5 IPythonをマスターしよう
 
Gensim
GensimGensim
Gensim
 
「Python言語」はじめの一歩 / First step of Python
「Python言語」はじめの一歩 / First step of Python「Python言語」はじめの一歩 / First step of Python
「Python言語」はじめの一歩 / First step of Python
 

Similar to P5utda day3

openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習BopenFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習BAtsushi Tadokoro
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 Autumn
Koji Ishimoto
 
Processing.jsでおうちハック
Processing.jsでおうちハックProcessing.jsでおうちハック
Processing.jsでおうちハック
sonycsl
 
HPC Phys-20201203
HPC Phys-20201203HPC Phys-20201203
HPC Phys-20201203
MITSUNARI Shigeo
 
PBL1-v1-006j.pptx
PBL1-v1-006j.pptxPBL1-v1-006j.pptx
PBL1-v1-006j.pptx
NAIST
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLAtsushi Tadokoro
 
CG2013 12
CG2013 12CG2013 12
CG2013 12
shiozawa_h
 
PCD2019 TOKYO ワークショップ「2時間で!Processingでプログラミング入門」
PCD2019 TOKYO ワークショップ「2時間で!Processingでプログラミング入門」PCD2019 TOKYO ワークショップ「2時間で!Processingでプログラミング入門」
PCD2019 TOKYO ワークショップ「2時間で!Processingでプログラミング入門」
reona396
 
プログラミング技法特論第8回
プログラミング技法特論第8回プログラミング技法特論第8回
プログラミング技法特論第8回Noritada Shimizu
 
Sns suite presentation
Sns suite presentationSns suite presentation
Sns suite presentationJason Namkung
 

Similar to P5utda day3 (11)

openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習BopenFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 Autumn
 
Processing.jsでおうちハック
Processing.jsでおうちハックProcessing.jsでおうちハック
Processing.jsでおうちハック
 
HPC Phys-20201203
HPC Phys-20201203HPC Phys-20201203
HPC Phys-20201203
 
PBL1-v1-006j.pptx
PBL1-v1-006j.pptxPBL1-v1-006j.pptx
PBL1-v1-006j.pptx
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
 
CG2013 12
CG2013 12CG2013 12
CG2013 12
 
PCD2019 TOKYO ワークショップ「2時間で!Processingでプログラミング入門」
PCD2019 TOKYO ワークショップ「2時間で!Processingでプログラミング入門」PCD2019 TOKYO ワークショップ「2時間で!Processingでプログラミング入門」
PCD2019 TOKYO ワークショップ「2時間で!Processingでプログラミング入門」
 
プログラミング技法特論第8回
プログラミング技法特論第8回プログラミング技法特論第8回
プログラミング技法特論第8回
 
Sns suite presentation
Sns suite presentationSns suite presentation
Sns suite presentation
 
Actor&stm
Actor&stmActor&stm
Actor&stm
 

P5utda day3