dvd-logo/js/script.js


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

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
}