☰

Useless Things Series: Circle 1

Display a spinning circle

  1. // ==UserScript==
  2. // @name         Useless Things Series: Circle 1
  3. // @namespace    Useless Things Series: ??
  4. // @version      1.0
  5. // @description  Display a spinning circle
  6. // @match        *://*/*
  7. // @grant        none
  8. // @license      MIT
  9. // @namespace https://greasyfork.org/users/1126616
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     let isOverlayVisible = false;
  16.     let rotationAngle = 0;
  17.     let rotationInterval;
  18.  
  19.     // Circle settings
  20.     let circleRadius = 160; // Initial radius of the circle
  21.     let centerX = 600; // Initial X-coordinate of the center
  22.     let centerY = 200; // Initial Y-coordinate of the center
  23.     const rotationSpeed = 0.01; // Speed of rotation in radians per frame (adjustable)
  24.     const numCircles = 130; // Number of circles
  25.  
  26.     // Create circle overlay
  27.     const circleOverlay = document.createElement('div');
  28.     circleOverlay.style.position = 'fixed';
  29.     circleOverlay.style.top = '0';
  30.     circleOverlay.style.left = '0';
  31.     circleOverlay.style.width = '100%';
  32.     circleOverlay.style.height = '100%';
  33.     circleOverlay.style.pointerEvents = 'none';
  34.     circleOverlay.style.zIndex = '9999';
  35.     circleOverlay.style.display = 'none';
  36.  
  37.     // Function to rotate circles gradually
  38.     function rotateCircles() {
  39.         rotationAngle += rotationSpeed;
  40.         const circles = circleOverlay.querySelectorAll('div');
  41.         circles.forEach((circle, index) => {
  42.             const angle = rotationAngle + (index * (2 * Math.PI) / numCircles);
  43.             const xOffset = circleRadius * Math.cos(angle);
  44.             const yOffset = circleRadius * Math.sin(angle);
  45.             circle.style.left = `${centerX + xOffset}px`;
  46.             circle.style.top = `${centerY + yOffset}px`;
  47.         });
  48.     }
  49.  
  50.     // Add circles with transparent background
  51.     for (let i = 0; i < numCircles; i++) {
  52.         const circle = document.createElement('div');
  53.         circle.style.position = 'absolute';
  54.         circle.style.width = `${circleRadius * 2}px`;
  55.         circle.style.height = `${circleRadius * 2}px`;
  56.         circle.style.borderRadius = '50%';
  57.         circle.style.backgroundColor = 'transparent'; // Transparent background
  58.         circle.style.border = '1px solid #000'; // Circle border color
  59.         circle.style.transition = 'transform 0.05s linear'; // Smooth transition for rotation
  60.         circleOverlay.appendChild(circle);
  61.     }
  62.  
  63.     document.addEventListener('keydown', function(event) {
  64.         if (event.key.toLowerCase() === 'l') {
  65.             if (!isOverlayVisible) {
  66.                 document.body.appendChild(circleOverlay);
  67.                 isOverlayVisible = true;
  68.                 circleOverlay.style.display = 'block';
  69.                 rotationInterval = setInterval(rotateCircles, 100); // 100 milliseconds interval for smooth animation
  70.             } else {
  71.                 document.body.removeChild(circleOverlay);
  72.                 isOverlayVisible = false;
  73.                 circleOverlay.style.display = 'none';
  74.                 clearInterval(rotationInterval);
  75.             }
  76.         }
  77.     });
  78.  
  79. })();