-
Notifications
You must be signed in to change notification settings - Fork 43
/
loves-es6.html
96 lines (93 loc) · 2.9 KB
/
loves-es6.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
93
94
95
96
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="background-color: black">
<canvas id="cavs" style="position:fixed; z-index:-1;"></canvas>
</body>
</html>
<script type="text/javascript">
class Love
{
constructor(board)
{
this.board = board;
this.init();
}
init()
{
this.maxScale = (Math.random() * 3.2 + 1.2) * this.board.w / 521;
this.curScale = 1.2 * this.board.w / 521;
this.x = Math.floor(Math.random() * this.board.w - 40);
this.y = Math.floor(this.board.h - Math.random() * 200);
this.ColR = Math.floor(Math.random() * 255);
this.ColG = Math.floor(Math.random() * 255);
this.ColB = Math.floor(Math.random() * 255);
this.alpha = Math.random() * 0.2 + 0.8;
this.vector = Math.random() * 2 + 1.2;
}
draw()
{
if(this.alpha < 0.01) this.init();
if(this.curScale < this.maxScale) this.curScale += 0.3;
const x = this.x;
const y = this.y;
const s = this.curScale;
const ctx = this.board.context;
ctx.fillStyle = "rgba(" + this.ColR + "," + this.ColG + "," + this.ColB + "," + this.alpha + ")";
ctx.shadowBlur = 10;
ctx.shadowColor = "rgb(" + this.ColR + "," + this.ColG + "," + this.ColB + ")";
ctx.beginPath();
ctx.bezierCurveTo( x + 2.5*s, y + 2.5*s, x + 2.0*s, y, x, y );
ctx.bezierCurveTo( x - 3.0*s, y, x - 3.0*s, y + 3.5*s,x - 3.0*s,y + 3.5*s );
ctx.bezierCurveTo( x - 3.0*s, y + 5.5*s, x - 1.0*s, y + 7.7*s, x + 2.5*s, y + 9.5*s );
ctx.bezierCurveTo( x + 6.0*s, y + 7.7*s, x + 8.0*s, y + 5.5*s, x + 8.0*s, y + 3.5*s );
ctx.bezierCurveTo( x + 8.0*s, y + 3.5*s, x + 8.0*s, y, x + 5.0*s, y );
ctx.bezierCurveTo( x + 3.5*s, y, x + 2.5*s, y + 2.5*s, x + 2.5*s, y + 2.5*s );
ctx.fill();
ctx.closePath();
this.y -= this.vector;
this.alpha -= (this.vector / this.board.h);
}
}
class Board
{
constructor(Shape)
{
this.Shape = Shape;
this.shapes = [];
const canvas = document.getElementById("cavs");
this.w = window.innerWidth;
this.h = window.innerHeight;
canvas.setAttribute("width", this.w);
canvas.setAttribute("height", this.h);
this.context = canvas.getContext("2d");
}
create()
{
for (let i = 0; i < this.w / 59; i++)
{
this.shapes.push(new this.Shape(this));
}
}
draw()
{
this.context.clearRect(0, 0, this.w, this.h);
for (let key in this.shapes)
{
this.shapes[key].draw();
}
window.requestAnimationFrame(this.draw.bind(this));
}
run()
{
this.create();
this.draw();
}
}
window.onload = function()
{
new Board(Love).run();
}
</script>