課堂作業1：用程式畫出一顆愛心
//week05_1_i_love_you
size(300, 300); //大小300 X 300
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; //減一半、除一半
float y = -(yy - 150)/100.0; //減一半、除一半
// 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);
}
size(300, 300); //大小300 X 300
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; //減一半、除一半
float y = -(yy - 150)/100.0; //減一半、除一半
// 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);
}
}
課堂作業1b：
//week05_1b_i_love_you
size(300, 300); //大小300 X 300
stroke(255, 0, 0); // 紅色的線條
translate(width/2, height/2);//translate(150, 150);
for(int xx = -150; xx < 150; xx++){ //大的 X 0...300
for(int yy = -150; yy < 150; yy++){ //大的 Y 0...300
float x = xx /100.0; //減一半、除一半
float y = -yy/100.0; //減一半、除一半
// 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);
}
}
size(300, 300); //大小300 X 300
stroke(255, 0, 0); // 紅色的線條
translate(width/2, height/2);//translate(150, 150);
for(int xx = -150; xx < 150; xx++){ //大的 X 0...300
for(int yy = -150; yy < 150; yy++){ //大的 Y 0...300
float x = xx /100.0; //減一半、除一半
float y = -yy/100.0; //減一半、除一半
// 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);
}
}
課堂作業2：
//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);
}
}
課堂作業3：
//week05_3_atan2_dy_dx_text_radians_degrees
// degrees vs. radians 結合 week04_1 及 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 度
}
課堂作業3b
//week05_3b_atan2_dy_dx_text_radians_degrees
// degrees vs. radians 結合 week04_1 及 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 度
}
課堂作業4：
//week05_4_translate_mouseX_mouseY_rotate_radians_frameCount
//比較 rotate 與 translate 的順序
void setup(){
size(400, 400);
}
void draw(){
background(204);
//請做以下測試: 把下面2行，調一下順序
//會發現，畫東西之前的 traslate() 才有效果
//在電腦圖學理，畫圖時，會照著「累積的移動、旋轉」來放東西
translate(mouseX, mouseY); //移到 mouse 所在的位置
rotate(radians(frameCount)); //一秒有60個frame，轉60度，要變radians單位
rect(-50, -5, 100, 10); //寬度100的棒子，但是放在左上角
}
課堂作業5：
//week05_5_rotate_radians_frameCount_translate_mouseX_mouseY
//比較 rotate 與 translate 的順序
void setup(){
size(400, 400);
}
void draw(){
background(204);
//請做以下測試: 把下面2行，調一下順序
//會發現，兩行順序不同，一個是自轉，一個是公轉
//在電腦圖學理，畫圖時，會照著「累積的移動、旋轉」來放東西
rotate(radians(frameCount)*10); //一秒有60個frame，轉60度，要變radians單位
translate(mouseX, mouseY); //移到 mouse 所在的位置
rect(-50, -5, 100, 10); //寬度100的棒子，但是放在左上角
}
課堂作業6_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);
}
課堂作業6_good：
//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();
}
課堂作業7：
//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); //移到對應的位置
rotate(radians(frameCount)); //旋轉中的
rect(-50, -5, 100, 10); //長度100的棒子
popMatrix(); //今天的主角
}
}
}
課堂作業8：
沒有留言:
張貼留言