☰

DVD corner hit

A DVD logo hitting occasinaly the corner. Not made in an optimized so it can be a bit laggy.

// ==UserScript==
// @name         DVD corner hit
// @namespace    http://tampermonkey.net/
// @version      1.0
// @license      MIT
// @description  A DVD logo hitting occasinaly the corner. Not made in an optimized so it can be a bit laggy.
// @author       Leandro
// @match        *://*/*
// @icon         https://public.saraivam.ch/misc/dvd_icon_square_white.png
// @grant        none
// ==/UserScript==

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

(function() {
    'use strict';

    const DVD_IMAGE_URL = 'https://public.saraivam.ch/misc/dvd_icon.png'
    const WIDTH = 97;
    const HEIGHT = 56;
    const SPEED = 0.1; // % per hundredth of a second
    const HUE_SPEED = 0.3;
    const pos = {x: getRandomInt(101), y: getRandomInt(101), direction: getRandomInt(4)};
    let hue = getRandomInt(361);
    // directions: 0=topLeft,1=topRight,2=bottomLeft,3=bottomRight
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Styling
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    canvas.style.zIndex = 9999;
    canvas.style.position = 'fixed';
    canvas.style.pointerEvents = 'none';

    // Draw a green debug rect
    //ctx.fillStyle = 'rgba(0, 255, 0, 0.2)';
    //ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);

    // Draw image
    const dvdImage = new Image();
    dvdImage.src = DVD_IMAGE_URL;

    // Add element to DOM
    document.getElementsByTagName('html')[0].prepend(canvas);

    // Handle movement
    window.setInterval(() => {
        if (pos.direction % 2 == 0) {
            pos.x -= SPEED;
        } else {
            pos.x += SPEED;
        }
        pos.direction = (pos.x < 0 || pos.x > 100 - (100 * WIDTH / window.innerWidth)) ? (pos.direction + (pos.direction % 2 == 0 ? 1 : -1)) % 4 : pos.direction;

        if (pos.direction < 2) {
            pos.y -= SPEED;
        } else {
            pos.y += SPEED;
        }
        pos.direction = (pos.y < 0 || pos.y > 100 - (100 * HEIGHT / window.innerHeight)) ? (pos.direction + 2) % 4 : pos.direction;

        // Move dvd image
        canvas.style.left = `${pos.x}%`;
        canvas.style.top = `${pos.y}%`;

        // Draw the image
        ctx.drawImage(dvdImage, 0, 0, WIDTH, HEIGHT);

        // Change the color of the drawn image to red
        ctx.globalCompositeOperation = "source-in";
        ctx.fillStyle = `hsl(${hue}, 50%, 50%)`;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        hue = (hue + HUE_SPEED) % 360;

        // Reset the globalCompositeOperation to default
        ctx.globalCompositeOperation = "source-over";
    }, 10);
})();