課堂作業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);
}
}
課堂作業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_dx_dy_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( "degrees: " + degrees(a), 100, 130); // degrees 度
}
更新:
//week05_3b_atan2_dx_dy_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( "degrees: " + degrees(a), 100, 130); // degrees 度
}
課堂作業04:
// week05_4_translate_mouseX_mouseY_radians_frameCount
// 比較 rotate 與 translate 的順序
void setup(){
size(400,400);
}
void draw(){
background(204);
// 請做以下測試: 把下面2行，調一下順序
// 會發現: 畫東西之前的 translate() 才有效果
// 在電腦圖學裡， 畫圖時， 會照著之前「累積的移動、旋轉」來放東西
translate(mouseX, mouseY); // 移到 mouse 所在位置
rotate(radians(frameCount));
rect(-50, -5, 100,10); // 寬度100的棒子，但放在左上角
}
課堂作業05:
// week05_5_radians_frameCount_translate_mouseX_mouseY
// 比較 rotate 與 translate 的順序
void setup(){
size(400,400);
}
void draw(){
background(204);
// 請做以下測試: 把下面2行，調一下順序
// 會發現: 兩行順序不同， 一個自轉， 一個公轉
// 在電腦圖學裡， 畫圖時， 會照著之前「累積的移動、旋轉」來放東西
rotate(radians(frameCount)*5); // 1秒有60個frame，轉60度， 要變radians單位
translate(mouseX, mouseY); // 移到 mouse 所在位置
rect(-50, -5, 100,10); // 寬度100的棒子，但放在左上角
}
課堂作業06:
// 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); // 好的 popMatrix();
//希望在左邊 -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();
}
課堂作業07:
// 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(); // 今天的主角
}
}
}
沒有留言:
張貼留言