晚安week03

 。座標系統

1. processing的3D系統

       //week03_01_P3D

void setup(){
  size(400,400,P3D); //開啟3D繪圖功能
}
void draw(){
  background(128);
  translate(mouseX,mouseY);//移動到滑鼠的位置
  rotateY(radians(frameCount));//對Y軸旋轉
  box(200); //大小200的方體
}



執行結果：

2. processing的2D系統
//week03_02_2D_point_line_rect_eclipse
size(400, 400);  //2D座標系統
stroke(255, 0, 0);  //紅色筆觸
strokeWeight(8);  //筆觸大小
point(200, 200);  //預設的點,座標中心 大小1像素
line(200, 0, 400, 100);  //畫線
rect(50, 50, 100, 100);  //四邊形

fill(255, 255, 0);
ellipse(300, 200, 50, 80);  //橢圓x,y,w,h




執行結果：

2. 矩形的圓角
//week03_03_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);





執行結果：




















3. 畫筆調色盤
//week03_04_stroke_filled_mousePressed_2
void setup() {
  size(500, 500);
}
void draw() {
  //background(255);
  stroke(0);
  fill(255, 0, 0);  //紅色
  rect(0, 0, 50, 50);
  fill(255, 255, 0);  //黃色
  rect(0, 50, 50, 50);
  fill(0, 255, 0);  //綠色
  rect(0, 100, 50, 50);
  fill(0, 0, 255);  //藍色
  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);  //判斷座標位置，把顏色存進變數myStroke
    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);
  }
}





執行結果：



4. 貓追老鼠
//week03_05_mouse&cat
void setup() {
  size(400, 400);
}
float x, y; //貓的座標
void draw() {
  background(255);
  ellipse(x, y, 40, 40);//貓
  ellipse(mouseX, mouseY, 40, 20);//鼠
  x = (x*14 + mouseX) /15;
  y = (y*14 + mouseY) /15; 
}

執行結果：


















 。內插、曲線
1. 一秒60幀
//week03_06_lerp_frameCount
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是「第幾個影格」，1秒=60幀
  ellipse(midX,midY,10,10);
}



執行結果：


2. 貝氏曲線
//week03_07_bezier
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_08_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);
}



執行結果：





。星空
1. 隨機座標
//week03_09_3D_random_oitnt
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]);
  }
}

執行結果：



2. 用translate()拉進畫面，營造3D效果
//week03_10_3D_random_point_3D
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]);
  }
}



3. 3D球體
//week03_11_3D_sphere
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  translate(mouseX,mouseY);
  rotate(radians(frameCount));
  sphere(100);
}


執行結果：























4. 打光，加上陰影

//week03_12_3D_sphere_rotate_light
void setup(){
  size(400,400,P3D);
}
void draw(){
  background(128);
  lights();
  translate(mouseX,mouseY);
  rotateX(radians(frameCount));
  sphere(100);
}


執行結果：





















。pushMatrix()&popMatrix()
1. 備份&還原矩陣

//week03_13_3D_pushMatrix&popMatrix
void setup() {
  size(600, 400, P3D);
}
void draw() {
  background(128);
  lights();
  pushMatrix();  //備份矩陣
    translate(300, 100);
    sphere(100);  //縮排, 方便閱讀
  popMatrix();  //還原矩陣
  //備份、還原矩陣，避免translate座標相加
  pushMatrix();
    translate(100, 100);
    sphere(100);
  popMatrix();
}


執行結果：