week05 3D的互動筆記

一、製作xeyes (會移動的眼睛)

1.先畫出眼眶，以及眼球與滑鼠間的線條焦點。


void setup(){
  size(400,400);
}
void draw(){
  background(128);
  strokeWeight(20);
  ellipse(100,200,180,360);
  ellipse(300,200,180,360);
  
  ellipse(100,200,10,10);
  ellipse(300,200,10,10);
  line(mouseX,mouseY,100,200);
  line(mouseX,mouseY,300,200);
}

2.做出會移動的眼球，運用三角函數的運算


void setup(){
  size(400,400);
}
void draw(){
  background(128);
  strokeWeight(20);
  ellipse(100,200,180,360);
  ellipse(300,200,180,360);
 
  ellipse(100,200,10,10);
  ellipse(300,200,10,10);
  line(mouseX,mouseY,100,200);
  line(mouseX,mouseY,300,200);
 
  float angle1 = atan2( (mouseY-200)/2 , mouseX-300 );
  float newX1 = 300 + 100*cos(angle1)/2;
  float newY1 = 200 + 200*sin(angle1)/2;
  ellipse(newX1,newY1,10,10);
  float angle2 = atan2( (mouseY-200)/2 , mouseX-100 );
  float newX2 = 100 + 100*cos(angle2)/2;
  float newY2 = 200 + 200*sin(angle2)/2;
  ellipse(newX2,newY2,10,10);
}

3.最後把原始眼球以及線條移除掉(完成)


void setup(){
  size(400,400);
}
void draw(){
  background(128);
  strokeWeight(20);
  ellipse(100,200,180,360);
  ellipse(300,200,180,360);
 
  //ellipse(100,200,10,10);
  //ellipse(300,200,10,10);
  //line(mouseX,mouseY,100,200);
  //line(mouseX,mouseY,300,200);
 
  float angle1 = atan2( (mouseY-200)/2 , mouseX-300 );
  float newX1 = 300 + 100*cos(angle1)/2;
  float newY1 = 200 + 200*sin(angle1)/2;
  ellipse(newX1,newY1,10,10);
  float angle2 = atan2( (mouseY-200)/2 , mouseX-100 );
  float newX2 = 100 + 100*cos(angle2)/2;
  float newY2 = 200 + 200*sin(angle2)/2;
  ellipse(newX2,newY2,10,10);
}

二、製作氣球射擊(bubble shooter)

1.製作發射台，運用三角函數讓球在發射台旋轉


void setup(){
  size(400,800);
}
void draw(){
  background(0,128,0);
  fill(#FA9703);ellipse(200,600,100,100);
  line(mouseX,mouseY,200,600);
  float angle = atan2(mouseY-600,mouseX-200);
  fill(#F9FA03);ellipse(200+50*cos(angle),600+50*sin(angle),30,30);
}

2.點擊左鍵可以發射球球


void setup(){
  size(400,800);
}
float ballX=200,ballY=600;
float ballVX=0,ballVY=0;
float angle=0;
void draw(){
  background(0,128,0);
  fill(#FA9703);ellipse(200,600,100,100);
  line(mouseX,mouseY,200,600);
  fill(#F9FA03);ellipse(ballX,ballY,30,30);
  angle = atan2(mouseY-600,mouseX-200);
 
  ballX+=ballVX;
  ballY+=ballVY;
}
void mouseMoved(){
  ballX=200+50*cos(angle);
  ballY=600+50*sin(angle);
}
void mousePressed(){
  ballVX=cos(angle);
  ballVY=sin(angle);
}

3.產生多顆分別設條件的球，移動滑鼠不會被影響


void setup(){
  size(400,800);
}
float [] ballX = new float[10];
float [] ballY = new float[10];
float [] ballVX = new float[10];
float [] ballVY = new float[10];
float [] angle = new float[10];
int now = 0; //now which ball is it
void draw(){
  background(0,128,0);
  fill(#FA9703);ellipse(200,600,100,100);
  line(mouseX,mouseY,200,600);
  for(int i=0;i<10;i++){
    fill(#F9FA03);ellipse(ballX[i],ballY[i],30,30);
    ballX[i]+=ballVX[i];
    ballY[i]+=ballVY[i];
  }
  angle[now] = atan2(mouseY-600,mouseX-200);
}
void mouseMoved(){
  ballX[now]=200+50*cos(angle[now]);
  ballY[now]=600+50*sin(angle[now]);
}
void mousePressed(){
  ballVX[now]=cos(angle[now]);
  ballVY[now]=sin(angle[now]);
  now++;
  if(now>=10) now=0;  ///為了不超過陣列
}

4.產生會飛向發射台的敵人，並出現Game Over