Week03 小朋友

小朋友下樓梯

void setup(){

  size(600,500);

}

int boardX=227, boardY=400;

int kidX=300, kidY=250;

void draw(){

 background(0);

 rect(boardX, boardY, 200, 50);

 rect(kidX, kidY, 50, 50);

 if(kidX>boardX-50 && kidX<boardX+200 && kidY>boardY-50)

 {

   

 }

 else kidY++;

 

 kidX=mouseX;

}

week03-琇雅的筆記記記

1.

PImage imgbird,imgpig;
float birdX=400,birdY=300;
float birdVX=0,birdVY=0;
float birdAX=0,birdAY=0;
float pigX=700,pigY=200;
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;
}
2.

float birdX=100,birdY=400;

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

  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(birdX,birdY,pigx[i][j],pigy[i][j])<100) pigAlive[i][j]=false;

      //fill(#07DE0F);ellipse(pigx[i][j],pigy[i][j],100,100);

      if(pigAlive[i][j]) { fill(#07DE0F);ellipse(pigx[i][j],pigy[i][j],100,100);}

    }

  }

  fill(#DE0719); ellipse(birdX,birdY,100,100);

  

  birdX+=birdVX;birdY+=birdVY;

  birdVX+=birdAX;birdVY+=birdAY;

}

void mouseDragged(){

  birdX=mouseX; birdY=mouseY;

  birdVX=0; birdVY=0;

  birdAY=0;

}

void mouseReleased(){

  birdVX=(100-mouseX)/5.0; birdVY=(400-mouseY)/5.0; birdAY=0.98;

}

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

Week03 ShiRo

►製作憤怒鳥小遊戲

step1. 拉圖檔 --xx.png  (半透明圖檔)

   

step2. 拉近processing 程式裡。（快捷建：Ctrl+K 打開程式目錄 )

step3.程式碼 

PImage的物件變數宣告

image()秀圖通常寫在draw()裡面

step4.滑鼠按下才會動         

 先設定變數 float

在座圖檔的位置設定 

最後寫拖曳時會跟著滑鼠跑 

mouseDragged()

完成圖

►製作憤怒鳥小遊戲2

     製作橢圓物體朝著線方向移動

改用圖來拖曳

把圖的(0,0)調到圖的中心位置：imageMode(CENTER)

加速度:  mmAX ,mmAY

完成圖 

做要被打的物體--mm2 

• 先宣告mm2位置，boolean來判斷存在是否。
• 判斷障礙物是否存在 :  if  (mm2Alive) image( img2 ,  mm2X  ,   mm2Y  ,  100  ,  100  );
• 判斷障礙物是否超過邊界:if  (dist(mm2X,mm2Y,mmX,mmY)  <100   ){ mm2Alive=false;  }

製作邊界和摩擦力:mmVX *= 0.997; mmVY *= 0.997;

※撞到邊界時，會等速反彈。

►程式碼

PImage img1,img2;

void setup()

{

  size(800,600);

  img1= loadImage("1.png");

  img2= loadImage("2.png");

  imageMode(CENTER);    ///圖檔中心

}

float mmX=400 ,mmY=300;

float mmVX=0 ,mmVY=0;

float mmAX=0 ,mmAY=0;

float mm2X=700 ,mm2Y=400;

boolean mm2Alive=true;　///如果小小兵還活著,就畫出敵人

void draw()

{

   ///做判斷

   background(255);

   if(mm2Alive)image(img2,mm2X,mm2Y,100,100);  

    ///障礙物存在

   image(img1,mmX,mmY,100,100); 

   //ellipse(mmX,mmY,100,100);

   if(dist ( mm2X,mm2Y,mmX,mmY ) <100){

     mm2Alive=false;

   }

   ///障礙物和物體位置一樣，障礙物消失

   line(mmX,mmY,400,300);

   

   

   ///做更新

   mmX+=mmVX;

   mmY+=mmVY;

   ///判斷位置是否超過邊界

   if(mmX<50){mmX=50; mmVX= -mmVX;} ///左

   if(mmX>width-50){mmX=width-50; mmVX=-mmVX;}///右

   if(mmY<50){mmY=50; mmVY= -mmVY;}///上

   if(mmY>height-50){mmY=height-50; mmVY=-mmVY;}///下

   

   mmVX+=mmAX;  ///加速度

   mmVY+=mmAY;

   mmVX *= 0.997;  ///x空氣摩擦力

   mmVY *= 0.997;  ///y空氣摩擦力

   //image(img2,400,300);

}

void  mouseDragged()    ///按下滑鼠

{

    mmX=mouseX;

    mmY=mouseY;

    mmVX=mmVY=mmAX=mmAY=0;

}

void mouseReleased()     ///滑鼠放開後

{

  mmVX =(400-mouseX)/10.0;  ///以距離來計算移動速度

  mmVY =(300-mouseY)/10.0;

  mmAY=0.98; ///重力加速度

}

►小朋友下樓梯

►程式碼

void setup()

{

  size(600,500);

}

int bX=227,bY=400;

int kX=300,kY=250;  //宣告小朋友座標

void draw()

{

   background(0);

   rect(bX,bY,200,50);

   rect(kX,kY,50,50); //小朋友用小方塊表示，kX kY是在外面宣告的小朋友座標

   

   if(kX>bX-50 && kX<bX+200 && kY>bY-50)//邊界算法 要再稍微一小朋友的長寬大小及板子長寬大小略為調整, 小朋友站在板子上就不會往下掉

   {

     

   }

   else 

   kY++;//速度

}

Week03*互動技術課堂筆記*

【利用Processing】

*做出簡單小遊戲*

小遊戲基本應用介紹

1.1拖曳滑鼠使產生慣性

程式碼:

void setup(){

  size(800,600);         //視窗初始化大小

}

float HookX=400,HookY=300;     //

float HookVX=0,HookVY=0;       //

void draw(){

  background(255);     //背景顏色(數值)

  ellipse(HookX,HookY, 50,50);     //畫一個圓(大小半徑為50)

  line(HookX,HookY,400,300);       //畫一條線

  HookX+=HookVX;

  HookY+=HookVY;

}

void mouseDragged(){           //滑鼠拖曳

  HookX=mouseX;

  HookY=mouseY;

}

void mouseReleased(){        //滑鼠釋放

  HookVX=(400-mouseX)/100.0;     //X位移方向

  HookVY=(300-mouseY)/100.0;     //Y位移方向

}

1.2拖曳滑鼠射擊讓愛心消失

程式碼:

PImage imgHook,imgLove; 

void setup(){

  size(800,600);

  imgHook=loadImage("Hook.jpg");        

  imgLove=loadImage("Love.jpg");   

  imageMode(CENTER);  

}

float HookX=400,HookY=300;

float HookVX=0,HookVY=0;

float HookAX=0,HookAY=0;

float LoveX=700,LoveY=100;

boolean LoveAlive=true;

void draw(){

  background(255);

  if(LoveAlive)image(imgLove,LoveX,LoveY,100,100);     

  image(imgHook,HookX,HookY,100,100);

  if(dist(LoveX,LoveY,HookX,HookY)<100){

    LoveAlive=false;

  } 

  line(HookX,HookY,400,300);

  HookX+=HookVX;

  HookY+=HookVY;

  HookVX+=HookAX;

  HookVY+=HookAY;

}

void mouseDragged(){

  HookX=mouseX;

  HookY=mouseY;

  HookVX=HookVY=HookAX=HookAY=0;

}

void mouseReleased(){

  HookVX=(400-mouseX)/10.0;

  HookVY=(300-mouseY)/10.0;

  HookAY=0.98;

}

1.3設定邊界，讓鉤子不會視窗外

程式碼:

PImage imgHook,imgLove; 

void setup(){

  size(800,600);

  imgHook=loadImage("Hook.jpg");        

  imgLove=loadImage("Love.jpg");   

  imageMode(CENTER);  

}

float HookX=400,HookY=300;

float HookVX=0,HookVY=0;

float HookAX=0,HookAY=0;

float LoveX=700,LoveY=100;

boolean LoveAlive=true;

void draw(){

  background(255);

  if(LoveAlive)image(imgLove,LoveX,LoveY,100,100);     

  image(imgHook,HookX,HookY,100,100);

  if(dist(LoveX,LoveY,HookX,HookY)<100){

    LoveAlive=false;

  } 

  line(HookX,HookY,400,300);

  

  

  HookX+=HookVX;

  HookY+=HookVY;

  if(HookX<50){HookX=50;HookVX=-HookVX;}

  if(HookX>width-50){HookX=width-50;HookVX=-HookVX;}

  if(HookY<50){HookY=50;HookVY=-HookVY;}

  if(HookY>height-50){HookY=height-50;HookVY=-HookVY;}

  

  HookVX+=HookAX;

  HookVY+=HookAY;

  HookVX*=0.997;

  HookVY*=0.997;

}

void mouseDragged(){

  HookX=mouseX;

  HookY=mouseY;

  HookVX=HookVY=HookAX=HookAY=0;

}

void mouseReleased(){

  HookVX=(400-mouseX)/10.0;

  HookVY=(300-mouseY)/10.0;

  HookAY=0.98;

}

1.4小朋友下樓梯概念

程式碼:

void setup(){

  size(600,500);

}

int boardX=227,boardY=400;

int kidX=300,kidY=250;

void draw(){

  background(0);

  rect(boardX,boardY,200,50);

  rect(kidX,kidY,50,50);

  if(kidX>boardX-50&&kidX<boardX+200&&kidY>boardY-50){

    

  }

  else kidY++;

  kidX=mouseX;

}

Week 03 20170930

作業一
圖檔的互動

PImage imgBird, imgPig; 讀圖檔
void setup(){
  size(800,600); 視窗大小
  imgBird=loadImage("bird.png"); 鳥的圖檔
  imgPig=loadImage("pig.png");  豬的圖檔
}
float birdVX=0,birdVY=0; 鳥的速度設定
float birdX=400,birdY=300; 鳥的圖檔位置
void draw(){
    background(255); 背景顏色
    image(imgPig,400,300,50,50); 豬的位址及大小
    image(imgBird,birdX,birdY,55,55); 鳥的位址及大小
    line(birdX,birdY,400,300); 輔助線
    birdX +=birdVX; 鳥的X位置+鳥的速度
    birdY +=birdVY; 鳥的Y位置+鳥的速度
}
void mouseDragged(){ 當滑鼠拖曳時
  birdX=mouseX; 鳥的X位置移動到滑鼠的X位置
  birdY=mouseY; 鳥的Y位置移動到滑鼠的Y位置
}
void mouseReleased(){ 當滑鼠放開時
  birdVX=(400-mouseX)/100.0; 鳥的X速度
  birdVY=(300-mouseY)/100.0; 鳥的Y速度
}

調整線的位置

PImage imgBird, imgPig;
void setup(){
  size(800,600);
  imgBird=loadImage("bird.png");
  imgPig=loadImage("pig.png");
  imageMode(CENTER); 上圖的線會在圖片的左上角，為了更方便理解必須將線放在圖的中間
}
float birdVX=0,birdVY=0;
float birdX=400,birdY=300;
void draw(){
    background(255);
    image(imgPig,400,300,50,50);
    image(imgBird,birdX,birdY,55,55);
    line(birdX,birdY,400,300);
    birdX +=birdVX;
    birdY +=birdVY;
}
void mouseDragged(){
  birdX=mouseX;
  birdY=mouseY;
}
void mouseReleased(){
  birdVX=(400-mouseX)/100.0;
  birdVY=(300-mouseY)/100.0;
}

增加加速度

PImage imgBird, imgPig;
void setup(){
  size(800,600);
  imgBird=loadImage("bird.png");
  imgPig=loadImage("pig.png");
  imageMode(CENTER);
}
float birdVX=0,birdVY=0;
float birdX=400,birdY=300;
float birdAX=0,birdAY=0; 鳥的X加速度及鳥的Y加速度
void draw(){
    background(255);
    image(imgPig,400,300,50,50);
    image(imgBird,birdX,birdY,55,55);
    line(birdX,birdY,400,300);
    birdX +=birdVX;
    birdY +=birdVY;
    birdVX +=birdAX; 鳥的X速度+鳥的X加速度
    birdVY +=birdAY; 鳥的Y速度+鳥的Y加速度
}
void mouseDragged(){
  birdX=mouseX;
  birdY=mouseY;
  birdVX=birdVY=birdAX=birdAY=0;
}
void mouseReleased(){
  birdVX=(400-mouseX)/10.0;
  birdVY=(300-mouseY)/10.0;
  birdAY=1.98; 鳥的Y加速度(相當於重力加速度)
}

碰撞之後消失

PImage imgBird, imgPig;
void setup(){
  size(800,600);
  imgBird=loadImage("bird.png");
  imgPig=loadImage("pig.png");
  imageMode(CENTER);
}
float birdVX=0,birdVY=0;
float birdX=400,birdY=300;
float pigX=700,pigY=100;
float birdAX=0,birdAY=0;
boolean pigAlive=true; 判斷圖片是否存在
void draw(){
    background(255);
    if(pigAlive) image(imgPig,pigX,pigY,50,50); 
    image(imgBird,birdX,birdY,55,55);
    if(dist(pigX,pigY,birdX,birdY)<100){ 當豬和鳥的位置<100，豬會消失
      pigAlive=false;
    }
    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.18;
}

增加地圖範圍及空氣阻力

PImage imgBird, imgPig;

void setup(){

  size(800,600);

  imgBird=loadImage("bird.png");

  imgPig=loadImage("pig.png");

  imageMode(CENTER);

}

float birdVX=0,birdVY=0;

float birdX=400,birdY=300;

float pigX=700,pigY=100;

float birdAX=0,birdAY=0;

boolean pigAlive=true;

void draw(){

    background(255);

    if(pigAlive) image(imgPig,pigX,pigY,50,50);

    image(imgBird,birdX,birdY,55,55);

    if(dist(pigX,pigY,birdX,birdY)<100){

      pigAlive=false;

    }

    line(birdX,birdY,400,300);

    birdX +=birdVX;

    birdY +=birdVY;

    if(birdX<27.5){birdX=27.5; birdVX=-birdVX;}地圖X左邊邊界和鳥圖片的一半大小

    if(birdX>width-27.5){birdX=width-27.5;birdVX=-birdVX;}地圖X右邊邊界和鳥的圖片一半大小

    if(birdY<27.5){birdY=27.5;birdVY=-birdVY;}地圖Y上面邊界和鳥圖片的一半大小

    if(birdY>height-27.5){birdY=height-27.5;birdVY=-birdVY;}地圖Y下面邊界和鳥圖片的一半大小

    birdVX +=birdAX;

    birdVY +=birdAY;

    birdVX*=0.997; 鳥的X速度空氣阻力

    birdVY*=0.997; 鳥的Y速度空氣阻力

}

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;

}

Week03 陳柏勳

憤怒鳥

1.動者恆動

2.套用憤怒鳥圖片，並把滑鼠設在圖片中心點

3.

4.

5.

小朋友下樓梯

1.

week03-琇雅的筆記記記