12750140_week05

課堂作業1

//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; //減一半，除一半
    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); //大小300X300
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; //減一半 除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);
  }
}

課堂作業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_atans_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("degress" + 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("degress" + degrees(a), 100, 130); //degrees 度
}





課堂作業4

//week05_4_translate_mouseX_mouseY_rotate_radians_frameCounts
//比較 rotate 與 translate 的順序
void setup(){
  size(400,400);
}
void draw(){
  background(204);
  //請做以下測試: 把下面2行，調一下順序
  //會發現: 畫東西之前的 translate()才有效果
  //在電腦圖學裡，畫圖時，會照著之前「累積的移動、旋轉」來放東西
  translate(mouseX,mouseY); //移到mouse所在位置
  rotate(radians(frameCount)*10); //1秒有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行，調一下順序
  //會發現: 畫東西之前的 translate()才有效果
  //在電腦圖學裡，畫圖時，會照著之前「累積的移動、旋轉」來放東西
  rotate(radians(frameCount)*10); //1秒有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);
}

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


比較: 左邊bad，右邊good


課堂作業7
//week05_7_many_pusjMatrix__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();
    }
   }
}