week04_11131301賴珮語

課堂練習1
試著練習做出這個(中間的綠圓圈會跟著鼠標動)

圖中有三顆眼睛 不過我們先慢慢來 先做出一顆眼睛就好

//week04_01_atan2_dy_dx_cos_sin

void setup(){

  size(600,300);

}

void draw(){

  background(#C0FFEE);  //咖啡粉青色

  ellipse(150,150,100,100);  //大眼睛

  float dx=mouseX-150, dy=mouseY-150; 

  float a=atan2(dy,dx);  //算出角度

  ellipse(150+cos(a)*25,150+sin(a)*25,50,50);

}

現在做出一顆眼睛了 而且眼珠會跟著鼠標動

課堂練習2

上一個練習做出一顆眼睛了 現在試著做出第二顆

//week04_02_atan2_for_x_dy_dx_cos_sin

void setup(){

  size(600,300);

}

void draw(){

  background(#C0FFEE);  //咖啡粉青色

  for(int x=150; x<=450; x+=300){

    ellipse(x,150,100,100);  //大眼睛

    float dx=mouseX-x, dy=mouseY-150; 

    float a=atan2(dy,dx);  //算出角度

    ellipse(x+cos(a)*25,150+sin(a)*25,50,50);

  }

}

課堂練習3

稍微做個小小的練習後現在要來做本周的大魔王了

他會轉動 所以我們先來練習一下旋轉

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

}

課堂練習4

上週練習了讓圖對Y軸轉

剛剛練習了對X軸轉

現在來練習對著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);

}

課堂練習5

練習做出一個機械手臂

//week04_05_robot_arm_pushMatrix_T_R_T_box_popMatrix

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

}

課堂練習5a

我們來觀察一下旋轉的情況

//week04_05a_rotateZ_translate_box

void setup(){

  size(400,400,P3D);

}

void draw(){

  background(128);

  translate(width/2,height/2);  //移到畫面中心

      //以下2行 分別註解、排列組合觀察

      rotateZ(radians(frameCount));  //對Z軸旋轉

      translate(0,-50);  //把下端移到中心

      box(10,100,10); //可轉動的長條

}

可以觀察到 如果有translate(0,-50); 那麼棒子的下端就會在中心點

如果沒有translate(0,-50); 那麼就會變成棒子的中間在中心點

課堂練習5b

//week04_05b_rotateZ_translate_box

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); //可轉動的長條

}

現在棒子會跟著鼠標移動了

課堂練習6

練習自轉

//week04_06_push_translate_rotate_sphere_pop

void setup(){

  size(400,400,P3D);

}

void draw(){

  background(128);

  pushMatrix();

    translate(mouseX,mouseY);

    rotateY(radians(frameCount));

    sphere(100);

  popMatrix();

}

現在球球會跟著鼠標移動而且會自轉

課堂練習7

練習公轉

//week04_07

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

}

大圓繞著小圓轉

課堂練習8

再加一顆球

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

}

現在中圓繞著大圓轉 小圓繞著中圓轉

課堂練習9

讓地球有顏色

//week04_09_earth_texture_image

//googleLearth map texture 下載1張地球的圖片 earth.jpg

//把圖檔拉進程式裡

PImage img =loadImage("earth.jpg");

size(600,300);

image(img,0,0,600,300);

課堂練習10

//week04_10_earth_texture_image

//googleLearth map texture 下載1張地球的圖片 earth.jpg

//把圖檔拉進程式裡

size(400,400,P3D);

PShape earth=createShape(SPHERE,100);

PImage img =loadImage("earth.jpg");

earth.setTexture(img);

shape(earth);

課堂練習11

//week04_11_earth_setTexture_translate_rotate

PShape earth;

void setup(){

  size(400,400,P3D);

  earth=createShape(SPHERE,100);

  PImage img=loadImage("earth.jpg");

  earth.setTexture(img);

}

void draw(){

  background(0);

  translate(width/2,height/2);

  rotateY(radians(frameCount));

  shape(earth);

}

課堂練習12

換月亮 把所有earth換moon

//week04_12_moon_setTexture_translate_rotate

PShape moon;

void setup(){

  size(400,400,P3D);

  moon=createShape(SPHERE,100);

  PImage img=loadImage("moon.jpg");

  moon.setTexture(img);

}

void draw(){

  background(0);

  translate(width/2,height/2);

  rotateY(radians(frameCount));

  shape(moon);

}

課堂練習13

換太陽 把所有moon換sun

//week04_13_sun_setTexture_translate_rotate

PShape sun;

void setup(){

  size(400,400,P3D);

  sun=createShape(SPHERE,100);

  PImage img=loadImage("sun.jpg");

  sun.setTexture(img);

}

void draw(){

  background(0);

  translate(width/2,height/2);

  rotateY(radians(frameCount));

  shape(sun);

}

課堂練習14

現在三顆星球都準備好了 結合課堂練習8讓三顆球都有圖片

//week04_14_sun_earth_moon_setTexture

PShape sun,earth,moon;

//樓下 剪貼自week04_08,樓上是 week04_11,12,13

void setup(){

  size(400,400,P3D);

  sun=createShape(SPHERE,100);

  PImage img=loadImage("sun.jpg");

  sun.setTexture(img);

  

  earth=createShape(SPHERE,30);

  img=loadImage("earth.jpg");

  earth.setTexture(img);

  

  moon=createShape(SPHERE,10);

  img=loadImage("moon.jpg");

  moon.setTexture(img);

}

void draw(){

  background(128);

  translate(width/2,height/2);

  shape(sun); //sphere(50);  //太陽

  rotateY(radians(frameCount));

  pushMatrix();

    translate(150,0);

    rotateY(radians(frameCount));

    shape(earth);//sphere(30);  //地球

    pushMatrix();

      translate(50,0);

      rotateY(radians(frameCount));

      shape(moon); //sphere(10);  //月球

    popMatrix();

  popMatrix();

}