2016年11月24日 星期四

Week 11 ლ(゚д゚ლ) 張書豪 60408029E 大豪豪der上課筆記

20161124 教學軟體設計

本日心得:

今天的課程充滿互動,互動性極高,雖然前幾次上課也都富有互動性,但今天可以設計一些多媒體互動的雛型,覺得很棒很特別,看著老師開著直播,完全是沒有稿的直接上場,就劈哩啪啦的打了一堆程式碼,真的很顛覆以往我對於寫程式的老師之刻板印象,因為過往老師寫程式都是用說的,喔~這個很簡單R! 就!@#$%^^*%$%$# 弄一弄就好了R! 原來程式這麼簡單... XDD 但是葉老師有別於我遇到的老師,是一個言出必行,親力親為的老師,真的超狂! 這難道揪4寫程式!!!  

沒有自動替代文字。



投影藝術:餐桌上的小廚師
享用餐點之前的數位媒體應用

程式功能是要實作能夠在餐桌上拖曳盤子

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


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

---------------------------------------------------------------------------------------

Week11 施柏豪上課筆記

本日課程內容:

投影藝術:餐桌上的小廚師
享用餐點之前的數位媒體應用案例

對於做Prototype的實作方向 - 做一個互動餐桌。
結合Kinect實現手部辨識功能。
Smart Table for Dining_3rd_ Kookmin Univ. Interaction design lab.

程式開發方向:
先宣告陣列與座標物件,作為餐盤的初始化,
將餐桌旁的碟子做到移動、餐桌能夠旋轉。先以鍵盤動作做為互動介面。


老師對練習程式開發的建議:
程式在開發時,一次先試一行的功能,看到效果之後慢慢增加程式功能。
如果不曉得有什麼函式可以使用,就去看已經做好的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去設計一些多媒體互動的雛型構想,並可以自己決定程式執行結果的參數,如果具備程式設計能力,將能有非常高的彈性去發想與實作各種有趣的概念,但是關鍵的難處也在這,想法想到哪,程式寫到哪這種能力,並不容易,葉老師實力非常強,只能說見識強者才知道自己還能朝這方向去努力。

生活中留心處處皆學問,需要有能力去玩,你所處的世界將更有趣。

補充:
【Powerpoint小撇步】
簡報投影F5全螢幕模式下,按下B可以將螢幕立即變全黑。按下W可以將螢幕轉為白色。白色螢幕狀態下可以按滑鼠右鍵,以指標選項進行畫筆的筆跡標註

20161124教學軟體設計_豐佳燕筆記


互動餐桌
Le Petie Chef


smart  table design


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);//roraying cicle
  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].x=mouseY;
  }
}
void mouseReleased(){
  nowDish=-1;
}





可以選轉的餐盤
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);//rotating circle
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;
}
}
}
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;
}






可以用 HoloLens 加上空拍機, 學習太極拳

會轉動的車子,停車位置
void setup(){
size(640, 480, P3D);
rectMode(CENTER);
}
float carX=640/2, carY=320/2;
float carDir=PI, 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();
rect(0+187/2,0+89/2, 187, 89);
rect(450+187/2,0+89/2, 187, 89);
}








瘋狂程式




Week11 李彩鳳筆記

畫盤子
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);//rotating circle
  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++){
          nowDish=i;
    }
  }
}
void mouseDragged(){
  if(nowDish!= -1){
    dish[nowDish].x=mouseX;
    dish[nowDish].y=mouseY;
  }
}
void mouseReleased(){
  nowDish= -1;
}



旋轉盤子
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);//rotating circle
  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;
    }
  }
}
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;
}

使用 sin, cosin, atan2 計算角度
按下任何鍵即可旋轉


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


Car parking 
void setup() {
  size(640, 480, P3D);
  rectMode(CENTER);
}
float carX=640/2, carY=320/2;
float carDir=PI, 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();
  rect(0+187/2, 0+89/2, 187, 89);
  rect(450+187/2, 0+89/2, 187, 89);
}




Week 11 Sean's note 60408027E

Idea:互動餐桌


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);//center
  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.1;
      dish[i].x = r[i] * cos(angle[i]) +320;
      dish[i].y = r[i] * sin(angle[i]) +240;
    }
  }
}
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, 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();
}



成功停車!

void setup() {
  size(640, 480, P3D);
  rectMode(CENTER);
}
float carX=640/2, carY=320/2;
float carDir=PI, 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();
  rect(0+187/2, 0+89/2, 187, 89);
  rect(450+187/2, 0+89/2, 187, 89);
}



Week 11 均均❤上課筆記

1.互動餐桌Le Petit Chef

2. 畫出互動餐桌



3.實作:互動餐桌-移動餐盤.按任意鍵旋轉




4.實作:停車遊戲






1124 許君平 上課筆記

11/24

1.互動餐桌Le Petit Chef













*實作:互動餐桌-可移動餐盤



















*實作:互動餐桌-移動餐盤.按任意鍵旋轉




















程式碼

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

2.路邊停車

















*實作:上下鍵車子前進後退,左右鍵車子左轉右轉

















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

*實作:加上車位,就可以練習停車囉!



week11上課筆記

161124 week11




今日實作:互動餐桌


step1: 設立一個可以拖拉的餐桌

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

step2: 讓餐桌轉盤轉動


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);//rotating circle
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;
}
}
}
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;
}





60508013E_林子婷,Week11

105/11/24

1. 互動餐桌
https://www.youtube.com/watch?v=yBJEP4lsRFY






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);//rotating circle
  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;
}


*旋轉



* 可移動盤子,按空白鍵使其在餐桌上旋轉





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);//rotating circle
  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;
    }
  }
}
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;
}



2.開車



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


3. 加上輪子停車


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


4. 停車格停車





void setup(){
size(640, 480, P3D);
rectMode(CENTER);
}
float carX=640/2, carY=320/2;
float carDir=PI, 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();
rect(0+187/2,0+89/2, 187, 89);
rect(450+187/2,0+89/2, 187, 89);
}