Rotating Complex Gradient Fractal Rectangles with JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Complex Gradient Fractal Rectangles with JavaScript</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f0f0; /* Set a background color */
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        // Define your canvas element and context
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Get the screen dimensions
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;

        // Set canvas dimensions to match the screen size
        canvas.width = screenWidth;
        canvas.height = screenHeight;

        // Function to draw a rotating rectangle with complex gradients
        function drawRotatingRectangle(x, y, width, height, angle) {
            ctx.save();

            // Translate to the center of the rectangle
            ctx.translate(x + width / 2, y + height / 2);

            // Rotate the rectangle
            ctx.rotate(angle);

            // Create complex gradient fill for the rectangle
            const gradientFill = ctx.createLinearGradient(-width / 2, -height / 2, width / 2, height / 2);
            gradientFill.addColorStop(0, `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`);
            gradientFill.addColorStop(0.5, `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`);
            gradientFill.addColorStop(1, `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`);
            ctx.fillStyle = gradientFill;

            // Create complex gradient border for the rectangle
            const gradientBorder = ctx.createLinearGradient(-width / 2, -height / 2, width / 2, height / 2);
            gradientBorder.addColorStop(0, `rgb(${255 - Math.random() * 255}, ${255 - Math.random() * 255}, ${255 - Math.random() * 255})`);
            gradientBorder.addColorStop(0.5, `rgb(${255 - Math.random() * 255}, ${255 - Math.random() * 255}, ${255 - Math.random() * 255})`);
            gradientBorder.addColorStop(1, `rgb(${255 - Math.random() * 255}, ${255 - Math.random() * 255}, ${255 - Math.random() * 255})`);
            ctx.strokeStyle = gradientBorder;

            // Draw the rectangle with complex gradients
            ctx.fillRect(-width / 2, -height / 2, width, height);
            ctx.strokeRect(-width / 2, -height / 2, width, height);

            ctx.restore();
        }

        // Function to draw a random fractal pattern with rotation
        function drawRandomFractal(x, y, width, height, depth, maxDepth) {
            if (depth >= maxDepth) {
                return;
            }

            // Draw a rotating rectangle with complex gradients
            drawRotatingRectangle(x, y, width, height, Math.random() * Math.PI * 2);

            // Split the shape into smaller parts
            const numParts = Math.floor(Math.random() * 4) + 1; // Randomly choose 1 to 4 parts
            const partWidth = width / numParts;
            const partHeight = height / numParts;

            // Recursively draw smaller shapes
            for (let i = 0; i < numParts; i++) {
                for (let j = 0; j < numParts; j++) {
                    // Randomly offset the position of each smaller shape
                    const offsetX = Math.random() * partWidth;
                    const offsetY = Math.random() * partHeight;

                    // Call the draw function for the smaller shape
                    drawRandomFractal(x + i * partWidth + offsetX, y + j * partHeight + offsetY, partWidth, partHeight, depth + 1, maxDepth);
                }
            }
        }

        // Set your starting parameters
        const x = 50;
        const y = 50;
        const width = screenWidth - 100;
        const height = screenHeight - 100;
        const maxDepth = 5; // Adjust the recursion depth as needed

        // Call the random fractal drawing function
        drawRandomFractal(x, y, width, height, 0, maxDepth);

        // Rotate rectangles individually on hover
        canvas.addEventListener('mousemove', (event) => {
            const mouseX = event.clientX - canvas.getBoundingClientRect().left;
            const mouseY = event.clientY - canvas.getBoundingClientRect().top;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawRandomFractal(x, y, width, height, 0, maxDepth);

            // Find the rectangle under the mouse and rotate it
            findAndRotateRectangle(x, y, width, height, mouseX, mouseY);
        });

        function findAndRotateRectangle(x, y, width, height, mouseX, mouseY) {
            // Split the shape into smaller parts
            const numParts = Math.floor(Math.random() * 4) + 1; // Randomly choose 1 to 4 parts
            const partWidth = width / numParts;
            const partHeight = height / numParts;

            for (let i = 0; i < numParts; i++) {
                for (let j = 0; j < numParts; j++) {
                    const offsetX = i * partWidth;
                    const offsetY = j * partHeight;

                    if (
                        mouseX >= x + offsetX &&
                        mouseX <= x + offsetX + partWidth &&
                        mouseY >= y + offsetY &&
                        mouseY <= y + offsetY + partHeight
                    ) {
                        drawRotatingRectangle(x + offsetX, y + offsetY, partWidth, partHeight, Math.random() * Math.PI * 2);
                    }
                }
            }
        }
    </script>
</body>
</html>