2025電腦圖學

2025年6月19日星期四

12750432

//week10-1-postman-head-body

先放入基礎郵差的完整圖當背景描圖,在準備一個半透明的背景蓋上去,讓郵差圖不會太顯眼,接下來將以劃分的圖head.png放進去,後面的(0,0)是對準圖片左上角,在畫入身體


//week10-2-postman-head-body-push-trt-pop
把PImage宣告,整合成一條程式碼,從頭開始調旋轉位置,(把圖片放入小畫家,用滑鼠移到要旋轉的位置),並記下位置,
這個位置就是旋轉位置離(0,0)相隔的距離,先把頭的旋轉中心放到(0,0),並進行旋轉,
再移回正確位置,要用pushMatrix()跟popMatrix()框起來,最後畫身體

//week10-3-postman-head-body-uparm1-hand1-push-trt-pop

接下來把uparm1,hand1加進來,由下往上讀,所以頭要最後畫,身體也是,因為uparm1是整個的
所以先用一個pushMatrix()框起來,然後因為uparm1旋轉時,hand1也會改變位置,所以也包含在
此pushMatrix()裡,再用一個pushMatrix()將hand1框起來並進行旋轉


//week10-4-postman-head-body-uparm1-hand1-uparm2-hand2-push-trt-pop
將膝蓋以上的部分畫完




---------------------------------------------------------------
用ID控制關節
先準備20個關節,預設0為要處理的關節,用keyPressed()函數決定按哪一個鍵時id會轉換
            void mouseDragged(){angle[ID] += mouseX-pmouseX;}//計算滑鼠的移動
            rotate(radians(angle[1]));按下數字鍵1時,uparm1會旋轉
//week10-5-postman-many-angle-ID-mouseDragged
PImage postman, head,body,uparm1,hand1,uparm2,hand2;
float [] angle = new float[20];//prepare 20 關節的變數
int ID = 0;//現 在要處理的關節
void mouseDragged(){
  angle[ID] += mouseX-pmouseX;
}
void keyPressed(){
  if(key=='1') ID = 1;//leftarm
  if(key=='2') ID = 2;//lefthand
  if(key=='3') ID = 3;//rightarm
  if(key=='4') ID = 4;//righthand
  if(key=='5') ID = 5;
  if(key=='6') ID = 6;
  if(key=='0') ID = 0;//head
}
void setup(){
  size(560,560);
  postman = loadImage("postman.png");
  head = loadImage("head.png");
  body = loadImage("body.png");
  uparm1 = loadImage("right-arm.png");
  hand1 = loadImage("right-hand.png");
  uparm2 = loadImage("left-arm.png");
  hand2 = loadImage("left-hand.png");
  
}
void draw(){
  background(#FFFFF2);
  image(postman,0,0);//基礎郵差
  fill(255,0,255,128);//半透明紫色
  rect(0,0,560,560);//蓋上去
  pushMatrix();
    translate(+197,+262);//放回正確位置
    rotate(radians(angle[1]));
    translate(-197,-262);//arm的旋轉中心放到(0,0)
    image(uparm1,0,0);
    pushMatrix();
      translate(+119,+265);//放回正確位置
      rotate(radians(angle[2]));
      translate(-119,-265);//arm的旋轉中心放到(0,0)
      image(hand1,0,0);
    popMatrix();
  popMatrix();
   pushMatrix();
    translate(+289,+260);//放回正確位置
    rotate(radians(angle[3]));
    translate(-289,-260);//arm的旋轉中心放到(0,0)
    image(uparm2,0,0);
    pushMatrix();
      translate(+355,+258);//放回正確位置
      rotate(radians(angle[4]));
      translate(-355,-258);//arm的旋轉中心放到(0,0)
      image(hand2,0,0);
    popMatrix();
  popMatrix();
  pushMatrix();
    translate(+233,+230);//放回正確位置
    rotate(radians(angle[0]));
    translate(-233,-230);//頭的旋轉中心放到(0,0)
    image(head,0,0);//在畫頭
  popMatrix();
  image(body,0,0);//在畫身體
}

//week10-6-postman-many-angle-ID-saveStrings-loadString先放入圖片圖片

先建一個lines陣列儲存位置資訊,把 lines 轉成字串陣列,建一個now字串放現在全部關節轉動的值,

now字串加進現有的 lines（ArrayList）按s時會存一組現在的位置資訊在angles.txt裡

  if(key=='s'){//begin here每按一次 就存一組
    String now = "";//要放現在全部關節的值
    for(int i=0;i<20;i++){
      now+=angle[i]+" ";//全部塞到now 裡
    }
    lines.add(now);//這行加到line 裡
    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>();//put the result of move

2025年6月18日星期三

week14

size(300,300);

textSize(50);

text("Hello",10,50);//預設字型

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

textFont(font);//換字型

text("Hello",10,100);

for( String name : PFont.list()) println(name);//用for迴圈把全部字型印出來

///下載字型後直接點兩下打開安裝，安裝完直接拖進程式即可

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

cursor(CROSS);

fill(0,255,0);

textFont(font1);

text("Hello 中文", mouseX+20,mouseY-20);

fill(#F98D74);

textFont(font2);

text("Hello 中文", mouseX+20,mouseY+50);

textFont(font3);

text("ㄅㄆㄇ", mouseX+20,mouseY+100);

}

void setup(){

size(400,400);

}

float [] angle = new float[5];

void draw(){

background(#C0EBD7);

translate(200,350);

ellipse(0,0,12,12);

pushMatrix();

rotate(radians(angle[0]));

rect(0,-5,50,10);

pushMatrix();

translate(50,0);rotate(radians(angle[1]));

rect(0,-5,50,10);

popMatrix();

}

void mouseDragged(){

angle[ID] += mouseX-pmouseX;

}

int ID = 0;

void keyPressed(){

if(key=='0') ID = 0;

if(key=='1') ID = 1;

}

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];

void draw(){

background(#C0EBD7);

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

ellipse(p[i].x,p[i].y,8,8);

fill(#5d8f2c);

text("p:"+i,p[i].x+10,p[i].y);

}

ellipse(mouseX,mouseY,6,6);

line(p[0].x,p[0].y,mouseX,mouseY);

}

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];

void draw(){

background(#C0EBD7);

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

ellipse(p[i].x,p[i].y,8,8);

fill(#5d8f2c);

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

p[1].x = p[0].x+v.x;

p[1].y = p[0].y+v.y;

ellipse(mouseX,mouseY,6,6);

line(p[0].x,p[0].y,mouseX,mouseY);

}

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];

void draw(){

background(#C0EBD7);

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

ellipse(p[i].x,p[i].y,8,8);

fill(#5d8f2c);

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

p[5].x = p[4].x+v.x;

p[5].y = p[4].y+v.y;

ellipse(mouseX,mouseY,6,6);

line(p[4].x,p[4].y,mouseX,mouseY);

}

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];

void draw(){

background(#C0EBD7);

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

ellipse(p[i].x,p[i].y,8,8);

fill(#5d8f2c);

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

p[i].x = now.x-v.x;

p[i].y = now.y-v.y;

now = p[i];

}

ellipse(mouseX,mouseY,6,6);

}

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];

void draw(){

background(#C0EBD7);

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

ellipse(p[i].x,p[i].y,8,8);

fill(#5d8f2c);

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(now,p[i]).normalize().mult(50);

p[i].x = now.x-v.x;

p[i].y = now.y-v.y;

now = p[i];

}

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

}

10.

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

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

ellipse(p[i].x,p[i].y,8,8);

fill(#5d8f2c);

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

}

2025年6月12日星期四

week15

//week15_01_multiple_windows

void setup(){

size(300,200);

background(255,0,0);

WindowB child=new WindowB();

}

void draw(){

}

class WindowB extends PApplet{

public WindowB(){

super();

PApplet.runSketch(new String[]{this.getClass().getName()},this);

}

public void settings(){

size(300,200);

}

public void setup(){

//size(300,200);

background(0,255,0);

}

public void draw(){

}

//week15_02_multiple_window_PGraphics

PGraphics pg;

void setup(){

size(400,400,P3D);

pg=createGraphics(200,200,P3D);

}

void draw(){

background(255,0,0);

pg.beginDraw();

pg.background(0,255,0);

pg.translate(100,100);

pg.rotateY(radians(frameCount));

pg.box(100);

pg.endDraw();

image(pg,0,0);

}

//week15_03_multiple_windows_pg1_pg2_pg3_pg4

PGraphics pg,pg2,pg3,pg4;

void setup(){

size(400,400,P3D);

pg=createGraphics(200,200,P3D);

pg2=createGraphics(200,200,P3D);

pg3=createGraphics(200,200,P3D);

pg4=createGraphics(200,200,P3D);

}

void draw(){

background(255,0,0);

pg.beginDraw();

pg.background(0,255,0);

pg.translate(100,100);

pg.rotateY(radians(frameCount));

pg.box(100);

pg.endDraw();

pg2.beginDraw();

pg2.background(255,255,0);

pg2.translate(100,100);

pg2.rotateY(radians(frameCount));

pg2.box(100);

pg2.endDraw();

pg3.beginDraw();

pg3.background(255,0,0);

pg3.translate(100,100);

pg3.rotateY(radians(frameCount));

pg3.box(100);

pg3.endDraw();

pg4.beginDraw();

pg4.background(255,0,255);

pg4.translate(100,100);

pg4.rotateY(radians(frameCount));

pg4.box(100);

pg4.endDraw();

image(pg,0,0);

image(pg2,200,0);

image(pg3,0,200);

image(pg4,200,200);

}

//week15_04_Arcball_rotation_PGraphics_pg

PGraphics pg,pg2,pg3,pg4;

Arcball arcball;

void setup(){

size(400,400,P3D);

arcball=new Arcball(this,200);

pg=createGraphics(200,200,P3D);

pg2=createGraphics(200,200,P3D);

pg3=createGraphics(200,200,P3D);

pg4=createGraphics(200,200,P3D);

}

void mousePressed(){

arcball.mousePressed();

}

void mouseDragged(){

arcball.mouseDragged();

}

void draw(){

background(255,0,0);

arcball.run();

pg.beginDraw();

pg.background(0,255,0);

arcball.run();

//pg.translate(100,100);

//pg.rotateY(radians(frameCount));

pg.box(100);

pg.endDraw();

pg2.beginDraw();

pg2.background(255,255,0);

pg2.translate(100,100);

pg2.rotateY(radians(frameCount));

pg2.box(100);

pg2.endDraw();

pg3.beginDraw();

pg3.background(255,0,0);

pg3.translate(100,100);

pg3.rotateY(radians(frameCount));

pg3.box(100);

pg3.endDraw();

pg4.beginDraw();

pg4.background(255,0,255);

pg4.translate(100,100);

pg4.rotateY(radians(frameCount));

pg4.box(100);

pg4.endDraw();

image(pg,0,0);

image(pg2,200,0);

image(pg3,0,200);

image(pg4,200,200);

}

//week15_5_postman_mouseDragged_head_angleX_0_atan2

//修改自 week11_3_postman_again

// 重新來一次, 讓程式的架構變更清楚

PImage postman, head, body, uparm1, hand1, uparm2, hand2, foot1, foot2;

void setup(){ // 把上面的圖, 都拉近新專案裡

size(560, 560);

postman = loadImage("postman.png");

head = loadImage("head.png");

body = loadImage("body.png");

uparm1 = loadImage("uparm1.png");

uparm2 = loadImage("uparm2.png");

hand1 = loadImage("hand1.png");

hand2 = loadImage("hand2.png");

foot1 = loadImage("foot1.png"); // 增加腳旋轉中心 220,375

foot2 = loadImage("foot2.png"); // 增加腳旋轉中心 260,372

}

float [] angleX = new float[10]; // 在 3D 的世界裡, 我們的旋轉

float [] angleY = new float[10];

int ID = 0; // 一開始是頭的關節

ArrayList<String> lines = new ArrayList<String>();

void keyPressed(){

if(key=='s'){ // 現在動作的所有關節,都存起來

String now = ""; // 空字串

for(int i=0; i<10; i++){

now += angleX[i] + " "; // 後面有空格

now += angleY[i] + " "; // 後面有空格

}

lines.add(now); // 把現在的動作的這行, 加到 lines 裡

String [] arr = new String[lines.size()];

lines.toArray(arr);

saveStrings("angles.txt", arr);

println("現在存檔:" + now);

}

if(key=='r'){

String [] file = loadStrings("angles.txt");

if(file != null){

for(int i=0; i<file.length; i++){

lines.add(file[i]);

println("現在讀檔:" + file[i]);

}

if(key=='p') playing = !playing; // 播動畫 <=> 不播動畫

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

}

boolean playing = false; // 一開始,不播放動畫, 按下 'p'可切換

void mouseDragged(){

float dx=mouseX-236,dy=mouseY-231;

angleX[0]=degrees(atan2(dy,dx))+90;

//angleX[ID] += mouseX - pmouseX;

//angleY[ID] += mouseY - pmouseY; // 多了這一行

}

int R = 0;

void myInterpolate(){ // 請不要剪貼, 老師重寫

if(lines.size()>=2){ // 要有2行以上, 才能做內插

float alpha = (frameCount%30)/30.0; // 介於 0.0~1.0中間的值

if(alpha==0.0) R = (R+1)%lines.size(); // 如果變到0.0就換下一組

int R2 = (R+1)%lines.size();

float [] oldAngle = float(split( lines.get( R ), ' '));

float [] newAngle = float(split( lines.get( R2 ), ' '));

for(int i=0; i<10; i++){

angleX[i] = oldAngle[i*2+0]*(1-alpha) + newAngle[i*2+0]*alpha;

angleY[i] = oldAngle[i*2+1]*(1-alpha) + newAngle[i*2+1]*alpha;

}

void draw(){

background(#FFFFF2);

if(playing) myInterpolate();

image(body, 0, 0); // 先畫身體

pushMatrix();

translate(+236, +231); // 再放回去正確的位置

rotate(radians(angleX[0]));

translate(-236, -231); // 把頭的旋轉中心, 放到(0,0)

image(head, 0, 0); // 再畫頭

popMatrix();

pushMatrix(); // 腳 foot1

translate(220, 375);

rotate(radians(angleX[5]));

translate(-220, -375);

image(foot1, 0, 0);

popMatrix();

pushMatrix(); // 腳 foot2

translate(260, 372);

rotate(radians(angleX[6]));

translate(-260, -372);

image(foot2, 0, 0);

popMatrix();

pushMatrix(); // 要畫左邊的上手臂、手肘

translate(+185, +261);

rotate(radians(angleX[1]));

translate(-185, -261);

image(uparm1, 0, 0); // 上手臂

pushMatrix();

translate(+116, +265);

rotate(radians(angleX[2]));

translate(-116, -265);

image(hand1, 0, 0); // 手肘

popMatrix();

pushMatrix(); // 要畫右邊的上手臂、手肘

translate(290, 262);

rotate(radians(angleX[3]));

translate(-290, -262);

image(uparm2, 0, 0);

pushMatrix();

translate(357, 259);

rotate(radians(angleX[4]));

translate(-357, -259);

image(hand2, 0, 0);

popMatrix();

}

//week15_6_postman_mouseDragged_posX_posY_ID_angleX_ID_atan2

//week15_5_postman_mouseDragged_head_angleX_0_atan2

//修改自 week11_3_postman_again

// 重新來一次, 讓程式的架構變更清楚

PImage postman, head, body, uparm1, hand1, uparm2, hand2, foot1, foot2;

void setup(){ // 把上面的圖, 都拉近新專案裡

size(560, 560);

postman = loadImage("postman.png");

head = loadImage("head.png");

body = loadImage("body.png");

uparm1 = loadImage("uparm1.png");

uparm2 = loadImage("uparm2.png");

hand1 = loadImage("hand1.png");

hand2 = loadImage("hand2.png");

foot1 = loadImage("foot1.png"); // 增加腳旋轉中心 220,375

foot2 = loadImage("foot2.png"); // 增加腳旋轉中心 260,372

}

float [] angleX = new float[10]; // 在 3D 的世界裡, 我們的旋轉

float [] angleY = new float[10];

int ID = 0; // 一開始是頭的關節

ArrayList<String> lines = new ArrayList<String>();

void keyPressed(){

if(key=='s'){ // 現在動作的所有關節,都存起來

String now = ""; // 空字串

for(int i=0; i<10; i++){

now += angleX[i] + " "; // 後面有空格

now += angleY[i] + " "; // 後面有空格

}

lines.add(now); // 把現在的動作的這行, 加到 lines 裡

String [] arr = new String[lines.size()];

lines.toArray(arr);

saveStrings("angles.txt", arr);

println("現在存檔:" + now);

}

if(key=='r'){

String [] file = loadStrings("angles.txt");

if(file != null){

for(int i=0; i<file.length; i++){

lines.add(file[i]);

println("現在讀檔:" + file[i]);

}

if(key=='p') playing = !playing; // 播動畫 <=> 不播動畫

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

}

boolean playing = false; // 一開始,不播放動畫, 按下 'p'可切換

float[]posX={+236,+185,+116,290,357,220,260};

float[]posY={+231,+261,+265,262,259,375,372};

float[]posAngle={90,180,180,0,0,-90,0};

void mouseDragged(){

float dx=mouseX-posX[ID],dy=mouseY-posY[ID];

angleX[ID]=degrees(atan2(dy,dx))+posAngle[ID];

//angleX[ID] += mouseX - pmouseX;

//angleY[ID] += mouseY - pmouseY; // 多了這一行

}

int R = 0;

void myInterpolate(){ // 請不要剪貼, 老師重寫

if(lines.size()>=2){ // 要有2行以上, 才能做內插

float alpha = (frameCount%30)/30.0; // 介於 0.0~1.0中間的值

if(alpha==0.0) R = (R+1)%lines.size(); // 如果變到0.0就換下一組

int R2 = (R+1)%lines.size();

float [] oldAngle = float(split( lines.get( R ), ' '));

float [] newAngle = float(split( lines.get( R2 ), ' '));

for(int i=0; i<10; i++){

angleX[i] = oldAngle[i*2+0]*(1-alpha) + newAngle[i*2+0]*alpha;

angleY[i] = oldAngle[i*2+1]*(1-alpha) + newAngle[i*2+1]*alpha;

}

void draw(){

background(#FFFFF2);

if(playing) myInterpolate();

image(body, 0, 0); // 先畫身體

pushMatrix();

translate(+236, +231); // 再放回去正確的位置

rotate(radians(angleX[0]));

translate(-236, -231); // 把頭的旋轉中心, 放到(0,0)

image(head, 0, 0); // 再畫頭

popMatrix();

pushMatrix(); // 腳 foot1

translate(220, 375);

rotate(radians(angleX[5]));

translate(-220, -375);

image(foot1, 0, 0);

popMatrix();

pushMatrix(); // 腳 foot2

translate(260, 372);

rotate(radians(angleX[6]));

translate(-260, -372);

image(foot2, 0, 0);

popMatrix();

pushMatrix(); // 要畫左邊的上手臂、手肘

translate(+185, +261);

rotate(radians(angleX[1]));

translate(-185, -261);

image(uparm1, 0, 0); // 上手臂

pushMatrix();

translate(+116, +265);

rotate(radians(angleX[2]));

translate(-116, -265);

image(hand1, 0, 0); // 手肘

popMatrix();

pushMatrix(); // 要畫右邊的上手臂、手肘

translate(290, 262);

rotate(radians(angleX[3]));

translate(-290, -262);

image(uparm2, 0, 0);

pushMatrix();

translate(357, 259);

rotate(radians(angleX[4]));

translate(-357, -259);

image(hand2, 0, 0);

popMatrix();

}

訂閱：意見 (Atom)

2025年6月19日 星期四

12750432

---------------------------------------------------------------

2025年6月18日 星期三

week14

2025年6月12日 星期四

week15

2025年6月19日星期四

2025年6月18日星期三

2025年6月12日星期四