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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
| var ctx = document.querySelector('canvas').getContext('2d')
ctx.canvas.width = window.innerWidth
ctx.canvas.height = window.innerHeight
var sparks = []
var fireworks = []
var i = 30;
while (i--) {
fireworks.push(
new Firework(Math.random() * window.innerWidth, window.innerHeight * Math.random())
)
}
render()
function render() {
setTimeout(render, 1000 / 50)
ctx.fillStyle = 'rgba(21, 3, 72, 0.1)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
for (var firework of fireworks) {
if (firework.dead) continue
firework.move()
firework.draw()
}
for (var spark of sparks) {
if (spark.dead) continue
spark.move()
spark.draw()
}
if (Math.random() < 0.05) {
fireworks.push(new Firework())
}
}
function Spark(x, y, color) {
this.x = x
this.y = y
this.dir = Math.random() * (Math.PI * 2)
this.dead = false
this.color = color
this.speed = Math.random() * 3 +3;
this.walker = new Walker({
radius: 1,
speed: 0.25
})
this.gravity = 0.25
this.dur = this.speed / 0.09
this.move = function () {
this.dur--
if (this.dur < 0) this.dead = true
if (this.speed < 0) return
if (this.speed > 0) this.speed -= 0.1
var walk = this.walker.step()
this.x += Math.cos(this.dir + walk) * this.speed
this.y += Math.sin(this.dir + walk) * this.speed
this.y += this.gravity
this.gravity += 0.05
}
this.draw = function () {
drawCircle(this.x, this.y, 3, this.color)
}
}
function Firework(x, y) {
this.xmove = new Walker({
radius: 10,
speed: 0.5
})
this.x = x || Math.random() * ctx.canvas.width
this.y = y || ctx.canvas.height
this.height = Math.random() * ctx.canvas.height / 2
this.dead = false
this.color = randomColor()
this.move = function () {
this.x += this.xmove.step()
if (this.y > this.height) this.y -= 1;
else this.burst()
}
this.draw = function () {
drawCircle(this.x, this.y, 1, this.color)
}
this.burst = function () {
this.dead = true
var i = 100;
while (i--) sparks.push(new Spark(this.x, this.y, this.color))
}
}
function drawCircle(x, y, radius, color) {
color = color || '#FFF'
ctx.fillStyle = color
ctx.fillRect(x - radius / 2, y - radius / 2, radius, radius)
}
function randomColor() {
return ['#FF2D1F', '#08AF77', '#36b89b', '#7bd7ec', '#66cbe1'][Math.floor(Math.random() * 5)];
}
function Walker(options) {
this.step = function () {
this.direction = Math.sign(this.target) * this.speed
this.value += this.direction
this.target ?
this.target -= this.direction :
(this.value) ?
(this.wander) ?
this.target = this.newTarget() :
this.target = -this.value :
this.target = this.newTarget()
return this.direction
}
this.newTarget = function () {
return Math.round(0)
}
this.start = 0
this.value = 0
this.radius = options.radius
this.target = this.newTarget()
this.direction = Math.sign(this.target)
this.wander = options.wander
this.speed = options.speed || 1
}
|