-
Notifications
You must be signed in to change notification settings - Fork 0
/
ripple.html
95 lines (82 loc) · 2.66 KB
/
ripple.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas></canvas>
</body>
<script>
let canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.backgroundColor = "#1DD3B0"
let c = canvas.getContext('2d');
let mouse = {
x: undefined,
y: undefined
}
document.addEventListener('mousemove', function(event) {
mouse.x = event.x;
mouse.y = event.y;
console.log(mouse);
createRipple();
})
class Circle {
constructor(x, y, colorObject) {
this.x = x;
this.y = y;
this.radius = 0;
this.colorObject = colorObject;
}
draw() {
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
c.stroke();
}
update() {
if (this.radius < 20) {
this.radius += 4;
c.strokeStyle = `rgba(${this.colorObject.r}, ${this.colorObject.g}, ${this.colorObject.b}, 1)`
}
else if (this.radius < 50) {
this.radius += 5;
c.strokeStyle = `rgba(${this.colorObject.r}, ${this.colorObject.g}, ${this.colorObject.b}, 0.8)`
}
else if (this.radius < 100) {
this.radius += 8;
c.strokeStyle = `rgba(${this.colorObject.r}, ${this.colorObject.g}, ${this.colorObject.b}, 0.6)`
}
else if (this.radius < 150) {
this.radius += 10;
c.strokeStyle = `rgba(${this.colorObject.r}, ${this.colorObject.g}, ${this.colorObject.b}, 0.4)`
}
else if (this.radius < 200) {
this.radius += 15;
c.strokeStyle = `rgba(${this.colorObject.r}, ${this.colorObject.g}, ${this.colorObject.b}, 0.2)`
}
else if (this.radius < 250) {
this.radius += 20;
c.strokeStyle = `rgba(${this.colorObject.r}, ${this.colorObject.g}, ${this.colorObject.b}, 0.05)`
circleArray.shift();
}
this.draw();
}
}
let circleArray = []
// let colorArray = [{r:8, g:99, b:117}, {r:175, g:252, b:65}, {r:178, g:255, b:158}, {r:255, g:255, b:255}]
let colorArray = [{r:255, g:255, b:255}]
function createRipple() {
let colorObject = colorArray[Math.floor(Math.random()*colorArray.length)]
circleArray.push(new Circle(mouse.x, mouse.y, colorObject))
}
function animate() {
setTimeout(() => requestAnimationFrame(animate), 30);
c.fillStyle = 'rgba(29, 211, 176, 0.5)'
c.fillRect(0, 0, window.innerWidth, window.innerHeight);
circleArray.forEach(circle => circle.update())
}
animate();
</script>
</html>