0
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.ISH...
1. 何ができるんですか?
プログラミングが出来るとこんなことが...
Official Video
Processing WS, by R.ISHIHARA / Kuma Lab.
1. 何ができるんですか?
色々できる。
さて、建築には?
iGeo by Satoru Sugihara
Computational Kaizen Studio at GSAPP
修論にも使える
Processing WS, by R.ISH...
2. Processingをインストール
Download and install
ググれ↓
"processing"
windowsの人 ≫
解凍したものをまるっと¥C¥Program Filesにぶちこむ
macの人 ≫
おなじくアプリケー...
3. ウィンドウのサイズ
とりあえず起動して再生ボタンクリック
Processing WS, by R.ISHIHARA / Kuma Lab.
3. ウィンドウのサイズ
初コード
セミコロンが超大事!Processingのお約束。
試みに ";" を無くしてみましょう
メッセージが出るはず
1 size(400,700);
1 size(400,700)
Processing WS, ...
4. 簡単な図形
図形を描いてみましょう
()の中の数を変化させてどう矩形が変化するか見てみましょう。
公式サイトのReferenceを見ると数と形の関係がわかります
いろいろやってみる
arc()
ellipse()
line()
point...
5. 色
表示の色を変えたい
01 size(400,400);//大きさ400x400pixelのウィンドウ作成
02 //colorMode(HSB);
03 //colorMode(RGB,200,200,100);
04 backgro...
今日のお題
今日覚えたことを使ってモンドリアン風の画像を作る
ヒント:ライバルに差をつけよう
width, height
strokeWeight()
save()
Processing WS, by R.ISHIHARA / Kuma Lab.
Upcoming SlideShare
Loading in...5
×

P5utda day1

326

Published on

p5utda_day1(2014_03_17)

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
326
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "P5utda day1"

  1. 1. Processing Workshop 3/17-19 @ 東大 Processing WS, by R.ISHIHARA / Kuma Lab.
  2. 2. Day 1 - Welcome to Processing! 本日の内容 1. 何ができるんですか? 2. Processingをインストール 3. ウィンドウのサイズ 4. 簡単な図形 5. 色 Processing WS, by R.ISHIHARA / Kuma Lab.
  3. 3. 1. 何ができるんですか? プログラミングが出来るとこんなことが... Official Video Processing WS, by R.ISHIHARA / Kuma Lab.
  4. 4. 1. 何ができるんですか? 色々できる。 さて、建築には? iGeo by Satoru Sugihara Computational Kaizen Studio at GSAPP 修論にも使える Processing WS, by R.ISHIHARA / Kuma Lab.
  5. 5. 2. Processingをインストール Download and install ググれ↓ "processing" windowsの人 ≫ 解凍したものをまるっと¥C¥Program Filesにぶちこむ macの人 ≫ おなじくアプリケーションフォルダに投入 暇な人はExhibitionをチェック! Processing WS, by R.ISHIHARA / Kuma Lab.
  6. 6. 3. ウィンドウのサイズ とりあえず起動して再生ボタンクリック Processing WS, by R.ISHIHARA / Kuma Lab.
  7. 7. 3. ウィンドウのサイズ 初コード セミコロンが超大事!Processingのお約束。 試みに ";" を無くしてみましょう メッセージが出るはず 1 size(400,700); 1 size(400,700) Processing WS, by R.ISHIHARA / Kuma Lab.
  8. 8. 4. 簡単な図形 図形を描いてみましょう ()の中の数を変化させてどう矩形が変化するか見てみましょう。 公式サイトのReferenceを見ると数と形の関係がわかります いろいろやってみる arc() ellipse() line() point() quad() rect() triangle() 1 size(400,400); 2 rect(0,0,100,100); 3 //commentout Processing WS, by R.ISHIHARA / Kuma Lab.
  9. 9. 5. 色 表示の色を変えたい 01 size(400,400);//大きさ400x400pixelのウィンドウ作成 02 //colorMode(HSB); 03 //colorMode(RGB,200,200,100); 04 background(20); 05 //グレースケールで0=黒,100=白.255(2^8-1)でカウンターストップ 06 07 fill(100,0,0); 08 noStroke(); 09 rect(0,0,50,50); 10 11 stroke(0,100,100); 12 noFill(); 13 rect(200,0,50,50); 14 15 //background(0); 16 17 stroke(0,0,100); 18 fill(0,50,100); 19 rect(0,200,50,50); 20 21 fill(100,100,100); 22 rect(200,200,50,50); Processing WS, by R.ISHIHARA / Kuma Lab.
  10. 10. 今日のお題 今日覚えたことを使ってモンドリアン風の画像を作る ヒント:ライバルに差をつけよう width, height strokeWeight() save() Processing WS, by R.ISHIHARA / Kuma Lab.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×