Processing=003 02=clock

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

你應該會得到這東西，試著多發展一下這概念