晚安week05

小葉老師又在網路上看到的酷東西

//week05_01_heart
size(300, 300);
stroke(255, 0, 0);
for (int xx=0; xx<300; xx++) {
  for (int yy=0; yy<300; yy++) {
    float x = (xx-150)/100.0; //0~300  >>  -.15 ~ +1.5
    float y = (yy-150)/100.0;  //x(y)-150相當於translate到視窗中心

    float d = x*x + y*y - 1;
    if (-d*d*d - x*x*y*y*y > 0 ) point(xx, yy);
  }
}

執行結果：



















。RE:角度&&弧度
1.角度與弧度
//week05_02_ellipse&arc
//degreev.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+1;
    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);
  }
}


arc(x座標, y座標, x大小, y大小, 起始角度, 結束角度, 模式(PIE))
執行結果：






















2.角度與弧度的差別
//week05_3_atan2_radians_degrees
void setup() {
  size(400, 400);
}
void draw() {
  background(0);
  line(200,200,400,200);
  line(200, 200, mouseX, mouseY);
  float dx = mouseX-200, dy = mouseY-200;
  float a = atan2(dy,dx);  //三角函式, 計算指定的弧度
  //atan2()的值介於-PI ~ +PI之間
  arc(200,200,200,200,0,a,PIE);
  textSize(30);
  text("radians: "+a,100,100); //顯示弧度
  text("degrees: "+degrees(a),100,130); //顯示角度, degrees()換算弧度與角度
}

執行結果：















。RE:移動&&旋轉(的順序)

//week05_04_translate_rotate
//rotate與translate的順序
void setup(){
  size(400,400);
}
void draw(){
  background(205);
  //嘗試調換以下程式碼順序
  translate(mouseX, mouseY); //移動到滑鼠所在位置
  rotate(radians(frameCount*10));//依照目前影格數旋轉
  rect(-50,-5,100,10);//左上角的長方體,寬度100
  
  //每次畫圖會依照先前的tranlate和rotate
}

程式碼的先後順序會影響執行結果，在畫圖(rect(), arc(), ellipse()...等)之前需要設定好位置、旋轉、顏色......等

 
  rotate(radians(frameCount*10));
  translate(mouseX, mouseY);
兩行調換順序後則會變成公轉





。RE:階層
1.Matrix矩陣
//week05_06b_push&popMatrix_add
///利用矩陣Matrix分階層處理
void setup() {
  size(400, 400);
}
void draw() {
  background(0);

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


在多個畫圖物件的情況下，再更先前的程式碼也會被沿用到之後的畫圖
利用多階層的方式分隔物件

for迴圈與多階層
//week05_07_mutiple_pop&pushMatrix
void setup(){
  size(500,500);
}
void draw(){
  background(0);
  for(int x= 50; x<500; x+=100){
    for(int y= 50; y<500; y+=100){
      pushMatrix();
        translate(x,y);
        rotate(radians(frameCount));
        rect(-50,-5,100,10);
      popMatrix();
    }
  }
}

執行結果：


















然後被我玩壞了