<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating 3D Parametric Plot</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script src="script.js"></script>
</body>
</html>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const width = canvas.width;
const height = canvas.height;
const scale = 100;
const centerX = width / 2;
const centerY = height / 2;

let angleX = 0;
let angleY = 0;

function draw() {
    ctx.clearRect(0, 0, width, height);
    ctx.beginPath();

    for (let u = 0; u <= 2 * Math.PI; u += 0.1) {
        for (let v = 0; v <= 2 * Math.PI; v += 0.1) {
            const x = Math.cos(u);
            const y = Math.sin(u) + Math.cos(v);
            const z = Math.sin(v);

            // Rotate around X axis
            const xRot = x;
            const yRot = y * Math.cos(angleX) - z * Math.sin(angleX);
            const zRot = y * Math.sin(angleX) + z * Math.cos(angleX);

            // Rotate around Y axis
            const xFinal = xRot * Math.cos(angleY) + zRot * Math.sin(angleY);
            const yFinal = yRot;
            const zFinal = -xRot * Math.sin(angleY) + zRot * Math.cos(angleY);

            const screenX = centerX + scale * xFinal;
            const screenY = centerY - scale * yFinal;

            ctx.lineTo(screenX, screenY);
        }
    }

    ctx.strokeStyle = `hsl(${angleX * 180 / Math.PI}, 100%, 50%)`;
    ctx.stroke();
}

function animate() {
    angleX += 0.01;
    angleY += 0.01;
    draw();
    requestAnimationFrame(animate);
}

animate();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.