week05_1_i_love_you
size(300,300); // 大小300x300
stroke(255,0,0); // 紅色線條
for(int xx=0;xx<300;xx++){
for(int yy=0;yy<300;yy++){
float x = (xx-150)/100.0; // 減一半，除100
float y = -(yy-150)/100.0; // 減一半，除100
float d = x*x + y*y - 1;
if( d*d*d - x*x*y*y*y < 0 )
point(xx,yy);
}
}
week05_1b_i_love_you
size(300,300); // 大小300x300
stroke(255,0,0); // 紅色線條
translate(width/2,height/2);
for(int xx=-150;xx<150;xx++){
for(int yy=-150;yy<150;yy++){
float x = xx/100.0; // 減一半，除100
float y = - yy/100.0; // 減一半，除100
float d = x*x + y*y - 1;
if( d*d*d - x*x*y*y*y < 0 )
point(xx,yy);
}
}
week05_2_for_for_ellipse_arc_arc_radians_360
角度 degrees 度vs. radians 弧度
size(600,600); // 大小300x300
background(0);
for(int i=0;i<6;i++){
for(int j=0;j<6;j++){
int now = i*6 + j; // 每個圓的編號
ellipse( 50+j*100, 50+i*100, 80, 80);
arc( 50+j*100, 50+i*100, 60, 60, 0, now, PIE);
arc( 50+j*100, 50+i*100, 40, 40, 0, radians(now*10), PIE);
text(now,j*100,i*100+30);
}
}
week05_3_atan2_dy_dx_text_radians_degrees
角度 degrees vs. radians 弧度 結合 week04_1 and week05_2
void setup(){
size(400,400);
}
void draw(){
background(128);
line(200,200,400,200);
line(200,200,mouseX,mouseY);
float dx = mouseX-200, dy = mouseY-200;
float a = atan2(dy,dx);
arc( 200, 200, 200, 200, 0, a, PIE );
textSize(30);
text("radians:" + a , 100, 100);
text("degrees:" + degrees(a) , 100, 130);
}
week05_3b_atan2_dy_dx_text_radians_degrees
角度 degrees vs. radians 弧度 結合 week04_1 and week05_2
void setup(){
size(400,400);
}
void draw(){
background(128);
line(200,200,400,200);
line(200,200,mouseX,mouseY);
float dx = mouseX-200, dy = mouseY-200;
float a = atan2(dy,dx);
if (a<0) arc( 200, 200, 200, 200, a, 0, PIE ); // 負的...零
else arc( 200, 200, 200, 200, 0, a, PIE ); // 零...正的
textSize(30);
text("radians:" + a , 100, 100);
text("degrees:" + degrees(a) , 100, 130);
}
week05_4_atan2_dy_dx_text_radians_degrees
比較 rotate and translate 的順序
void setup(){
size(400,400);
}
void draw(){
background(204);
// 請做以下測試: 把下面兩行，調一下順序
// 會發現: 畫東西之前的 translate() 才有效果
// 在電腦圖學裡，畫圖時，會照著之前 "累積的移動、旋轉" 來放東西
translate(mouseX,mouseY); // 移到mouse所在位置
rotate(radians(frameCount)*50);
rect(-50, -5, 100, 10); // 寬度100的棒子，但放在左上角
}
week05_5_rotate_radians_frameCount_translate_mouseX_mouseY
比較 rotate and translate 的順序
void setup(){
size(400,400);
}
void draw(){
background(204);
// 請做以下測試: 把下面兩行，調一下順序
// 會發現: 畫東西之前的 translate() 才有效果
// 在電腦圖學裡，畫圖時，會照著之前 "累積的移動、旋轉" 來放東西
rotate(radians(frameCount)*50); // 移到mouse所在位置
translate(mouseX,mouseY);
rect(-50, -5, 100, 10); // 寬度100的棒子，但放在左上角
}
week05_6_pushMatrix_popMatrix_good
因為有很多的移動、旋轉，所以用分階層
void setup(){
size(400,400);
}
void draw(){
background(204);
pushMatrix();
translate(width/2, height/2); // 移到畫面中心
rotate(radians(frameCount)*10);
rect(-50, -5, 100, 10);
popMatrix();
pushMatrix();
translate(width/2-100, height/2); // 移到畫面中心
rotate(radians(frameCount)*10);
rect(-50, -5, 100, 10);
popMatrix();
}
week05_6_pushMatrix_popMatrix_bad
因為有很多的移動、旋轉，所以用分階層
void setup(){
size(400,400);
}
void draw(){
background(204);
translate(width/2, height/2); // 移到畫面中心
rotate(radians(frameCount)*10);
rect(-50, -5, 100, 10);
translate(width/2-100, height/2); // 移到畫面中心
rotate(radians(frameCount)*10);
rect(-50, -5, 100, 10);
}
week05_7_many_pushMatrix_popMatrix
void setup(){
size(500,500);
}
void draw(){
background(204);
for(int x=50;x<500;x+=50){ // 每個距離100
for(int y=50;y<500;y+=100){ // 每個距離100
pushMatrix();
translate(x,y); // 移到對應位置
rotate(radians(frameCount));
rect(-50, -5, 100, 10);
popMatrix();
}
}
}
week05_7b_many_pushMatrix_popMatrix
void setup(){
size(500,500);
}
void draw(){
background(204);
for(int x=50;x<500;x+=50){ // 每個距離100
for(int y=50;y<500;y+=100){ // 每個距離100
pushMatrix();
translate(x,y); // 移到對應位置
float a = (y*500+x)/50000.0;
rotate(radians(frameCount)*a);
rect(-50, -5, 100, 10);
popMatrix();
}
}
}
沒有留言:
張貼留言