Processing=003 02=clock

Processing

03 02

Clock 滴答滴答

Clock 滴答滴答

TIME= ----------------------second() minute() hour() 時間基本上=秒+分+時

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 processing IDE. Copy然後貼到你的 Processing吧

https://processing.org/reference/hour_.html

背景顏色 void draw() { background(204); Background color 擷取時間資訊 Extract the time

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); }

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). 希望你看得懂這幾行。要是不懂的話 請回去看 3_01(Font)

Basically, now you also display the values of second, minute, and hour. 用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 color strokeWeight(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來玩一下 背景顏色

Hope you understand these lines now. 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); }

希望你看得懂這幾行

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. 這是你的提示

Replace these codes to the one we have linear clock. textFont(font, 20); noStroke();

將本來線條狀的時鐘程式 替換成以下數行

//hour fill(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); //minute fill(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);

Please change the size as well. 請更改視窗大小

Like this

How about 3D? 如果是3D的話呢?

First, You will have to learn basic 3D technique of Processing 首先你必須具備Processing基本的3D技術

Please Finish 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.*;

PeasyCam library

PFont font; PeasyCam cam;

Declare Camera

宣告camera

void setup(){ size(800,800,P3D); font = loadFont("Nasalization-48.vlw");

Change to P3D

改成3D環境

Set up Camera

設定3D視角

cam = new PeasyCam(this,100,200,0,500); } void draw() { //background(204); background(0); int s = second(); // Values from 0 - 59 int m = minute(); // Values from 0 - 59 int 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); }

3 for-loops make the code.

3個for loop完成這個CODE

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(); }

主要的撇步

Main trick :

i/10

i%10

Rows

Columns

Calculation of Rows and Columns 如何計算 { 行跟列 }

import peasy.test.*; import peasy.org.apache.commons.math.*; import peasy.*; import peasy.org.apache.commons.math.geometry.*; PFont font;

for(int i=0; i<s; i++){ pushMatrix(); translate(15*(i/10),15*(i%10),0); fill(0,255,0); box(10); popMatrix(); }

PeasyCam cam; for(int i=0; i<m; i++){ pushMatrix(); translate(15*(i/10),150+15*(i%10),0); fill(255,0,255); box(10); popMatrix(); }

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);

for(int i=0; i<h; i++){ pushMatrix(); translate(15*(i/10),300+15*(i%10),0); fill(0,255,255); box(10); popMatrix(); }

int s = second(); // Values from 0 - 59 int m = minute(); // Values from 0 - 59 int 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); }

You should have this. And try to develop more with the idea 你應該會得到這東西， 試著多發展一下這概念