week02 互動概論筆記 小精靈

 1.將上週的第九個程式碼貼上

2.第一節課的程式碼

//week02_1_pacman_radians_mouseX

void setup() {

  size(400, 400);

}

void draw() {

  background(255);

  fill(#FFDC0F);//填充黃色

  float a = radians(mouseX);

  for (int x=0; x<400; x+=100) {

    for (int y=0; y<400; y+=100) {

      arc(x+50, y+50, 100, 100, 0+a, PI*2-a, PIE);//改畫弧度

      //x座標,y,寬,高,開始,結束, 畫蘋果派的方法畫

    }

  }

}

利用滑鼠來調整缺口大小讓他有互動的感覺

//week02_2_pacman_radians_frameCount

void setup(){

  size(400,400);

}

void draw(){

  background(255);

  fill(#FFDC0F);

  float a = radians(frameCount);

  if(a>PI/4) a = a - PI/4;

  arc(200,200,300,300,0+a,PI*2-a,PIE);

}

讓小精靈隨著時間張嘴

//week02_3_pacman_open_close_open_close

void setup(){

  size(400,400);

}

void draw(){

  background(255);

  fill(#FFDC0F);

  float a = frameCount %180;

  if(a<45) a = radians(a);

  else if(a<90) a = radians(90-a);

  else if(a<135) a = radians(a-90);

  else if(a<180) a = radians(180-a);

  arc(200,200,300,300,0+a,PI*2-a,PIE);

}

讓小精靈能夠小幅度的張開關閉嘴巴

3.第二節上課程式碼

//week02_4_pacman_for_for_open_close

void setup() {

  size(400, 400);

}

void draw() {

  background(255);

  fill(#FFDC0F);//填充黃色

  //float a = radians(mouseX);

  for (int x=0; x<400; x+=100) {

    for (int y=0; y<400; y+=100) {

      float a = frameCount %180;

      if (a<45) a = radians(a);

      else if (a<90) a = radians(90-a);

      else if (a<135) a = radians(a-90);

      else if (a<180) a = radians(180-a);

      arc(x+50, y+50, 100, 100, 0+a, PI*2-a, PIE);//改畫弧度

      //x座標,y,寬,高,開始,結束, 畫蘋果派的方法畫

    }

  }

}

將第一個程式和第三個結合起來

//week02_5_pacman_if_keyPressed_keyCode

void setup(){

  size(400,400);

}

int x =200,y=200;

void draw(){

  background(255);

  fill(#FFDC0F);

  if(keyPressed && keyCode==RIGHT)x++;

  if(keyPressed && keyCode==LEFT)x--;

  if(keyPressed && keyCode==UP)y--;

  if(keyPressed && keyCode==DOWN)y++;

  ellipse(x,y,100,100);

}

利用keycode keypressed來讓貼圖上下左右移動

//week02_6_pacman_b_direction from week02_3

void setup(){

  size(400,400);

}

void draw(){

  background(255);

  fill(#FFDC0F);

  float a = frameCount %180;

  float b = radians(mouseX);

  if(a<45) a = radians(a);

  else if(a<90) a = radians(90-a);

  else if(a<135) a = radians(a-90);

  else if(a<180) a = radians(180-a);

  arc(200,200,300,300,b+0+a,b+PI*2-a,PIE);

}

讓開口的方向根據滑鼠的座標

//week02_7_pacman_d_direction_void_keyPressed_keyCode

void setup(){

  size(400,400);

}

float x=200,y=200,d=PI/2*0;

void draw(){

  background(255);

  fill(#FFDC0F);

  float a = frameCount %180;

  if(a<45) a = radians(a);

  else if(a<90) a = radians(90-a);

  else if(a<135) a = radians(a-90);

  else if(a<180) a = radians(180-a);

  arc(x,y,100,100,d+0+a,d+PI*2-a,PIE);

}

void keyPressed(){

  if(keyCode==RIGHT){

    x++;

    d=PI/2*0;

  }else if(keyCode==DOWN){

    y++;

    d=PI/2*1;

  }else if(keyCode==LEFT){

    x--;

    d=PI/2*2;

  }else if(keyCode==UP){

    y--;

    d=PI/2*3;

  }

}

讓上下左右來操控開口的方向

4.第三節上課程式碼

//week02_8_pacman_dx_dy_d_void_keyPressed

void setup(){

  size(400,400);

}

int x =200,y=200,d=0;

void draw(){

  background(255);

  fill(#FFDC0F);

  float a =0.5;

  int [] dx = {1,0,-1,0};

  int [] dy = {0,1,0,-1};

  x +=dx[d];

  y +=dy[d];

  arc(x,y,100,100,PI/2*d+a,PI/2*d+PI*2-a,PIE);

}

void keyPressed(){

  if(keyCode==RIGHT)d=0;

  if(keyCode==DOWN)d=1;

  if(keyCode==LEFT)d=2;

  if(keyCode==UP)d=3;

}

利用上下左右按鍵來讓小精靈轉動方向，並且小精靈會自己移動

//week02_9_pacman_radians_abs_frameCount_if_keyPressed

void setup(){

  size(400,400);

}

int x =200,y=200,d=0;

void draw(){

  background(255);

  fill(#FFDC0F);

  float a = radians(abs(frameCount%90-45));

  int [] dx = {1,0,-1,0};

  int [] dy = {0,1,0,-1};

  if(keyPressed)x +=dx[d];

  if(keyPressed)y +=dy[d];

  arc(x,y,100,100,PI/2*d+a,PI/2*d+PI*2-a,PIE);

}

void keyPressed(){

  if(keyCode==RIGHT)d=0;

  if(keyCode==DOWN)d=1;

  if(keyCode==LEFT)d=2;

  if(keyCode==UP)d=3;

}

結合移動和轉向簡單的利用按鍵來操控

5.上傳github