🇺🇸

【100sites #004】Firework

Published on
Currently displaying Chinese version content. This article doesn't have a English version yet. Please stay tuned!

​
Firework - 享受臺北 101 的跨年煙火吧

Github

Live Demo

螢幕快照 2016-02-15 上午12.08.44.png

我一直在尋找製作前端動畫的框架，今天我終於找到了：Processing.js。它是Processing的 js 版本，可以讓你建構各種視覺藝術(visual arts)專案。

於是我用它來完成了今天的 100sites 專案：Firework，簡單的煙火動畫。

下面是今天的 code：

<!DOCTYPE html>
<html>
  <head>
    <title>Fireworks 101</title>
    <script src="http://cdn.bootcss.com/processing.js/1.4.16/processing.min.js"></script>
  </head>

  <body>
    <h1>Enjoy the fireworks!</h1>
    <canvas data-processing-sources="firework.pde"></canvas>
  </body>
</html>

int time = 0;
ArrayList fireworks = new ArrayList();


void setup() {
  size(600, 600);
  frameRate(30);
  smooth();
  noStroke();
  loop();
}



void draw() {
  background(0);
  if(int(random(4)) == 0){
    add_firework(50+int(random(500)), 50+int(random(350)));
  }
  display_firework();
  draw_taipei101();
  removeOldFirework();
}



void mousePressed() {
  add_firework(mouseX, mouseY);
}



void display_firework() {
  for(int i = 0; i < fireworks.size(); ++i){
    fireworks.get(i).display();
  }
}



void removeOldFirework() {
  for(int i = 0; i < fireworks.size(); ++i) {
    if(fireworks.get(i).passingTime > 20) {
      fireworks.remove(i);
    }
  }
}



void add_firework(int x, int y) {
  fireworks.add(new Firework(x, y));
}



void draw_taipei101() {
  fill(100);
  quad(270, 560, 330, 560, 320, 600, 280, 600);
  quad(270, 520, 330, 520, 320, 560, 280, 560);
  quad(270, 480, 330, 480, 320, 520, 280, 520);
  quad(270, 440, 330, 440, 320, 480, 280, 480);
  rect(295, 410, 10, 30);
  rect(299, 390, 2, 20);
}



class Firework {
  int x;
  int y;
  int directions;
  int passingTime;
  int colorR;
  int colorG;
  int colorB;

  Firework(int myX, int myY) {
    x = myX;
    y = myY;
    directions = 6+int(random(16));
    colorR = 100+int(random(155));
    colorG = 100+int(random(155));
    colorB = 100+int(random(155));
    passingTime = 0;
  }

  void display() {
    fill(colorR, colorG, colorB);
    for(int i = 0; i < directions; ++i) {
      ellipse(x+4*passingTime*sin(TWO_PI*i/directions), y+4*passingTime*cos(TWO_PI*i/directions), 7, 7);
    }
    ++passingTime;
  }

}