2024互動技術: 周家契約13號

用類似逐格動畫的方式製造會動的背景

每秒動60次

//week13_1_animated_background_array_I_frameCount

PImage[] img = new PImage[3];
void setup(){
  size(550, 370);
  img[0] = loadImage("snail01.png");
  img[1] = loadImage("snail02.png");
  img[2] = loadImage("snail03.png");
}
int I = 0;
void draw(){
  background(img[I]);
  if(frameCount%60==0) I = (I+1)%3;
}

自製讓背景動

重點是frameCount

//week13_2_animated_background_frameCount_x
void setup(){
  size(500,300);
}
void draw(){
  background(#FFFFF2);
  float x = (frameCount*5 % 1000);
  if(x>500) x = 1000-x;
  for(int y= 30; y<300; y+=50){
    ellipse(x, y, 30, 30);
  }
}
















火雞旋轉
中間的火雞會跟著滑鼠指標移動
//week13_3_animated_background_turkey_pushMatrix_translate_rotate
PImage img;
void setup(){
  size(500,300);
  img = loadImage("turkey.png");
  imageMode(CENTER);
}
void turkey(int x, int y){
  pushMatrix();
    translate(x, y);
    rotate(radians(frameCount));
    image(img, 0, 0);
   popMatrix();
}
void draw(){
  background(255);
  turkey(mouseX, mouseY);
  turkey(100, 100);
  turkey(400, 100);
  turkey(100, 200);
  turkey(400, 200);
}

讀入大二圖學課的鋼彈模型

並使它旋轉

//week13_5_obj_mtl_gundam_loadShape_shape_pushMatrix_scale_translate
PShape gundam;
void setup(){
  size(500,500,P3D);
  gundam = loadShape("Gundam.obj");
}
void draw(){
  background(#BBFF81);
  pushMatrix();
    translate(mouseX, mouseY);
    rotateY(radians(frameCount));
    rotate(radians(180));
    scale(5,5,5);
    shape(gundam, 0, 0);//shape(gundam, mouseX, mouseY, 250/2, 250/2);
   popMatrix();
}

用for迴圈做出一堆鋼彈

//week13_6_PShape_gundam_for_loop
PShape gundam;
void setup(){
  size(500,500,P3D);
  gundam = loadShape("Gundam.obj");
}
void draw(){
  background(#BBFF81);
  drawGundam(mouseX,mouseY);
  for(int x=0; x<=500; x+=500/4){
    drawGundam(x, 300);
  }
}
void drawGundam(int x, int y){
  pushMatrix();
    translate(x, y);
    rotateY(radians(frameCount));
    rotate(radians(180));
    scale(10,10,10);
    shape(gundam, 0, 0);//shape(gundam, mouseX, mouseY, 250/2, 250/2);
   popMatrix();
}

俄羅斯方塊

rect()都是畫出方塊的程式

keyCode則是判斷左右來移動

//week13_7_tetris_falling
void setup(){
  size(300,600);
}
float x=50, y=50;
void draw(){
  background(0);
  fill(153,0,204);
  rect(x, y-25, 25, 25);
  rect(x+25, y, 25, 25);
  rect(x, y, 25, 25);
  rect(x, y+25, 25, 25);
  if(frameCount%50==0)  y+=25;
}
void keyPressed(){
  if(keyCode==RIGHT) x += 25;
  if(keyCode==LEFT) x -= 25;
}

先用陣列劃出圖

就跟之前畫rpg地圖一樣

然後讓2=紫色

就能在上面畫出方塊

//week13_8_tetris_grid_2d_array_fill_rect
void setup(){
  size(240, 440);
}
void draw(){
  for(int i=0; i<22; i++){
    for(int j=0; j<12; j++){
      if(grid[i][j]==1)  fill(119,119,119);
      if(grid[i][j]==0)  fill(0);
      if(grid[i][j]==2)  fill(153, 0, 204);
      rect(j*20, i*20, 20, 20);
    }
  }
}
int [][] grid = {
  {1,1,1,1,1,1,1,1,1,1,1,1},
  {1,0,0,0,0,0,2,0,0,0,0,1},
  {1,0,0,0,0,0,2,2,0,0,0,1},
  {1,0,0,0,0,0,2,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,1,1,1,1,1,1,1,1,1,1,1}
};

更改了資料結構

//week13_9_tetris_color_array_c_now
color [] c = {#000000, #777777, #9900CC, #CCCC00};
//黑,灰,紫,黃,綠,紅
void setup(){
  size(240, 440);
}
void draw(){
  for(int i=0; i<22; i++){
    for(int j=0; j<12; j++){
      int now = grid[i][j];
      fill(c[now]);
      rect(j*20, i*20, 20, 20);
    }
  }
}
int [][] grid = {
  {1,1,1,1,1,1,1,1,1,1,1,1},
  {1,0,0,0,0,0,2,0,0,0,0,1},
  {1,0,0,0,0,0,2,2,0,0,0,1},
  {1,0,0,0,0,0,2,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,0,0,0,0,0,1},
  {1,0,0,0,0,0,2,0,0,0,0,1},
  {1,0,0,0,0,0,2,2,0,0,0,1},
  {1,0,0,0,0,0,2,0,0,0,0,1},
  {1,1,1,1,1,1,1,1,1,1,1,1}
};

















加入for迴圈來判斷方塊是否觸底
如果觸底要讓他停
//week13_10_tetris_falling_if_frameCount_for_for_if
color [] c = {#000000, #777777, #9900CC, #CCCC00};
//黑,灰,紫,黃,綠,紅
void setup() {
  size(240, 440);
}
void draw() {
  for (int i=0; i<22; i++) {
    for (int j=0; j<12; j++) {
      int now = grid[i][j];
      fill(c[now]);
      rect(j*20, i*20, 20, 20);
    }
  }
  if (frameCount%50==0) {
    int bad=0;
    for (int i=20; i>1; i--) {
      for (int j=1; j<12-1; j++) {
        if (grid[i][j]==2) {
          if (grid[i+1][j]!=0 && grid[i+1][j]!=2)  bad=1;
        }
      }
    }
    if (bad==0) {
      for (int i=20; i>=1; i--) {
        for (int j=1; j<12-1; j++) {
          if (grid[i][j]==2) {
            grid[i+1][j]=2;
            grid[i][j] = 0;
          }
        }
      }
    }
  }
}
int [][] grid = {
  {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
  {1, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}
};

白色代表沒觸底

紫色代表觸底

程式碼的9代表還活著

//week13_11_tetris_falling_alive_9_freeze_dead_T
color [] c = {#000000, #777777, #9900CC, #CCCC00, #00B500, #CCC000, #0000CC, #CC9900, #0000CC, #FFFFFF};
int T=2;
//黑,灰,紫,黃,綠,紅
void setup() {
  size(240, 440);
}
void draw() {
  for (int i=0; i<22; i++) {
    for (int j=0; j<12; j++) {
      int now = grid[i][j];
      fill(c[now]);
      rect(j*20, i*20, 20, 20);
    }
  }
  if (frameCount%50==0) {
    int bad=0;
    for (int i=20; i>1; i--) {
      for (int j=1; j<12-1; j++) {
        if (grid[i][j]==9) {
          if (grid[i+1][j]!=0 && grid[i+1][j]!=9)  bad=1;
        }
      }
    }
    if (bad==0) {
      for (int i=20; i>=1; i--) {
        for (int j=1; j<12-1; j++) {
          if (grid[i][j]==9) {
            grid[i+1][j]=9;
            grid[i][j] = 0;
          }
        }
      }
    }else{
      for(int i=20; i>=1; i--){
        for(int j=1; j<12-1; j++){
          if(grid[i][j]==9){
            grid[i][j]=T;
          }
        }
      }
    }
  }
}
int [][] grid = {
  {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
  {1, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 9, 9, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
  {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}
};

2024互動技術

2024年12月2日星期一

周家契約13號

沒有留言:

張貼留言

2024年12月2日 星期一

周家契約13號

沒有留言:

張貼留言

2024年12月2日星期一