내가 처음 짜 보는 코드!
코드도 버전을 업그레이드 해 가며, 단순하게 출발해서 진화해 갈 수 있다는 것을 배움.
우선 visualization에 급급해 미감을 세울 여지가 없다는 것이 아쉽다.
처음인데 뭘 바래. ㅋㅋ
아날로그 시계 시분초침 만들기:
clock_a01
//define the variables of the time values
int s;
int h;
int m;
//define the constants of the length of the niddle
int rs=50;
int rm=130;
int rh=90;
//define the variables of angle of the niddle
float as;
float am;
float ah;
void setup(){
size(400,400,P3D);
}
void draw(){
translate(width/2, height/2);
background(255);
s=second();
m=minute();
h=hour();
as=TWO_PI/60*s;
am=TWO_PI/60*m;
ah=TWO_PI/12*h+PI/360*m;
ellipse(0,0,300,300);
line(0,0, rs*cos(as-PI/2), rs*sin(as-PI/2));
line(0,0, rm*cos(am-PI/2), rm*sin(am-PI/2));
line(0,0, rh*cos(ah-PI/2), rh*sin(ah-PI/2));
println(h + ":" + m + ":" + s);
}
초침 변경:
click_a02
//colors as seconds
//define the variables of the time values
int s;
int m;
int h;
//define the constants of the length of the niddle
int rs=50;
int rm=130;
int rh=90;
//define the variables of angle of the niddle
float as;
float am;
float ah;
//define the angle of the color arcs
float cs;
void setup(){
size(400,400);3
smooth();
}
void draw(){
// translate(width/2, height/2);
background(255);
s=second();
m=minute();
h=hour();
as=TWO_PI/60*s;
am=TWO_PI/60*m;
ah=TWO_PI/12*h+PI/360*m;
cs = (PI/30*s)+(PI*3/2);
int crs=255-(3*s);
int cgs=255/60*s;
int cbs=3*s;
strokeWeight(8);
// noStroke();
// fill(126,80);
noFill ();
ellipse(200,200,300,300);
noStroke();
fill(crs,cgs,cbs);
ellipse(200,200,100,100);
noStroke();
fill(crs,cgs,cbs);
arc(200,200,300,300,cs, cs+(PI/30));
stroke (120);
strokeWeight(1);
// line(200,200, 200+rs*cos(as-PI/2), 200+rs*sin(as-PI/2));
strokeWeight(3);
line(200,200, 200+rm*cos(am-PI/2), 200+rm*sin(am-PI/2));
strokeWeight(6);
line(200,200, 200+rh*cos(ah-PI/2), 200+rh*sin(ah-PI/2));
// println(h + ":" + m + ":" + s);
}
마우스 버튼 인터랙션:
clock_a03
//reactive text
//define the variables of the time values
int s;
int m;
int h;
//define the constants of the length of the niddle
int rs=50;
int rm=130;
int rh=90;
//define the variables of angle of the niddle
float as;
float am;
float ah;
//define the angle of the color arcs
float cs;
PFont t;
void setup(){
size(400,400);
smooth();
t=loadFont("APCCourier-Bold-48.vlw");
}
void draw(){
// translate(width/2, height/2);
background(250);
s=second();
m=minute();
h=hour();
as=TWO_PI/60*s;
am=TWO_PI/60*m;
ah=TWO_PI/12*h+PI/360*m;
cs = (PI/30*s)+(PI*3/2);
int crs=255-(3*s);
int cgs=255/60*s;
int cbs=3*s;
strokeWeight(8);
// noStroke();
// fill(126,80);
noFill ();
ellipse(200,200,300,300);
noStroke();
fill(crs,cgs,cbs);
ellipse(200,200,100,100);
noStroke();
fill(crs,cgs,cbs);
arc(200,200,300,300,cs, cs+(PI/30));
stroke (120);
strokeWeight(1);
// line(200,200, 200+rs*cos(as-PI/2), 200+rs*sin(as-PI/2));
strokeWeight(3);
line(200,200, 200+rm*cos(am-PI/2), 200+rm*sin(am-PI/2));
strokeWeight(6);
line(200,200, 200+rh*cos(ah-PI/2), 200+rh*sin(ah-PI/2));
// println(h + ":" + m + ":" + s);
if(mousePressed){
background(crs,cgs,cbs);
fill(255);
textFont(t,40);
String n=h + ":" + m ;
text(n, mouseX-30,mouseY-5);
textFont(t,80);
String sec= "and "+ s;
text(sec, 60, 220);
}
}
색깔 조정 (하는 중) - frameRate와 random color의 문제: (아우 이거 해결 안 됨. ㅡㅜ)
clock_a04
//to adjust color changes
int s;
int m;
int h;
int rs=50;
int rm=130;
int rh=90;
float as;
float am;
float ah;
float cs;
PFont t;
void setup(){
size(400,400);
smooth();
frameRate(1);
smooth();
t=loadFont("APCCourier-Bold-48.vlw");
}
void draw(){
// translate(width/2, height/2);
background(250);
s=second();
m=minute();
h=hour();
as=TWO_PI/60*s;
am=TWO_PI/60*m;
ah=TWO_PI/12*h+PI/360*m;
cs = (PI/30*s)+(PI*3/2);
int crs=255-(3*s);
int cgs=255/60*s;
int cbs=3*s;
float rr = random(255);
float gr = random(255);
float br = random(255);
strokeWeight(8);
// noStroke();
// fill(126,80);
noFill ();
ellipse(200,200,300,300);
noStroke();
fill(rr,gr,br);
ellipse(200,200,100,100);
noStroke();
fill(rr,gr,br);
arc(200,200,300,300,cs, cs+(PI/30));
stroke (120);
strokeWeight(1);
// line(200,200, 200+rs*cos(as-PI/2), 200+rs*sin(as-PI/2));
strokeWeight(3);
line(200,200, 200+rm*cos(am-PI/2), 200+rm*sin(am-PI/2));
strokeWeight(6);
line(200,200, 200+rh*cos(ah-PI/2), 200+rh*sin(ah-PI/2));
// println(h + ":" + m + ":" + s);
if(mousePressed){
background(rr,gr,br);
fill(255);
textFont(t,40);
String n=h + ":" + m ;
text(n, mouseX-30,mouseY-5);
textFont(t,80);
String sec= "and "+ s;
text(sec, 60, 220);
}
}
