chotwo_week05

 Week05

week05_1_P3D_box_pushMatrix_popMatrix

3D盒子跟著滑鼠移動 ▼

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

week05_2_rotate_scale

根據radians(位移量)對Y軸旋轉 ▼

原本方塊的面改成綠色，再加一個2倍大的方塊，不要填色▼

void setup(){
  size(400,400, P3D); //Processing的3D功能
}
void draw(){
  background(#FFFFF2);
  pushMatrix(); //備份矩陣
    translate(mouseX, mouseY);
    rotateY(radians(mouseX)); //對Y軸轉動 (X座標轉換成radians弧度值)
    fill(0,255,0); //綠色的面
    box(100); //3D的盒子、方塊
    
    noFill(); //面不要填色
    scale(2); //放大兩倍
    box(100); //因為scale(2);所以會放大
   popMatrix(); //還原矩陣
}

week05_3_vertex_beginShape_endShape 

用3個頂點作出漸層三角形 ▼

沒有填色會發現圖形頂點沒有連接起來 ▼

endShape(CLOSE) ; 封閉圖形 ▼

size(410,410, P3D);
noFill();
beginShape();
//fill(250,0,0);
vertex(200,0);
//fill(0,255,0);
vertex(0,400);
//fill(0,0,255);
vertex(400,400);
endShape(CLOSE);

week05_4_origami01_ArrayList

 按下滑鼠生成圓點▼

// pt (particle) 大資料結構

// PVector       小資料結構

//for (for-range-declaration : 運算式)

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_5_origami02_beginShape_endShape_vertex

按下滑鼠生成的圓點，可以連成圖形 ▼

ArrayList<PVector> pt; //宣告大的資料結構
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
} // 初始化，準備大的資料結構<裡面放小的資料結構>
void draw(){ //一直畫
  background(#FFFFF2);
  for(PVector p : pt){// 透過for，得小的資料結構，宣告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的物件 

week05_6_origami03_translate_rotate_translate

按右鍵，TRT轉動圖形▼

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

 

        week05_7_origami04_select_mouseButton_CENTER

左鍵紅色、中鍵綠色、右鍵藍色▼

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_8_origami01_mousePressed_select_dist

秀20個點，滑鼠可以點選任一圓點(小於5單位) ▼

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_x_y

新增滑鼠中鍵，按下可拖曳圓點 ▼

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)) );
  }  //畫好37個頂點
}
void draw(){
  background(255);
  for(PVector p : pt){ // 畫出全部頂點 PVector 大:小
    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;
      }
    }
  }
}

         week05_A_origami01_remove_ArrayList_RIGHT

   新增滑鼠右鍵，按下可移除圓點 ▼

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)) );
  }  //畫好37個頂點
}
void draw(){
  background(255);
  for(PVector p : pt){ // 畫出全部頂點 PVector 大:小
    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++){ //要寫兩行
      PVector p = pt.get(i); //要寫兩行
      if(dist(p.x, p.y, mouseX, mouseY)<5){
        pt.remove(i); // 把第i個點刪掉(刪的時候會把大資料結構右邊的都左移一格)
      }
    }
  }
}