火焰！

Flame.pde

// 請下載空白作業 4 檔開始。

PImage[] flames = new PImage[5];

int[] flameFrameCount = new int[5]; // 這個火焰經過幾次系統影格了 -> 被 draw 了幾次 -> 便可透過 frameRate 來轉換成畫了幾秒。
int[] flameX = new int[5] ; 
int[] flameY = new int[5] ;
int boomIndex = 0 ; // 現在要用哪一來儲存爆炸狀態 -> 同時也代表，我要去用 array 的第幾格存。

int yourFrameRate ; 
void setup() {
  size(300, 300);
  frameRate(yourFrameRate); // 每秒會 draw 幾次
  
  for (int i = 0; i < 5; i++) {
    flames[i] = loadImage("img/flame" + (i+1) +".png");
  }

  for (int i = 0 ; i < flameFrameCount.length ; i++){
    flameFrameCount[i] = 9999 ; 
  }
}


void draw () {

  background(0);  // 把畫面清空
                         
  for (int i = 0; i < 5 ; i++) { // 畫火焰
    flameFrameCount[i] ++ ;    
    int flameFrame = floor ( flameFrameCount[i] / (yourFrameRate/5) ) ; // 這個火焰的 影格  要播哪一張火焰圖 

    if ( flameFrame < 5) {
      image(flames[flameFrame ], flameX[i], flameY[i]);
    }

  }
}
void mouseClicked () {
  //flameFrame = 0 ;
  flameFrameCount[ boomIndex ] = 0;

  flameX [ boomIndex ] = mouseX ;
  flameY [ boomIndex ] = mouseY ;
  boomIndex ++ ;
  boomIndex %= 5 ;
}

幾個滿重要的點：等問卷發完會公開。

flameFrameCount / int(frameRate) 代表火焰已經經過幾秒了