作業1:
程式碼:
//week05_i_love_you
size(300,300); //大小300*300視窗
stroke(255,0,0);
for(int xx=0;xx<300;xx++){
for(int yy=0;yy<300;yy++){
float x=(xx-150)/100.0;
float y=-(yy-150)/100.0;
float d=x*x+y*y -1;
if(d*d*d -x*x*y*y*y<0)
point(xx,yy);
}
}
執行結果:
作業1b:
程式碼:
//week05_1b_i_love_you
size(300,300); //大小300*300視窗
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;
float y=-yy/100.0;
float d=x*x+y*y -1;
if(d*d*d -x*x*y*y*y<0)
point(xx,yy);
}
}
執行結果:
作業2:
程式碼:
//week05_2_for_for_ellipse_arc_arc_radians_360
//角度 degress 度 vs. radians 弧度/弳度
size(600,600);
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);
}
}
執行結果:
作業3:
程式碼:
//week05_3_atan2_dy_dx_text_radians_degrees
//degress vs. radians 結合 week04_01 和 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弧的radians
// atan2() 出來的值, 介於 -P1...+PI 中間
arc(200, 200, 200, 200, 0, a, PIE); //把算出來的arc radians 拿來用
textSize(30);
text( "radians:" +a , 100,100); //radians弧度/經度
text(" degrees "+degrees(a),100,130); //degrees度
}
執行結果:
作業3b:
程式碼:
//week05_3b_atan2_dy_dx_text_radians_degrees
//degress vs. radians 結合 week04_01 和 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弧的radians
// atan2() 出來的值, 介於 -P1...+PI 中間
if(a<0) arc(200, 200, 200, 200, a, 0, PIE); //把算出來的arc radians 拿來用
else arc(200, 200, 200, 200, 0, a,PIE);
textSize(30);
text( "radians:" +a , 100,100); //radians弧度/經度
text(" degrees "+degrees(a),100,130); //degrees度
}
執行結果:
作業4:
程式碼:
//week05_4_translate_mouseX_mouseY_rotate_radians_frameCount
void setup(){
size(400, 400);
}
void draw(){
background(204);
//請做以下測試: 把下面2行,調一下順序
//會發現: 畫東西之前的 translate()才有效果
//在電腦圖學裡, 畫圖時, 會照著之前「累積的移動、旋轉」來放東西
translate(mouseX, mouseY); //移到mouse所在位置
rotate(radians(frameCount)*10);
rect(-50,-5,100,10); //寬度100的棒子, 但放在左上角
}
執行結果:
作業5:
程式碼:
//week05_5_rotate_radians_frameCount_translate_mouseX_mouseY
void setup(){
size(400, 400);
}
void draw(){
background(204);
//請做以下測試: 把下面2行,調一下順序
//會發現: 畫東西之前的 translate()才有效果
//在電腦圖學裡, 畫圖時, 會照著之前「累積的移動、旋轉」來放東西
rotate(radians(frameCount)*10);
translate(mouseX, mouseY); //移到mouse所在位置
rect(-50,-5,100,10); //寬度100的棒子, 但放在左上角
}
執行結果:
作業6:
程式碼:
//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();
}
執行結果:
作業6:
程式碼:
//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);
}
執行結果:
作業7:
程式碼:
//week05_7_many_pushMatrix_popMatrix
void setup(){
size(500,500);
}
void draw(){
background(204);
for(int x=50;x<500;x+=100){
for(int y=50;y<500;y+=100){
pushMatrix();
translate(x,y);
rotate(radians(frameCount));
rect(-50,-5,100,10);
popMatrix();
}
}
}
執行結果:
沒有留言:
張貼留言