diff options
| author | Logan Hunt <loganhunt@simponic.xyz> | 2022-02-18 17:08:34 -0700 |
|---|---|---|
| committer | Logan Hunt <loganhunt@simponic.xyz> | 2022-02-18 17:08:34 -0700 |
| commit | bbfbac1dafcf76be53c3938027a6cbfcc866b3ac (patch) | |
| tree | 0a962abe69cf95a40ccf1fe57372b6436cd21ac6 /dvd-logo | |
| parent | 1588b8ddb538b2eb8119b63d6372235b58c954b1 (diff) | |
| download | simponic.xyz-bbfbac1dafcf76be53c3938027a6cbfcc866b3ac.tar.gz simponic.xyz-bbfbac1dafcf76be53c3938027a6cbfcc866b3ac.zip | |
Add index and whatnot
Diffstat (limited to 'dvd-logo')
| -rw-r--r-- | dvd-logo/images/dvd-logo.png | bin | 0 -> 66179 bytes | |||
| -rw-r--r-- | dvd-logo/index.html | 25 | ||||
| -rw-r--r-- | dvd-logo/js/script.js | 42 |
3 files changed, 67 insertions, 0 deletions
diff --git a/dvd-logo/images/dvd-logo.png b/dvd-logo/images/dvd-logo.png Binary files differnew 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 +} |
