over 2 years ago

文章搬家囉!新文章在這裡:https://easonchang.com/2016/02/14/100sites-004-firework/

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

Github
Live Demo

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

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

下面是今天的code:

index.html
<!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>
firework.pde
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;
  }

}
← 【100sites #003】TodoList 【100sites #005】Drawer →
 
comments powered by Disqus