體感互動week3 02160473賴緯漢

期中作品：腥風血雨：斷手指

上禮拜所教的是用五根手指頭畫出線條


程式碼：
import de.voidplus.leapmotion.*;
LeapMotion leap;
PVector [][] pt = new PVector[5][50];//PVector[手指數量][後面點的數量(數量越多長度越長)]
void setup(){
  size(640,480,P3D);
  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);
    colorMode(HSB,100);

}
void draw(){
  background(0);
  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<50;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);
  }
}


不過上次所畫出來的線只限於在2D平面上，並沒有3D的效果

今天所要改的地方就是
把2D的手畫線改成3D



這是讓畫面轉向後出現的畫面



發現某些方向線會成一平面
這代表了z軸沒有改變方向

程式碼：
import de.voidplus.leapmotion.*;
LeapMotion leap;
PVector [][] pt = new PVector[5][50];
void setup() {
  size(640, 480, P3D);
  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);
  colorMode(HSB, 100);
}
void draw() {
  background(0);
  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;
      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<50; 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);
    }
  }

看出印出的數字發現
z軸的數值怪怪的(數值改變過大)

所以我們要改善這項錯誤

改善過後明顯得有了前後的方向
(圖中平面為xy面)


程式碼：
import de.voidplus.leapmotion.*;
LeapMotion leap;
PVector [][] pt = new PVector[5][50];
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);
}
void draw() {
  background(0);
  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/2.0));
  translate(-width/2, -height/2,0);
  for (int f=0; f<5; f++) {
    stroke(f*20, 100, 100);
    for (int i=1; i<50; 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);}//畫出平面
}

接著我們要做的是
左手是調色盤
右手是畫筆
來去動手做吧

先使左手為圓
右手為畫筆


程式碼：
import de.voidplus.leapmotion.*;
LeapMotion leap;
void setup(){
  size(640,480,P3D);
  leap = new LeapMotion(this);
}

void draw(){
  background(255);
  for(Hand hand : leap.getHands()){
    PVector pos = hand.getPosition();
    if(hand.isLeft()){//若為左手
      ellipse(pos.x,pos.y,100,100);//出現圓
    }
    else if(hand.isRight()){//若為右手
      rect(pos.x,pos.y,10,150);//出現長方形
    }
  }
}

讓四周有顏色的圓可以上色
只是現在還沒不能使棒棒變色


程式碼：
import de.voidplus.leapmotion.*;
LeapMotion leap;
void setup(){
  size(640,480,P3D);
  leap = new LeapMotion(this);
}

void draw(){
  background(255);
  for(Hand hand : leap.getHands()){
    PVector pos = hand.getPosition();
    if(hand.isLeft()){
      noFill(); ellipse(pos.x,pos.y,100,100);
      fill(255,0,0); ellipse(pos.x+150,pos.y,30,30);
      fill(255,255,0); ellipse(pos.x+120,pos.y-40,30,30);
      fill(255,255,255); ellipse(pos.x+90,pos.y-60,30,30);
      fill(0,255,0); ellipse(pos.x+30,pos.y-60,30,30);
      fill(0,0,255); ellipse(pos.x-20,pos.y-60,30,30);//四周有顏色的圓
    }
    else if(hand.isRight()){
      rect(pos.x,pos.y,10,150);
    }
  }
}

可以讓棒棒改變顏色


程式碼：
import de.voidplus.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, 100, 100);
      fill(255, 0, 0);
      ellipse(pos.x+150, pos.y, 30, 30);
      fill(255, 255, 0);
      ellipse(pos.x+120, pos.y-40, 30, 30);
      fill(255, 255, 255);
      ellipse(pos.x+90, pos.y-60, 30, 30);
      fill(0, 255, 0);
      ellipse(pos.x+30, pos.y-60, 30, 30);
      fill(0, 0, 255);
      ellipse(pos.x-20, pos.y-60, 30, 30);
    } else if (hand.isRight()) {
      fill(nowColor) rect(pos.x, pos.y, 10, 150);
      println(leftPos);
      println(pos);
      if (dist(pos.x+120, pos.y-40)<30)
      {
        nowColor = color(255, 255, 0);
      }
    }
  }
}