Thursday, January 9, 2025

Visualisation of Irrational nature of Pi

Here’s a corrected version of the HTML/JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visualization of π</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="animationCanvas"></canvas>

    <script>
        const canvas = document.getElementById('animationCanvas');
        const ctx = canvas.getContext('2d');

        // Resize canvas to fill the window
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const radius = Math.min(centerX, centerY) * 0.4;

        let theta = 0; // Initialize theta

        // Function to calculate e^(i*angle)
        function expComplex(angle) {
            return {
                real: Math.cos(angle),
                imag: Math.sin(angle)
            };
        }

        function z(theta) {
            const z1 = expComplex(theta);
            const z2 = expComplex(Math.PI * theta);
            return {
                real: z1.real + z2.real,
                imag: z1.imag + z2.imag
            };
        }

        function drawFrame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            const points = [];
            for (let i = 0; i < 1000; i++) {
                const angle = (i / 1000) * theta;
                const { real, imag } = z(angle);
                points.push({
                    x: centerX + real * radius,
                    y: centerY + imag * radius
                });
            }

            // Draw the path
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            points.forEach(point => ctx.lineTo(point.x, point.y));
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 1;
            ctx.stroke();

            // Draw the current point
            const { real, imag } = z(theta);
            ctx.beginPath();
            ctx.arc(centerX + real * radius, centerY + imag * radius, 5, 0, 2 * Math.PI);
            ctx.fillStyle = 'red';
            ctx.fill();
        }

        function animate() {
            theta += 0.02; // Increment theta for animation
            drawFrame();
            requestAnimationFrame(animate);
        }

        // Start animation
        animate();

        // Resize canvas dynamically
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>
</html>

Explanation

Complex Arithmetic Simulation:
- The function expComplex computes $e^{i\theta}$ using trigonometric functions (cos and sin).
- The z function combines $e^{\theta i}$ and $e^{\theta \pi i}$ by summing their real and imaginary parts.
Dynamic Drawing:
- The path updates with 1000 points as theta increases, creating a dynamic pattern.
Compatibility:
- Ensures smooth animations with requestAnimationFrame.

Visualization of π

This animation visualizes the formula:

z(θ) = e^θi + e^θπi

It represents the sum of two complex exponentials, creating a fascinating pattern in the complex plane.

Copy this code into an .html file and open it in your browser. It should now display the intended animated visualization!

Lateral thinking and thoughts around ways of learning!

Thursday, January 9, 2025

Visualisation of Irrational nature of Pi

Visualisation of Irrational nature of Pi

Explanation

Visualization of π

No comments:

Post a Comment