week05_11131301賴珮語

課堂練習1

利用數學公式算出愛心的線條且畫出一個愛心

 //week05_1_i_love_you

size(300,300);

stroke(255,0,0);

for(int xx=0;xx<300;xx++){//大的X 0..300

  for(int yy=0;yy<300;yy++){//大的Y0..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);

  }

}

//week05_1b_i_love_you

size(300,300);

stroke(255,0,0);//red line

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 -1.5..+1.5

    float y = -yy/100.0;//除100 -1.5..1.5

      // 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;//每個circle的編號

    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_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度

}

角度有負的

//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度

}

課堂練習4

//week06_4_translate_mouseX_mouseY_rotate_radians_frameCount

//比較rotate 與 translate的順序

void setup(){

  size(400,400);

}

void draw(){

  background(204);

  //請做以下測試: 把以下兩行調一下順序

  //會發現: 畫東西之前的translate()才有效果

  //在電腦圖學裡, 畫圖時, 會照著之前的程式碼｢累積的移動、旋轉｣來控制東西(圖)

  translate(mouseX,mouseY);//移動到滑鼠所在位置

  rotate(radians(frameCount));

  //frameCount 1秒有60個frame 所以1秒轉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);

  //請做以下測試: 把以下兩行調一下順序

  //會發現: 兩行順序不同,一個自轉一個公轉 04是自轉 05是公轉

  //在電腦圖學裡, 畫圖時, 會照著之前的程式碼｢累積的移動、旋轉｣來控制東西(圖)

  rotate(radians(frameCount));

  //frameCount 1秒有60個frame 所以1秒轉60度,要變radians單位

  translate(mouseX,mouseY);//移動到滑鼠所在位置

  rect(-50,-5,100,10); //寬度100的棒子,但放在左上角

}

在圖學裡 累積的移動、旋轉是由下往上讀((頭往左邊歪

課堂練習6

//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);

}

(壞掉的)

加入pushMatrix() popMatrix()

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

  //希望左邊-100的地方也在轉 所以寫一段跟上面一樣的 結果整組壞去

  translate(width/2-100,height/2); //(把下面這坨)移到畫面中心

  rotate(radians(frameCount)*10);

  rect(-50,-5,100,10);

  popMatrix();

}

pushMatrix()和popMatrix()會像大括號一樣 把裡面的東西跟外面的隔開

這樣前面累積下來的旋轉跟移動就不會影響到所有的圖

課堂練習7

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

    }

  }

}