XX - Week05

=========================================================================

FIFTH

今天的主題是將大二下電腦圖學的觀念用簡單的方式寫出來，第二個主題是要實做出模擬摺紙

1.畫出一個3D的box，並且能透過滑鼠移動(視角在正中間)

void setup(){
  size(400,400,P3D);//P3D Processing 3D功能
}

void draw(){
  background(#FFFFF2);
  pushMatrix();//備份矩陣
    translate(mouseX,mouseY);//移動
    box(100);//3D的盒子、方塊
  popMatrix();//還原矩陣
}

2.加上旋轉(rotate)跟縮放(scale)，並且畫2個不同大小、顏色的box

void setup(){
  size(400,400,P3D);//P3D Processing 3D功能
}

void draw(){
  background(#FFFFF2);
  pushMatrix();//備份矩陣
    translate(mouseX,mouseY);//移動
    rotateY(radians(mouseX));//對Y軸轉動
    fill(0,255,0);//填綠色
    box(100);//3D的盒子、方塊
    
    noFill();//box面不填充
    scale(2);//放大2倍
    box(100);//被放大2倍
  popMatrix();//還原矩陣
}

3.探討三角形的線封閉曲線與否的問題

size(410,410,P3D);
noFill();//如果將顏色填充改成noFill()，會發現三角形的線不是一個封閉曲線
beginShape();
//fill(255,0,0);
vertex(200,0);
//fill(0,255,0);
vertex(0,400);
//fill(0,0,255);
vertex(400,400);
endShape(CLOSE);//加上CLOSE才可以形成封閉曲線

4.為了要實現摺紙，所以先實做出能夠在平面上放小點

ArrayList<PVector> pt; //大的資料結構ArrayList
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
}//初始化，把大的資料結構準備好(裡面放小資料結構)
void draw(){
  background(#FFFFF2);
  for(PVector p : pt){
    ellipse(p.x, p.y, 10, 10);
  }
}
void mousePressed(){
  pt.add(new PVector(mouseX,mouseY));
}//大的資料結構裡，加入小的PVector的物件

5.加上線&面，讓圖形能夠出現

ArrayList<PVector> pt; //大的資料結構ArrayList
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
}//初始化，把大的資料結構準備好(裡面放小資料結構)
void draw(){
  background(#FFFFF2);
  for(PVector p : pt){
    ellipse(p.x, p.y, 10, 10);
  }
  beginShape();
  for(PVector p : pt){
    vertex(p.x, p.y);
  }
  endShape();
}
void mousePressed(){
  pt.add(new PVector(mouseX,mouseY));
}//大的資料結構裡，加入小的PVector的物件

6.將滑鼠左鍵只能畫頂點，右鍵只能旋轉

ArrayList<PVector> pt; //大的資料結構ArrayList
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
}//初始化，把大的資料結構準備好(裡面放小資料結構)
void draw(){
  background(#FFFFF2);
  pushMatrix();
    if(mousePressed && mouseButton==RIGHT){
      translate(200, 200);
      rotateY(radians(frameCount));
      translate(-200, -200);
    }
    for(PVector p : pt){
      ellipse(p.x, p.y, 10, 10);
    }
    beginShape();
    for(PVector p : pt){
      vertex(p.x, p.y);
    }
    endShape();
   popMatrix();
}
void mousePressed(){
  if(mouseButton==LEFT){
    pt.add(new PVector(mouseX,mouseY));
  }
}//大的資料結構裡，加入小的PVector的物件

7.使用程式碼&顏色來區分滑鼠左、右、中鍵

void setup(){
  size(400, 400, P3D);
}
void draw(){
  background(255);
  if(mousePressed && mouseButton==LEFT) background(255, 0, 0);
  if(mousePressed && mouseButton==CENTER) background(0, 255, 0);
  if(mousePressed && mouseButton==RIGHT) background(0, 0, 255);
}
void mousePressed(){
  if(mouseButton==LEFT) println("LEFT");
  if(mouseButton==CENTER) println("CENTER");
  if(mouseButton==RIGHT) println("RIGHT");
}

8.實做出能點到現有的點

ArrayList<PVector> pt;
void setup(){
  size(400, 400, P3D);
  pt = new ArrayList<PVector>();
  for(int i=0; i<20; i++){
    pt.add( new PVector(i*20, 20) );
  }//假設畫面中，點好了20個頂點
}
void draw(){
  background(255);
  for(PVector p : pt){//畫出20個頂點
    ellipse(p.x, p.y, 10, 10);
  }
  if(ans!=null) ellipse(ans.x, ans.y, 15, 15);
}
PVector ans = null;
void mousePressed(){
  for(PVector p : pt){
    if( dist(p.x, p.y, mouseX, mouseY) < 5){
      ans = p;
    }
  }
}

9.左鍵增加點，中鍵選點並拖曳

ArrayList<PVector> pt;
void setup(){
  size(400, 400, P3D);
  pt = new ArrayList<PVector>();
  for(int i=0; i<37; i++){
    pt.add( new PVector(random(400), random(400)) );
  }//假設畫面中，點好了20個頂點
}
void draw(){
  background(255);
  for(PVector p : pt){//畫出20個頂點
    ellipse(p.x, p.y, 10, 10);
  }
  if(ans!=null) ellipse(ans.x, ans.y, 15, 15);
}
PVector ans = null;
void mouseDragged(){
  if(mouseButton==CENTER && ans!=null){
    ans.x = mouseX;
    ans.y = mouseY;
  }  
}
void mousePressed(){
  if(mouseButton==LEFT) pt.add(new PVector(mouseX, mouseY));
  else if(mouseButton==CENTER){
    for(PVector p : pt){
      if( dist(p.x, p.y, mouseX, mouseY) < 5){
        ans = p;
      }
    }
  }
}

10.最後再增加右鍵能夠刪除頂點的功能

ArrayList<PVector> pt;
void setup(){
  size(400, 400, P3D);
  pt = new ArrayList<PVector>();
  for(int i=0; i<37; i++){
    pt.add( new PVector(random(400), random(400)) );
  }//假設畫面中，點好了20個頂點
}
void draw(){
  background(255);
  for(PVector p : pt){//畫出20個頂點
    ellipse(p.x, p.y, 10, 10);
  }
  if(ans!=null) ellipse(ans.x, ans.y, 15, 15);
}
PVector ans = null;
void mouseDragged(){
  if(mouseButton==CENTER && ans!=null){
    ans.x = mouseX;
    ans.y = mouseY;
  }  
}
void mousePressed(){
  if(mouseButton==LEFT) pt.add(new PVector(mouseX, mouseY));
  else if(mouseButton==CENTER){
    for(PVector p : pt){//厲害的for迴圈(不能增刪裡面的東西)
      if( dist(p.x, p.y, mouseX, mouseY) < 5){//找到購進的點
        ans = p;
      }
    }
  }
  else if(mouseButton==RIGHT){//右鍵，要刪掉，要用傳統的for迴圈
    for(int i=0; i<pt.size(); i++){//要寫2行，才能等於厲害的1行
      PVector p = pt.get(i);//要寫2行，才能等於厲害的1行
      if( dist(p.x, p.y, mouseX, mouseY) < 5){//找到購進的點
        pt.remove(i);//就把第(i)個點刪掉(刪的時候會把大資料結構都左移動一格)
      }
    }
  }
}