【100sites #004】Firework

Posted by Eason Chang on 2016-02-14

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

Github

Live Demo

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

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

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

下面是今天的code:

index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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;
}

}