2025電腦圖學: week03-12750113

week03-1_P3D_translate_rotateY_radians_box

// week03_1_P3D_translate_rotateY_radians_box

void setup(){
  size(400,400,P3D); // 開啟3D模式
}
void draw(){
  background(128); // 灰色背景
  translate(mouseX,mouseY);
  rotateY(radians(frameCount)); // 對Y旋轉
  box(200); // 大小200的3D Box 盒子
}
一

一開始方塊在左上角
左上角是(0,0)
因translate(mouseX,mouseY);
                        方塊會跟著鼠標移動

week03-2_P2D_point_line_rect_ellipse
// week03_2_P2D_point_line_rect_ellipse
size(400,400); // 2D座標系統
stroke(255,0,0); // 筆觸是紅色
strokeWeight(8); // 筆觸的權重大小
point(200,200); // 預設的點，只有1 pixel
line(200,0,400,100); // 畫線
rect(50,50,100,100); // 四邊形 x,y,w,h

fill(255,255,0); // 填黃色
ellipse(300,200,50,80); // 橢圓 x,y,w,h
rect(x,y,w,h) // x,y:起點座標
// w,h:圖案寬高

week03-3_rect_corners
// week03_3_rect_corners
size(400,400);
rect(50,50,100,100);
rect(50,200,100,100,20);
rect(200,50,100,100,10,20,30,40);
rect(50,200,100,100,20); // 20是弧度

week03-4_mousePressed_stroke_line
// week03_4_mousePressed_stroke_line
void setup(){
  size(500,500);
}
void draw(){
  // background(255); // 先刪掉
  fill(255,0,0); // red
  rect(0,0,50,50);
  fill(255,255,0); // red
  rect(0,50,50,50);
  fill(0,255,0); // green
  rect(0,100,50,50);
  fill(0,0,255); // blue
  rect(0,150,50,50);
  if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
void mousePressed(){
  if(mouseX<50){
    if(mouseY<50) stroke(255,0,0);
    else if(mouseY<100) stroke(255,255,0);
    else if(mouseY<150) stroke(0,255,0);
    else if(mouseY<200) stroke(0,0,255);
  }
}
  
點選旁邊的顏色方塊，可變成該顏色(初始色是黑色)

week03-4b__mousePressed_stroke_line
// week03_4b_mousePressed_stroke_line
void setup(){
  size(500,500);
}
void draw(){
  // background(255); // 先刪掉
  stroke(0);
  fill(255,0,0); // red
  rect(0,0,50,50);
  fill(255,255,0); // red
  rect(0,50,50,50);
  fill(0,255,0); // green
  rect(0,100,50,50);
  fill(0,0,255); // blue
  rect(0,150,50,50);
  stroke(myStroke);
  if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
color myStroke;
void mousePressed(){
  if(mouseX<50){
    if(mouseY<50) myStroke = color(255,0,0);
    else if(mouseY<100) myStroke = color(255,255,0);
    else if(mouseY<150) myStroke = color(0,255,0);
    else if(mouseY<200) myStroke = color(0,0,255);
  }
}
  旁邊顏色框邊框不管點選什麼顏色都會維持黑色

week03-5_mouse_cat_x_y
// week03_5_mouse_cat_x_y
void setup(){
  size(400,400);
}
float x,y; // 貓的座標
void draw(){
  background(255);
  ellipse(mouseX,mouseY,40,20);
  ellipse(x,y,40,40);
  x = (x*14 + mouseX) / 15;
  y = (y*14 + mouseY) / 15;
}  // 新的座標，舊的座標*14，目標*1
不動的時候
球形會去追橢圓
橢圓就是鼠標

week03-6_lerp_feameCount
// week03_6_lerp_feameCount
void setup(){
  size(400,400);
}
float startX = 10,startY = 10;
float stopX = 390,stopY = 390;
void draw(){
  ellipse(startX,startY,10,10);
  ellipse(stopX,stopY,10,10);
  // lerp() 可以做內插，要給它 0.0~1.0 之間的數
  float midX = lerp(startX,stopX,frameCount / 200.0);
  float midY = lerp(startY,stopY,frameCount / 200.0);
  // frameCount 是「第幾個frame」1小時=60分，1分=60秒，1秒=60frame
  ellipse(midX,midY,10,10);
}
從左上到右下
內插

week03-6b_lerp_feameCount
// week03_6b_lerp_feameCount
void setup(){
  size(400,400);
}
float startX = 10,startY = 10;
float stopX = 390,stopY = 390;
void draw(){
  background(255); //底色變白
  ellipse(startX,startY,10,10);
  ellipse(stopX,stopY,10,10);
  // lerp() 可以做內插，要給它 0.0~1.0 之間的數
  float midX = lerp(startX,stopX,frameCount / 200.0);
  float midY = lerp(startY,stopY,frameCount / 200.0);
  // frameCount 是「第幾個frame」1小時=60分，1分=60秒，1秒=60frame
  ellipse(midX,midY,10,10);
}
路徑一樣，但殘影消失

week03-7_bezier_curve
// week03_7_bezier_curve
size(400,400);
int x1 = 340, x2 = 40, x3 = 360, x4 = 60;
int y1 = 80, y2 = 40, y3 = 360, y4 = 320;
line(x1,y1,x2,y2);
line(x3,y3,x4,y4);
bezier(x1,y1,x2,y2,x3,y3,x4,y4); // 貝氏曲線


week03-8_bezier_equation
// week03_8_bezier_equation
void setup(){
  size(400,400);
}
int x1 = 340, x2 = 40, x3 = 360, x4 = 60;
int y1 = 80, y2 = 40, y3 = 360, y4 = 320;
void draw(){
  background(255);
  line(x1,y1,x2,y2);
  line(x3,y3,x4,y4);
  bezier(x1,y1,x2,y2,x3,y3,x4,y4); // 貝氏曲線
  float t = frameCount / 200.0 % 1;
  float t2 = 1-t;
  float x = x1*t2*t2*t2 + 3*x2*t*t2*t2 + 3*x3*t*t*t2 + x4*t*t*t;
  float y = y1*t2*t2*t2 + 3*y2*t*t2*t2 + 3*y3*t*t*t2 + y4*t*t*t;
  ellipse(x,y,10,10);
}

點會沿著曲線跑
且無限循環

week03-8b_bezier_equation
// week03_8b_bezier_equation
void setup(){
  size(400,400);
}
int x1 = 120, x2 = 320, x3 = 320, x4 = 120; // 只改控制點的座標
int y1 = 80, y2 = 20, y3 = 300, y4 = 300;
void draw(){
  background(255);
  line(x1,y1,x2,y2);
  line(x3,y3,x4,y4);
  bezier(x1,y1,x2,y2,x3,y3,x4,y4); // 貝氏曲線
  float t = frameCount / 200.0 % 1;
  float t2 = 1-t;
  float x = x1*t2*t2*t2 + 3*x2*t*t2*t2 + 3*x3*t*t*t2 + x4*t*t*t;
  float y = y1*t2*t2*t2 + 3*y2*t*t2*t2 + 3*y3*t*t*t2 + y4*t*t*t;
  ellipse(x,y,10,10);
}

 換頂點座標(更換圖片)

week03-9_random_random_point
// week03_9_3D_random_random_point
float []x = new float[1000];
float []y = new float[1000];
void setup(){
  size(400,400,P3D);
  for(int i=0;i<1000;i++){
    x[i] = random(400);
    y[i] = random(400);
  }
}
void draw(){
  background(0); // 黑色背景
  stroke(255); // 白色線條
  for(int i=0;i<1000;i++){
    point(x[i],y[i]);
  }
}
星空圖

week03-10_3D_random_random_point_translate
// week03_10_3D_random_random_point_translate
float []x = new float[5000];
float []y = new float[5000];
float []z = new float[5000];
void setup(){
  size(400,400,P3D);
  for(int i=0;i<5000;i++){
    x[i] = random(400);
    y[i] = random(400);
    z[i] = random(-400,400);
  }
}
void draw(){
  background(0); // 黑色背景
  stroke(255); // 白色線條
  translate(0,0,mouseY);
  for(int i=0;i<5000;i++){
    point(x[i],y[i],z[i]); // 現在是 3D 的點
  }
}


靠滑鼠縮放
做拉遠拉近
且有3D效果

week03-11_3D_sphere_translate_rotateY
// week03_11_3D_sphere_translate_rotateY
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  translate(mouseX,mouseY);
  rotateY(radians(frameCount));
  sphere(200);
}
這顆球會跟著鼠標移動
且會從左往右自轉

week03-12_3D_sphere_translate_rotateY_lights// week03_12_3D_sphere_translate_rotateY_lights
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  lights(); // 加上打光
  translate(mouseX,mouseY);
  rotateY(radians(frameCount));
  sphere(200);
}
有打光，變比較立體了


week03-13_3D_pushMatrix_tranlate_sphere_popMatrix
// week03-13_3D_pushMatrix_tranlate_sphere_popMatrix
void setup(){
  size(600,400,P3D);
}
void draw(){
  background(128);
  lights();
  pushMatrix(); // 備份矩陣
    translate(300,100); // 習慣上遇到push/pop，要往右再縮
    sphere(100);
  popMatrix(); // 還原矩陣
  // 要備份矩陣，還原矩陣，就不會出錯
  pushMatrix();
    translate(100,100);
    sphere(100);
  popMatrix();
}

2025電腦圖學

2025年3月6日星期四

week03-12750113

沒有留言:

張貼留言

2025年3月6日 星期四

week03-12750113

沒有留言:

張貼留言

2025年3月6日星期四