week03_龔郁如

期中組作品想做大概：

密室逃脫

https://www.youtube.com/watch?v=ZIVw4gcQUpk

今天課程開始一樣先到 leapmotion.com/setup 下載軟體, 然後Processing下載 LeapMotion for Processing的library

接下來我們要學如何利用2手,來做互動的調色盤 (上週教 Visualizer)

程式碼：

import de.voidplus.leapmotion.*;//LeapMotion標頭檔
LeapMotion leap;
PVector [][] pt = new PVector[5][50];
//PVector pt1,pt2,pt3,pt4,pt5,pt6,pt7,pt8,pt9,pt10;
void setup(){
  size(640,480,P3D);
  colorMode(HSB, 100);
  for(int f=0;f<5;f++)
    for(int i=0;i<50;i++)
      pt[f][i] = new PVector(0,0,0);
  leap = new LeapMotion(this);//LeapMotion起始值

}
void draw(){
  background(0);
  //stroke(48,191,153);
  stroke(#30BF99);
  for(int f=0;f<5;f++)
    for(int i=49;i>0;i--){pt[f][i].x=pt[f][i-1].x;pt[f][i].y=pt[f][i-1].y;}
  for(Hand hand : leap.getHands()){//抓取手
    for(Finger finger : hand.getFingers()){//抓取手指
      int f=finger.getType();
      PVector now = finger.getPosition();
      pt[f][0].x = now.x;
      pt[f][0].y = now.y;
    }
  }
  for(int f=0;f<5;f++){
    stroke(f*20, 100,100);
    for(int i=1;i<10;i++)
      line(pt[f][i].x,pt[f][i].y,pt[f][i].z,pt[f][i-1].x,pt[f][i-1].y,pt[f][i-1].z);
  }
}

下圖為五根手指頭有分別不同的顏色出來的圖：

接下來讓線變3D立體

程式碼：

import de.voidplus.leapmotion.*;//LeapMotion標頭檔

LeapMotion leap;

PVector [][] pt = new PVector[5][50];

//PVector pt1,pt2,pt3,pt4,pt5,pt6,pt7,pt8,pt9,pt10;

void setup(){

  size(640,480,P3D);

  colorMode(HSB, 100);

  for(int f=0;f<5;f++)

    for(int i=0;i<50;i++)

      pt[f][i] = new PVector(0,0,0);

  leap = new LeapMotion(this);//LeapMotion起始值

}

void draw(){

  background(0);

  //stroke(48,191,153);

  stroke(#30BF99);

  for(int f=0;f<5;f++)

    for(int i=49;i>0;i--){pt[f][i].x=pt[f][i-1].x;pt[f][i].y=pt[f][i-1].y;pt[f][i].z=pt[f][i-1].z;}

  for(Hand hand : leap.getHands()){//抓取手

    for(Finger finger : hand.getFingers()){//抓取手指

      int f=finger.getType();

      PVector now = finger.getPosition();

      pt[f][0].x = now.x;

      pt[f][0].y = now.y;

      pt[f][0].z = now.z*2-90;

      if(f==1) println(now);

    }

  }

  translate(width/2, height/2, 0 );

  rotateY(radians(frameCount/4.0));

  translate(-width/2, -height/2, 0 );

  for(int f=0;f<5;f++){

    stroke(f*20, 100,100);

    for(int i=1;i<10;i++)

      line(pt[f][i].x,pt[f][i].y,pt[f][i].z,pt[f][i-1].x,pt[f][i-1].y,pt[f][i-1].z);

  }

  stroke(60, 100, 100);

for(int i=0;i<640;i+=20)

  for(int j=0;j<480;j+=20){

    noFill(); rect(i, j, 20, 20);

  }

}

下圖為3D圖截圖：

接下來要做左手右手的搭配所用出來的圖：

程式碼：

import de.voidplus.leapmotion.*;//LeapMotion標頭檔 LeapMotion leap; void setup(){ size(640,480,P3D); leap = new LeapMotion(this); } color nowColor = color(255,0,0); PVector leftPos; void draw(){ background(255); for(Hand hand : leap.getHands()){ PVector pos=hand.getPosition(); if( hand.isLeft() ){ noFill(); ellipse(pos.x, pos.y, 200,100); fill(255,0,0); ellipse(pos.x+500, pos.y, 60,50); fill(255,255,0); ellipse(pos.x+120, pos.y-40, 60,50); fill(0,255,0); ellipse(pos.x+90, pos.y-60, 60,50); fill(0,0,255); ellipse(pos.x+30, pos.y-60, 60,50); fill(255,0,255); ellipse(pos.x-20, pos.y-60, 60,50); leftPos = pos; }else if( hand.isRight() ){ fill(nowColor); rect(pos.x, pos.y, 10,100); println(leftPos); println(pos); if(dist(pos.x, pos.y, leftPos.x+120, leftPos.y-40) <30){ nowColor = color(255,255,0); } } } }

這次課程的心得：

         覺得每次上這個課都很有趣，雖然跟得比較慢，但希望能做出好玩又有趣的遊戲~