-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
92 lines (79 loc) · 2.12 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>Flame</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<canvas id="space">
Sorry, your browser does not support canvas.
</canvas>
<script>
const space = document.getElementById('space')
const surface = space.getContext('2d')
space.width = window.innerWidth
space.height = window.innerHeight
function clearSpace() {
surface.save()
surface.globalCompositeOperation = 'source-over'
surface.fillStyle = 'black'
surface.fillRect(0, 0, space.width, space.height)
surface.restore()
}
const PI = Math.PI
const round = Math.round
const random = Math.random
function particle() {
this.speed = {
x: -1 + random() * 2,
y: -5 + random() * 5
}
this.location = {
x: space.width / 2,
y: space.height / 2
}
this.radius = .5 + random()
this.death = 10 + random() * 10
this.life = this.death
this.rgb = `255, ${round(random() * 255)}, 0`
}
const particles = []
const PARTICLE_COUNT = 150
for (let i = 0; i < PARTICLE_COUNT; i++) {
particles.push(new particle())
}
function render() {
clearSpace()
surface.globalCompositeOperation = 'lighter'
particles.forEach((p, i) => {
const gradient = surface.createRadialGradient(
p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius
)
p.opacity = random() * (p.death / p.life)
gradient.addColorStop(0, `rgba(${p.rgb},${p.opacity})`)
gradient.addColorStop(.5, `rgba(${p.rgb},${p.opacity})`)
gradient.addColorStop(1, `rgba(${p.rgb},0)`)
surface.fillStyle = gradient
surface.beginPath()
surface.arc(p.location.x, p.location.y, p.radius, 0, PI * 2)
surface.fill()
p.location.x += p.speed.x
p.location.y += p.speed.y
p.death--
p.radius++
if (p.radius <= 0 || p.opacity <= 0) {
particles[i] = new particle()
}
})
requestAnimationFrame(render)
}
render()
</script>
</body>
</html>