3 files changed, 67 insertions, 0 deletions
diff --git a/dvd-logo/images/dvd-logo.png b/dvd-logo/images/dvd-logo.png
new file mode 100644
index 0000000..560e642
--- /dev/null
+++ b/dvd-logo/images/dvd-logo.png
diff --git a/dvd-logo/index.html b/dvd-logo/index.html
new file mode 100644
index 0000000..fc07484
--- /dev/null
+++ b/dvd-logo/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>DVD MADNESS</title>
+    <style>
+      body {
+        margin: 0;
+        background: black;
+        height: 100%;
+        width: 100%;
+      }
+      #dvd-logo {
+        width: 200px;
+        position: absolute;
+        left: -200px; /* So that logo doesn't flash at top left corner when document loads */
+        top: -200px;
+      }
+    </style>
+  </head>
+  <body>
+    <img id="dvd-logo" src="images/dvd-logo.png">
+    <script src="js/script.js"></script>
+  </body>
+</html>
diff --git a/dvd-logo/js/script.js b/dvd-logo/js/script.js
new file mode 100644
index 0000000..9703f88
--- /dev/null
+++ b/dvd-logo/js/script.js
@@ -0,0 +1,42 @@
+const randUpTo = (max) => Math.random() * max
+
+const randomHue = (element) => {
+  element.style.filter = `brightness(0.5) sepia(1) saturate(10000%) hue-rotate(${randUpTo(360)}deg)`;
+}
+
+const clamp = (val, max) => val > max ? max : val;
+
+
+const updateLogo = (logo, element) => {
+  const screen_height = window.innerHeight;
+  const screen_width = window.innerWidth;
+
+  const collide_y = logo.y <= 0 || (logo.y + element.clientHeight) >= screen_height;
+  const collide_x = logo.x <= 0 || (logo.x + element.clientWidth) >= screen_width;
+
+  logo.dx *= (collide_x ? -1 : 1);
+  logo.dy *= (collide_y ? -1 : 1);
+
+  if (collide_y || collide_x) {
+    randomHue(element);
+  }
+
+  // Clamp in case user changes screen size
+  logo.x = clamp(logo.x + logo.dx, screen_width - element.clientWidth);
+  logo.y = clamp(logo.y + logo.dy, screen_height - element.clientHeight);
+
+  element.style.left = `${logo.x}px`;
+  element.style.top = `${logo.y}px`;
+};
+
+window.onload = () => {
+  let logo = {
+    x: randUpTo(window.innerWidth),
+    y: randUpTo(window.innerHeight),
+    dx: 2,
+    dy: 2
+  };
+  const dvdLogo = document.getElementById("dvd-logo");
+
+  setInterval(() => updateLogo(logo, dvdLogo), 15); // ~ 67 hz
+}