P5utda day3

Processing Workshop 3/17-19 @ 東大

Processing WS, by R.ISHIHARA / Kuma Lab.

Day 3 -Design of Design Tool

本日の内容

1setup(), draw()2関数3Array, ArrayList4class5今後覚えて欲しい内容


1. setup(), draw()

昨日のおだい

01int h =4;02int floorNum = 100/h;03 04size(300, 1000);05background(0);06stroke(255);07 08for (int i=0;i　<　floorNum;i++) {09 　　　if (i!=12　&　i!=23) {10 float delta = width/(4*(i+2));11 float altitudeDown = (floorNum-i)*h*10;12 float altitudeUp = (floorNum-i-1)*h*10;13 for (float j=0; j　<　width; j += delta ) {14 line(j+.5*delta, altitudeUp, j+.5*delta, altitudeDown);15 }16 }17 }18save("drawing.jpg");


1. setup(), draw()codeがなんとなく3つに分かれていることがわかる

01//数を書く(最初の値)02int h =4;03int floorNum = 100/h;04 05//windowのサイズとか設定06size(300, 1000);07background(0);08stroke(255);09 10//図11for (int i=0;i　<　floorNum;i++) {12 if (i!=12　&　i!=23) {13 float delta = width/(4*(i+2));14 float altitudeDown = (floorNum-i)*h*10;15 float altitudeUp = (floorNum-i-1)*h*10;16 for (float j=0; j　<　width; j += delta ) {17 line(j+.5*delta, altitudeUp, j+.5*delta, altitudeDown);18 }19 }20 }21save("drawing.jpg");


1. setup(), draw()

1回きりしか見ないsetup() 何回も計算するdraw()

今までのコードは上から下に一回しかコンピュータが読まない。次第に変化するプログラムにはループが必要。

シミュレーションインタラクション動画

ができるようになる。


1. setup(), draw()

01//数を書く(最初の値)02 int h =4;03 int floorNum = 100/h;04 05 //windowのサイズとか設定 06 void setup(){07 size(300, 1000);08 background(0);09 stroke(255);10 }11 12 //図 13 void draw(){14 for (int i=0;i　<　floorNum;i++) {15 　　　if (i!=12　&　i!=23) {16 　 float delta = width/(4*(i+2));17 　　　　float altitudeDown = (floorNum-i)*h*10;18 　　　　float altitudeUp = (floorNum-i-1)*h*10;19 20 　　　　for (float j=0; j　<　width; j += delta ) {21 line(j+.5*delta, altitudeUp, j+.5*delta, altitudeDown);22 　　　　}23 　　　}24　　　　　　　}25 　　save("drawing.jpg");


2. 関数

setup(),draw()を書けばループさせるだけでなく"関数"が使えるようになる

関数とは？？

1. 関数=function=機能をひとまとめにしたもの2. 一回書いたら名前を呼ぶだけで同じ機能が使える3. 何かの数を出力する事ができる4. ＊関数型言語教団が怖いので以上のことは「仮初めの姿」としてください


2. 関数

再びモンドリアン

与えた数値でサイズと色を決めて矩形を描き、データをprintln()する

1void mondrect(float posX, float posY, float sizeX, float sizeY) {2fill(255*sizeX/width, 255*sizeY/height, 255*(posX+posY)/( width+height));3rect(posX, posY, sizeX, sizeY);4println(sizeX+"x"+sizeY);5}


2. 関数

アニメーションしてみる1ループごとにx座標が1増える

01float posX;02void setup() {03size(400, 400);04posX=0;05background(0);06}07 08void draw() {09// background(0);10noStroke();11fill(255);12ellipse(posX, height/2, 10, 10);13move();14}15 16void move() {17posX++;18}


2. 関数

例題：二次元的な運動に書き換えよ.


2. 関数

アニメーションしてみる壁で弾むmove()関数だけ書き換え

01void move() { 02if (right) {03 posX++;04}05else{06 posX--;07}08if (posX>width) {09 posX=width;10 right=false;11}else if (posX<0) {12 posX=0;13 right=true;14 }15}


3.　Array, ArrayLsit

いくつかの同じタイプのモノを一つにまとめる.Arrayは個数が決まっているArrayListは個数が変化できるどちらも番号を指定して取り出したり入れたりする

タイプ[] 名前s = new タイプ[個数];

ArrayList< タイプ > 名前s = new ArrayList< タイプ >();


4. Class

何個も似たようなものがあるときテンプレートのようなものがあると嬉しいたとえば

たくさんのボールがバウンドしているアニメーション段数や寸法の違う幾つかの階段を含んだモデルいわゆるMulti Agent Systemなどなど。そういうときにclassというものが使える。


4. Class

クラスの背後にはオブジェクト指向という概念があるのだけれど…本当はこの内容はとても難しい。いろいろ解説を読んでください。 Processing Tutorial-Object


http://processing.org/tutorials/objects/

4. Class

クラスを使って書き換え。

1Ball ball;2 3void setup(){4size(600,600);5colorMode(HSB,360);6ball = new Ball(0,0,2,3,10);7}8 9void draw(){ ball.draw(); }


5. 今後覚えて欲しい内容

ちゃんと説明していないけどおそらく使いそうな内容

1. library2. データの読み込み3. 座標変換pushMatrix(),popMatrix()4. CUI, GUIの作り方keyPressed(),controlP55. 3Dの考え方


今日のお題

手作業だとできなそうなパターンをつくる道具

ワークショップ中に身につけた技術で手作業やGHでは作れない2Dのパターンをつくる。もちろん3Dでもいい。インタラクティブ上等。

1. プログラムはパラメトリックなスタディができるものとする2. 画像もしくはdxfの出力を保存する。3. 建築的な意味(タイリング、マッピング、ゾーン分け)を説明すること


P5utda day3

Design

processing ws

processing workshop

ishihara kuma

design of design tool