2025年3月20日 星期四

12750094_week05

 //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;//減一半、除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);
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
      
    
    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_radians360
//角度 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); //弧度/弳度
  text("degrees: "+degrees(a),100,130); //度
}
//week05b_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中間
  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); //弧度/弳度
  text("degrees: "+degrees(a),100,130); //度
}

//week05_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));//1秒有60frame,轉60度,要變radians單位
  rect(-50,-5,100,10);//寬度100的棒子,但放在左上角
}
//week05_5_rotate_radians_frameCount_translate_mouseX_mouseY
//比較rotate 與 translate的順序
void setup(){
  size(400,400);
}
void draw(){
  background(204);
  //把下面兩行移動順序
  //會發現 兩行順序不同 一個自轉,一個公轉
  //在電腦圖學裡,畫圖時會照著 之前累積的移動旋轉來放東西
  rotate(radians(frameCount));//1秒有60frame,轉60度,要變radians單位
  translate(mouseX,mouseY);//移到滑鼠所在位置
  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-100,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();//主角
    }
  }
}





沒有留言:

張貼留言