2024年10月21日 星期一

SY-BlingBangBang week07 arras.io

  [TODO]

上課內容：

arras.io

// week07_1_arras01_background_fill_stroke_ellipse_rect_line
void setup(){
  size(500,400);
}
float x = 250, y=200;
void draw(){
  background(215,184,200);
  fill(167,167,175);
  stroke(110,110,113);
  strokeWeight(3);
  rect(240,160,20,20);//砲管
  
  fill(204,102,156);
  stroke(125,84,105);
  strokeWeight(3);
  ellipse(x,y,55,55);//圓形的身體
  
  line(x,y,mouseX,mouseY);
}



arras.io(算角度)
// week07_2_arras02_atan_cos_sin
void setup(){
  size(500,400);
}
float x = 250, y=200;
void draw(){
  background(215,184,200);
  float dx = mouseX-x, dy = mouseY-y;
  float a = atan2(dy,dx); //atan2() 算出角度
  strokeWeight(20); //很粗的一條線，長度是40
  line(x, y, x+cos(a)*40, y+sin(a)*40); //cos()算出x方向，sin()算出y方向
  
  fill(167,167,175);
  stroke(110,110,113);
  strokeWeight(3);
  rect(240,160,20,20);//砲管
  
  fill(204,102,156);
  stroke(125,84,105);
  strokeWeight(3);
  ellipse(x,y,55,55);//圓形的身體
  //line(x,y,mouseX,mouseY);
}



arras.io(轉動砲管)
// week07_3_arras03_atan_angle_rotate_translate_myTank
void setup(){
  size(500,400);
}
float x = 250, y=200;
void draw(){
  background(215,184,200);
  float dx = mouseX-x, dy = mouseY-y;
  float a = atan2(dy,dx); //atan2() 算出角度
  line(x, y, mouseX, mouseY);
  myTank(x, y, a);
}
void myTank(float x, float y, float a){
  translate(x, y); //大二下圖學課教的：移動
  rotate(a); //大二下圖學課教的：旋轉
  fill(167,167,175);
  stroke(110,110,113);
  strokeWeight(3);
  rect(20,-10,20,20);//砲管
  
  fill(204,102,156);
  stroke(125,84,105);
  strokeWeight(3);
  ellipse(0,0,55,55);//圓形的身體
}



arras.io(移動-->Tank)
// week07_4_arras04_background_for_line_line_void_keyPressed_keyCode
void setup(){
  size(500,400);
}
void keyPressed(){
  if(keyCode==RIGHT) x+=1;
  if(keyCode==LEFT) x-=1;
  if(keyCode==UP) y-=1;
  if(keyCode==DOWN) y+=1;
}
float x = 250, y=200;
void draw(){
  //background(215,184,200); //紅底
  //stroke(211,180,196); //紅底的線
  background(219); //灰底
  stroke(210); //灰底的線
  strokeWeight(1);
  for(int i=0; i<30; i++){
    line(0, i*30, 500, i*30);
    line(i*30, 0, i*30, 500);
  }
  float dx = mouseX-x, dy = mouseY-y;
  float a = atan2(dy,dx); //atan2() 算出角度
  line(x, y, mouseX, mouseY);
  myTank(x, y, a);
}
void myTank(float x, float y, float a){
  translate(x, y); //大二下圖學課教的：移動
  rotate(a); //大二下圖學課教的：旋轉
  fill(167,167,175);
  stroke(110,110,113);
  strokeWeight(3);
  rect(20,-10,20,20);//砲管
  
  fill(204,102,156);
  stroke(125,84,105);
  strokeWeight(3);
  ellipse(0,0,55,55);//圓形的身體
}



arras.io(移動-->背景)
// week07_5_arras05_correct_move_translate_translate_mx_my
// 會移動的背景，但是其他要正確運作
void setup(){
  size(500,400);
}
void keyPressed(){
  if(keyCode==RIGHT) x+=1;
  if(keyCode==LEFT) x-=1;
  if(keyCode==UP) y-=1;
  if(keyCode==DOWN) y+=1;
}
float x = 250, y=200;
void draw(){
  //background(215,184,200); //紅底
  //stroke(211,180,196); //紅底的線
  background(219); //灰底
  translate(-x, -y); //讓全世界，都向反方向移動
  translate(width/2, height/2); //把 0,0 移畫面正中心
  float mx = mouseX+x-width/2, my = mouseY+y-height/2; //換算 mx, my 的座標 
  ellipse(mx, my, 8, 8);
  stroke(210); //灰底的線
  strokeWeight(1);
  for(int i=0; i<30; i++){
    line(0, i*30, 500, i*30);
    line(i*30, 0, i*30, 500);
  }
  float dx = mx-x, dy = my-y; //改用 mx, my
  float a = atan2(dy,dx); //atan2() 算出角度
  line(x, y, mx, my); //改用 mx, my
  myTank(x, y, a);
}
void myTank(float x, float y, float a){
  translate(x, y); //大二下圖學課教的：移動
  rotate(a); //大二下圖學課教的：旋轉
  fill(167,167,175);
  stroke(110,110,113);
  strokeWeight(3);
  rect(20,-10,20,20);//砲管
  
  fill(204,102,156);
  stroke(125,84,105);
  strokeWeight(3);
  ellipse(0,0,55,55);//圓形的身體
}



arras.io(移動-->背景-->改良版)
// week07_6_arras06_vx_vy_void_keyPressed_void_keyReleased_void_draw
// 希望移動很順，因為 keyPressed 每秒次數不夠快，要在 void draw() 裡，移動它
// 會移動的背景，但是其他要正確運作
void setup(){
  size(500,400);
}
void keyPressed(){ //按下去會有速度，放開後速度要變成0
  if(keyCode==RIGHT) vx=1; //x+=1;
  if(keyCode==LEFT) vx=-1; //x-=1;
  if(keyCode==UP) vy=-1; //y-=1;
  if(keyCode==DOWN) vy=1; //y+=1;
}
void keyReleased(){
  if(keyCode==LEFT || keyCode==RIGHT) vx=0;
  if(keyCode==UP || keyCode==DOWN) vy=0;
}
float x = 250, y=200, vx=0, vy=0; //代表移動的速度
void draw(){
  //background(215,184,200); //紅底
  //stroke(211,180,196); //紅底的線
  x+=vx;
  y+=vy;
  background(219); //灰底
  translate(-x, -y); //讓全世界，都向反方向移動
  translate(width/2, height/2); //把 0,0 移畫面正中心
  float mx = mouseX+x-width/2, my = mouseY+y-height/2; //換算 mx, my 的座標 
  ellipse(mx, my, 8, 8);
  stroke(210); //灰底的線
  strokeWeight(1);
  for(int i=0; i<30; i++){
    line(0, i*30, 500, i*30);
    line(i*30, 0, i*30, 500);
  }
  float dx = mx-x, dy = my-y; //改用 mx, my
  float a = atan2(dy,dx); //atan2() 算出角度
  line(x, y, mx, my); //改用 mx, my
  myTank(x, y, a);
}
void myTank(float x, float y, float a){
  translate(x, y); //大二下圖學課教的：移動
  rotate(a); //大二下圖學課教的：旋轉
  fill(167,167,175);
  stroke(110,110,113);
  strokeWeight(3);
  rect(20,-10,20,20);//砲管
  
  fill(204,102,156);
  stroke(125,84,105);
  strokeWeight(3);
  ellipse(0,0,55,55);//圓形的身體
}



arras.io(發射砲彈-->永遠只有一顆子彈)
// week07_7_arras07_angle_bulletX_bulletY_bulletVX_bulletVY
// 希望移動很順，因為 keyPressed 每秒次數不夠快，要在 void draw() 裡，移動它
// 會移動的背景，但是其他要正確運作
void setup(){
  size(500,400);
}
void keyPressed(){ //按下去會有速度，放開後速度要變成0
  if(keyCode==RIGHT) vx=1; //x+=1;
  if(keyCode==LEFT) vx=-1; //x-=1;
  if(keyCode==UP) vy=-1; //y-=1;
  if(keyCode==DOWN) vy=1; //y+=1;
}
void keyReleased(){
  if(keyCode==LEFT || keyCode==RIGHT) vx=0;
  if(keyCode==UP || keyCode==DOWN) vy=0;
}
float x = 250, y=200, vx=0, vy=0; //代表移動的速度
void draw(){
  //background(215,184,200); //紅底
  //stroke(211,180,196); //紅底的線
  x+=vx;
  y+=vy;
  background(219); //灰底
  translate(-x, -y); //讓全世界，都向反方向移動
  translate(width/2, height/2); //把 0,0 移畫面正中心
  float mx = mouseX+x-width/2, my = mouseY+y-height/2; //換算 mx, my 的座標 
  ellipse(mx, my, 8, 8);
  stroke(210); //灰底的線
  strokeWeight(1);
  for(int i=0; i<30; i++){
    line(0, i*30, 500, i*30);
    line(i*30, 0, i*30, 500);
  }
  float dx = mx-x, dy = my-y; //改用 mx, my
  float a = atan2(dy,dx); //atan2() 算出角度
  angle = a;
  line(x, y, mx, my); //改用 mx, my
  pushMatrix();
  myTank(x, y, a);
  popMatrix();
  if(bulletVX!=0 && bulletVY!=0){
    bulletX += bulletVX;
    bulletY += bulletVY;
    ellipse(bulletX, bulletY, 20, 20);
  }
}
float angle, bulletX=0, bulletY=0, bulletVX=0, bulletVY=0; //子彈的 x,y 位置和速度
void mousePressed(){
  bulletX=x;
  bulletY=y;
  bulletVX=cos(angle);
  bulletVY=sin(angle);
}
void myTank(float x, float y, float a){
  translate(x, y); //大二下圖學課教的：移動
  rotate(a); //大二下圖學課教的：旋轉
  fill(167,167,175);
  stroke(110,110,113);
  strokeWeight(3);
  rect(20,-10,20,20);//砲管
  
  fill(204,102,156);
  stroke(125,84,105);
  strokeWeight(3);
  ellipse(0,0,55,55);//圓形的身體
}



arras.io(發射砲彈-->陣列有100顆子彈)
// week07_8_arras08_array_many_bullets
// 希望移動很順，因為 keyPressed 每秒次數不夠快，要在 void draw() 裡，移動它
// 會移動的背景，但是其他要正確運作
void setup(){
  size(500,400);
}
void keyPressed(){ //按下去會有速度，放開後速度要變成0
  if(keyCode==RIGHT) vx=1; //x+=1;
  if(keyCode==LEFT) vx=-1; //x-=1;
  if(keyCode==UP) vy=-1; //y-=1;
  if(keyCode==DOWN) vy=1; //y+=1;
}
void keyReleased(){
  if(keyCode==LEFT || keyCode==RIGHT) vx=0;
  if(keyCode==UP || keyCode==DOWN) vy=0;
}
float x = 250, y=200, vx=0, vy=0; //代表移動的速度
void draw(){
  //background(215,184,200); //紅底
  //stroke(211,180,196); //紅底的線
  x+=vx;
  y+=vy;
  background(219); //灰底
  translate(-x, -y); //讓全世界，都向反方向移動
  translate(width/2, height/2); //把 0,0 移畫面正中心
  float mx = mouseX+x-width/2, my = mouseY+y-height/2; //換算 mx, my 的座標 
  ellipse(mx, my, 8, 8);
  stroke(210); //灰底的線
  strokeWeight(1);
  for(int i=0; i<30; i++){
    line(0, i*30, 500, i*30);
    line(i*30, 0, i*30, 500);
  }
  float dx = mx-x, dy = my-y; //改用 mx, my
  float a = atan2(dy,dx); //atan2() 算出角度
  angle = a;
  line(x, y, mx, my); //改用 mx, my
  pushMatrix();
  myTank(x, y, a);
  popMatrix();
  for(int i=0; i<bulletN; i++){
    bulletX[i] += bulletVX[i];
    bulletY[i] += bulletVY[i];
    ellipse(bulletX[i], bulletY[i], 20, 20);
  }
}
float angle;
int bulletN = 0; //一開始有0個子彈，之後慢慢增加
float [] bulletX = new float[100]; //致命問題：只有100發子彈，超過會當機
float [] bulletY = new float[100];
float [] bulletVX = new float[100];
float [] bulletVY = new float[100];//子彈的 x,y 位置和速度
void mousePressed(){
  int i = bulletN;
  bulletX[i]=x;
  bulletY[i]=y;
  bulletVX[i]=cos(angle);
  bulletVY[i]=sin(angle);
  bulletN++;
}
void myTank(float x, float y, float a){
  translate(x, y); //大二下圖學課教的：移動
  rotate(a); //大二下圖學課教的：旋轉
  fill(167,167,175);
  stroke(110,110,113);
  strokeWeight(3);
  rect(20,-10,20,20);//砲管
  
  fill(204,102,156);
  stroke(125,84,105);
  strokeWeight(3);
  ellipse(0,0,55,55);//圓形的身體
}


arras.io(發射砲彈-->子彈回收再利用-->改良版)
// week07_9_arras09_recycle_bullet_move_right_to_left
// 要有武器射出來
void setup(){
  size(500,400);
}
void keyPressed(){ //按下去會有速度，放開後速度要變成0
  if(keyCode==RIGHT) vx=1; //x+=1;
  if(keyCode==LEFT) vx=-1; //x-=1;
  if(keyCode==UP) vy=-1; //y-=1;
  if(keyCode==DOWN) vy=1; //y+=1;
}
void keyReleased(){
  if(keyCode==LEFT || keyCode==RIGHT) vx=0;
  if(keyCode==UP || keyCode==DOWN) vy=0;
}
float x = 250, y=200, vx=0, vy=0; //代表移動的速度
void draw(){
  //background(215,184,200); //紅底
  //stroke(211,180,196); //紅底的線
  x+=vx;
  y+=vy;
  background(219); //灰底
  translate(-x, -y); //讓全世界，都向反方向移動
  translate(width/2, height/2); //把 0,0 移畫面正中心
  float mx = mouseX+x-width/2, my = mouseY+y-height/2; //換算 mx, my 的座標 
  ellipse(mx, my, 8, 8);
  stroke(210); //灰底的線
  strokeWeight(1);
  for(int i=0; i<30; i++){
    line(0, i*30, 500, i*30);
    line(i*30, 0, i*30, 500);
  }
  float dx = mx-x, dy = my-y; //改用 mx, my
  float a = atan2(dy,dx); //atan2() 算出角度
  angle = a;
  line(x, y, mx, my); //改用 mx, my
  pushMatrix();
  myTank(x, y, a);
  popMatrix();
  for(int i=0; i<bulletN; i++){
    bulletX[i] += bulletVX[i];
    bulletY[i] += bulletVY[i];
    ellipse(bulletX[i], bulletY[i], 20, 20);
  }
}
float angle;
int bulletN = 0; //一開始有0個子彈，之後慢慢增加
float [] bulletX = new float[100]; //致命問題：只有100發子彈，超過會當機
float [] bulletY = new float[100];
float [] bulletVX = new float[100];
float [] bulletVY = new float[100];//子彈的 x,y 位置和速度
void mousePressed(){
  int i = bulletN;
  bulletX[i]=x;
  bulletY[i]=y;
  bulletVX[i]=cos(angle);
  bulletVY[i]=sin(angle);
  bulletN++;
  if(bulletN==100){
    for(int k=0; k<50; k++){
      bulletX[k] += bulletX[k+50];
      bulletY[k] += bulletY[k+50];
      bulletVX[k] += bulletVX[k+50];
      bulletVY[k] += bulletVY[k+50];
    }
    bulletN=50;
  }
  println(bulletN); //印印看現在有幾個子彈
}
void myTank(float x, float y, float a){
  translate(x, y); //大二下圖學課教的：移動
  rotate(a); //大二下圖學課教的：旋轉
  fill(167,167,175);
  stroke(110,110,113);
  strokeWeight(3);
  rect(20,-10,20,20);//砲管
  
  fill(204,102,156);
  stroke(125,84,105);
  strokeWeight(3);
  ellipse(0,0,55,55);//圓形的身體
}



arras.io(發射砲彈-->子彈有時間壽命限制-->改良版)
// week07_10_arras10_bulletT_for_timeout
// 要有武器射出來
void setup(){
  size(500,400);
}
void keyPressed(){ //按下去會有速度，放開後速度要變成0
  if(keyCode==RIGHT) vx=1; //x+=1;
  if(keyCode==LEFT) vx=-1; //x-=1;
  if(keyCode==UP) vy=-1; //y-=1;
  if(keyCode==DOWN) vy=1; //y+=1;
}
void keyReleased(){
  if(keyCode==LEFT || keyCode==RIGHT) vx=0;
  if(keyCode==UP || keyCode==DOWN) vy=0;
}
float x = 250, y=200, vx=0, vy=0; //代表移動的速度
void draw(){
  //background(215,184,200); //紅底
  //stroke(211,180,196); //紅底的線
  x+=vx;
  y+=vy;
  background(219); //灰底
  translate(-x, -y); //讓全世界，都向反方向移動
  translate(width/2, height/2); //把 0,0 移畫面正中心
  float mx = mouseX+x-width/2, my = mouseY+y-height/2; //換算 mx, my 的座標 
  ellipse(mx, my, 8, 8);
  stroke(210); //灰底的線
  strokeWeight(1);
  for(int i=0; i<30; i++){
    line(0, i*30, 500, i*30);
    line(i*30, 0, i*30, 500);
  }
  float dx = mx-x, dy = my-y; //改用 mx, my
  float a = atan2(dy,dx); //atan2() 算出角度
  angle = a;
  line(x, y, mx, my); //改用 mx, my
  pushMatrix();
  myTank(x, y, a);
  popMatrix();
  //if(bulletVX!=0 && bulletVY!=0){
  for(int i=0; i<bulletN; i++){
    bulletX[i] += bulletVX[i];
    bulletY[i] += bulletVY[i];
    ellipse(bulletX[i], bulletY[i], 20, 20);
    bulletT[i]--;
    if(bulletT[i]==0){ //要把i消滅掉，就拿右邊的來補
      for(int k=i+1; k<bulletN; k++){
        bulletX[k-1] = bulletVX[k]; //把右邊移到左邊
        bulletY[k-1] = bulletVY[k];
        bulletVX[k-1] = bulletVX[k];
        bulletVY[k-1] = bulletVY[k];
        bulletT[k-1] = bulletT[k];
      }
      bulletN--; //少了一顆子彈
    }
  }
  println(bulletN); //印印看現在有幾個子彈
}
float angle;
int bulletN = 0; //一開始有0個子彈，之後慢慢增加
float [] bulletX = new float[100]; //致命問題：只有100發子彈，超過會當機
float [] bulletY = new float[100];
float [] bulletVX = new float[100];
float [] bulletVY = new float[100];//子彈的 x,y 位置和速度
int [] bulletT = new int[100]; //每個子彈的壽命
void mousePressed(){
  int i = bulletN;
  bulletX[i]=x;
  bulletY[i]=y;
  bulletVX[i]=cos(angle);
  bulletVY[i]=sin(angle);
  bulletT[i] = 600; //每個子彈只有10秒的壽命
  bulletN++;
  if(bulletN==100){
    for(int k=0; k<50; k++){
      bulletX[k] += bulletX[k+50];
      bulletY[k] += bulletY[k+50];
      bulletVX[k] += bulletVX[k+50];
      bulletVY[k] += bulletVY[k+50];
    }
    bulletN=50;
  }
  println(bulletN); //印印看現在有幾個子彈
}
void myTank(float x, float y, float a){
  translate(x, y); //大二下圖學課教的：移動
  rotate(a); //大二下圖學課教的：旋轉
  fill(167,167,175);
  stroke(110,110,113);
  strokeWeight(3);
  rect(20,-10,20,20);//砲管
  
  fill(204,102,156);
  stroke(125,84,105);
  strokeWeight(3);
  ellipse(0,0,55,55);//圓形的身體
}


於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)