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
|
(function () {
const dvdCanvas = document.getElementById("dvd-render");
const ctx = dvdCanvas.getContext("2d");
const dvd = document.getElementById("dvd");
const particleLength = 500;
let dvdParticles = (new Array(particleLength)).fill(0);
const maxDimension = 16;
const minDimension = 2;
let x = 0;
let y = 0;
let dx = 0.8;
let dy = -0.8;
resizeWindow();
dvd.addEventListener("load", () => {
ctx.imageSmoothingEnabled = false;
const { width, height } = document.body.getBoundingClientRect();
dvdParticles = dvdParticles.map((particle) => {
const particleImage = dvd;
particleImage.width = Math.floor(Math.random()* (maxDimension - minDimension) + minDimension);
particleImage.height = particleImage.width;
return {
img: particleImage,
x: Math.floor(Math.random() * width),
y: Math.floor(Math.random() * height),
dx: Math.floor(Math.random() * 2),
dy: -Math.floor(Math.random() * 2),
};
});
requestAnimationFrame(update);
});
addEventListener("resize", () => {
resizeWindow();
});
function resizeWindow() {
const { width, height } = document.body.getBoundingClientRect();
x = Math.floor(Math.random() * width);
y = Math.floor(Math.random() * height);
dvdCanvas.width = width;
dvdCanvas.height = height;
}
function update() {
ctx.clearRect(0, 0, dvdCanvas.width, dvdCanvas.height);
for(let particle of dvdParticles) {
let {x, y, img, dx, dy} = particle;
ctx.drawImage(img, x, y, img.width, img.height);
particle.x = x + dx;
particle.y = y + dy;
if (x+img.width > dvdCanvas.width) {
particle.x = dvdCanvas.width-img.width;
particle.dx = -dx;
}
if (y+img.height > dvdCanvas.height) {
particle.y = dvdCanvas.height-img.height;
particle.dy = -dy;
}
if (x < 0) {
particle.x = 0;
particle.dx = -dx;
}
if (y < 0) {
particle.y = 0;
particle.dy = -dy;
}
}
requestAnimationFrame(update);
}
})();
|
