2025電腦圖學: 晚安week10

。關節&鍵盤滑鼠事件
1.把去背和裁切圖片加入程式碼
//week10_01_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.把去背和裁切圖片加入程式碼
//week10_01_postman_head_body_push_trt_pop
PImage postman, head, body;
void setup() {
  size(650, 650);
  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, 650, 650);
  pushMatrix();
  translate(272,259);
  rotate(radians(mouseX));
  translate(-272,-259);
  image(head, 0, 0);
  popMatrix();
  image(body, 0, 0);
}
void mousePressed(){//用來找旋轉中心
  print(mouseX+" "+mouseY);
}

執行結果：
    

3.把支解的部位重新組裝起來
我做太快了，一不小心就全部組起來了

//week10_03_postman_full_body_push_trt_pop
PImage postman, head, body, uparm1, uparm2, hand1, hand2, leg1, leg2;
void setup() {
  size(650, 650);
  postman = loadImage("postman.png");
  head = loadImage("head.png");
  body = loadImage("body.png");
  uparm1 = loadImage("uparm1.png"); 
  uparm2 = loadImage("uparm2.png");
  hand1 = loadImage("hand.png");
  hand2 = loadImage("hand2.png");
  leg1 = loadImage("leg1.png");
  leg2 = loadImage("leg2.png");
}
void draw() {
  background(#FFFFF2);
  image(postman, 0, 0);
  fill(255, 0, 255, 128);//半透明紫色
  rect(0, 0, 650, 650);
  pushMatrix();
    translate(272,259);
    //rotate(radians(mouseX));
    translate(-272,-259);
    image(head, 0, 0);
  popMatrix();
  pushMatrix();
    translate(216,305);
    //rotate(radians(mouseX));
    translate(-216,-305);
    image(uparm1, 0, 0);
    pushMatrix();
      translate(133,307);
      //rotate(radians(mouseX));
      translate(-133,-307);
      image(hand1, 0, 0);
    popMatrix();
  popMatrix();
  
  pushMatrix();
    translate(338,305);
    //rotate(radians(mouseX));
    translate(-338,-305);
    image(uparm2, 0, 0);
    pushMatrix();
      translate(413,297);
      //rotate(radians(mouseX));
      translate(-413,-297);
      image(hand2, 0, 0);
    popMatrix();
  popMatrix();

  pushMatrix();
    translate(257,453);
    //rotate(radians(mouseX));
    translate(-257,-453);
    image(leg1, 0, 0);
  popMatrix();
  pushMatrix();
    translate(303,435);
    //rotate(radians(mouseX));
    translate(-303,-435);
    image(leg2, 0, 0);
  popMatrix();
  image(body, 0, 0);
}
void mousePressed(){//用來找旋轉中心
  print(mouseX+" "+mouseY);
}


執行結果：










4.利用鍵盤事件切換要旋轉的關節(ID)+滑鼠拖曳X軸旋轉角度
   旋轉的角度會保存在陣列(angle[])中
//week10_05_angle_ID_mouseDragged
PImage postman, head, body, uparm1, uparm2, hand1, hand2, leg1, leg2;
float [] angle = new float[20]; //存放20個關節的旋轉角度
int ID = 0; //決定要處理的關節
void mouseDragged(){
  angle[ID] += mouseX - pmouseX;
}
void keyPressed(){
  if(key=='0') ID = 0;//頭
  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;//右腿
}
void setup() {
  size(650, 650);
  postman = loadImage("postman.png");
  head = loadImage("head.png");
  body = loadImage("body.png");
  uparm1 = loadImage("uparm1.png"); 
  uparm2 = loadImage("uparm2.png");
  hand1 = loadImage("hand.png");
  hand2 = loadImage("hand2.png");
  leg1 = loadImage("leg1.png");
  leg2 = loadImage("leg2.png");
}
void draw() {
  background(#FFFFF2);
  image(postman, 0, 0);
  fill(255, 0, 255, 128);//半透明紫色
  rect(0, 0, 650, 650);
  pushMatrix();
    translate(272,259);
    rotate(radians(angle[0]));
    translate(-272,-259);
    image(head, 0, 0);
  popMatrix();
  pushMatrix();
    translate(216,305);
    rotate(radians(angle[1]));
    translate(-216,-305);
    image(uparm1, 0, 0);
    pushMatrix();
      translate(133,307);
      rotate(radians(angle[3]));
      translate(-133,-307);
      image(hand1, 0, 0);
    popMatrix();
  popMatrix();
  
  pushMatrix();
    translate(338,305);
    rotate(radians(angle[2]));
    translate(-338,-305);
    image(uparm2, 0, 0);
    pushMatrix();
      translate(413,297);
      rotate(radians(angle[4]));
      translate(-413,-297);
      image(hand2, 0, 0);
    popMatrix();
  popMatrix();

  pushMatrix();
    translate(257,453);
    rotate(radians(angle[5]));
    translate(-257,-453);
    image(leg1, 0, 0);
  popMatrix();
  pushMatrix();
    translate(303,435);
    rotate(radians(angle[6]));
    translate(-303,-435);
    image(leg2, 0, 0);
  popMatrix();
  image(body, 0, 0);
}
void mousePressed(){//用來找旋轉中心
  print(mouseX+" "+mouseY);
}


 。存檔&重播
//week10_06_postman_angle_ID_press_s_to_save
PImage postman, head, body, uparm1, uparm2, hand1, hand2, leg1, leg2;
float [] angle = new float[20]; //存放20個關節的旋轉角度
int ID = 0; //決定要處理的關節
void mouseDragged(){
  angle[ID] += mouseX - pmouseX;
}
void keyPressed(){
  if(key=='0') ID = 0;//頭
  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=='s'){//存檔  //每次按一次就會存一組angle
    String now = "";
    for(int i=0; i <20; i++){
      now += angle[i] + " ";
    }
    lines.add(now);
    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(650, 650);
  postman = loadImage("postman.png");
  head = loadImage("head.png");
  body = loadImage("body.png");
  uparm1 = loadImage("uparm1.png"); 
  uparm2 = loadImage("uparm2.png");
  hand1 = loadImage("hand.png");
  hand2 = loadImage("hand2.png");
  leg1 = loadImage("leg1.png");
  leg2 = loadImage("leg2.png");
}
void draw() {
  background(#FFFFF2);
  image(postman, 0, 0);
  fill(255, 0, 255, 128);//半透明紫色
  rect(0, 0, 650, 650);
  pushMatrix();
    translate(272,259);
    rotate(radians(angle[0]));
    translate(-272,-259);
    image(head, 0, 0);
  popMatrix();
  pushMatrix();
    translate(216,305);
    rotate(radians(angle[1]));
    translate(-216,-305);
    image(uparm1, 0, 0);
    pushMatrix();
      translate(133,307);
      rotate(radians(angle[3]));
      translate(-133,-307);
      image(hand1, 0, 0);
    popMatrix();
  popMatrix();
  
  pushMatrix();
    translate(338,305);
    rotate(radians(angle[2]));
    translate(-338,-305);
    image(uparm2, 0, 0);
    pushMatrix();
      translate(413,297);
      rotate(radians(angle[4]));
      translate(-413,-297);
      image(hand2, 0, 0);
    popMatrix();
  popMatrix();

  pushMatrix();
    translate(257,453);
    rotate(radians(angle[5]));
    translate(-257,-453);
    image(leg1, 0, 0);
  popMatrix();
  pushMatrix();
    translate(303,435);
    rotate(radians(angle[6]));
    translate(-303,-435);
    image(leg2, 0, 0);
  popMatrix();
  image(body, 0, 0);
}
2025電腦圖學

2025年4月24日星期四

晚安week10

沒有留言:

張貼留言

2025年4月24日 星期四

晚安week10

沒有留言:

張貼留言

2025年4月24日星期四
