Upload
gary-chang
View
231
Download
4
Embed Size (px)
DESCRIPTION
A_Little_Bit_Processing_Tutorial
Citation preview
Processing
Clock
0302
滴答滴答
Clock滴答滴答
TIME=-----------------------
second()minute()
hour()
時間基本上=秒+分+時
https://processing.org/reference/hour_.html
Shouldn’t be the first
time you check out
information from
references應該不是你的第一次來找
refernce
https://processing.org/reference/hour_.html
Copy these lines and paste to your processingIDE.
Copy然後貼到你的Processing吧
void draw() {
background(204);
int s = second(); // Values from 0 - 59
int m = minute(); // Values from 0 - 59
int h = hour(); // Values from 0 - 23
line(s, 0, s, 33);
line(m, 33, m, 66);
line(h, 66, h, 100);
}
Background color
Extract the time
Visualize
them with
lines
背景顏色
擷取時間資訊
以線條視覺化他們
Just that simple
就這麼簡單
We would like to modified them with
some skills we learn before.
可是我們想要用之前學到的技能做點變化
Hope you know these lines,If not, please look into tutorial 3_01(Font).
Basically, now you also display the values of second, minute, and hour.
希望你看得懂這幾行。要是不懂的話請回去看 3_01(Font)
用text去呈現秒,分,時的數字
The original lines are gone, because of the stroke color.
原來的線條不見了因為線條的顏色
Let’s adjust these lines調整一下這幾行的程式八
We map the value to the length of the windows, no matter how we change the size of the windows, it will fit the size
That’s the beauty of Parametric Design, isn’t it?
我們將數值重新分配使其能符合視窗寬度
因此不論視窗變大變小,他都能符合。而這也是參數化的美妙之處。
map (value, old-min, old-max, new-min, new-max)數值 舊的
極小舊的極大
新的極小
新的極大
map(s,0,60,0,width)map(m,0,60,0,width)map(h,0,24,0,width)
stroke(255);// line colorstrokeWeight(10); // line width
line(map(s,0,60,0,width), 0, map(s,0,60,0,width), height/3);line(map(m,0,60,0,width), height/3, map(m,0,60,0,width), height/3*2);line(map(h,0,24,0,width), height/3*2, map(h,0,24,0,width), height);
Separate
into
3
divisions
也將線條三等分
You should have something like this
你應該會有像這樣的東西
Now, modify the background with “for-loop” with MAP function.
那麼現在我們用for loop以及Map來玩一下背景顏色
for (int i=0; i<width; i++) {stroke(map(i, 0, width, 255, 0), map(i, 0, width, 0, 255), map(i, 0, width, 0, 255));line(i, 0, i, height/3);
}for (int i=0; i<width; i++) {
stroke(map(i, 0, width, 255, 0), map(i, 0, width, 255, 100), map(i, 0, width, 0, 180));line(i, height/3, i, height/3*2);
} for (int i=0; i<width; i++) {
stroke(map(i, 0, width, 100, 0), map(i, 0, width, 0, 255), map(i, 0, width, 200, 100));line(i, height/3*2, i, height);
}
Hope you understand these lines now.
希望你看得懂這幾行
Add them before the lines represented time.
Try to play with the color mapping value
將他們放到這裡
透過map玩一下顏色吧
This is what you will get
這是你應該會有的東西
How about Circle
如果是圓的話呢?
(r*cos(θ), r*sin(θ))
r
θ
This is the hint
Try to think and do it.這是你的提示
textFont(font, 20); noStroke();
//hourfill(255,0,100);ellipse(width/2, height/2, 8*width/8,8*width/8); fill(255);ellipse(width/2+7*width/16*cos(-PI/2+h*2*PI/12), height/2+7*width/16*sin(-PI/2+h*2*PI/12), 90,90); fill(0); text(hour(),width/2+7*width/16*cos(-PI/2+h*2*PI/12)-12, height/2+7*width/16*sin(-PI/2+h*2*PI/12)+8);
//minutefill(255,0,150);ellipse(width/2, height/2, 6*width/8,6*width/8);fill(255);ellipse(width/2+5*width/16*cos(-PI/2+m*2*PI/60), height/2+5*width/16*sin(-PI/2+m*2*PI/60), 60,60);fill(0);text(minute(), width/2+5*width/16*cos(-PI/2+m*2*PI/60)-12, height/2+5*width/16*sin(-PI/2+m*2*PI/60)+8);
//second fill(255,0,200);ellipse(width/2, height/2, 4*width/8,4*width/8); fill(255);ellipse(width/2+3*width/16*cos(-PI/2+s*2*PI/60), height/2+3*width/16*sin(-PI/2+s*2*PI/60), 30,30);fill(0);ellipse(width/2, height/2, 2*width/8,2*width/8);text(second(), width/2+3*width/16*cos(-PI/2+s*2*PI/60)-12, height/2+3*width/16*sin(-PI/2+s*2*PI/60)+8);
Replace these codes to the one we have linear clock.
將本來線條狀的時鐘程式 替換成以下數行
Like this
Please change the size as well.請更改視窗大小
How about 3D?
如果是3D的話呢?
First,You will have to learn basic 3D technique of Processing
首先你必須具備Processing基本的3D技術
PleaseFinish
Tutorial 05: 3D & Library
Before you look into the scripts of the coming pages
所以請先完成Tutorial 05: 3D & Library,再來進行以下的學習
Now,I suppose you finished the
tutorials.現在我假設你已經完成了
So,I will ignore the camera and 3D primitives parts
here.所以在此我不在強調3D跟視角的問題
import peasy.test.*;import peasy.org.apache.commons.math.*;import peasy.*;import peasy.org.apache.commons.math.geometry.*;
PFont font;
PeasyCam cam;
void setup(){size(800,800,P3D);font = loadFont("Nasalization-48.vlw");
cam = new PeasyCam(this,100,200,0,500);}
void draw() {//background(204);background(0);
int s = second(); // Values from 0 - 59int m = minute(); // Values from 0 - 59int h = hour(); // Values from 0 - 23
textFont(font, 20);fill(0,255,0); text(second(), 100,150);fill(255,0,255);text(minute(), 100,300); fill(0,255,255);text(hour(), 100,450);
}
PeasyCam library
Declare Camera
Change to P3D
Set up Camera
宣告camera
改成3D環境
設定3D視角
for(int i=0; i<s; i++){pushMatrix();translate(15*(i/10),15*(i%10),0);fill(0,255,0);box(10);popMatrix();}
for(int i=0; i<m; i++){pushMatrix();translate(15*(i/10),150+15*(i%10),0);fill(255,0,255);box(10);popMatrix();}
for(int i=0; i<h; i++){pushMatrix();translate(15*(i/10),300+15*(i%10),0);fill(0,255,255);box(10);popMatrix();}
3 for-loops make the code.
Rows Columns
i/10 i%10
Calculation of
Rows and Columns
Main trick :
3個for loop完成這個CODE
主要的撇步
如何計算 { 行跟列 }
import peasy.test.*;import peasy.org.apache.commons.math.*;import peasy.*;import peasy.org.apache.commons.math.geometry.*;
PFont font;
PeasyCam cam;
void setup(){size(800,800,P3D);font = loadFont("Nasalization-48.vlw");
cam = new PeasyCam(this,100,200,0,500);}
void draw() {//background(204);background(0);
int s = second(); // Values from 0 - 59int m = minute(); // Values from 0 - 59int h = hour(); // Values from 0 - 23
for(int i=0; i<s; i++){pushMatrix();translate(15*(i/10),15*(i%10),0);fill(0,255,0);box(10);popMatrix();}
for(int i=0; i<m; i++){pushMatrix();translate(15*(i/10),150+15*(i%10),0);fill(255,0,255);box(10);popMatrix();}
for(int i=0; i<h; i++){pushMatrix();translate(15*(i/10),300+15*(i%10),0);fill(0,255,255);box(10);popMatrix();}
textFont(font, 20);fill(0,255,0); text(second(), 100,150);fill(255,0,255);text(minute(), 100,300); fill(0,255,255);text(hour(), 100,450);
}
You should have this. And try to develop more with the idea
你應該會得到這東西,試著多發展一下這概念