體感互動week2 02160473賴緯漢

今天教的是
使用Porcessing做畫圖軟體(Leap Motion)

首先先使用Processing打出能使用滑鼠畫線的程式碼(不間斷)
\

線的顏色可選擇自己喜歡的顏色


程式碼：
void setup(){
  size(640,480);
}
void draw(){
  //stroke(48,191,153);
  stroke(#30BF99);
  line(mouseX,mouseY,pmouseX,pmouseY);
}



程式碼：
PVector pt1,pt2;
void setup(){
  size(640,480,P3D);//把2D空間變3D空間
  background(0,0,0);
  pt1 = new PVector(0,0,0);//起始值
  pt2 = new PVector(0,0,0);

}
void draw(){
  //stroke(48,191,153);
  stroke(#30BF99);
  pt2.x = pt1.x;//pt1的資料複製到pt2
  pt2.y = pt1.y;

  pt1.x = mouseX;//滑鼠作標資料複製到pt1
  pt1.y = mouseY;
  line(pt1.x,pt1.y,pt1.z,pt2.x,pt2.y,pt2.z);
}

把background貼在draw最前面可清空後面的資料
但是這只有1個點，我們要把線設長


程式碼：
PVector pt1,pt2;
void setup(){
  size(640,480,P3D);

  pt1 = new PVector(0,0,0);
  pt2 = new PVector(0,0,0);

}
void draw(){
  background(0);
  //stroke(48,191,153);
  stroke(#30BF99);
  pt2.x = pt1.x;
  pt2.y = pt1.y;

  pt1.x = mouseX;
  pt1.y = mouseY;
  line(pt1.x,pt1.y,pt1.z,pt2.x,pt2.y,pt2.z);
}

先設定10個陣列把每個點皆複製上一個點的做標資料
第一個則取滑鼠作標的資料


程式碼：
PVector [] pt = new PVector[10];
//PVector pt1,pt2,pt3,pt4,pt5,pt6,pt7,pt8,pt9,pt10;
void setup(){
  size(640,480,P3D);
  for(int i=0;i<10;i++)
    pt[i] = new PVector(0,0,0);
 
}
void draw(){
  background(0);
  //stroke(48,191,153);
  stroke(#30BF99);
  for(int i=9;i>0;i--){
    pt[i].x=pt[i-1].x;pt[i].y=pt[i-1].y;
  }
  pt[0].x = mouseX;
  pt[0].y = mouseY;
  for(int i=1;i<10;i++)
  line(pt[i].x,pt[i].y,pt[i].z,pt[i-1].x,pt[i-1].y,pt[i-1].z);
}

接著我們不使用滑鼠來畫線
而是使用LeapMotion來畫線
我們先抓取一根手指的座標讓手指可以畫線


程式碼：
import de.voidplus.leapmotion.*;//LeapMotion標頭檔
LeapMotion leap;
PVector [] pt = new PVector[10];
//PVector pt1,pt2,pt3,pt4,pt5,pt6,pt7,pt8,pt9,pt10;
void setup(){
  size(640,480,P3D);
  for(int i=0;i<10;i++)
    pt[i] = new PVector(0,0,0);
    leap = new LeapMotion(this);//LeapMotion起始值
 
}
void draw(){
  background(0);
  //stroke(48,191,153);
  stroke(#30BF99);
  for(int i=9;i>0;i--){pt[i].x=pt[i-1].x;pt[i].y=pt[i-1].y;}
  for(Hand hand : leap.getHands()){//抓取手
    for(Finger finger : hand.getFingers()){//抓取手指
      switch(finger.getType()){
        case 1:
          PVector now = finger.getPosition();
          pt[0].x = now.x;
          pt[0].y = now.y;
          break;
      }
    }
  }
  for(int i=1;i<10;i++)
  line(pt[i].x,pt[i].y,pt[i].z,pt[i-1].x,pt[i-1].y,pt[i-1].z);
}

接著是抓取5根手指
每根手指都有畫線


程式碼：
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);
  }
}