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
expComplexcomputes using trigonometric functions (cosandsin). - The
zfunction combines and by summing their real and imaginary parts.
- The function
-
Dynamic Drawing:
- The path updates with 1000 points as
thetaincreases, creating a dynamic pattern.
- The path updates with 1000 points as
-
Compatibility:
- Ensures smooth animations with
requestAnimationFrame.
- Ensures smooth animations with
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!
