🌈 Interactive Rainbow Torus Tutorial

HTML Structure

<canvas id="c"></canvas>

We use a simple canvas element. The styling makes it fullscreen with a black background.

JavaScript Setup

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

We get the canvas element and its 2D rendering context, then size it to fill the browser window.

generateTorus() Function

function generateTorus() {
    const vertices = [];
    for (let i = 0; i <= segments; i++) {
        const u = (i / segments) * Math.PI * 2;
        for (let j = 0; j <= tubes; j++) {
            const v = (j / tubes) * Math.PI * 2;
            const x = (R + r * Math.cos(v)) * Math.cos(u);
            const y = (R + r * Math.cos(v)) * Math.sin(u);
            const z = r * Math.sin(v);
            const hue = (i / segments) * 360;
            vertices.push({ x, y, z, hue });
        }
    }
    return vertices;
}

How it works:

1. Loop through segments around the major circle
2. For each segment, loop around the tube
3. Calculate x, y, z coordinates using torus equations
4. Assign a hue value (0-360) based on position for rainbow effect
5. Store all vertices in an array

Rotation Around X-axis

function rotateX(p, angle) {
    const cos = Math.cos(angle);
    const sin = Math.sin(angle);
    return {
        x: p.x,
        y: p.y * cos - p.z * sin,
        z: p.y * sin + p.z * cos,
        hue: p.hue
    };
}

X-axis rotation affects the y and z coordinates. The x coordinate stays the same. This creates a rotation like nodding your head.

Rotation Around Y-axis

function rotateY(p, angle) {
    const cos = Math.cos(angle);
    const sin = Math.sin(angle);
    return {
        x: p.x * cos + p.z * sin,
        y: p.y,
        z: -p.x * sin + p.z * cos,
        hue: p.hue
    };
}

Y-axis rotation affects the x and z coordinates. The y coordinate stays the same. This creates a rotation like shaking your head.

function draw() {
    // Clear canvas
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Smooth rotation interpolation
    rotX += (targetRotX - rotX) * 0.1;
    rotY += (targetRotY - rotY) * 0.1;
    
    // Generate and transform vertices
    const vertices = generateTorus();
    const projected = vertices.map(v => {
        let p = rotateX(v, rotX);
        p = rotateY(p, rotY);
        return project(p);
    }).sort((a, b) => a.z - b.z);
    
    // Draw points
    projected.forEach(p => {
        ctx.fillStyle = `hsl(${p.hue}, 100%, 50%)`;
        ctx.beginPath();
        ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);
        ctx.fill();
    });
    
    requestAnimationFrame(draw);
}

Step by step:

1. Clear the canvas: Fill with black
2. Smooth interpolation: Gradually move current rotation toward target (10% each frame)
3. Generate vertices: Create all torus points
4. Transform: Apply rotations and projection to each vertex
5. Sort by depth: Draw farther points first (painter's algorithm)
6. Draw: Render each point as a colored circle
7. Loop: Schedule next frame

How it works:

• e.clientX / canvas.width: Normalizes mouse X to 0-1
• - 0.5: Centers it to -0.5 to 0.5
• * Math.PI * 2: Converts to radians (-π to π)
• Left side = negative rotation, right side = positive rotation
• Same logic for Y axis with vertical movement

Mathematical Concepts

• Parametric equations for 3D shapes
• 3D rotation matrices
• Perspective projection
• Linear interpolation (easing)

Programming Concepts

• Canvas 2D API
• Animation loops with requestAnimationFrame
• Event handling
• Array methods (map, sort, forEach)

Graphics Concepts

• 3D to 2D projection
• Depth sorting (painter's algorithm)
• Smooth interpolation
• HSL color space