2025電腦圖學: 12750113-week14

week14-1_PFont_createFont_textSize_text

// week14_1_PFont_createFont_textSize_text
size(300,300);
textSize(50); // 50號字
text("Hello",10,50); // 預設的字型

PFont font = createFont("Time New Roman",50);

textFont(font); // 換字型
text("Hello",10,100); // 放下面一點點
print(PFont.list()); // 列出現在所有可用的字形
// 改用for 迴圈，把全部的字型，分行印出來
for(String name:PFont.list()) println(name);

有不同字型，但打中文會壞掉

除非用中文的字型

week14-2_PFont_Chinese_font_textFont_cursor

// week14_2_PFont_Chinese_font_textFont_cursor
PFont font1,font2;
void setup(){
  size(300,300);
  font1 = createFont("Times New Roman Bold Italic",50);
  font2 = createFont("微軟正黑體 Bold",50);
}
void draw(){
  background(0); // 黑色背景
  cursor(CROSS);
  fill(255); // 預設是白色的填充色
  textFont(font1);
  text("Hello 中文",mouseX+20,mouseY-20);
  fill(#0B63DB); // Tool - color Selector，再 copy 你要的顏色
  textFont(font2);
  text("Hello 中文",mouseX+20,mouseY+50); // 下面一點點
}

字體可以跟著鼠標移動

// week14_2_PFont_Chinese_font_textFont_cursor
PFont font1,font2,font3;
void setup(){
  size(300,300);
  font1 = createFont("Times New Roman Bold Italic",50);
  font2 = createFont("微軟正黑體 Bold",50);
  font3 = createFont("elffont-rock.otf",50); // 注音文的精靈字體
}
void draw(){
  background(0); // 黑色背景
  cursor(CROSS);
  fill(255); // 預設是白色的填充色
  textFont(font1);
  text("Hello 中文",mouseX+20,mouseY-20);
  fill(#0B63DB); // Tool - color Selector，再 copy 你要的顏色
  textFont(font2);
  text("Hello 中文",mouseX+20,mouseY+50); // 下面一點點
  textFont(font3);
  text("ㄅㄆㄇ",mouseX+20,mouseY+100); // 再下面一點點
}

加上史詩級的精靈字體www

week14-3_inverse_kinematics(IK)_part1

// week14_3_inverse_kinematics_part1
void setup(){
  size(400,400); // 先用2D
}
float[] angle = new float[5]; // 先用5個關節
void draw(){
  background(255);
  translate(200, 350); // 放下面一點
  ellipse(0,0,12,12); // (0,0) 放圓
  
  pushMatrix();
    rotate(radians(angle[0])); // 2D 對Z軸轉
    rect(0,-5,50,10); // 直的棒子 
  popMatrix();
}
void mouseDragged(){
  angle[0] += mouseX - pmouseX;
}

先用angle[0]就好

week14-4_inverse_kinematics(IK)_part2

// week14_4_inverse_kinematics_part2
void setup(){
  size(400,400); // 先用2D
}
float[] angle = new float[5]; // 先用5個關節
void draw(){
  background(255);
  translate(200, 350); // 放下面一點
  ellipse(0,0,12,12); // (0,0) 放圓
  pushMatrix();
    rotate(radians(angle[0])); // 2D 對Z軸轉
    rect(0,-5,50,10); // 直的棒子  
    pushMatrix();
      translate(50,0); // 2D 移動 往右
      rotate(radians(angle[1])); // 2D 對Z軸轉
      rect(0,-5,50,10); // 直的棒子
    popMatrix();
  popMatrix();
}
void mouseDragged(){
  angle[ID] += mouseX - pmouseX;
}
int ID = 0;
void keyPressed(){
  if(key == '0') ID = 0;
  if(key == '1') ID = 1; // 小心注音輸入法
}

多了angle[1]

week14-5_ik_inverse_kinematics_part3

// week14_5_ik_inverse_kinematics_part3
// 用簡單的線段，來解真的 ID 的運算
void setup(){
  size(400,400);
  for(int i=0;i<2;i++){ // 把頂點從下面到上做好
    p[i] = new PVector(200,350-50*i);
  }
}
PVector [] p = new PVector[6]; // 有6個頂點
void draw(){
  background(255);
  for(int i=0;i<2;i++){ // 用迴圈，畫點、畫字
    if(i>0) line(p[i-1].x,p[i-1].y,p[i].x,p[i].y);
    fill(255,0,0); // 紅色圈圈
    ellipse(p[i].x,p[i].y,8,8);
    fill(0); // 黑色的字
    text("p:"+i,p[i].x+10,p[i].y); // 字往右一點點
  }
}

一開始有個連線

// week14_5_ik_inverse_kinematics_part3
// 用簡單的線段，來解真的 ID 的運算
void setup(){
  size(400,400);
  for(int i=0;i<2;i++){ // 把頂點從下面到上做好
    p[i] = new PVector(200,350-50*i);
  }
}
PVector [] p = new PVector[6]; // 有6個頂點
void draw(){
  background(255);
  for(int i=0;i<2;i++){ // 用迴圈，畫點、畫字
    if(i>0) line(p[i-1].x,p[i-1].y,p[i].x,p[i].y);
    fill(255,0,0); // 紅色圈圈
    ellipse(p[i].x,p[i].y,8,8);
    fill(0); // 黑色的字
    text("p:"+i,p[i].x+10,p[i].y); // 字往右一點點
  }
  ellipse(mouseX,mouseY,6,6); // 滑鼠也有1個小點，要控制座標移動
  line(p[0].x,p[0].y,mouseX,mouseY);
}

滑鼠可以拉線

week14-6

// week14_6_ik_inverse_kinematics_part4
// 用簡單的線段，來解真的 ID 的運算
void setup(){
  size(400,400);
  for(int i=0;i<2;i++){ // 把頂點從下面到上做好
    p[i] = new PVector(200,350-50*i);
  }
}
PVector [] p = new PVector[6]; // 有6個頂點
void draw(){
  background(255);
  for(int i=0;i<2;i++){ // 用迴圈，畫點、畫字
    if(i>0) line(p[i-1].x,p[i-1].y,p[i].x,p[i].y);
    fill(255,0,0); // 紅色圈圈
    ellipse(p[i].x,p[i].y,8,8);
    fill(0); // 黑色的字
    text("p:"+i,p[i].x+10,p[i].y); // 字往右一點點
  }
  PVector now = new PVector(mouseX, mouseY); // 現在的位置
  PVector v = PVector.sub(now,p[0]).normalize().mult(50); // 短向量
  // 因為長度限制為50，所以長向量 先長度變成1 再乘上50
  p[1].x = p[0].x + v.x; // 新的位置，是中心，再加長度50的這小段
  p[1].y = p[0].y + v.y; // 新的位置，是中心，再加長度50的這小段
  ellipse(mouseX,mouseY,6,6); // 滑鼠也有1個小點，要控制座標移動
  line(p[0].x,p[0].y,mouseX,mouseY);
}

滑鼠移動，整個線段都可以移動

且第3個點會跟p[0]、p[1]同個直線

week14-7

// week14_7_ik_inverse_kinematics_part5
// 用簡單的線段，來解真的 ID 的運算
void setup(){
  size(400,400);
  for(int i=0;i<6;i++){ // 把頂點從下面到上做好
    p[i] = new PVector(200,350-50*i);
  }
}
PVector [] p = new PVector[6]; // 有6個頂點
void draw(){
  background(255);
  for(int i=0;i<6;i++){ // 用迴圈，畫點、畫字
    if(i>0) line(p[i-1].x,p[i-1].y,p[i].x,p[i].y);
    fill(255,0,0); // 紅色圈圈
    ellipse(p[i].x,p[i].y,8,8);
    fill(0); // 黑色的字
    text("p:"+i,p[i].x+10,p[i].y); // 字往右一點點
  }
  PVector now = new PVector(mouseX, mouseY); // 現在的位置
  PVector v = PVector.sub(now,p[4]).normalize().mult(50); // 短向量
  // 因為長度限制為50，所以長向量 先長度變成1 再乘上50
  p[5].x = p[4].x + v.x; // 新的位置，是中心，再加長度50的這小段
  p[5].y = p[4].y + v.y; // 新的位置，是中心，再加長度50的這小段
  ellipse(mouseX,mouseY,6,6); // 滑鼠也有1個小點，要控制座標移動
  line(p[4].x,p[4].y,mouseX,mouseY);
}

增加到6個節點，從4延伸到5，往外拉去做移動

可以跟著滑鼠移動

week14-8

// week14_8_ik_inverse_kinematics_part6
// 用簡單的線段，來解真的 ID 的運算
void setup(){
  size(400,400);
  for(int i=0;i<6;i++){ // 把頂點從下面到上做好
    p[i] = new PVector(200,350-50*i);
  }
}
PVector [] p = new PVector[6]; // 有6個頂點
void draw(){
  background(255);
  for(int i=0;i<6;i++){ // 用迴圈，畫點、畫字
    if(i>0) line(p[i-1].x,p[i-1].y,p[i].x,p[i].y);
    fill(255,0,0); // 紅色圈圈
    ellipse(p[i].x,p[i].y,8,8);
    fill(0); // 黑色的字
    text("p:"+i,p[i].x+10,p[i].y); // 字往右一點點
  }
  PVector now = new PVector(mouseX, mouseY); // 現在的位置
  for(int i=5;i>0;i--){
    PVector v = PVector.sub(now,p[i]).normalize().mult(50); // 短向量
    // 因為長度限制為50，所以長向量 先長度變成1 再乘上50
    p[i].x = now.x - v.x; // 新的位置，是中心，再加長度50的這小段
    p[i].y = now.y - v.y; // 新的位置，是中心，再加長度50的這小段
    now = p[i];
  }
  
  ellipse(mouseX,mouseY,6,6); // 滑鼠也有1個小點，要控制座標移動
  // line(p[4].x,p[4].y,mouseX,mouseY);
}

線會跟著圓點點移動

圓點點會跟著滑鼠移動

但圓點點會跟p[5]保持一定距離

week14-9_ik_inverse_kinematics_part7

// week14_9_ik_inverse_kinematics_part7
// 用簡單的線段，來解真的 ID 的運算
void setup(){
  size(400,400);
  for(int i=0;i<6;i++){ // 把頂點從下面到上做好
    p[i] = new PVector(200,350-50*i);
  }
}
PVector [] p = new PVector[6]; // 有6個頂點
void draw(){
  background(255);
  for(int i=0;i<6;i++){ // 用迴圈，畫點、畫字
    if(i>0) line(p[i-1].x,p[i-1].y,p[i].x,p[i].y);
    fill(255,0,0); // 紅色圈圈
    ellipse(p[i].x,p[i].y,8,8);
    fill(0); // 黑色的字
    text("p:"+i,p[i].x+10,p[i].y); // 字往右一點點
  }
  PVector now = new PVector(mouseX, mouseY); // 現在的位置
  p[5].x = now.x;
  p[5].y = now.y;
  for(int i=4;i>0;i--){
    PVector v = PVector.sub(p[i+1],p[i]).normalize().mult(50); // 短向量
    // 因為長度限制為50，所以長向量 先長度變成1 再乘上50
    p[i].x = p[i+1].x - v.x; // 新的位置，是中心，再加長度50的這小段
    p[i].y = p[i+1].y - v.y; // 新的位置，是中心，再加長度50的這小段
  }
  for(int i=1;i<=5;i++){
    PVector v = PVector.sub(p[i],p[i-1]).normalize().mult(50);
    p[i].x = p[i-1].x + v.x;
    p[i].y = p[i-1].y + v.y; 
    
  }
  
  ellipse(mouseX,mouseY,6,6); // 滑鼠也有1個小點，要控制座標移動
  // line(p[4].x,p[4].y,mouseX,mouseY);
}

當這條線變成是直線，圓點會脫離最前面p[5]的點

如果不是直線的話，圓點會被最前面的點抓住

week14-9b_ik_inverse_kinematics_part8

// week14_9b_ik_inverse_kinematics_part8
// 用簡單的線段，來解真的 ID 的運算
void setup(){
  size(400,400);
  for(int i=0;i<N;i++){ // 把頂點從下面到上做好
    p[i] = new PVector(200,350-L*i);
  }
}
int N = 20,L = 300 / N;
PVector [] p = new PVector[N]; 
void draw(){
  background(255);
  for(int i=0;i<N;i++){ // 用迴圈，畫點、畫字
    if(i>0) line(p[i-1].x,p[i-1].y,p[i].x,p[i].y);
    fill(255,0,0); // 紅色圈圈
    ellipse(p[i].x,p[i].y,8,8);
    fill(0); // 黑色的字
    text("p:"+i,p[i].x+10,p[i].y); // 字往右一點點
  }
  p[N-1].x = mouseX;
  p[N-1].y = mouseY;
  for(int i=N-2;i>0;i--){
    PVector v = PVector.sub(p[i+1],p[i]).normalize().mult(L); // 短向量
    p[i].x = p[i+1].x - v.x; 
    p[i].y = p[i+1].y - v.y; 
  }
  for(int i=1;i<N;i++){
    PVector v = PVector.sub(p[i],p[i-1]).normalize().mult(L);
    p[i].x = p[i-1].x + v.x;
    p[i].y = p[i-1].y + v.y; 
    
  }
  
  ellipse(mouseX,mouseY,6,6); // 滑鼠也有1個小點，要控制座標移動
  // line(p[4].x,p[4].y,mouseX,mouseY);
}

增加到20個點

// week14_9b_ik_inverse_kinematics_part8(亂改版本)
// 用簡單的線段，來解真的 ID 的運算
void setup(){
  size(400,400);
  for(int i=0;i<N;i++){ // 把頂點從下面到上做好
    p[i] = new PVector(200,350-L*i);
  }
}
int N = 20,L = 300 / N; // 本來是6點，距離50
PVector [] p = new PVector[N]; // 有6個頂點
void draw(){
  background(255);
  for(int i=0;i<N;i++){ // 用迴圈，畫點、畫字
    if(i>0) line(p[i-1].x,p[i-1].y,p[i].x,p[i].y);
    fill(255,0,0); // 紅色圈圈
    ellipse(p[i].x,p[i].y,8,8);
    fill(0); // 黑色的字
    text("p:"+i,p[i].x+10,p[i].y); // 字往右一點點
  }
  p[N-1].x = mouseX;
  p[N-1].y = mouseY;
  for(int i=N-2;i>0;i--){
    PVector v = PVector.sub(p[i+1],p[i]).normalize().mult(L); // 短向量
    // 因為長度限制為50，所以長向量 先長度變成1 再乘上50
    p[i].x = p[i+1].x - v.x; 
    p[i].y = p[i+1].y - v.y; 
  }
  for(int i=1;i<=N-19;i++){
    PVector v = PVector.sub(p[i],p[i-1]).normalize().mult(L);
    p[i].x = p[i-1].x + v.x;
    p[i].y = p[i-1].y + v.y; 
    
  }
  
  ellipse(mouseX,mouseY,6,6); // 滑鼠也有1個小點，要控制座標移動
  // line(p[4].x,p[4].y,mouseX,mouseY);
}

亂改變成大旗子了w

2025電腦圖學

2025年5月22日星期四

12750113-week14

沒有留言:

張貼留言

2025年5月22日 星期四

12750113-week14

沒有留言:

張貼留言

2025年5月22日星期四