2025年3月20日 星期四

12753062_week05

 // week05_1_i_love_you

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

// week05_1b_i_love_you
size(300,300); // 大小300
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 -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);
  }
}

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

// 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("*degrees: " + 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); // 負的~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 度
}
// week05_4_translate_mouseX_mouseY_rotate_radians_frameCount
// 比較 rotate 與 translate 的順序
void setup(){
  size(400,400);
}
void draw(){
  background(204);
  // 請做以下測試:把下面2行,調一下順序
  // 會發現: 畫東西之前的 translate()才有效果
  // 在電腦圖學裡, 畫圖時, 會照著之前[累積的移動,旋轉]來放東西
  translate(mouseX,mouseY); //移到mouse所在位置
  rotate(radians(frameCount)*3); // 一秒有60個frame,轉60度,要變成radians單位
  rect(-50,-5,100,10); // 寬度100的棒子,但放在左上角
}
// week05_5_rotate_mouseX_mouseY_translate_radians_frameCount
// 比較 translate 與 rotate 的順序
void setup(){
  size(400,400);
}
void draw(){
  background(204);
  // 請做以下測試:把下面2行,調一下順序
  // 會發現: 兩行順序不同, 一個自轉,一個公轉
  // 在電腦圖學裡, 畫圖時, 會照著之前[累積的移動,旋轉]來放東西
  rotate(radians(frameCount)*3); // 一秒有60個frame,轉60度,要變成radians單位
  translate(mouseX,mouseY); //移到mouse所在位置
  rect(-50,-5,100,10); // 寬度100的棒子,但放在左上角
}

// 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,height/2); // (把下面這坨)移動到畫面中心
  rotate(radians(frameCount)*10);
  rect(-50,-5,100,10);
}

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

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

沒有留言:

張貼留言