☰

Useless Things Series: Circle 3

A mini circle that is connected to form a circle with black and white alternating color. The circle with the same properties is called to create more circle.

// ==UserScript==
// @name         Useless Things Series: Circle 3
// @namespace    Useless Things Series: ??
// @version      1.0
// @description  A mini circle that is connected to form a circle with black and white alternating color. The circle with the same properties is called to create more circle.
// @match        *://*/*
// @grant        none
// @license      MIT
// @namespace https://greasyfork.org/users/1126616
// ==/UserScript==
(function() {
    'use strict';

    // Function to generate circles within circles
    function generateConcentricCircles(numCircles, circleRadius, smallCircleRadius, index) {
        const centerX = window.innerWidth / 2; // X-coordinate of the center
        const centerY = window.innerHeight / 2; // Y-coordinate of the center

        // Create circle overlay
        const circleOverlay = document.createElement('div');
        circleOverlay.classList.add('concentric-circles');
        circleOverlay.style.position = 'fixed';
        circleOverlay.style.top = '0';
        circleOverlay.style.left = '0';
        circleOverlay.style.width = '100%';
        circleOverlay.style.height = '100%';
        circleOverlay.style.pointerEvents = 'none';
        circleOverlay.style.zIndex = '9999';
        circleOverlay.style.display = 'none';

        // Set animation direction based on index
        const animationDirection = index % 2 === 0 ? 'clockwise' : 'counterclockwise';
        circleOverlay.style.animation = `spin-${animationDirection} 5s linear infinite`;

        // Add circles forming the larger circle
        for (let i = 0; i < numCircles; i++) {
            const angle = (Math.PI / 180) * (360 / numCircles) * i;
            const x = centerX + circleRadius * Math.cos(angle);
            const y = centerY + circleRadius * Math.sin(angle);

            const circle = document.createElement('div');
            circle.style.position = 'absolute';
            circle.style.width = `${smallCircleRadius * 2}px`;
            circle.style.height = `${smallCircleRadius * 2}px`;
            circle.style.borderRadius = '50%';
            circle.style.backgroundColor = i % 2 === 0 ? 'black' : 'white'; // Alternate black and white colors for larger circles
            circle.style.left = `${x - smallCircleRadius}px`;
            circle.style.top = `${y - smallCircleRadius}px`;

            // Alternate black and white colors for smaller circles within each larger circle
            const innerCircleColor = i % 2 === 0 ? 'white' : 'black';
            circle.innerHTML = `<div style="position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: ${innerCircleColor};"></div>`;

            circleOverlay.appendChild(circle);
        }

        document.body.appendChild(circleOverlay);
        return circleOverlay;
    }

    let circleOverlays = []; // Array to store generated circle overlays

    function toggleCircleOverlay() {
        if (circleOverlays.length === 0) {
            for (let i = 10; i <= 250; i += 5) {
                circleOverlays.push(generateConcentricCircles(i, i, 5, i));
            }
        }
        circleOverlays.forEach(circleOverlay => {
            circleOverlay.style.display = circleOverlay.style.display === 'none' ? 'block' : 'none';
        });
    }

    document.addEventListener('keydown', function(event) {
        if (event.key === 'k') {
            toggleCircleOverlay();
        }
    });

})();

const style = document.createElement('style');
style.innerHTML = `
@keyframes spin-clockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-counterclockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}`;
document.head.appendChild(style);