aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorIndrajith K L2022-11-30 05:52:51 +0530
committerIndrajith K L2022-11-30 05:52:51 +0530
commit22c9e30317f25df3a517a9323a1f93f47723ea58 (patch)
tree876e67b0575614607493971b0bec903e4d8e51ab
parentaf7303fc62a7a3cb1c660bca51d4acbc27eaab22 (diff)
downloadretrowave-player-22c9e30317f25df3a517a9323a1f93f47723ea58.tar.gz
retrowave-player-22c9e30317f25df3a517a9323a1f93f47723ea58.tar.bz2
retrowave-player-22c9e30317f25df3a517a9323a1f93f47723ea58.zip
Particle Implementationfeature/particles
* Particle is implemented but something is odd. Will be replaced by a library in the future
-rw-r--r--dvd.js75
-rw-r--r--hg.css17
-rw-r--r--images/dvd.pngbin0 -> 20425 bytes
-rw-r--r--index.html5
4 files changed, 97 insertions, 0 deletions
diff --git a/dvd.js b/dvd.js
new file mode 100644
index 0000000..3497cef
--- /dev/null
+++ b/dvd.js
@@ -0,0 +1,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);
+ }
+})();
diff --git a/hg.css b/hg.css
index e364a3f..367b298 100644
--- a/hg.css
+++ b/hg.css
@@ -50,6 +50,7 @@ body {
text-align: center;
background-position: 50% 50%;
background-repeat: no-repeat;
+ z-index: 999;
}
.music-player .color-overlay {
@@ -250,4 +251,20 @@ dialog::backdrop {
padding-left: 10px;
color: #ffffff;
justify-content: center;
+}
+
+#dvd-render {
+ position: absolute;
+ top: 0;
+ z-index: 0;
+}
+
+#assets {
+ display: none;
+}
+
+#dvd {
+ width: 32px;
+ height: 18px;
+ object-fit: contain;
} \ No newline at end of file
diff --git a/images/dvd.png b/images/dvd.png
new file mode 100644
index 0000000..ebe435f
--- /dev/null
+++ b/images/dvd.png
Binary files differ
diff --git a/index.html b/index.html
index 96d423a..0efc4cd 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,12 @@
</div>
</div>
<input id="file-upload" type="file" accept="application/json" />
+ <canvas id="dvd-render"></canvas>
+ <div id="assets">
+ <img src="images/dvd.png" id="dvd" alt="">
+ </div>
<script src="player.js"></script>
+ <script src="dvd.js"></script>
</body>
</html> \ No newline at end of file