課堂作業01
//week05_1_i_love_you
size(300,300); //大小300x300
stroke(255,0,0); //紅色的線條
for(int xx=0;xx<300;xx++){ //大的x 0...300
for(int yy=0;yy<300;yy++){ //大的y 0...300
float x = (xx-150)/100.0; //減一半、除100
float y = -(yy-150)/100.0; //減一半、除100
// 0...300 變-150...+150 變 -1.5～+1.5
float d = x*x + y*y -1;
if( d*d*d - x*x*y*y*y < 0) point(xx,yy);
}
}
課堂作業01b
//week05_1b_i_love_you
size(300,300); //大小300x300
stroke(255,0,0); //紅色的線條
translate(width/2, height/2); //translate(150,150);
for(int xx=-150;xx<150;xx++){ //大的x -150...150
for(int yy=-150;yy<150;yy++){ //大的y -150...150
float x = xx/100.0; //減一半、除100
float y = - yy/100.0; //減一半、除100
// 0...300 變-150...+150 變 -1.5～+1.5
float d = x*x + y*y -1;
if( d*d*d - x*x*y*y*y < 0) point(xx,yy);
}
}
課堂作業02
//week05_2_for_for_ellipse_arc_arc_radians_360
//角度 degrees 度 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);
}
}
課堂作業03
//week05_3_atan2_dy_dx_text_radians_degrees
//degrees 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() 出來的值,介於 -PI...+PI中間
arc( 200, 200, 200, 200, 0, a, PIE); //把算出來的arc radians拿來用
textSize(30);
text( "radians:" + a, 100, 100); //radians 弧度/弳度
text( "dedrees:" + degrees(a), 100, 130); //degrees度
}
課堂作業03b
//week05_3b_atan2_dy_dx_text_radians_degrees
//degrees 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() 出來的值,介於 -PI...+PI中間
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); //radians 弧度/弳度
text( "dedrees:" + degrees(a), 100, 130); //degrees度
}
課堂作業04
//week05_4_translate_mouseX_mouseY_rotate_radians_frameCount
//比較 rotate 與 translate 的順序
void setup(){
size(400,400);
}
void draw(){
background(204);
//請做以下測試: 把下面2行,調遺下順序
//會發現: 畫東西之前的 translate()才有效果
//在電腦圖學裡,畫圖時,會照著之前「累積的移動、旋轉」來放東西
translate(mouseX,mouseY); //移動到mouse所在的位置
rotate(radians(frameCount)); //1淼有60個frame,轉60度,要變randians
rect(-50, -5, 100, 10); //寬度100的棒子,但放在左上角
}
課堂作業05
//week05_5_rotate_radians_frameCount_translate_mouseX_mouseY
//比較 rotate 與 translate 的順序
void setup(){
size(400,400);
}
void draw(){
background(204);
//請做以下測試: 把下面2行,調遺下順序
//會發現: 兩行順序不同, 一個自轉、一個公轉
//在電腦圖學裡,畫圖時,會照著之前「累積的移動、旋轉」來放東西
rotate(radians(frameCount)); //1淼有60個frame,轉60度,要變randians
translate(mouseX,mouseY); //移動到mouse所在的位置
rect(-50, -5, 100, 10); //寬度100的棒子,但放在左上角
}
課堂作業06_bad
//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); //好的
//希望在左邊-100的地方,也在轉,但是它亂掉了!
translate(width/2-100, height/2); //(把下面這坨)移動到畫面中心
rotate(radians(frameCount)*10);
rect(-50,-5,100,10);
//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_7_many_pushMatrix_popMatrix
void setup(){
size(500,500);
}
void draw(){
background(204);
for(int x = 50; x<500; x+=100){ //每個距離100
for(int y = 50; y<500; y+=100){ //每個距離100
pushMatrix(); //今天的主角(再圖學裡,會往右縮排)
translate(x,y); //移到對應的x,y座標位置
rotate(radians(frameCount)); //旋轉中的
rect(-50, -5, 100, 10); //長度100的棒子
popMatrix(); //今天的主角
}
}
}
沒有留言:
張貼留言