本日課程內容：
投影藝術：餐桌上的小廚師
享用餐點之前的數位媒體應用案例
對於做Prototype的實作方向 - 做一個互動餐桌。
結合Kinect實現手部辨識功能。
結合Kinect實現手部辨識功能。
Smart Table for Dining_3rd_ Kookmin Univ. Interaction design lab.
程式開發方向：
先宣告陣列與座標物件，作為餐盤的初始化，
將餐桌旁的碟子做到移動、餐桌能夠旋轉。先以鍵盤動作做為互動介面。
將餐桌旁的碟子做到移動、餐桌能夠旋轉。先以鍵盤動作做為互動介面。
老師對練習程式開發的建議：
程式在開發時，一次先試一行的功能，看到效果之後慢慢增加程式功能。
如果不曉得有什麼函式可以使用，就去看已經做好的API範例語法。
如果不曉得有什麼函式可以使用，就去看已經做好的API範例語法。
變數用到再回去宣告，不一定會一開始就完全知道自己會用到那些變數，
可以不用執著一開始就到位。
可以不用執著一開始就到位。
程式功能：能夠使用滑鼠在餐桌上拖曳盤子
執行結果截圖：
執行結果錄影：
PVector [] dish=new PVector[4];
void setup(){
size(640,480);
dish[0] = new PVector(100,100);
dish[1] = new PVector(540,100);
dish[2] = new PVector(100,380);
dish[3] = new PVector(540,380);
}
void draw(){
background(255);
ellipse(320,240,400,400);
ellipse(100,100,100,100);
ellipse(540,100,100,100);
ellipse(100,380,100,100);
ellipse(540,380,100,100);
for(int i=0;i<4;i++){
ellipse(dish[i].x,dish[i].y,90,90);
}
}
int nowDish = -1;
void mousePressed(){
for(int i=0;i<4;i++){
if( dist(dish[i].x,dish[i].y,mouseX,mouseY) < 45){
nowDish = i;
}
}
}
void mouseDragged(){
if (nowDish!=-1){
dish[nowDish].x=mouseX;
dish[nowDish].y=mouseY;
}
}
void mouseReleased(){
nowDish = -1;
}
程式功能：能夠使用滑鼠在餐桌上拖曳盤子之後，按下Enter並旋轉餐桌，同時帶動碟子。
這個旋轉的功能使用到三角函數，計算角度之後
這個旋轉的功能使用到三角函數，計算角度之後
執行結果截圖：
執行結果錄影：
PVector [] dish=new PVector[4];
float [] r = {0,0,0,0};
float [] angle = {0,0,0,0};
void setup(){
size(640,480);
dish[0] = new PVector(100,100);
dish[1] = new PVector(540,100);
dish[2] = new PVector(100,380);
dish[3] = new PVector(540,380);
}
void draw(){
background(255);
ellipse(320,240,400,400);
ellipse(100,100,100,100);
ellipse(540,100,100,100);
ellipse(100,380,100,100);
ellipse(540,380,100,100);
for(int i=0;i<4;i++){
ellipse(dish[i].x,dish[i].y,90,90);
line(dish[i].x, dish[i].y, 320,240);
}
if(keyPressed){
for(int i=0;i<4;i++){
angle[i] -= 0.01;
dish[i].x= r[i] * cos(angle[i]) + 320;
dish[i].y= r[i] * sin(angle[i]) + 240;
//angle[i] += 0.01;
//dish[i].x= r[i] * cos(angle[i]);
//dish[i].y= r[i] * sin(angle[i]);
}
}
}
int nowDish = -1;
void mousePressed(){
for(int i=0;i<4;i++){
if( dist(dish[i].x,dish[i].y,mouseX,mouseY) < 45){
nowDish = i;
}
}
}
void mouseDragged(){
if (nowDish!=-1){
dish[nowDish].x=mouseX;
dish[nowDish].y=mouseY;
r[nowDish] = sqrt( (mouseX-320)*(mouseX-320) + (mouseY-240)*(mouseY-240) );
angle[nowDish] = atan2(mouseY-240, mouseX-320);
}
}
void mouseReleased(){
nowDish = -1;
}
接下來老師又帶領我們實作一個很酷的程式功能，
用程式去模擬在停車格停車的情境。
程式功能：能夠使用鍵盤上下左右鍵變更假車的位置
void setup(){
size(640, 480, P3D);
rectMode(CENTER);
}
float carX=640/2, carY=320/2;
float carDir=0.6, carWheel=0;
void drawCar(){
translate(carX, carY);
rotateZ(carDir);
rect(0,0,187,89);
if(keyPressed && keyCode==UP){
carX+= cos(carDir); carY+=sin(carDir);
}else if(keyPressed && keyCode==DOWN){
carX-= cos(carDir); carY-=sin(carDir);
}else if(keyPressed && keyCode==RIGHT){
carDir+=0.01;
}else if(keyPressed && keyCode==LEFT){
carDir-=0.01;
}
}
void draw(){
background(100);
drawCar();
}
執行結果截圖：
程式功能：能夠使用鍵盤上下左右鍵變更假車的位置(加上輪子轉向功能)
void setup() {
size(640, 480, P3D);
rectMode(CENTER);
}
float carX=640/2, carY=320/2;
float carDir=0, carWheel=0;
void drawCar() {
pushMatrix();
translate(carX, carY);
rotateZ(carDir);
rect(0, 0, 187, 89);
drawWheel(127/2, 89/2, 1);
drawWheel(127/2, -89/2, 1);
drawWheel(-127/2, 89/2, 0);
drawWheel(-127/2, -89/2, 0);
if (keyPressed && keyCode==UP) {
carX+= cos(carDir+carWheel);
carY+=sin(carDir+carWheel);
carDir+=carWheel/50;
} else if (keyPressed && keyCode==DOWN) {
carX-= cos(carDir+carWheel);
carY-=sin(carDir+carWheel);
carDir-=carWheel/50;
} else if (keyPressed && keyCode==RIGHT) {
carWheel+=0.01;
if (carWheel > 0.3) carWheel=0.3;
} else if (keyPressed && keyCode==LEFT) {
carWheel-=0.01;
if (carWheel < -0.3) carWheel=-0.3;
}
popMatrix();
}
void drawWheel(float x, float y, int front) {
pushMatrix();
translate(x, y);
if (front==1) rotateZ(carWheel);
rect(0, 0, 40, 20);
popMatrix();
}
void draw() {
background(100);
drawCar();
}
程式截圖：
今天的互動程式設計課程，讓我了解到可以使用Procesing去設計一些多媒體互動的雛型構想，並可以自己決定程式執行結果的參數，如果具備程式設計能力，將能有非常高的彈性去發想與實作各種有趣的概念，但是關鍵的難處也在這，想法想到哪，程式寫到哪這種能力，並不容易，葉老師實力非常強，只能說見識強者才知道自己還能朝這方向去努力。
生活中留心處處皆學問，需要有能力去玩，你所處的世界將更有趣。
補充：
size(640, 480, P3D);
rectMode(CENTER);
}
float carX=640/2, carY=320/2;
float carDir=0.6, carWheel=0;
void drawCar(){
translate(carX, carY);
rotateZ(carDir);
rect(0,0,187,89);
if(keyPressed && keyCode==UP){
carX+= cos(carDir); carY+=sin(carDir);
}else if(keyPressed && keyCode==DOWN){
carX-= cos(carDir); carY-=sin(carDir);
}else if(keyPressed && keyCode==RIGHT){
carDir+=0.01;
}else if(keyPressed && keyCode==LEFT){
carDir-=0.01;
}
}
void draw(){
background(100);
drawCar();
}
執行結果截圖：
程式功能：能夠使用鍵盤上下左右鍵變更假車的位置(加上輪子轉向功能)
void setup() {
size(640, 480, P3D);
rectMode(CENTER);
}
float carX=640/2, carY=320/2;
float carDir=0, carWheel=0;
void drawCar() {
pushMatrix();
translate(carX, carY);
rotateZ(carDir);
rect(0, 0, 187, 89);
drawWheel(127/2, 89/2, 1);
drawWheel(127/2, -89/2, 1);
drawWheel(-127/2, 89/2, 0);
drawWheel(-127/2, -89/2, 0);
if (keyPressed && keyCode==UP) {
carX+= cos(carDir+carWheel);
carY+=sin(carDir+carWheel);
carDir+=carWheel/50;
} else if (keyPressed && keyCode==DOWN) {
carX-= cos(carDir+carWheel);
carY-=sin(carDir+carWheel);
carDir-=carWheel/50;
} else if (keyPressed && keyCode==RIGHT) {
carWheel+=0.01;
if (carWheel > 0.3) carWheel=0.3;
} else if (keyPressed && keyCode==LEFT) {
carWheel-=0.01;
if (carWheel < -0.3) carWheel=-0.3;
}
popMatrix();
}
void drawWheel(float x, float y, int front) {
pushMatrix();
translate(x, y);
if (front==1) rotateZ(carWheel);
rect(0, 0, 40, 20);
popMatrix();
}
void draw() {
background(100);
drawCar();
}
程式截圖：
執行結果錄影：
今日上課心得：
今天的互動程式設計課程，讓我了解到可以使用Procesing去設計一些多媒體互動的雛型構想，並可以自己決定程式執行結果的參數，如果具備程式設計能力，將能有非常高的彈性去發想與實作各種有趣的概念，但是關鍵的難處也在這，想法想到哪，程式寫到哪這種能力，並不容易，葉老師實力非常強，只能說見識強者才知道自己還能朝這方向去努力。生活中留心處處皆學問，需要有能力去玩，你所處的世界將更有趣。
補充：
【Powerpoint小撇步】
簡報投影F5全螢幕模式下，按下B可以將螢幕立即變全黑。按下W可以將螢幕轉為白色。白色螢幕狀態下可以按滑鼠右鍵，以指標選項進行畫筆的筆跡標註
沒有留言:
張貼留言