UU_week05

3D化

開啟3D功能-P3D

 

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

rotate/scale 轉動與放大縮小

  

(1) rotate()

void setup(){
  size(400, 400, P3D); // Processing的3D功能
}
void draw(){
  background(#FFFFF2); // yellow
  pushMatrix();
   translate(mouseX, mouseY);
    rotateY(radians(mouseX)); // 對Y軸轉動
    box(100); // 3D box
   popMatrix(); // 還原矩陣
}

(2) scale()

void setup(){
  size(400, 400, P3D); // Processing的3D功能
}
void draw(){
  background(#FFFFF2); // yellow
  pushMatrix();
   translate(mouseX, mouseY);
    rotateY(radians(mouseX)); // 對Y軸轉動
    fill(0, 255, 0); // 面填成綠色
    box(100); // 3D box
    
    noFill(); // 面不要填色
    scale(2); // 放大2倍
    box(100); // 第二個box
   popMatrix(); // 還原矩陣
}

vertex 頂點

邊線沒有連接, 發現線段並非封閉曲線(colored version & normal version)

 

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

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

Adding endShape(CLOSE) at the end of your shape definition using the vertex() function will close the shape, which is essential for forming a triangle or any other closed polygon. This way, the last vertex will be connected to the first vertex, completing the shape.

Here’s an example again for clarity:

size(410, 410, P3D);
noFill();
beginShape();
vertex(200, 0);
vertex(0, 400);
vertex(400, 400);
endShape(CLOSE);

ArrayList<PVector>

利用資料結構可以在滑鼠點擊處畫上10x10的圓點

ArrayList<PVector> pt;
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));
}

加上beginShape()跟endShape()畫出圖形

 

ArrayList<PVector> pt;
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(CLOSE);
}
void mousePressed(){
  pt.add(new PVector(mouseX, mouseY));
}

轉動圖形

 

左鍵畫圓點製作圖形, 右鍵按住不放會轉動此圖形

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(CLOSE);
  popMatrix();
}
void mousePressed(){
  if (mouseButton == LEFT) pt.add(new PVector(mouseX, mouseY));
}

滑鼠三按鍵

 LEFT=red, CENTER=green, RIGHT=blue

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

1. void draw(): This function is continuously called by Processing, typically at a frame rate of 60 frames per second (unless specified otherwise using frameRate()). When you check mouseButton in the draw function, it continuously monitors the mouse button status and responds to it as long as the program is running. This means that if you press and hold a mouse button, the action will be repeated in every frame.
2. void mousePressed(): This function is an event-driven function, which means it’s called only when a mouse button is initially pressed. It doesn’t continuously check the mouse button status. It responds to the event of a mouse button press, so it only occurs once when the button is initially pressed.

So, the difference between the two is in their runtime behavior. If you want to respond to a mouse button press event and execute a specific action only once when the button is pressed, you should use void mousePressed(). On the other hand, if you want continuous monitoring and response to the mouse button status, you can use mouseButton in the void draw() function.

本次程式只需要選擇一次當下選到的圓點

選定特定的點並標記出來

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) ellipse(p.x, p.y, 10, 10);
  if (ans!=null) ellipse(ans.x, ans.y, 15, 15); // 若選到其中一點, 則畫出15*15的圓
}
PVector ans = null; // 尚未選擇任一圓
void mousePressed(){
  for (PVector p: pt){
    if (dist(p.x, p.y, mouseX, mouseY)<5) ans=p; // 如果距離小於半徑5, ans代表選定某一個圓 
  }
}

mouseDragged() 拖曳選定的圓點

 左鍵新增圓點, 中鍵標出選定的點, 並可以拖曳到滑鼠指定位置

ArrayList<PVector> pt;
void setup(){
  size(400, 400, P3D);
  pt = new ArrayList<PVector>();
  for (int i=0; i<20; i++){
    pt.add( new PVector(random(400), random(400)) ); 
  }
}
void draw(){
  background(255);
  for (PVector p: pt) ellipse(p.x, p.y, 10, 10);
  if (ans!=null) ellipse(ans.x, ans.y, 15, 15); // 若選到其中一點, 則畫出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; // 如果距離小於半徑5, ans代表選定某一個圓 
    }
  }
}

新增右鍵刪除圓點

ArrayList<PVector> pt;
void setup(){
  size(400, 400, P3D);
  pt = new ArrayList<PVector>();
  for (int i=0; i<20; i++){
    pt.add( new PVector(random(400), random(400)) ); // random vertex
  }
}
void draw(){
  background(255);
  for (PVector p: pt) ellipse(p.x, p.y, 10, 10);
  if (ans!=null) ellipse(ans.x, ans.y, 15, 15); // 若選到其中一點, 則畫出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; // 如果距離小於半徑5, ans代表選定某一個圓 
    }
  }
  else if (mouseButton==RIGHT){
    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);
    }
  }
}