SangMo互動技術 week05

 利用移動旋轉控制3D物件

Step1 移動

程式碼:

void setup(){
  size(400,400,P3D);
}
void draw(){
  background(#FFFFF2);
  pushMatrix();
    translate(mouseX,mouseY);
    box(100);
  popMatrix();
}
執行圖:


Step2 旋轉
程式碼:

void setup(){
  size(400,400,P3D);
}
void draw(){
  background(#FFFFF2);
  pushMatrix();
    translate(mouseX,mouseY);
    rotateY(radians(mouseX));
    box(100);
  popMatrix();
}
執行圖:

Step3 利用scale製作同心正方形
程式碼:

void setup(){
  size(400,400,P3D);
}
void draw(){
  background(#FFFFF2);
  pushMatrix();
    translate(mouseX,mouseY);
    rotateY(radians(mouseX));
    fill(0,255,0);
    box(100);
    
    noFill();
    scale(2);
    box(100);///
  popMatrix();
}
執行圖:

Step4 頂點
程式碼:

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();
執行圖:

Step4-2 大的資料結構
程式碼:
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));
}



Step5 點跟點相連
程式碼:

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));
}
執行圖:
Step6 相連圖形並旋轉
程式碼:

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));
     
  }
}
執行圖:

Step7 快速搜尋
程式碼:

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

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);
}
PVector ans = null;
void mousePressed(){
  for(PVector p:pt){
    if(dist(p.x,p.y,mouseX,mouseY)<5){
     ans = p;
   }
 }
}
執行圖:

Step8 拖曳選取點
程式碼:

ArrayList<PVector> pt;
void setup(){
  size(400,400,P3D);
  pt = new ArrayList<PVector>();
  for(int i=0;i<37;i++){///假設畫面已點好37個點
    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);
}
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;
   }
  }
 }
}
執行圖:

Step9 刪除點 把答案隱藏可以製作類似掃地雷遊戲
程式碼:

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

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);
}
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;
   }
  }
 }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);
    }
   }
 }
}
執行圖: