顯示具有 01160465_李沛樺 標籤的文章。 顯示所有文章
顯示具有 01160465_李沛樺 標籤的文章。 顯示所有文章

2015年6月29日 星期一

WEEK18 期末作品展示

說明:

把期中的期中作品進行最後修改
換過了所有的圖片跟音樂和背景
用Processing搭配FAAST的Gesture
利用Connect達到體感遊玩小遊戲!

首先利用Connect的體感偵測裝置
可以用來捕捉人的骨架
使用Processing的語言來寫程式
我們寫了一個打磚塊的小遊戲
利用碰撞偵測的方式
把遊戲中的小球當作碰撞點
我們用一隻狗的圖片當作打磚塊下面一動的板子
上面是狗骨頭的圖片
利用小球去碰撞
消掉狗骨頭
直到消完上面一排狗骨頭就算過關
接下來每關都是增加一排狗骨頭
第二關兩層、第三關三層......以此類推

最後搭配FAAST可以把Connect的骨架顯示出來
還可以自己寫控制的手勢
左邊的手高於右邊的手就會使得狗狗向右移動
右邊的手高於左邊的手就會使得狗狗向左移動
不小心GAME OVER 也可以不用去動滑鼠或者鍵盤
只要輕輕跳一下就可以讓遊戲重新開始



操作方式:

1.left   左移:當左手低於右手 滑鼠事情往左移 遊戲當中的狗狗就會隨著滑鼠左移而移動

2.right 右移:當右手低於左手 滑鼠事情往右移 遊戲當中的狗狗就會隨著滑鼠右移而移動

3.start  開始:當跳的時候 觸發鍵盤事情按下"   "(空白鍵) 遊戲就會開始


遊戲進行:

接下來就是遊戲進行中的截圖
還有一段期末作品的影片




心得:

謝謝小葉老師這學期以來的教導
老師真得很用心~~~~~~~
目的就是想要讓我們
每個同學都能學到一些體感的裝置使用
每節課都有新的例子可以學習
這也讓我們在期中期末的作品呈現上
有非常大的幫助
所以很感謝小葉老師
讓我這學期收穫豐富!!!

2015年6月15日 星期一

WEEK17 期末作品最後修改完成

把期中的期中作品進行最後修改
換過了所有的圖片跟音樂和背景
用Processing搭配FAAST的Gesture
讓體感可以順利完成




今日進度

    FAAST

我的FAAST的手勢是:

1.left   左移:當左手低於右手 滑鼠事情往左移 遊戲當中的狗狗就會隨著滑鼠左移而移動

2.right 右移:當右手低於左手 滑鼠事情往右移 遊戲當中的狗狗就會隨著滑鼠右移而移動

3.start  開始:當跳的時候 觸發鍵盤事情按下"   "(空白鍵) 遊戲就會開始


    Processing

Processing:
藉由期中作品進行修改
把兩者結合完成!!!!!



目前進度完成90%
只要把一些小細節再進行修改完成即可!!!

2015年5月25日 星期一

第十四週 利用FAAST搭配Processing 做一個體感賽車遊戲

賽車遊戲

一開始利用FAAST去控制賽車的左轉右轉
利用左右手的骨架去辨識要控制的方向


利用FAAST搭配Processing去控制Processing裡面的方塊轉動
把方塊當成賽車的方向盤那樣去轉動
先測試看看行不行
可以的話就實際套用到方向盤上面就會有同樣的效果
發現利用FAAST的骨架捕捉可以完美的在Processing裡面控制方塊
最後就可以把Processing車子利用FAAST來控制
前進加速 後退減速 左轉控制 右轉控制
賽車遊戲就完成!!!!!!!!!!!

程式碼如下---------------------------------------------------------------------------程式碼如下
PImage imgCar;
float angle=0, dX=0, dY=0, vel=1;
void setup(){
  size(800,600,P3D);
  imgCar=loadImage("car.png");
}
void draw(){
  background(255);
  for(int i=-1;i<=8;i++){
    for(int j=-1;j<=6;j++){
      rect(i*100+dX%100,j*100+dY%100,100,100);
    }
  }
  pushMatrix();
    translate(width/2, height/2);
    rotateZ(angle);
    image(imgCar,-100,-50,200,100);
  popMatrix();
  dX-=vel*cos(angle);
  dY-=vel*sin(angle);
}
void mouseMoved(){
  int x=mouseX-pmouseX;
  int y=mouseY-pmouseY;
  if(x>0) angle+=1/40.0;
  if(x<0) angle-=1/40.0;
}
void keyPressed(){
  if(key=='l') angle+=1/40.0;
  if(key=='r') angle-=1/40.0;
  if(keyCode==UP) vel*=1.1;
  if(keyCode==DOWN) vel*=0.9;
  println(vel);
}

2015年5月18日 星期一

第十三週

最終版的水果忍者
這是最終版的水果忍者
加上了重力角度
終於可以順利地像老師示範影片中切水果了
---------------------------------------------------------------------------------程式碼如下
import SimpleOpenNI.*;
SimpleOpenNI openni;
PImage imgUser;
class Fruit
{
  float X,Y,VX,VY,split=0,angle=0;
  boolean dead=false;
  Fruit(float x,float y, float vx, float vy)
  {
    X=x; Y=y; VX=vx; VY=vy; dead=false;
  }
  void draw(){
    if(dead) {fill(255,0,0);
      arc(X+split,Y,50,50,angle,angle+PI,CHORD);
      arc(X-split,Y,50,50,angle+PI,angle+PI*2,CHORD);
    }
    else {fill(255);ellipse(X,Y,50,50);}
  }
  void update(){
    X+=VX; Y+=VY; VY +=0.68;
    if(X<-100 || X>740 || Y<-100 || Y>580){
      X=random(640); Y=random(240); VX=random(10)-5; VY=-random(10); dead=false;split=0;
    }
    if(dead==false && dist(X,Y,mouseX,mouseY)<50) {dead=true;
      angle=atan2(mouseY-pmouseY, mouseX-pmouseX);
    }
    if(dead==false && X>0 && X<640 && Y>0 && Y<480 && openni.userImage().pixels[int(X)+int(Y)*640]==color(0,0,255)) dead=true;
    if(dead) split+=2;
  }
}
void mouseMoved(){
  strokeWeight(30); stroke(255,0,0); line(mouseX, mouseY, pmouseX, pmouseY);
  strokeWeight(1);  stroke(0);
}
Fruit fruit[] = new Fruit[20];
float fruitX=100, fruitY=400, fruitVX=4, fruitVY=-26;
void setup()
{
  size(640,480);
  openni = new SimpleOpenNI(this);
  openni.enableDepth();
  openni.enableUser();
  for(int i=0; i<20; i++)
    fruit[i] = new Fruit( random(640), random(240), random(10)-5, -random(10));
}
void draw(){
  openni.update();
  image(openni.userImage(),0,0);
  for(int i=0; i<20; i++){
    fruit[i].draw();
    fruit[i].update();
  }
}


這是水果忍者 雖然整個身體都變成了可以把水果殺死的遊戲
但是概念出來了~~~
還滿有趣的原來切水果是這樣做的!
----------------------------------------------------------------------------------程式碼如下
import SimpleOpenNI.*;
SimpleOpenNI openni;

class Fruit
{
  float X,Y,VX,VY;
  boolean dead=false;
  Fruit(float x,float y, float vx, float vy)
  {
    X=x; Y=y; VX=vx; VY=vy; dead=false;
  }
  void draw(){
    if(dead) fill(255,0,0);
    else fill(255);
    ellipse(X,Y,50,50);
  }
  void update(){
    X+=VX; Y+=VY; VY +=0.98;
    if(X<-100 || X>740 || Y<-100 || Y>580){
      X=random(640); Y=random(240); VX=random(10)-5; VY=-random(10); dead=false;
    }
    if(dist(X,Y,mouseX,mouseY)<50) dead=true;
    if(X>0 && X<640 && Y>0 && Y<480 && openni.userImage().pixels[int(X)+int(Y)*640]==color(0,0,255)) dead=true;
  }
}
void mouseMoved(){
  strokeWeight(30); stroke(255,0,0); line(mouseX, mouseY, pmouseX, pmouseY);
  strokeWeight(1);  stroke(0);
}
Fruit fruit[] = new Fruit[20];
float fruitX=100, fruitY=400, fruitVX=4, fruitVY=-26;
void setup()
{
  size(640,480);
  openni = new SimpleOpenNI(this);
  openni.enableDepth();
  openni.enableUser();
  for(int i=0; i<20; i++)
    fruit[i] = new Fruit( random(640), random(240), random(10)-5, -random(10));
}
void draw(){
  openni.update();
  image(openni.userImage(),0,0);
  for(int i=0; i<20; i++){
    fruit[i].draw();
    fruit[i].update();
  }
}

2015年5月11日 星期一

第十二週

用手類似擦玻璃把背景圖片秀出來
我覺得這個滿好玩的很有趣

----------------------------------------------------------------------------程式碼如下
import SimpleOpenNI.*;
SimpleOpenNI  openni;
PImage imgBG;
PGraphics imgMask;
void setup()
{
  size(1366, 737);
  openni = new SimpleOpenNI(this);
  openni.enableRGB();
  openni.enableDepth();
  openni.enableUser();
  imgBG=loadImage("dog.jpg");
  imgBG.resize(1366,737);
  imgMask=createGraphics(1366, 737);
  imgMask.beginDraw();
  imgMask.background(0);
  imgMask.endDraw();
//imgMask.loadPixels();
/*for(int i=0;i<1366*737;i++)
{
  imgMask.pixels[i]=color(0,0,255,80);
}
imgMask.updatePixels();*/
}

void draw()
{
  imgBG.mask(imgMask);
  image(imgBG,0,0);
  println(frameCount);
  openni.update();
  image(openni.userImage(), 0, 0, 128,96);
  //image(imgMask,0,0);
  int[] userList = openni.getUsers();
  imgMask.beginDraw();
  imgMask.noStroke();
  imgMask.fill(255);
  for(int i = 0;i<userList.length;i++)
  {
    if(openni.isTrackingSkeleton(userList[i])){
      PVector pos = new PVector();
      openni.getJointPositionSkeleton(userList[i],SimpleOpenNI.SKEL_RIGHT_HAND, pos);
      imgMask.ellipse(320+pos.x/3, 240-pos.y/3, 50,50);
    }
  }
  imgMask.endDraw();

}
void onNewUser(SimpleOpenNI curContext, int userId)
{
  curContext.startTrackingSkeleton(userId);
}

2015年5月4日 星期一

期中作品

期中作品 打磚塊




利用Leap Motion實作一個小遊戲
手的擺動可以使得下面的狗狗去移動
然後去碰觸到彈力球使其反彈去撞上面的方塊(狗骨頭)
利用FOR迴圈第一關是一排磚塊 到了第二關變成兩排
以此類推...
有背景音樂搭配背景還有把原本沉悶的打磚塊
變成了狗狗要去吃骨頭的感覺

最困難的地方應該就是反彈跟碰撞偵測
這邊想了很久也參考了很多網路上的資料

以下是程式碼
--------------------------------------------------------------------------------------------------------
import de.voidplus.leapmotion.*; //leapmotion
LeapMotion leap; //leapmotion

int sensorValue;

//音樂
import ddf.minim.*;
Minim m;
AudioPlayer player;

float x = 300;
float y = 300;
float dx = 3;
float dy = -5;
int t;
int bloom=3;
int n=0;
int count=0;
int points=0; //得分
PImage bone; //骨頭的圖
PImage dog; //狗的圖
PImage back; //背景圖
PImage heart; //生命值
PImage imgBG;

float heightbounce=450;

//層級
boolean[][] inside=new boolean[1][11];

void setup()
{
  noStroke();
  leap = new LeapMotion(this);
  size(600, 600,P3D); //視窗尺寸
  frameRate(60);
  smooth();

  m = new Minim(this);

  player=m.loadFile("Sleep Away.mp3");
  player.play(); 

  dog=loadImage("dog.jpg"); //讀入狗圖
  bone=loadImage("bone.png"); //讀入骨頭圖
  back=loadImage("back.jpg"); //讀入背景圖
  heart=loadImage("heart.jpg"); //讀入愛心
  imgBG = loadImage("background.jpg");
  imgBG.resize(600,600);
}

void draw()
{

  
  
  if (t==0) //新級別
  {

    background(imgBG); //背景

    stroke(0);

    if (count<120) //前兩秒顯示第幾關
    {
      fill(0); //填入黑色
      textAlign(CENTER);
      text("LEVEL " + inside.length, 300, 400); //顯示第幾關
    }

    strokeWeight(10); //球的大小
    point(x, y); //顯示球球
    strokeWeight(1); //打擊框框大小

    randomSeed(1); //隨機

    //打骨頭
    for (int j=0;j<inside.length;j++)
    {
      for (int k=0;k<inside[0].length;k++)
      {
        //狗及骨頭的距離
        float dx2=50+50*k-x;
        float dy2=50+50*j-y;
        float dis2=sqrt(pow(dx2, 2)+pow(dy2, 2));

        if (dis2>=25. && inside[j][k]==false) //畫骨頭
        {
          image(bone, 25+50*k, 50+50*j, 50, 50); //被打的骨頭
        }

        //關於反彈
        else if (dx2<=(dis2*cos(PI/4))&& dy2<=-(dis2*sin(PI/4)) && inside[j][k]==false)
        {
          dy*=-1;
          inside[j][k]=true;
          points++;
        }
        else if (dx2<=(dis2*cos(PI/4)) && dy2>=(dis2*sin(PI/4)) && inside[j][k]==false)
        {
          dy*=-1;
          inside[j][k]=true;
          points++;
        }
        else if (dy2<=(dis2*sin(PI/4)) && dx2<=-(dis2*cos(PI/4)) && inside[j][k]==false)
        {
          dx*=-1;
          inside[j][k]=true;
          points++;
        }
        else if (dy2<=(dis2*sin(PI/4)) && dx2>=(dis2*cos(PI/4)) && inside[j][k]==false)
        {
          dx*=-1;
          inside[j][k]=true;
          points++;
        }
      }
    }

    float barsize=50;
    strokeWeight(3);

    /*
      sensorValue = serial.read();
      println(sensorValue);
    }*/
    
      for(Hand hand : leap.getHands())
  {

     hand.draw();
     int     hand_id          = hand.getId();
     PVector hand_position    = hand.getPosition();
     println("pos_x"+hand_position.x);
     image(dog, (hand_position.x)-barsize, heightbounce-50, 150, 100);
  
    
    strokeWeight(1);

    // 打到邊界的話
    if (x>=width || x<=0)
    {
      dx*=-1;
    }
    if (y<=0)
    {
      dy*=-1;
    }

    // 設定方位
    if (y>=heightbounce && y<heightbounce+10)
    {
      if (x>((hand_position.x)-barsize) && x< ((hand_position.x)-(1./3)*barsize) && dx>0 && dy>0)
      {
        dy*=-0.95;
        dx*=-1.05;
      }
      else if (x>((hand_position.x)-barsize) && x< ((hand_position.x)-(1./3)*barsize) && dx<0 && dy>0)
      {
        dy*=-0.95;
        dx*=1.05;
      }
      else if (x>((hand_position.x)+(1./3)*barsize) && x< ((hand_position.x)+barsize) && dx>0 && dy>0)
      {
        dy*=-0.95;
        dx*=1.05;
      }
      else if (x>((hand_position.x)+(1./3)*barsize) && x< ((hand_position.x)+barsize) && dx<0 && dy>0)
      {
        dy*=-0.95;
        dx*=-1.05;
      }
      else if (x>((hand_position.x)-(1./3)*barsize) && x< ((hand_position.x)+(1./3)*barsize) && dy>0) {
        dy*=-1.05;
        dx*=0.95;
      }
    }
  }

    //顯示分數
    textAlign(RIGHT);
    fill(0);
    text(points, 300, 350);

    //遊戲結束
    if (y>height)
    {
      if (bloom>1) //生命值
      {
        t=1;
        fill(0);
        textAlign(CENTER);
        text("CLICK TO RESTART GAME", 300, 400);
        text("PRESS SPACE TO RESTART LEVEL", 300, 500);
        bloom--;
      }
      else
      {
        text("GAME OVER", 300, 300);
      }
    }

    //完成關卡
    if (checkinside()) {
      t=2;
      fill(0);
      textAlign(CENTER);
      text("FINISHED", 300, 300);
      text("CLICK FOR NEXT LEVEL", 300, 400);
    }

    x=x+dx;
    y=y+dy;

    count++;
  }

  //遊戲結束
  else if (t==1)
  {
    x = 300;
    y = 300;
    dx = 3;
    dy = -5;
    count=0;
    points=0;
    if (mousePressed==true)
    {
      t=0;
      inside=new boolean[inside.length][inside[0].length];
    }
    if (keyPressed)
    {
      if (key == ' ')
      {
        t=0;
        inside=new boolean[1][11];
      }
    }
  }

  //關卡完成
  else
  {
    x = 300;
    y = 300;
    dx = 3;
    dy = -5;
    count=0;
    if (mousePressed==true)
    {
      t=0;
      inside=new boolean[inside.length+1][inside[0].length];
    }
  }

  //生命值
  if (bloom==3)
  {
    image(heart, 10, 500, 50, 50);
    image(heart, 70, 500, 50, 50);
  }
  else if (bloom==2)
  {
    image(heart, 10, 500, 50, 50);
  }
  else if (bloom==1)
  {
  }
}

boolean checkinside()
{
  for (int j=0;j<inside.length;j++)
  {
    for (int k=0;k<inside[0].length;k++)
    {
      if (inside[j][k] == false)
      {
        return false;
      }
    }
  }
  return true;
}

2015年3月9日 星期一

第三周 控制方塊~~~




剪刀石頭布
import de.voidplus.leapmotion.*;
LeapMotion leap;

void setup(){
  size(800,600,P3D);
  leap = new LeapMotion(this);
  img0=loadImage("0.png");
  img2=loadImage("2.png");
  img5=loadImage("5.png");
}
void draw(){
  background(255);
  if(leap.getHands().size()){
    fill(255,0,0);
    textSize(40);
    for(Hand hand : leap.getHands()){
      int n=hand.getOutstrechtedFingers().size();
      if(hand.isRight()){
        if(n==0) image(img0,400,300);
        else if(n<=2) image(img2,400,300);
        else image(img5,400,300);
      }else
        if(n==0) image(img0,150,300);
        else if(n<=2) image(img2,150,300);
        else image(img5,150,300);
    }
  }
}

-----------------------------------------------------
import de.voidplus.leapmotion.*;
LeapMotion leap;

void setup(){
  size(800,600,P3D);
  leap = new LeapMotion(this);
}
void draw(){
  background(255);
  for(Hand hand : leap.getHands()){
    println("yaw:"+hand.getYaw());
    pushMatrix();
    translate(hand.getPosition().x,hand.getPosition().y);
    rotateX(radians(hand.getRoll()));
    rotateZ(radians(hand.getPitch()));
    rotateY(radians(hand.getYaw()));
    stroke(0); fill(255); box(100);
    popMatrix();
 
    hand.draw();
    myDraw(hand.getPosition());
    myDraw(hand.getThumb().getPosition());
    myDraw(hand.getIndexFinger().getPosition());
    myDraw(hand.getMiddleFinger().getPosition());
    myDraw(hand.getRingFinger().getPosition());
    myDraw(hand.getPinkyFinger().getPosition());
  }
}
void myDraw(PVector pos){
   pushMatrix();
   translate(pos.x,pos.y);
   fill(255,0,0); sphere(20);
   popMatrix();
 }

第一周體感 LEAPMOTION


import de.voidplus.leapmotion.*;
LeapMotion leap;

void setup() {
  size(800, 600, P3D);
  leap = new LeapMotion(this);
}

void draw() {
  background(255);
  for (Hand hand : leap.getHands ())
  {
     hand.draw();
  }
}