KZNK Week05 ORIGAMI

 Week05-1  MATRIX

開啟processing，輸入以下程式碼

void setup(){
  size(400,400,P3D); //P3D是3D的功能
}
void draw(){
  background(#FFFFF2);
  pushMatrix();  //備份矩陣
    translate(mouseX,mouseY); //移動
    box(100); //3D的方塊
  popMatrix();  //還原矩陣
}

命名week05_1_P3D_Matrix

通過滑鼠移動3D方塊

 Week05-2 ROTATE/SCALE

開啟processing，改變以下程式碼

    translate(mouseX,mouseY); //移動
    rotateY(radians(mouseX));  //對Y軸轉動
    fill(0,0,255); //面填藍色的盒子
    box(100);
    
    noFill(); //不填充顏色
    scale(2);
    box(100); //3D的方塊

命名week05_2_rotate_scale

兩個3D方塊 一個填藍色縮小/一個不填充不動

 Week05-3  BEGIN/END SHAPE

開啟processing，輸入以下程式碼

size(410,410,P3D); 
beginShape();
fill(255,0,0); vertex(200,0);
fill(0,255,0); vertex(0,400);
fill(0,0,255); vertex(400,400);
endShape();

命名week05_3_vertex_Shape_B_E

畫圖 電腦圖學點線面

右邊的線似乎沒有畫好，要怎麼辦呢？

在endShape加上CLOSE就行了！

endShape(CLOSE);

 Week05-4 ORIGAMI01

開啟processing，輸入以下程式碼

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

命名week05_4_origami01_ArrayList

左鍵增加點

 Week05-5 ORIGAMI02

開啟processing，改變以下程式碼

  for(PVector p:pt){
    ellipse(p.x,p.y,10,10);
  }
  beginShape();
  for(PVector p:pt){ //特殊for迴圈 得小資料結構
    vertex(p.x,p.y);
  }
  endShape();

命名week05_5_origami02_BEShape

點連成面

 Week05-6 ORIGAMI03

開啟processing，輸入以下程式碼

ArrayList<PVector> pt; //大的資料結構
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){ //特殊for迴圈 得小資料結構
      vertex(p.x,p.y);
    }
    endShape();
  popMatrix();  
}
void mousePressed(){
  if(mouseButton==LEFT){
    pt.add(new PVector(mouseX,mouseY));
  }
} //大的資料結構 加入小的PVector物件

命名week05_6_origami03_TRT

左鍵增加頂點 右鍵旋轉

 Week05-7 ORIGAMI04

開啟processing，輸入以下程式碼

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

命名week05_7_origami04_mouseButton

左鍵紅 中鍵綠 右鍵藍

 Week05-8 ORIGAMI05

開啟processing，輸入以下程式碼

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

命名week05_8_origami05_mousePressed

印20個圓，當滑鼠按到圓時可以圈出來

Week05-9 ORIGAMI06

開啟processing，輸入以下程式碼

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

命名week05_9_origami06_mouseDragged_xy

random點的位置，左鍵加點/中鍵拖曳點

Week05-10 ORIGAMI07

開啟processing，輸入以下程式碼

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個點刪除(刪的時候，會把大資料結構右邊都左移一格)
      }
    }
  }
}

命名week05_A_origami07_remove_ArrayList_RIGHT

右鍵可刪除點

*不能在for迴圈(for(PVector p : pt))裡面隨便刪東西，如果要刪

用傳統的for迴圈，倒過來從後面刪比較快

(因為如果從前面刪掉0，就要把0<—1，1<—2......，全部搬家，所以從後面處理)*