2016體感互動

2016年3月3日星期四

160303_02160065劉劭玟_week02

今天是我第一次上課

就先來一些比較基本的

根之前互動技術很像的

小畫家的感覺

然後就是用陣列來紀錄點

用10個點來記

就會有延續的尾巴很像貪食蛇

同樣是一條線

但這次是用leapmotion

我的手畫出的線

再來就是五根手指頭的感應

然後不同顏色的

用了二維陣列

因為有上百個點要記

只是我有點不明白為何我的延續的線

沒有老師示範的這麼長

貪吃蛇畫法

畫出線

將滑鼠版轉換成leap motion版

將5跟手指頭畫不同顏色
將一維陣列變成二維陣列

Week02 金博鈞

1.確認 Leap Motion 的 Processing 範例

2.程式碼

void setup(){

size(640,480);

}

void draw(){

line(mouseX,mouseY,pmouseX,pmouseY); //2D畫線,3D就加Z軸

}

background(0); //黑色背景

stroke("色碼或RGB"); //線的顏色

使用內建color collector來取得色碼

使用for迴圈後的程式碼

PVector [] pt = new PVector [10];

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(#62FA75);
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);
}

加入五隻手指

import de.voidplus.leapmotion.*;
LeapMotion leap;
PVector [][] pt = new PVector [5][100];

void setup(){
size(640,480,P3D);
for(int f=0;f<5;f++){
for(int i=0;i<100;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=99;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<100;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);
}
}

week02_02160305_邱俊澄

void setup(){
size(640,480);
background(0);
}
void draw(){
line(mouseX,mouseY,pmouseX,pmouseY);
}

week02 02160120 黃冠中

import de.voidplus.leapmotion.*;

LeapMotion leap;

void setup(){

size(640,480);

}

void draw(){

if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);

}

結合leap畫出每一個手指並且有xyz軸的變化(用strokeWeight偽裝z軸)

import de.voidplus.leapmotion.*;

PVector [][]fingerPosition = new PVector[5][10];

LeapMotion leap;

void setup(){

size(640,480);

leap = new LeapMotion(this);

for(int f=0;f<5;f++)for(int i=0;i<10;i++)fingerPosition[f][i]= new PVector(0,0,0);

}

void draw(){

background(255);

LeapmotionSetup();

drawFinger();

}

//////////////////////////////////////////

void LeapmotionSetup(){

int fps = leap.getFrameRate();

for(Hand hand : leap.getHands ()){

for(Finger finger : hand.getFingers()){

switch(finger.getType()){

case 0:

fingerPosition[0][0] = finger.getPosition();

break;

case 1:

fingerPosition[1][0] = finger.getPosition();

break;

case 2:

fingerPosition[2][0] = finger.getPosition();

break;

case 3:

fingerPosition[3][0] = finger.getPosition();

break;

case 4:

fingerPosition[4][0] = finger.getPosition();

break;

}

//////////////////////////////////////////

void drawFinger(){

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

for(int i=9;i>0;i--){

fingerPosition[f][i].x = fingerPosition[f][i-1].x;

fingerPosition[f][i].y = fingerPosition[f][i-1].y;

fingerPosition[f][i].z = fingerPosition[f][i-1].z;

}

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

for(int i=0;i<9;i++){

strokeWeight(fingerPosition[f][i].z*30/50+1);

stroke(255,0,0,100-i*10);

line(fingerPosition[f][i+1].x,fingerPosition[f][i+1].y,fingerPosition[f][i].x,fingerPosition[f][i].y);

}

Week 02 葉正聖老師示範

體感互動 Week 02 上課內容
1. 加退選後名單/座位表確認, blog設定
2. 確認 Leap Motion 的 Processing 範例
3. Leap Motion Orion 影片
4. 帶大家看同學們上週blog寫的/想要做的作品,並進行示範教學

註: 在 S405如果不能連到blog,可以設定proxy之後再試試
proxy.mcu.edu.tw 使用port 3128

https://www.leapmotion.com/setup

註: 如果想要用自己的電腦來試著用 Leap Motion for Processing, 請記得下載 Processing 2.2.1, 因為現在的 de.voidplus.leapmotion 他還沒有變出 3.x的 Processing Library