It display a small circle, within a blue circle, within a red circle. The point is it simulate and look like an eye it will follow the mouse movement.
当前为
// ==UserScript==
// @name Useless Things Series: Circle 4 - Eye Simulation
// @namespace http://tampermonkey.net/
// @version 1.0
// @description It display a small circle, within a blue circle, within a red circle. The point is it simulate and look like an eye it will follow the mouse movement.
// @match *://*/*
// @grant none
// @license MIT
// @namespace https://greasyfork.org/users/1126616
// ==/UserScript==
(function() {
'use strict';
// Function to create a circle
function createCircle(container, centerX, centerY, bigCircleWidth, bigCircleHeight) {
// Maximum radius that the red circle can pass through (adjustable by the user)
let maxAllowedRadius = 59;
// Create the big eye-shaped circle outline representing the entire screen
const bigCircle = document.createElement('div');
bigCircle.style.position = 'absolute';
bigCircle.style.width = `${bigCircleWidth}px`;
bigCircle.style.height = `${bigCircleHeight + 2}px`;
bigCircle.style.border = '2px dashed blue'; // Change border style here
bigCircle.style.borderRadius = '90% /90%'; // Eye-shaped border-radius
bigCircle.style.left = `${centerX - bigCircleWidth / 2}px`;
bigCircle.style.top = `${centerY - bigCircleHeight / 2}px`;
container.appendChild(bigCircle);
// Create the big eye-shaped circle outline representing the entire screen
const bigCircleAbove = document.createElement('div');
bigCircleAbove.style.position = 'absolute';
bigCircleAbove.style.width = `${bigCircleWidth + 100}px`; // Larger width
bigCircleAbove.style.height = `${bigCircleHeight}px`;
bigCircleAbove.style.border = '4px solid red'; // Change border style here
bigCircleAbove.style.borderRadius = '100% /100%'; // Eye-shaped border-radius
bigCircleAbove.style.left = `${centerX - (bigCircleWidth + 100) / 2}px`;
bigCircleAbove.style.top = `${centerY - bigCircleHeight / 2}px`;
container.appendChild(bigCircleAbove);
// Create a small circle element
const smallCircle = document.createElement('div');
smallCircle.style.width = '60px';
smallCircle.style.height = '60px';
smallCircle.style.borderRadius = '50%';
smallCircle.style.backgroundColor = 'red';
smallCircle.style.position = 'absolute';
smallCircle.style.transition = 'all 0.1s ease-out'; // Smooth transition
container.appendChild(smallCircle);
// Add event listener for mouse movement
let timeout;
document.addEventListener('mousemove', function(event) {
clearTimeout(timeout); // Reset the timeout on mouse movement
// Calculate the distance between the mouse position and the center of the screen
const distance = Math.sqrt(Math.pow(event.clientX - centerX, 2) + Math.pow(event.clientY - centerY, 2));
// Ensure the distance does not exceed the maximum allowed radius
if (distance >= maxAllowedRadius) {
// Calculate the angle between the mouse position and the center of the screen
const angle = Math.atan2(event.clientY - centerY, event.clientX - centerX);
// Calculate the position of the small circle on the circumference of the blue circle
const smallCircleX = centerX + maxAllowedRadius * Math.cos(angle) - 20;
const smallCircleY = centerY + maxAllowedRadius * Math.sin(angle) - 20;
// Set the position of the small circle
smallCircle.style.left = `${smallCircleX}px`;
smallCircle.style.top = `${smallCircleY}px`;
} else {
// Set the position of the small circle to the mouse position
smallCircle.style.left = `${event.clientX - 20}px`;
smallCircle.style.top = `${event.clientY - 20}px`;
}
});
// Function to move the small circle to the center when there is no mouse movement after a certain time
function moveToCenter() {
const smallCircleX = centerX - 20;
const smallCircleY = centerY - 20;
smallCircle.style.left = `${smallCircleX}px`;
smallCircle.style.top = `${smallCircleY}px`;
}
// Set a timeout to move the small circle to the center after 2 seconds of inactivity
document.addEventListener('mousemove', function() {
clearTimeout(timeout);
timeout = setTimeout(moveToCenter, 2000);
});
// Function to set the maximum allowed radius
function setMaxAllowedRadius(radius) {
maxAllowedRadius = radius;
}
// Expose the function to the global scope
window.setMaxAllowedRadius = setMaxAllowedRadius;
}
// Create a container for the circles
const container = document.createElement('div');
container.style.position = 'fixed';
container.style.top = '0';
container.style.left = '0';
container.style.width = '100%';
container.style.height = '100%';
container.style.pointerEvents = 'none';
container.style.zIndex = '9999';
document.body.appendChild(container);
// Get the center coordinates of the screen
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// Create circles positioned at the left and right centers of the screen
createCircle(container, centerX / 2, centerY, 200, 170); // Left center
createCircle(container, centerX + centerX / 2, centerY, 200, 170); // Right center
})();