晚安week04

  。移動&&旋轉

1. 會動的目珠

//week04_01_atan
void setup(){
  size(600,300);
}
void draw(){
  background(#C0FFEE); //粉青色, 超讚欸 我喜歡
  ellipse(150,150,100,100);  //大圓
  //ellipse(150+25,150,50,50);  //小圓
  float dx = mouseX-150;
  float dy = mouseY-150;  //計算滑鼠到圓心的距離
  float a = atan2(dy,dx);  //計算角度
  ellipse(150+cos(a)*25,150+sin(a)*25,50,50); //座標根據三角函數定位, 讓裡面的小圓追蹤滑鼠位置
}

執行結果：

用for迴圈寫出兩顆目珠

//week04_02_atan2_for_x
void setup() {
  size(600, 300);
}
void draw() {
  background(#C0FFEE); //粉青色, 超讚欸 我喜歡
  for (int x = 150; x<=450; x+=300) {
    ellipse(x, 150, 100, 100);  //大圓
    //ellipse(150+25,150,50,50);  //小圓
    float dx = mouseX-150;
    float dy = mouseY-150;  //計算滑鼠到圓心的距離
    float a = atan2(dy, dx);  //計算角度
    ellipse(x+cos(a)*25, 150+sin(a)*25, 50, 50); //座標根據三角函數定位, 讓裡面的小圓追蹤滑鼠位置
  }
}

執行結果：





2.旋轉軸

//week04_03_rotateX__radians_mouseY
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  translate(width/2,height/2);
  //rotateY(radians(mouseX));//上週左右旋轉
  rotateX(radians(-mouseY)); //上下旋轉,避免歷史餘讀加上負數
  box(200);
}

執行結果：





對Z軸旋轉

//week04_04_rotateZ
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  translate(width/2,height/2);
  rotateZ(radians(mouseX));
  ellipse(0,0,100,150);
}

執行結果：



3.機械手臂

//week04_05_robot_arm
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  translate(width/2,height/2);
  pushMatrix();
    translate(0,100);
    box(50);  //基座
    pushMatrix();
    translate(0,-25);
    rotateZ(radians(mouseX));
    translate(0,-50);
    box(10,100,10);
    popMatrix();
  popMatrix();
}

執行結果：


















旋轉軸概念
//week04_05a_rotateZ_translate_box
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  translate(width/2,height/2);
    
    //旋轉軸座標預設在正中心
    //以下兩行可以註解觀察結果
    rotateZ(radians(frameCount));//對Z軸旋轉
    translate(0,-50);//把下端移到中心
    
    box(10,100,10);//轉動用的長方塊
}


//week04_05b_translate_mouse_follow
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  //translate(width/2,height/2);
    
    translate(mouseX,mouseY);//跟著滑鼠移動
    rotateZ(radians(frameCount));//對Z軸旋轉
    translate(0,-50);//把下端移到中心
    
    box(10,100,10);//轉動用的長方塊
}









  。公轉&&自轉
會跟著滑鼠跑又會自轉的地球
//week04_06_push_translate_rotate
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  pushMatrix();
  translate(mouseX,mouseY);
  rotateY(radians(frameCount));
  sphere(100);
  popMatrix();
}


執行結果：




















繞著太陽跑的地球
//week04_07_sun_earth
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  translate(width/2,height/2);
  sphere(50);
  rotateY(radians(frameCount));
  pushMatrix();
    translate(150,0);
    rotateY(radians(frameCount));
    sphere(30);
  popMatrix();
}


執行結果：
















月亮繞著地球繞著太陽
//week04_08_sun_earth_moon
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  translate(width/2,height/2);
  sphere(50);//太陽
  rotateY(radians(frameCount));
  pushMatrix();
    translate(150,0);
    rotateY(radians(frameCount));
    sphere(30);//地球
     pushMatrix();
      translate(50,0);
      rotateY(radians(frameCount));
      sphere(10);//月球
    popMatrix();
  popMatrix();
}

執行結果：



 

。貼圖
第一周匯入圖片的程式碼
//week_09_earth_texture
//網路上抓一張地球材質, 把圖片拖曳進編譯器
PImage img = loadImage("earth.jpg");
size(600,300);
image(img,0,0,600,300);

加上貼圖程式碼setTexture()
//week04_10_earth_texture
size(400,400,P3D);
translate(width/2,height/2);
PShape globe = createShape(SPHERE,100);
PImage img = loadImage("earth.jpg");  //儲存圖片變數
globe.setTexture(img);  //給globe球體加上材質
shape(globe);

執行結果：

    


















轉起來
//week04_10_earth_texture
PShape globe;
void setup(){
  size(400,400,P3D);
  globe = createShape(SPHERE,100);
  PImage img = loadImage("earth.jpg");
  globe.setTexture(img);
}
void draw(){
  background(0);
  translate(width/2, height/2);
  rotateY(radians(frameCount));
  shape(globe);
}

執行結果：






















月球&太陽也


丟進太陽系的程式碼
//week04_13_solar_system
PShape globe;
PShape lunar;
PShape solar;
void setup(){
  noStroke();
  size(400,400,P3D);
  PImage img;
  solar = createShape(SPHERE,80);
  img = loadImage("sun.jpg");
  solar.setTexture(img);
  
  globe = createShape(SPHERE,30);
  img = loadImage("earth.jpg");
  globe.setTexture(img);
  
  lunar = createShape(SPHERE,10);
  img = loadImage("moon.jpg");
  lunar.setTexture(img);
}
void draw(){
  
  background(0);
  translate(width/2,height/2);
  rotateZ(radians(frameCount/2));
  shape(solar); //太陽
  rotateY(radians(frameCount*1.8));
  pushMatrix();
    translate(150,0);
    rotateY(radians(frameCount*2.4));
    shape(globe);//地球
     pushMatrix();
      translate(50,0);
      rotateY(radians(frameCount));
      shape(lunar);//月球
    popMatrix();
  popMatrix();
}


執行結果: