Week18 施柏豪上課筆記

課程筆記：

Gopro攝影機介紹：

老師介紹GoPro相機的特色，進一步跟我們解釋GoPro在環境建模上的應用，以及在教育現場，使否能利用GoPro進行3D建模，教導生物學、解剖學?

Microsoft HoloLens: Galaxy Explorer Ep. 6 - Coming to Life

Pacman小精靈實作流程

1. Play It 先體驗過，玩過了解互動機制

2. Draw pacman

3. Move pacman

4. Map generator：用滑鼠畫地圖

        5. 放置豆子

依wiki上的說明，小精靈的歷史：
《小精靈》是一款由南夢宮公司製作的街機遊戲。遊戲最初於1980年5月22日在日本發行。本遊戲由南夢宮公司的岩谷徹設計。遊戲於1980年10月由Midway Games公司在美國發行。缺了一角的薄餅是岩谷徹創作此遊戲的靈感來源。

Google在2010年時，也曾經以PAC-MAN作為Doodle主題。

先劃一個小精靈，這邊需要有圓形弧度的數學概念，以程式碼實作數學想法，畫出有缺角的圓形，我覺得超級酷!

Draw pacman - Processing程式：

void setup(){

  size(500,300);

}

int mouth=30;

void draw(){

  background(255);

  fill(#F7FF05);

  //ellipse(250,150, S,S);

  arc(250,150, 100,100, radians(mouth), radians(360-mouth), PIE);

  mouth = abs((frameCount*3%90)-45); //45~0

  // frameCount: 0,1,2,3,...,45,...100000

  // frameCount%90: 0,1,2,3,...90, 0,1,2.. 90, 0

  // frameCount%90-45: -45,-44,-43,-42.....0, 1,2, ... 45, -45, -44,-43..... 45, -45

  // abs(frameCount%90-45): 45,44,43,... 0,.. 1,2,.....45, 45, 44, 43.....

  println();

}

Draw pacman - GIF動畫效果

如果只有小精靈移動碰到豆子，豆子消失，這樣效果會有卡頓的感覺，所以老師提到可以善用內插法來實現平滑移動的效果。老師先用小畫家簡單的介紹內插公式，再進一步以Processing實作。

根據微軟網頁的翻譯:

內插補點是用來判斷目前或未來值因素，確切的因素沒有出現在任一個存在或未來值資料表時的方法。插補假設兩個值之間的變更是呈線性關係，而且是微不足道的誤差。

小精靈吃豆子Processing程式：


PImage [] img=new PImage[10];

int [][] map={

  {7,8,8,8,8,8,8,9,  7,8,8,8,8,8,8,9},

  {4,0,0,0,0,0,0,4,  4,0,0,0,0,0,0,4},

  {4,0,0,0,0,0,0,0,  0,0,0,0,0,0,0,4},

  {4,0,0,0,0,0,0,0,  0,0,0,0,0,0,0,4},

  {4,0,0,0,0,0,0,4,  4,0,0,0,0,0,0,4},

  {1,8,8,8,8,8,8,3,  1,8,8,8,8,8,8,3}};

int S=50, pacDir=0, mouth=30;//pacDir: 0,90,180,270

void setup(){

  size(800,300);

  for(int i=0;i<=9;i++) img[i]=loadImage(i+".png");

  for(int y=0;y<6;y++){

    for(int x=0;x<16;x++){

      if(map[y][x]==0) map[y][x]=5;

    }

  }

}

float alpha=0;// x = alpha*(pacXX*S) + (1-alpha)*(ppacXX*S);

int pacXX=1,pacYY=1, ppacXX=1, ppacYY=1;// 0,1,2,....15

void draw(){

  background(255);

  for(int y=0;y<6;y++){

    for(int x=0;x<16;x++){

      image(img[ map[y][x]  ], x*S,y*S, S,S);

    }

  }

  if( map[ pacYY ][ pacXX ] ==5) map[ pacYY ][ pacXX ]=0; 

  fill(#FEFF05);

  float tempX= alpha*(pacXX) + (1-alpha)*(ppacXX);

  float tempY= alpha*(pacYY) + (1-alpha)*(ppacYY);

  float pacX=tempX*S+S/2, pacY=tempY*S+S/2;

  alpha = (alpha+0.1);

  if(alpha>=1){

    alpha=0; ppacXX=pacXX; ppacYY=pacYY;

    pacMove(pacDir);

  }



  arc(pacX,pacY, S,S, radians(mouth+pacDir), radians(360-mouth+pacDir), PIE);

  mouth = abs( (frameCount*3)%90 -45 ) ;

}

int now=0;//now we are drawin 0 on the map[y][x]

void pacMove(int dir){

  if(alpha!=0) {ppacXX=pacXX; ppacYY=pacYY; }

  if(dir==0 && map[pacYY][pacXX+1]%5==0) {alpha=0; ppacXX=pacXX; pacXX++; pacDir=0;}

  if(dir==90 &&map[pacYY+1][pacXX]%5==0) {alpha=0; ppacYY=pacYY; pacYY++; pacDir=90;}

  if(dir==180&&map[pacYY][pacXX-1]%5==0) {alpha=0; ppacXX=pacXX; pacXX--; pacDir=180;}

  if(dir==270&&map[pacYY-1][pacXX]%5==0) {alpha=0; ppacYY=pacYY; pacYY--; pacDir=270;}  

}

void keyPressed(){

  if(keyCode==RIGHT)pacMove(0);

  if(keyCode==DOWN) pacMove(90);

  if(keyCode==LEFT) pacMove(180);

  if(keyCode==UP)   pacMove(270);

  if(key=='0') now=0;

  if(key=='1') now=1;

  if(key=='2') now=2;

  if(key=='3') now=3;

  if(key=='4') now=4;

  if(key=='5') now=5;

  if(key=='6') now=6;

  if(key=='7') now=7;

  if(key=='8') now=8;

  if(key=='9') now=9;

}

void mouseDragged(){

  int x= int(mouseX/S), y= int(mouseY/S);

  map[y][x]=now;

 // float dx=mouseX-pmouseX, dy=mouseY-pmouseY;

 // if(abs(dx)> 2* abs(dy)) map[y][x]=8;

 // if(abs(dy)> 2* abs(dx)) map[y][x]=4;

}

課程心得：

今天是這學期最後一次上課，主要上課內容是實作PAC-MAN小精靈吃豆子的互動遊戲，上課時看老師一邊FB直播，一邊講解程式，覺得老師簡直就是人才(已跪)，我覺得葉老師能把想法一步步形成流程，並用程式實作原先想法，課程中相當多的互動程式就是如此一個一個形成，而我在上課時在一旁聽老師的講課，有時能聽懂，有時是一個跟不上老師思考邏輯的狀態(快看不到車尾燈了...)，幸好老師總是相當Nice，毫不吝嗇分享程式碼，可是你我都知道程式碼易copy，程式抽象邏輯才是難學的啊!