02162411_劉永健_Week03

1. 請同學們思考並寫清楚, 想要利用 Leap Motion 做出來的期

中作品是什麼

2. 老師教如何利用2手,來做互動的調色盤 (上週教 Visualizer)


3. 先到 leapmotion.com/setup 下載軟體, 然後Processing下

載 LeapMotion for Processing的library


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

Processing下載 LeapMotion for Processing的library

第一節課

複習上星期的進度

手指畫畫變3d

利用Leap Motion偵測五隻手指，畫出有殘影的線

實際演示場景

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;
      if(f==1)println(now);
    }
  }
  translate(width/2,height/2);
  rotateY(radians(frameCount));
  translate(-width/2,-height/2);
  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);
  rotateY(radians(frameCount/4.0));
  translate(-width/2,-height/2);
  for(int f=0;f<5;f++){
    stroke(f*20, 100,100);
    for(int i=1;i<10;i++){
    stroke(f*20,100,100);
      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);//LeapMotion起始值
}
void draw(){
  background(255);
  for(Hand hand : leap.getHands()){//抓取手
      PVector pos = hand.getPosition();
      if(hand.isLeft()){
        ellipse(pos.x,pos.y,200,100);
    }else if(hand.isRight()){

      rect(pos.x,pos.y,10,100);
    }
  } 

}

有顏色的調色盤3D



期中作品預想題目:

鋼鐵人 Holography