12750211-week10

1.顯示郵差圖像，額外畫上頭與身體兩層，使用半透明圖層區分

// week10_1_postman_head_body

// 頭、身體
size(560, 560);
PImage postman = loadImage("postman.png");
PImage head = loadImage("head.png");
PImage body = loadImage("body.png");
background(#FFFFF2);
image(postman, 0, 0); // 基礎的(全身)
fill(255, 0, 255, 128); // 半透明的紫色
rect(0, 0, 560, 560); // 蓋上去
image(head, 0, 0); // 再畫頭
image(body, 0, 0); // 再畫身體

2.加上 pushMatrix() / popMatrix() 與 rotate()，讓頭部依滑鼠 X 軸位置轉動

// week10_2_postman_head_body_push_trt_pop
PImage postman, head, body;
void setup(){
  size(560, 560);
  postman = loadImage("postman.png");
  head = loadImage("head.png");
  body = loadImage("body.png");
}
void draw(){
  background(#FFFFF2);
  image(postman, 0, 0); // 基礎的(全身)
  fill(255, 0, 255, 128); // 半透明的紫色
  rect(0, 0, 560, 560); // 蓋上去
  pushMatrix();
    translate(+236, +231); // 再放回去正確的位置
    rotate(radians(mouseX));
    translate(-236, -231); // 把頭的旋轉中心, 放到(0,0)
    image(head, 0, 0); // 再畫頭
  popMatrix();
  image(body, 0, 0); // 再畫身體
}

3.加入左手臂與左手圖片，讓這兩個關節一起隨滑鼠旋轉

// week10_3_postman_head_body_uparm1_hand1_push_trt_pop
PImage postman, head, body, uparm1, hand1;
void setup(){
  size(560, 560);
  postman = loadImage("postman.png");
  head = loadImage("head.png");
  body = loadImage("body.png");
  uparm1 = loadImage("uparm1.png");
  hand1 = loadImage("hand1.png");
}
void draw(){
  background(#FFFFF2);
  image(postman, 0, 0); // 基礎的(全身)
  fill(255, 0, 255, 128); // 半透明的紫色
  rect(0, 0, 560, 560); // 蓋上去
  pushMatrix(); // 要畫左邊的上手臂、手肘
    translate(+185, +261);
    rotate(radians(mouseX));
    translate(-185, -261);
    image(uparm1, 0, 0); // 上手臂
    pushMatrix();
      translate(+116, +265);
      rotate(radians(mouseX));
      translate(-116, -265);
      image(hand1, 0, 0);
    popMatrix();
  popMatrix();
  
  pushMatrix();
    translate(+236, +231); // 再放回去正確的位置
    rotate(radians(mouseX));
    translate(-236, -231); // 把頭的旋轉中心, 放到(0,0)
    image(head, 0, 0); // 再畫頭
  popMatrix();
  image(body, 0, 0); // 再畫身體
}

4.增加右邊手臂與手掌，也可以讓兩邊手部跟著滑鼠同步旋轉

// week10_4_postman_head_body_uparm1_hand1_uparm2_hand2_push_trt_pop
PImage postman, head, body, uparm1, hand1, uparm2, hand2;
void setup(){
  size(560, 560);
  postman = loadImage("postman.png");
  head = loadImage("head.png");
  body = loadImage("body.png");
  uparm1 = loadImage("uparm1.png");
  hand1 = loadImage("hand1.png");
  uparm2 = loadImage("uparm2.png");
  hand2 = loadImage("hand2.png");
}
void draw(){
  background(#FFFFF2);
  image(postman, 0, 0); // 基礎的(全身)
  fill(255, 0, 255, 128); // 半透明的紫色
  rect(0, 0, 560, 560); // 蓋上去
  pushMatrix(); // 要畫左邊的上手臂、手肘
    translate(+185, +261);
    rotate(radians(mouseX));
    translate(-185, -261);
    image(uparm1, 0, 0); // 上手臂
    pushMatrix();
      translate(+116, +265);
      rotate(radians(mouseX));
      translate(-116, -265);
      image(hand1, 0, 0);
    popMatrix();
  popMatrix();
  
  pushMatrix(); // 要畫右邊的上手臂、手肘
    translate(290, 262);
    rotate(radians(mouseX));
    translate(-290, -262);
    image(uparm2, 0, 0);
    pushMatrix();
      translate(357, 259);
      rotate(radians(mouseX));
      translate(-357, -259);
      image(hand2, 0, 0);
    popMatrix();
  popMatrix();
  
  pushMatrix();
    translate(+236, +231); // 再放回去正確的位置
    rotate(radians(mouseX));
    translate(-236, -231); // 把頭的旋轉中心, 放到(0,0)
    image(head, 0, 0); // 再畫頭
  popMatrix();
  image(body, 0, 0); // 再畫身體
}

5.透過按鍵選取關節 ID，使用滑鼠拖曳改變各關節的角度（頭、左臂、右臂等）

// week10_5_postman_many_angle_ID_mouseDragged
PImage postman, head, body, uparm1, hand1, uparm2, hand2;
float [] angle = new float[20]; // 準備20個關節的變數
int ID = 0; // 現在要處理的關節 ID (第幾個關節)
void mouseDragged(){
  angle[ID] += mouseX - pmouseX;
}
void keyPressed(){
  if(key=='1') ID = 1; // 左邊臂
  if(key=='2') ID = 2; // 左邊手
  if(key=='3') ID = 3; // 右邊臂
  if(key=='4') ID = 4; // 右邊手
  if(key=='5') ID = 5; // (待用)
  if(key=='6') ID = 6; // (待用)
  if(key=='0') ID = 0; // 頭
}
void setup(){
  size(560, 560);
  postman = loadImage("postman.png");
  head = loadImage("head.png");
  body = loadImage("body.png");
  uparm1 = loadImage("uparm1.png");
  hand1 = loadImage("hand1.png");
  uparm2 = loadImage("uparm2.png");
  hand2 = loadImage("hand2.png");
}
void draw(){
  background(#FFFFF2);
  image(postman, 0, 0); // 基礎的(全身)
  fill(255, 0, 255, 128); // 半透明的紫色
  rect(0, 0, 560, 560); // 蓋上去
  pushMatrix(); // 要畫左邊的上手臂、手肘
    translate(+185, +261);
    rotate(radians(angle[1]));
    translate(-185, -261);
    image(uparm1, 0, 0); // 上手臂
    pushMatrix();
      translate(+116, +265);
      rotate(radians(angle[2]));
      translate(-116, -265);
      image(hand1, 0, 0);
    popMatrix();
  popMatrix();
  
  pushMatrix(); // 要畫右邊的上手臂、手肘
    translate(290, 262);
    rotate(radians(angle[3]));
    translate(-290, -262);
    image(uparm2, 0, 0);
    pushMatrix();
      translate(357, 259);
      rotate(radians(angle[4]));
      translate(-357, -259);
      image(hand2, 0, 0);
    popMatrix();
  popMatrix();
  
  pushMatrix();
    translate(+236, +231); // 再放回去正確的位置
    rotate(radians(angle[0]));
    translate(-236, -231); // 把頭的旋轉中心, 放到(0,0)
    image(head, 0, 0); // 再畫頭
  popMatrix();
  image(body, 0, 0); // 再畫身體
}

6.按下 s 儲存目前所有角度、r 回放已儲存的多筆動作資料（從 angles.txt 讀取）

//week10_6_postman_manyangle_ID_saveStrings_loadStrings
PImage head,postman,body,hand1,uparm1,hand2,uparm2;
float [] angle = new float[20];//20個關節變數
int ID = 0;//處理中關節ID
void mouseDragged(){
   angle[ID]+=mouseX-pmouseX; 
}
void keyPressed(){
    if(key=='1') ID = 1; // 左臂
    if(key=='2') ID = 2; // 左手
    if(key=='3') ID = 3; // 右臂
    if(key=='4') ID = 4; // 右手
    if(key=='5') ID = 5; // (待用)
    if(key=='6') ID = 6; // (待用)
    if(key=='0') ID = 0; // 頭
    

    if(key=='s'){//每按一次S就存一組ANGLE
      String now="";//要放現在全部關節的值
      for(int i=0;i<20;i++){
         now+=angle[i]+" "; //全部塞到now裡
      }
      lines.add(now);//現在的這行加到lines裡
      String[] arr= new String[lines.size()];
      lines.toArray(arr);
      saveStrings("angles.txt",arr);
    }
  if(key=='r'){//讀入
    if(R<lines.size()){
       float [] now=float(split(lines.get(R),' '));// 把字串拆成角度陣列
       for(int i=0;i<20;i++)  angle[i]=now[i];// 套用到每個角度
       R=(R+1)%lines.size();
    }
   }  
}
int R=0;// 回放用的索引
ArrayList<String> lines = new ArrayList<String>();//放移動結果 
void setup(){
  size(560,560);
  postman= loadImage("postman.png");
  head =loadImage("head.png");
  body =loadImage("body.png");
  uparm1=loadImage("uparm1.png");
  hand1=loadImage("hand1.png");
  uparm2=loadImage("uparm2.png");
  hand2=loadImage("hand2.png");
}
void draw(){// 每一幀會自動畫一次（畫出角色與角度）
  background(#FFFFF2);
  image(postman,0,0);
  fill(255,0,255,128);
  rect(0,0,560,560);
  // 左手臂（上臂＋手）
  pushMatrix();
    translate(185,261);
    rotate(radians(angle[1]));
    translate(-185,-261);
    image(uparm1,0,0);
    pushMatrix();
      translate(116,265);
      rotate(radians(angle[2]));
      translate(-116,-265);
      image(hand1,0,0);
    popMatrix();
  popMatrix();
  // 右手臂（上臂＋手）
  pushMatrix();
    translate(290,262);
    rotate(radians(angle[3]));
    translate(-290,-262);
    image(uparm2,0,0);
    pushMatrix();
      translate(357,259);
      rotate(radians(angle[4]));
      translate(-357,-259);
      image(hand2,0,0);
    popMatrix();
  popMatrix();
  // 頭部
  pushMatrix();
    translate(236,231);//再放回去正確位置
    rotate(radians(angle[0]));
    translate(-236,-231);//把頭的旋轉中心放到(0,0)
    image(head,0,0);
  popMatrix();
  image(body,0,0);
}        

angles.txt:43.0 58.0 -73.0 67.0 -73.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0