week19 3D的互動期末作品展示

組員：顏士傑04160560

主題：猴子射氣球(塔防)

說明：這遊戲是一個利用放置猴子來攻擊，阻止氣球通過的遊戲，
這次期末作品是利用搖桿來控制鼠標，通過搖桿可以移動加按壓，
模擬滑鼠的移動以及左鍵，製造即使是用搖桿也可以玩以前用滑鼠玩的遊戲，
並且我加以改良了遊戲內容，設置出2個關卡，並且加入金錢、生命制度，
玩家必須有50元才能放置一隻猴子，當氣球成功通過道路，就會從3條生命中扣除。

展示影片：https://www.youtube.com/watch?v=6_DWKtj_wao

week13 3D的互動筆記

一、連接Arduino把Rotary Encoder(旋轉編碼器)接上去

1.到https://brainy-bits.com/blogs/tutorials/stepper-motor-rotary-encoder-p1 有旋轉編輯器的電路圖


2.到http://yehnan.blogspot.tw/2014/02/arduino.html 有程式碼以及解說貼上去


3.執行後，旋轉會有數直跑出來(要調115200)，按下Arduino板子的按鈕會歸零


4.使用Processing的myPort.readStringUntil(lf)讀取Arduino的訊息


5.讀取訊息來左右移動圓球(需要用切割句子處理讀取所造成的跳行)

week12 3D的互動筆記

一、連接Arduino把JoyStick(蘑菇頭)接上去

1.到https://brainy-bits.com/blogs/tutorials/arduino-joystick-tutorial有JoyStick接線圖


2.下面在Arduino的程式碼


3.打進Arduino後，執行可以看到JoyStick的運作訊息，
因為Serial.begin(115200)，所以右下角要改成"115200"的傳輸速度


4.之後我們運用Processing來讀取Arduino產生的訊息


5.剛剛是印出資訊，現在要運用這資訊做事情，所以改成這樣(Arduino小視窗會看不到訊息)


6.當我們按下JoyStick就會變換背景顏色，以及用圓形判斷搖桿移動的位置


7.執行結果

week11 3D的互動筆記

一、校外參訪 _ Taipei Hackerspace

week10 3D的互動筆記

一、之後的課程需要結合Arduino UNO 以及 Arduino 2560使用方法

1.把Arduino板子與電腦插上USB，如果無法辨識


2.開啟裝置管理員＝＞右鍵無法辨識的裝置＝＞更新驅動程式軟體


3.瀏覽電腦上的驅動程式軟體


4.瀏覽驅動程式路徑


5.路徑：C:\Program Files (x86)\Arduino\drivers


6.勾選"永遠信任軟體"


7.成功辨識軟體




二、使用範本Blink測試Arduino板子是否正常(類似程式的Hello World)

1.檔案＝＞範例＝＞01.Basics＝＞Blink


2.點選上方的"上傳"


3.成功，Arduino板子上放的pin13 LED燈會開始閃爍

week10 3D的期中作品展示

04160560 顏士傑

作品名稱：猴子射氣球(塔防)

遊戲介紹：

這是一個小時候就常常在遊戲網頁上玩的遊戲－猴子射氣球，
他是一款塔防遊戲，地圖中會有一條道路，上面有氣球飛過，
而玩家必須去放置猴子在路旁的草地上，猴子將會自動攻擊其攻擊範圍以內的氣球，
阻止氣球成功地通過這條道路為主要目的，
而我這次設計的理念較輕鬆自在，沒有多餘的規則套用在裏頭，
玩家可以隨時隨地擺放猴子來防守。

week06 3D的互動筆記

一、製作爆爆王

1.製作地圖框格


void setup(){
  size(850,500);
}
void draw(){
  background(#92AD28);
  noStroke();
  for(int x=0;x<17;x++){
    for(int y=0;y<10;y++){
      if((x-y)%2==0) fill(#7E9819);
      else fill(#92AD28);
      rect(x*50,y*50,50,50);
    }
  }

2.製作玩家角色


void setup(){
  size(850,500);
}
int userJ=9, userI=5;
float userX,userY;
void draw(){
  background(#92AD28);
  noStroke();
  for(int x=0;x<17;x++){
    for(int y=0;y<10;y++){
      if((x-y)%2==0) fill(#7E9819);
      else fill(#92AD28);
      rect(x*50,y*50,50,50);
    }
  }
  fill(255,0,0); ellipse(userJ*50+25 , userI*50+25,50,50);
}
void keyPressed(){
  if(keyCode==LEFT) userJ--;
  if(keyCode==RIGHT) userJ++;
  if(keyCode==UP) userI--;
  if(keyCode==DOWN) userI++;
}

3.讓角色可以放水球炸彈


void setup(){
  size(850,500);
}
int userJ=9, userI=5;
float userX,userY;
int waterN=0;
int []waterJ = new int[100];
int []waterI = new int[100];
void draw(){
  background(#92AD28);
  noStroke();
  for(int x=0;x<17;x++){
    for(int y=0;y<10;y++){
      if((x-y)%2==0) fill(#7E9819);
      else fill(#92AD28);
      rect(x*50,y*50,50,50);
    }
  }
  fill(255,0,0); ellipse(userJ*50+25 , userI*50+25,50,50);
  for(int i=0; i<waterN; i++){
    fill(#93E1F7); ellipse(waterJ[i]*50+25 , waterI[i]*50+25 ,30,30);
  }
}
void keyPressed(){
  if(keyCode==LEFT) userJ--;
  if(keyCode==RIGHT) userJ++;
  if(keyCode==UP) userI--;
  if(keyCode==DOWN) userI++;
  if(keyCode==' '){
    waterI[waterN]=userI;
    waterJ[waterN]=userJ;
    waterN++;
  }
}

4.讓水球會爆炸


void setup(){
  size(850,500);
}
int userJ=9, userI=5;
float userX,userY;
int waterN=0;
int []waterJ = new int[100];
int []waterI = new int[100];
int []waterS = new int[100];
int []waterT = new int[100];
void draw(){
  background(#92AD28);
  noStroke();
  for(int x=0;x<17;x++){
    for(int y=0;y<10;y++){
      if((x-y)%2==0) fill(#7E9819);
      else fill(#92AD28);
      rect(x*50,y*50,50,50);
    }
  }
  fill(255,0,0); ellipse(userJ*50+25 , userI*50+25,50,50);
  for(int i=0; i<waterN; i++){
    if(waterT[i]>0){
      fill(#93E1F7); ellipse(waterJ[i]*50+25 , waterI[i]*50+25 ,30,30);
      waterT[i]--;
      if(waterT[i]==0) waterT[i]=-60;
    }
    if(waterT[i]<0){
      for(int k=-waterS[i];k<=waterS[i];k++){
        fill(255); rect((waterJ[i]+k)*50 , (waterI[i])*50,50,50);
        fill(255); rect((waterJ[i])*50 , (waterI[i]+k)*50,50,50);
      }
      waterT[i]++;
    }
  }
}
void keyPressed(){
  if(keyCode==LEFT) userJ--;
  if(keyCode==RIGHT) userJ++;
  if(keyCode==UP) userI--;
  if(keyCode==DOWN) userI++;
  if(keyCode==' '){
    waterI[waterN]=userI;
    waterJ[waterN]=userJ;
    waterS[waterN]=5; waterT[waterN]=120;
    waterN++;
  }
}

二、製作鱷魚咬咬

1.製作鱷魚


void setup(){
  size(500,500);
}
void draw(){
  background(255);
  fill(0,155,0); ellipse(250,250,300,300);
  for(int i=0;i<9;i++){
    fill(255); rect(110+i*30,200,30,30);
    if(110+i*30 < mouseX&&mouseX<110+i*30+30&& 200<mouseY&&mouseY<200+30){
      fill(0); rect(110+i*30,200,30,30);
    }
  }
  for(int i=0;i<9;i++){
    fill(255); rect(110+i*30,300,30,30);
    if(110+i*30 < mouseX&&mouseX<110+i*30+30&& 300<mouseY&&mouseY<300+30){
      fill(0); rect(110+i*30,300,30,30);
    }
  }
}

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

week04 3D的互動筆記

一、(進階)憤怒鳥Angry Bird小遊戲 (End)
1.運用陣列產生更多豬，以及有各別碰撞條件

PImage imgbird,imgpig;
float birdX=400,birdY=300;
float birdVX=0,birdVY=0;
float birdAX=0,birdAY=0;
float [][]pigX=new float[5][4];
float [][]pigY=new float[5][4];
boolean [][]pigalive=new boolean[5][4];
void setup(){
  size(800,600);
  imgbird=loadImage("bird.png");
  imgpig=loadImage("pig.png");
  imageMode(CENTER);
  for(int i=0;i<5;i++){
    for(int j=0;j<4;j++){
      pigX[i][j]=700-i*100;pigY[i][j]=100+j*100;pigalive[i][j]=true;
    }
  }
}
void draw(){
  background(255);
  for(int i=0;i<5;i++){
    for(int j=0;j<4;j++){
      if(dist(pigX[i][j],pigY[i][j],birdX,birdY)<100) pigalive[i][j]=false;
      if(pigalive[i][j]) image(imgpig,pigX[i][j],pigY[i][j],100,100);
    }
  }
  image(imgbird,birdX,birdY,100,100);
  line(birdX,birdY,400,300);
  birdX+=birdVX;
  birdY+=birdVY;
  if(birdX<50){birdX=50;birdVX=-birdVX;}
  if(birdX>width-50){birdX=width-50;birdVX=-birdVX;}
  if(birdY<50){birdY=50;birdVY=-birdVY;}
  if(birdY>height-50){birdY=height-50;birdVY=-birdVY;}
  birdVX+=birdAX;
  birdVY+=birdAY;
  birdVX*=0.98;
  birdVY*=0.98;
}
void mouseDragged(){
  birdX=mouseX;
  birdY=mouseY;
  birdVX=birdVY=birdAX=birdAY=0;
}
void mouseReleased(){
  birdVX=(400-mouseX)/10.0;
  birdVY=(300-mouseY)/10.0;
  birdAY=0.98;
}

二、製作音樂盒
(1)第一版本-sound資料庫
1.如果processing資料庫沒有sound資料庫

速寫本>引用庫文件>添加庫文件

2.搜尋sound並選取點擊install安裝

sound有綠色勾勾就是ok了

3.點選文件>範例程序


4.點選sound資料庫裡的程式範例兩下


5.sound資料庫的示範程式碼


6.把sound主要程式碼應用過來，並把mario.mp3拉近這個程式，播放即可有聲音。


(1)第二版本-Minim資料庫
1.如果processing資料庫沒有minim資料庫


2.搜尋sound並選取minim點擊install安裝


3.在C:\Users\user\Documents\Processing\libraries\minim\examples\AudioPlayer\loop裡，有Minim的範例程式-loop.pde


4.minim資料庫的範例程式


5.把minim主要程式碼應用過來，並把mario.mp3拉近這個程式，播放即可有聲音。

week03 3D的互動筆記

一、做出憤怒鳥Angry Bird小遊戲

1.讀入圖片，並讓中心點都在圖
PImage imgbird,imgpig;
void setup(){
  size(800,600);
  imgbird=loadImage("bird.png");
  imgpig=loadImage("pig.png");
  imageMode(CENTER);
}
float birdX=400,birdY=300;
float pigX=700,pigY=200;
void draw(){

  background(255);
  image(imgpig,pigX,pigY,100,100);
  image(imgbird,birdX,birdY,100,100);
}

2.使憤怒鳥有速度、加速度、引力以及彈弓
PImage imgbird,imgpig;
void setup(){
  size(800,600);
  imgbird=loadImage("bird.png");
  imgpig=loadImage("pig.png");
  imageMode(CENTER);
}
float birdX=400,birdY=300;
float birdVX=0,birdVY=0;
float birdAX=0,birdAY=0;
float pigX=700,pigY=200;
void draw(){
  background(255);
  image(imgpig,pigX,pigY,100,100);
  image(imgbird,birdX,birdY,100,100);
  line(birdX,birdY,400,300);
  birdX+=birdVX;
  birdY+=birdVY;
  birdVX+=birdAX;
  birdVY+=birdAY;
}
void mouseDragged(){
  birdX=mouseX;
  birdY=mouseY;
  birdVX=birdVY=birdAX=birdAY=0;
}
void mouseReleased(){
  birdVX=(400-mouseX)/10.0;
  birdVY=(300-mouseY)/10.0;
  birdAY=0.98;
}

3.有邊界碰撞反彈、有擊中判定(完成)
PImage imgbird,imgpig;
void setup(){
  size(800,600);
  imgbird=loadImage("bird.png");
  imgpig=loadImage("pig.png");
  imageMode(CENTER);
}
float birdX=400,birdY=300;
float birdVX=0,birdVY=0;
float birdAX=0,birdAY=0;
float pigX=700,pigY=200;
boolean pigalive=true;
void draw(){
  background(255);
  if(pigalive) image(imgpig,pigX,pigY,100,100);
  image(imgbird,birdX,birdY,100,100);
  if(dist(pigX,pigY,birdX,birdY)<100) pigalive=false;
  line(birdX,birdY,400,300);
  birdX+=birdVX;
  birdY+=birdVY;
  if(birdX<50){birdX=50;birdVX=-birdVX;}
  if(birdX>width-50){birdX=width-50;birdVX=-birdVX;}
  if(birdY<50){birdY=50;birdVY=-birdVY;}
  if(birdY>height-50){birdY=height-50;birdVY=-birdVY;}
  birdVX+=birdAX;
  birdVY+=birdAY;
  birdVX*=0.98;
  birdVY*=0.98;
}
void mouseDragged(){
  birdX=mouseX;
  birdY=mouseY;
  birdVX=birdVY=birdAX=birdAY=0;
}
void mouseReleased(){
  birdVX=(400-mouseX)/10.0;
  birdVY=(300-mouseY)/10.0;
  birdAY=0.98;
}

week02 3D的互動筆記

一、可畫線變色變粗的小畫家
1.自動畫線

void setup(){
  size (800,600);
  colorMode(HSB,100);
}
void draw(){
  line(mouseX,mouseY,pmouseX,pmouseY);///when click draw
}

2.自動畫線+變色+變粗

void setup(){
  size (800,600);
  colorMode(HSB,100);
}
void draw(){
  line(mouseX,mouseY,pmouseX,pmouseY);///when click draw
}
void mousePressed(){
  if(mouseX<100){///strokeWeight()
    strokeWeight(mouseY/50);
  }
  if(mouseX>700){///stroke
    stroke(mouseY/6.0 , 100,100);
  }
}

3.左鍵畫線+變色區(加框)+變粗區(加框)

void setup(){
  size (800,600);
  rect(width-100,0,width,height);
  rect(0,0,100,height);
  colorMode(HSB,100);
}
void draw(){
  if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);///when click draw
}
void mousePressed(){
  if(mouseX<100){///strokeWeight()
    strokeWeight(mouseY/50);
  }
  if(mouseX>700){///stroke
    stroke(mouseY/6.0 , 100,100);
  }
}

二、色票的運用
1.顏色

noStroke();
colorMode(HSB,100);
for(int i=0;i<100;i++){
  for(int j=0;j<100;j++){
    stroke(i,100,100);
    point(i,j);
  }
}

2.飽和


3.亮度


三、OpenProcessing (很多範例的網站)
網址：https://www.openprocessing.org/

有程式碼可以抓


四、畫圓並可以縮小並移動

void setup(){
  size(720,720,P2D);
}
float pX=-100,pY=-100,r=100;
void draw(){
  ellipse(pX,pY,r,r);
  if(r>3){
    r-=10;
    pX+=13;
  }
}
void mousePressed(){
  pX=mouseX; pY=mouseY; r=100;
}

五、讀取圖片+滑鼠游標
1.讀取圖片

PImage img1,img2;
void setup(){
  size(500,500);
  background(0,255,0);
  PImage img=loadImage("Doraemon.png");
  image(img,0,0,500,500);
}

2.滑鼠游標

3.