week05-12750113

week05-1_i_love_you 

先把畫布設定300x300的大小

size(300,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
    point(xx,yy);
  }
}

// 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); // ==0 的線太細了，所以改<0
  }
}

(x*x+y*y-1)^3-x*x*y*y*y=0

week05_1b_i_love_you

// 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=0;yy<300;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); // ==0 的線太細了，所以改<0
  }
}

畫一半的愛心哈哈哈

因為y軸的關係

// 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); // ==0 的線太細了，所以改<0
  }
}
跟week05_1結果一樣，但程式碼更容易理解

week05-2_for_for_ellipse_arc_arc_randians_360

// week05_2_
// 角度 degrees v.s. 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);
    
    text(now,j*100,i*100+30);
  }
}

畫36個圓，在每個圓加上編號

// week05_2_
// 角度 degrees v.s. 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);
    text(now,j*100,i*100+30);
  }
}
用arc畫弧

// week05_2_for_for_ellipse_arc_arc_randians_360
// 角度 degrees (度) v.s. 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); // ellipse 建立橢圓類的弧度
    arc(50+j*100, 50+i*100, 60, 60, 0, now, PIE);
    arc(50+j*100, 50+i*100, 60, 60, 0, radians(now*10), PIE);
    text(now,j*100,i*100+30);
  }
}

用radians跟著目前的圓的角度畫弧

week05-3_antn2_dy_dx_text_radians_degrees
// week05_3_antn2_dy_dx_text_radians_degrees
// degrees v.s. randians 結合 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); // atan:三角函式，可找到 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_antn2_dy_dx_text_radians_degrees
// week05_3b_antn2_dy_dx_text_radians_degrees
// degrees v.s. randians 結合 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); // atan:三角函式，可找到 arc 弧的 radians
  // atan2()出來的值，介於 -PI ~ +PI 中間
  if(a<0) arc(200, 200, 200, 200, a, 0, PIE); // 負的 ~ 0
  else arc(200, 200, 200, 200, 0, a, PIE); // 0 ~ 正的
  textSize(30);
  text("radians: "+ a, 100, 100); // radians:弧度/弳度
  text("degrees: " + degrees(a), 100, 130); // degrees 度
}

加了if判斷，讓負的也能畫出來


week05-4_translate_mouseX_mouseY_radians_frameCount
// week05_4_
// 比較 rotate 與 translate 的順序
void setup(){
  size(400,400);
}
void draw(){
  background(204);
  
  rect(-50, -5, 100, 10); // 寬度100的棒子，但放左上角
}
左上角有一個白色小棒子


// week05_4_translate_mouseX_mouseY
// 比較 rotate 與 translate 的順序
void setup(){
  size(400,400);
}
void draw(){
  background(204);
  // 測試: 把下面2行，調一下順序
  // 會發現:畫東西之前的 translate() 才會有效果
  // 在電腦圖學裡，畫圖時，會照著之前「累積的移動、旋轉」來放東西
  translate(mouseX,mouseY); // 移到 mouse 所在位置
  rect(-50, -5, 100, 10); // 寬度100的棒子，但放左上角
}




// 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)); // 1秒有60的frame，轉60度
  rect(-50, -5, 100, 10); // 寬度100的棒子，但放左上角
}

week05-5_rotate_radians_frameCount_translate_mouseX_mouseY
// 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度
  translate(mouseX,mouseY); // 移到 mouse 所在位置
  rect(-50, -5, 100, 10); // 寬度100的棒子，但放左上角
}

rotate 與 translate交換後變成公轉了

week05-6_pushMatrix_popMtrix
// week05-6_pushMatrix_popMtrix_
// 因為有很多的移動、旋轉，大腦亂掉，所以用「分階層」做事
void setup (){
  size(400,400);
}
void draw(){
  background(204);
  
  translate(width/2, height/2); // (把下面這坨) 移到畫面中心
  rotate(radians(frameCount)*10);
  rect(-50, -5, 100, 10);
}

先在中間旋轉

week05-6_pushMatrix_popMtrix_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);
}

因為沒有push/pop，所以第2個棒子壞掉

week05-6_pushMatrix_popMtrix_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();
}

有push/pop就不會壞掉，兩個棒子都會在對的位置做旋轉


有無push/pop的差別


week05-7_many_pushMatrix_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(); // 今天的主角
    }
  }
}

因為有push/pop的關係，所以每個都可會出現，不會壞掉