P5utda day1

Processing Workshop 3/17-19 @ 東大

Processing WS, by R.ISHIHARA / Kuma Lab.

Day 1 - Welcome to Processing!

本日の内容1. 何ができるんですか?2. Processingをインストール3. ウィンドウのサイズ4. 簡単な図形5. 色

Processing WS, by R.ISHIHARA / Kuma Lab.

1. 何ができるんですか?

プログラミングが出来るとこんなことが...Official Video

Processing WS, by R.ISHIHARA / Kuma Lab.

1. 何ができるんですか?

色々できる。 さて、建築には?iGeo by Satoru SugiharaComputational Kaizen Studio at GSAPP修論にも使える

Processing WS, by R.ISHIHARA / Kuma Lab.

2. Processingをインストール

Download and install

ググれ↓ "processing"

windowsの人 ≫解凍したものをまるっと¥C¥Program Filesにぶちこむ

macの人 ≫おなじくアプリケーションフォルダに投入

暇な人はExhibitionをチェック!

Processing WS, by R.ISHIHARA / Kuma Lab.

3. ウィンドウのサイズ

とりあえず起動して再生ボタンクリック

Processing WS, by R.ISHIHARA / Kuma Lab.

3. ウィンドウのサイズ

初コード

セミコロンが超大事！Processingのお約束。

試みに ";" を無くしてみましょう

メッセージが出るはず

1 size(400,700);

1 size(400,700)

Processing WS, by R.ISHIHARA / Kuma Lab.

4. 簡単な図形

図形を描いてみましょう

()の中の数を変化させてどう矩形が変化するか見てみましょう。

公式サイトのReferenceを見ると数と形の関係がわかりますいろいろやってみる

arc()ellipse()line()point()quad()rect()triangle()

1 size(400,400);2 rect(0,0,100,100);3 //comment out

Processing WS, by R.ISHIHARA / Kuma Lab.

5. 色

表示の色を変えたい

01size(400,400);//大きさ400ｘ400pixelのウィンドウ作成02//colorMode(HSB);03//colorMode(RGB,200,200,100);04background(20);05//グレースケールで0=黒,100=白.255(2̂8-1)でカウンターストップ06 07fill(100,0,0);08noStroke();09rect(0,0,50,50);10 11stroke(0,100,100);12noFill();13rect(200,0,50,50);14 15//background(0);16 17stroke(0,0,100);18fill(0,50,100);19rect(0,200,50,50);20 21fill(100,100,100);22rect(200,200,50,50);

Processing WS, by R.ISHIHARA / Kuma Lab.

今日のお題

今日覚えたことを使ってモンドリアン風の画像を作る

ヒント：ライバルに差をつけよう

width, heightstrokeWeight()save()

Processing WS, by R.ISHIHARA / Kuma Lab.