MATHS ANIMATION
Prompt
do the best e^ipi +1=0 proove in video in one html file
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Euler's Identity Proof</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
color: white;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
.container {
max-width: 900px;
width: 100%;
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
h1 {
text-align: center;
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.subtitle {
text-align: center;
font-size: 1.2em;
margin-bottom: 30px;
color: #ffcc00;
}
.proof-step {
background: rgba(255, 255, 255, 0.1);
border-left: 4px solid #ffcc00;
padding: 20px;
margin: 20px 0;
border-radius: 0 10px 10px 0;
transition: all 0.3s ease;
}
.proof-step:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateX(5px);
}
.step-title {
font-size: 1.4em;
color: #ffcc00;
margin-top: 0;
}
.formula {
font-family: 'Times New Roman', serif;
font-size: 1.5em;
text-align: center;
margin: 15px 0;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.explanation {
line-height: 1.6;
}
.highlight {
color: #ffcc00;
font-weight: bold;
}
.visualization {
display: flex;
justify-content: center;
margin: 30px 0;
}
canvas {
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.conclusion {
text-align: center;
font-size: 1.8em;
margin: 30px 0;
padding: 20px;
background: rgba(255, 204, 0, 0.2);
border-radius: 10px;
border: 2px solid #ffcc00;
}
.footer {
text-align: center;
margin-top: 30px;
color: #aaa;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h1>Euler's Identity Proof</h1>
<div class="subtitle">e<sup>iπ</sup> + 1 = 0</div>
<div class="proof-step">
<h2 class="step-title">Step 1: Euler's Formula</h2>
<div class="formula">e<sup>ix</sup> = cos(x) + i·sin(x)</div>
<p class="explanation">Euler's formula establishes the fundamental relationship between exponential functions and trigonometric functions in the complex plane.</p>
</div>
<div class="proof-step">
<h2 class="step-title">Step 2: Substitute x = π</h2>
<div class="formula">e<sup>iπ</sup> = cos(π) + i·sin(π)</div>
<p class="explanation">We substitute π (180 degrees) for x in Euler's formula.</p>
</div>
<div class="proof-step">
<h2 class="step-title">Step 3: Evaluate Trigonometric Functions</h2>
<div class="formula">cos(π) = -1</div>
<div class="formula">sin(π) = 0</div>
<p class="explanation">From the unit circle, we know that cos(π) = -1 and sin(π) = 0.</p>
</div>
<div class="proof-step">
<h2 class="step-title">Step 4: Simplify</h2>
<div class="formula">e<sup>iπ</sup> = -1 + i·0</div>
<div class="formula">e<sup>iπ</sup> = -1</div>
<p class="explanation">Substituting the values, we get e<sup>iπ</sup> = -1.</p>
</div>
<div class="proof-step">
<h2 class="step-title">Step 5: Rearrange</h2>
<div class="formula">e<sup>iπ</sup> + 1 = 0</div>
<p class="explanation">Adding 1 to both sides gives us Euler's identity.</p>
</div>
<div class="visualization">
<canvas id="complexPlane" width="400" height="400"></canvas>
</div>
<div class="conclusion">
e<sup>iπ</sup> + 1 = 0
</div>
<div class="proof-step">
<h2 class="step-title">Why This is Remarkable</h2>
<p class="explanation">Euler's identity elegantly connects five fundamental mathematical constants:</p>
<ul class="explanation">
<li><span class="highlight">0</span> (the additive identity)</li>
<li><span class="highlight">1</span> (the multiplicative identity)</li>
<li><span class="highlight">π</span> (the circular constant)</li>
<li><span class="highlight">e</span> (the base of natural logarithms)</li>
<li><span class="highlight">i</span> (the imaginary unit)</li>
</ul>
<p class="explanation">It has been called "the most beautiful equation in mathematics" for its simplicity and profundity.</p>
</div>
<div class="footer">
Euler's Identity: A Bridge Between Exponential and Trigonometric Functions
</div>
</div>
<script>
// Complex plane visualization
const canvas = document.getElementById('complexPlane');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const scale = 150;
function drawComplexPlane() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw axes
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
ctx.lineWidth = 1;
// X-axis
ctx.beginPath();
ctx.moveTo(0, centerY);
ctx.lineTo(canvas.width, centerY);
ctx.stroke();
// Y-axis
ctx.beginPath();
ctx.moveTo(centerX, 0);
ctx.lineTo(centerX, canvas.height);
ctx.stroke();
// Draw unit circle
ctx.beginPath();
ctx.arc(centerX, centerY, scale, 0, 2 * Math.PI);
ctx.strokeStyle = 'rgba(255, 204, 0, 0.7)';
ctx.lineWidth = 2;
ctx.stroke();
// Draw points
// Point at 1 (right)
ctx.beginPath();
ctx.arc(centerX + scale, centerY, 5, 0, 2 * Math.PI);
ctx.fillStyle = '#00ff00';
ctx.fill();
ctx.fillStyle = 'white';
ctx.fillText('1', centerX + scale + 10, centerY - 10);
// Point at i (top)
ctx.beginPath();
ctx.arc(centerX, centerY - scale, 5, 0, 2 * Math.PI);
ctx.fillStyle = '#00aaff';
ctx.fill();
ctx.fillStyle = 'white';
ctx.fillText('i', centerX + 10, centerY - scale - 10);
// Point at -1 (left)
ctx.beginPath();
ctx.arc(centerX - scale, centerY, 5, 0, 2 * Math.PI);
ctx.fillStyle = '#ff5555';
ctx.fill();
ctx.fillStyle = 'white';
ctx.fillText('-1', centerX - scale - 30, centerY - 10);
// Point at -i (bottom)
ctx.beginPath();
ctx.arc(centerX, centerY + scale, 5, 0, 2 * Math.PI);
ctx.fillStyle = '#ff55ff';
ctx.fill();
ctx.fillStyle = 'white';
ctx.fillText('-i', centerX + 10, centerY + scale + 20);
// Point at origin
ctx.beginPath();
ctx.arc(centerX, centerY, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.fillStyle = 'white';
ctx.fillText('0', centerX + 10, centerY - 10);
// Draw e^(iπ) = -1
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX - scale, centerY);
ctx.strokeStyle = '#ffcc00';
ctx.lineWidth = 3;
ctx.stroke();
// Animate rotation
const time = Date.now() / 1000;
const angle = time;
const x = centerX + scale * Math.cos(angle);
const y = centerY - scale * Math.sin(angle);
// Draw rotating point
ctx.beginPath();
ctx.arc(x, y, 8, 0, 2 * Math.PI);
ctx.fillStyle = '#ff3300';
ctx.fill();
// Draw radius
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(x, y);
ctx.strokeStyle = 'rgba(255, 51, 0, 0.7)';
ctx.lineWidth = 2;
ctx.stroke();
// Labels
ctx.fillStyle = 'white';
ctx.font = '14px Arial';
ctx.fillText('Real', canvas.width - 50, centerY - 10);
ctx.fillText('Imaginary', centerX + 10, 20);
requestAnimationFrame(drawComplexPlane);
}
drawComplexPlane();
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Euler’s Identity – Animated Proof</title>
<!-- MathJax for beautiful mathematics -->
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#fafafa;
color:#111;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
overflow:hidden;
}
#stage{
text-align:center;
}
h1{
margin:0 0 10px 0;
font-size:2em;
}
canvas{
background:#fff;
box-shadow:0 0 10px rgba(0,0,0,.2);
border-radius:6px;
}
#equations{
font-size:1.4em;
min-height:3em;
margin-top:8px;
}
#replay{
margin-top:10px;
padding:6px 14px;
border:none;
border-radius:4px;
background:#2962ff;
color:#fff;
font-size:1em;
cursor:pointer;
}
#replay:hover{
background:#0039cb;
}
</style>
</head>
<body>
<div id="stage">
<h1>Euler’s Identity</h1>
<canvas id="canvas" width="600" height="400"></canvas>
<div id="equations"></div>
<button id="replay">Replay</button>
</div>
<script>
/*
Simple “video-style” animation that visualises and proves
Euler’s famous identity e^{iπ} + 1 = 0 in one self-contained file.
*/
/* -------- canvas setup -------- */
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const cx = canvas.width / 2;
const cy = canvas.height / 2;
const R = 150; // unit-circle radius (pixels)
let startTime = null;
/* -------- core drawing routine -------- */
function draw(angle){
ctx.clearRect(0,0,canvas.width,canvas.height);
/* axes */
ctx.strokeStyle = "#888";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(cx - R - 30, cy);
ctx.lineTo(cx + R + 30, cy);
ctx.moveTo(cx, cy - R - 30);
ctx.lineTo(cx, cy + R + 30);
ctx.stroke();
/* unit circle */
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(cx, cy, R, 0, Math.PI*2);
ctx.stroke();
/* rotating radius (red) */
const tipX = cx + R * Math.cos(angle);
const tipY = cy - R * Math.sin(angle);
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(tipX, tipY);
ctx.stroke();
/* moving point */
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(tipX, tipY, 6, 0, Math.PI*2);
ctx.fill();
}
/* -------- text storyboard -------- */
const eqBox = document.getElementById("equations");
function setEq(tex){
eqBox.innerHTML = tex;
MathJax.typesetPromise([eqBox]);
}
function updateText(t){
if(t < 2){
setEq("\\[e^{ix}=\\cos x\\; +\\; i\\sin x\\]");
}else if(t < 4){
setEq("At \\(x=\\pi\\): \\\\ \\[e^{i\\pi}=\\cos\\pi\\; +\\; i\\sin\\pi\\]");
}else if(t < 6){
setEq("But \\(\\cos\\pi=-1\\) and \\(\\sin\\pi=0\\).");
}else if(t < 8){
setEq("\\[e^{i\\pi} = -1\\]");
}else if(t < 10){
setEq("Add \\(1\\): \\\\ \\[e^{i\\pi}+1=0\\]");
}else{
setEq("<strong>Q.E.D.</strong>");
}
}
/* -------- master animation loop -------- */
function animate(timestamp){
if(!startTime) startTime = timestamp;
const t = (timestamp - startTime) / 1000; // elapsed seconds
/* rotate from 0 to π in 6 seconds */
const angle = Math.min(t/6, 1) * Math.PI;
draw(angle);
updateText(t);
/* keep running for 12 s total */
if(t < 12){
requestAnimationFrame(animate);
}
}
/* -------- controls -------- */
function go(){
startTime = null;
requestAnimationFrame(animate);
}
go();
document.getElementById("replay").addEventListener("click", go);
</script>
</body>
</html>
```Drag to resize
An elegant proof of Euler's Identity, presented as a short, animated demonstration.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Visual Proof of Euler's Identity</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;1,300&display=swap');
:root {
--bg-color: #1a1a2e;
--primary-color: #e94560;
--secondary-color: #16213e;
--text-color: #f0f0f0;
--grid-color: rgba(255, 255, 255, 0.1);
--highlight-color: #0f3460;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: var(--bg-color);
font-family: 'Lato', sans-serif;
color: var(--text-color);
overflow: hidden;
}
#video-container {
width: 90vw;
max-width: 800px;
height: 60vh;
max-height: 600px;
background-color: var(--secondary-color);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
display: flex;
flex-direction: column;
overflow: hidden;
}
#screen {
flex-grow: 1;
position: relative;
background-color: #0c101a;
}
.scene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0;
transition: opacity 0.8s ease-in-out;
padding: 20px;
box-sizing: border-box;
}
.scene.active {
opacity: 1;
}
.title {
font-size: clamp(1.5rem, 5vw, 2.5rem);
font-weight: 300;
margin-bottom: 0.5em;
}
.subtitle {
font-size: clamp(1rem, 3vw, 1.5rem);
font-weight: 300;
color: #aaa;
}
.math {
font-family: 'Times New Roman', serif;
font-size: clamp(1.8rem, 6vw, 3rem);
font-style: italic;
transition: all 0.5s ease-in-out;
}
.math .op, .math .num {
font-style: normal;
}
.formula-box {
background: rgba(0,0,0,0.3);
padding: 20px 40px;
border-radius: 8px;
border: 1px solid var(--highlight-color);
}
#complex-plane-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#complex-plane {
position: relative;
width: 300px;
height: 300px;
}
#real-axis, #imaginary-axis {
position: absolute;
background-color: var(--grid-color);
}
#real-axis {
width: 100%;
height: 1px;
top: 50%;
left: 0;
}
#imaginary-axis {
width: 1px;
height: 100%;
left: 50%;
top: 0;
}
.axis-label {
position: absolute;
font-size: 12px;
color: #aaa;
}
#real-label { bottom: -20px; right: -5px; }
#imag-label { top: -20px; left: 5px; }
#unit-circle {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
border: 2px solid var(--highlight-color);
border-radius: 50%;
}
#radius-vector {
position: absolute;
width: 100px; /* half of unit-circle width */
height: 2px;
background-color: var(--primary-color);
top: calc(50% - 1px);
left: 50%;
transform-origin: left center;
transition: transform 3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
#point-on-circle {
position: absolute;
width: 14px;
height: 14px;
background-color: var(--primary-color);
border: 2px solid white;
border-radius: 50%;
top: -6px; /* center it on the line */
right: -7px;
}
#angle-arc {
position: absolute;
width: 80px;
height: 80px;
top: 110px;
left: 110px;
border: 2px solid #fff;
border-radius: 50%;
border-color: transparent transparent transparent #fff; /* Only show left border */
transform: rotate(-135deg); /* Position start of arc */
clip-path: inset(0 0 42px 0); /* Hide bottom half */
opacity: 0;
transition: all 1s ease-in-out;
}
#angle-text {
position: absolute;
top: calc(50% - 30px);
left: calc(50% + 15px);
color: #fff;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#controls {
height: 50px;
background-color: var(--secondary-color);
border-top: 1px solid var(--highlight-color);
display: flex;
align-items en;
padding: 0 20px;
}
#play-button {
background: none;
border: none;
color: var(--text-color);
font-size: 24px;
cursor: pointer;
padding: 0 15px;
transition: color 0.2s;
}
#play-button:hover { color: var(--primary-color); }
#play-button:disabled { color: #555; cursor: not-allowed; }
#progress-bar-container {
flex-grow: 1;
height: 6px;
background-color: var(--highlight-color);
border-radius: 3px;
margin: auto 0;
overflow: hidden;
}
#progress-bar {
width: 0%;
height: 100%;
background-color: var(--primary-color);
transition: width 0.5s linear;
}
</style>
</head>
<body>
<div id="video-container">
<div id="screen">
<!-- Scene 1: Title -->
<div class="scene active" id="scene-title">
<h1 class="title">The Most Beautiful Equation</h1>
<p class="subtitle">A visual proof of Euler's Identity</p>
<p class="math">e<sup>iπ</sup> <span class="op">+</span> 1 <span class="op">=</span> 0</p>
</div>
<!-- Scene 2: Introduce Euler's Formula -->
<div class="scene" id="scene-formula">
<h2 class="title">The Key: Euler's Formula</h2>
<div class="formula-box">
<p class="math">e<sup>ix</sup> <span class="op">=</span> cos(x) <span class="op">+</span> <i>i</i> sin(x)</p>
</div>
<p class="subtitle" style="margin-top: 20px;">This formula links exponents to a circle.</p>
</div>
<!-- Scene 3: The Complex Plane -->
<div class="scene" id="scene-plane">
<h2 class="title" id="plane-title" style="position:absolute; top:20px; width:100%; transition: opacity 0.5s;">Let's visualize this on the Complex Plane.</h2>
<div id="complex-plane-container">
<div id="complex-plane">
<div id="real-axis"><div id="real-label" class="axis-label">Real</div></div>
<div id="imaginary-axis"><div id="imag-label" class="axis-label">Imaginary (<i>i</i>)</div></div>
<div id="unit-circle"></div>
<div id="angle-arc"></div>
<div id="angle-text">x = 0</div>
<div id="radius-vector" style="transform: rotate(0deg);">
<div id="point-on-circle"></div>
</div>
</div>
</div>
<p class="subtitle" id="plane-subtitle" style="position:absolute; bottom:20px; width:100%; transition: opacity 0.5s;">
The formula <span class="math" style="font-size:1.2rem">e<sup>ix</sup></span> describes a point on this unit circle.
</p>
</div>
<!-- Scene 4: The final equation -->
<div class="scene" id="scene-final">
<p class="math" id="final-eq-1">
e<sup>iπ</sup><span class="op"> = </span> -1
</p>
<p class="math" id="final-eq-2" style="opacity:0; transform: translateY(50px);">
e<sup>iπ</sup><span id="final-plus-one" class="op" style="opacity:0; margin-left: -20px;"> + 1</span><span class="op"> = </span> 0
</p>
<h1 class="title" id="qed" style="opacity:0; margin-top: 40px; color: var(--primary-color);">Euler's Identity</h1>
</div>
</div>
<div id="controls">
<button id="play-button">▶</button>
<div id="progress-bar-container">
<div id="progress-bar"></div>
</div>
</div>
</div>
<script>
const scenes = document.querySelectorAll('.scene');
const playButton = document.getElementById('play-button');
const progressBar = document.getElementById('progress-bar');
const radiusVector = document.getElementById('radius-vector');
const angleArc = document.getElementById('angle-arc');
const angleText = document a.getElementById('angle-text');
let currentScene = 0;
const totalSteps = 12; // Adjusted for a smoother progress bar
let currentStep = 0;
function updateProgress() {
currentStep++;
progressBar.style.width = `${(currentStep / totalSteps) * 100}%`;
}
function switchScene(sceneId) {
scenes.forEach(scene => scene.classList.remove('active'));
document.getElementById(sceneId).classList.add('active');
updateProgress();
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function playVideo() {
playButton.disabled = true;
playButton.innerHTML = '❚❚';
// --- Intro ---
await sleep(2000);
updateProgress();
// --- Scene 2: Euler's Formula ---
await sleep(1000);
switchScene('scene-formula');
await sleep(3000);
updateProgress();
// --- Scene 3: The Complex Plane ---
await sleep(1000);
switchScene('scene-plane');
await sleep(1000);
updateProgress();
const planeTitle = document.getElementById('plane-title');
const planeSubtitle = document.getElementById('plane-subtitle');
planeTitle.style.opacity = '0';
await sleep(500);
planeTitle.innerText = "The value 'x' in e^(ix) is the angle of rotation.";
planeTitle.style.opacity = '1';
updateProgress();
await sleep(2500);
planeTitle.style.opacity = '0';
await sleep(500);
planeTitle.innerText = 'Let\'s start with x = 0';
planeTitle.style.opacity = '1';
planeSubtitle.innerHTML = 'e<sup>i*0</sup> = cos(0) + i sin(0) = 1';
updateProgress();
await sleep(2500);
planeTitle.style.opacity = '0';
await sleep(500);
planeTitle.innerText = 'Now, let\'s rotate by x = π (180°)';
planeTitle.style.opacity = '1';
updateProgress();
// --- The Animation ---
await sleep(1500);
angleText.style.opacity = '1';
angleText.innerText = 'x = π';
angleArc.style.opacity = '1';
radiusVector.style.transform = 'rotate(180deg)';
planeSubtitle.innerHTML = 'e<sup>iπ</sup> = cos(π) + i sin(π) = -1';
updateProgress();
await sleep(3500); // let the animation sink in
planeTitle.style.opacity = '0';
updateProgress();
// --- Scene 4: The Finale ---
await sleep(1000);
switchScene('scene-final');
await sleep(1500);
updateProgress();
const finalEq2 = document.getElementById('final-eq-2');
const finalPlusOne = document.getElementById('final-plus-one');
finalEq2.style.opacity = '1';
finalEq2.style.transform = 'translateY(0px)';
await sleep(1000);
finalPlusOne.style.marginLeft = '0px';
finalPlusOne.style.opacity = '1';
updateProgress();
await sleep(2000);
document.getElementById('qed').style.opacity = '1';
updateProgress();
// --- End ---
playButton.innerHTML = '↺';
playButton.disabled = false;
}
playButton.addEventListener('click', () => {
if (playButton.innerHTML === '↺') {
// Reset logic
location.reload();
} else {
playVideo();
}
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Euler's Identity Proof</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #141e30, #243b55);
color: #fff;
overflow: hidden;
}
#container {
width: 100%;
height: 100vh;
position: relative;
}
#scene {
width: 100%;
height: 100%;
position: absolute;
}
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
pointer-events: none;
}
.slide {
opacity: 0;
transform: translateY(50px);
transition: opacity 1s ease, transform 1s ease;
width: 80%;
max-width: 900px;
background-color: rgba(0, 0, 0, 0.5);
padding: 30px;
border-radius: 15px;
margin-bottom: 30px;
pointer-events: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.slide.active {
opacity: 1;
transform: translateY(0);
}
h1 {
font-size: 3em;
margin-bottom: 20px;
text-align: center;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}
h2 {
font-size: 2em;
margin-bottom: 15px;
text-align: center;
color: #0ff;
}
p {
font-size: 1.3em;
line-height: 1.8;
text-align: center;
margin-bottom: 15px;
}
.equation {
font-size: 2em;
margin: 20px 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 10px;
display: inline-block;
}
.controls {
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
z-index: 10;
pointer-events: auto;
}
button {
background-color: rgba(0, 255, 255, 0.2);
border: 1px solid #0ff;
color: #fff;
padding: 10px 20px;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: all 0.3s;
}
button:hover {
background-color: rgba(0, 255, 255, 0.4);
transform: scale(1.05);
}
.interactive {
width: 100%;
height: 400px;
margin: 20px 0;
}
.highlight {
color: #0ff;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="scene"></div>
<div id="content">
<div id="slide1" class="slide active">
<h1>Euler's Identity</h1>
<div class="equation">\( e^{i\pi} + 1 = 0 \)</div>
<p>Welcome to this beautiful journey through one of the most elegant equations in mathematics.</p>
<p>Often called "the most beautiful theorem in mathematics," this equation connects five fundamental constants.</p>
</div>
<div id="slide2" class="slide">
<h2>The Five Fundamental Constants</h2>
<p>The equation connects <span class="highlight">five</span> of the most important numbers in mathematics:</p>
<p>\( \mathbf{e} \) - the base of natural logarithms (approximately 2.71828...)</p>
<p>\( \mathbf{i} \) - the imaginary unit, defined as \( \sqrt{-1} \)</p>
<p>\( \mathbf{\pi} \) - the ratio of a circle's circumference to its diameter (approximately 3.14159...)</p>
<p>\( \mathbf{1} \) - the multiplicative identity</p>
<p>\( \mathbf{0} \) - the additive identity</p>
</div>
<div id="slide3" class="slide">
<h2>Understanding \( e^{ix} \)</h2>
<p>To understand Euler's Identity, we begin with Euler's Formula:</p>
<div class="equation">\( e^{ix} = \cos(x) + i\sin(x) \)</div>
<p>This remarkable formula connects exponential functions with trigonometric functions.</p>
<p>When \( x = \pi \), we get Euler's Identity.</p>
</div>
<div id="slide4" class="slide">
<h2>Taylor Series Expansion</h2>
<p>The proof begins with Taylor series expansions:</p>
<p>For \( e^x \): <span class="highlight">\( e^x = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \frac{x^4}{4!} + \cdots \)</span></p>
<p>For \( \cos(x) \): <span class="highlight">\( \cos(x) = 1 - \frac{x^2}{2!} + \frac{x^4}{4!} - \frac{x^6}{6!} + \cdots \)</span></p>
<p>For \( \sin(x) \): <span class="highlight">\( \sin(x) = x - \frac{x^3}{3!} + \frac{x^5}{5!} - \frac{x^7}{7!} + \cdots \)</span></p>
</div>
<div id="slide5" class="slide">
<h2>Substituting \( ix \) into \( e^x \)</h2>
<p>Replace \( x \) with \( ix \) in the Taylor series for \( e^x \):</p>
<p>\( e^{ix} = 1 + (ix) + \frac{(ix)^2}{2!} + \frac{(ix)^3}{3!} + \frac{(ix)^4}{4!} + \frac{(ix)^5}{5!} + \cdots \)</p>
<p>Using \( i^2 = -1 \), \( i^3 = -i \), \( i^4 = 1 \), etc.:</p>
<p>\( e^{ix} = 1 + ix - \frac{x^2}{2!} - i\frac{x^3}{3!} + \frac{x^4}{4!} + i\frac{x^5}{5!} - \cdots \)</p>
</div>
<div id="slide6" class="slide">
<h2>Separating Real and Imaginary Parts</h2>
<p>Group the real and imaginary terms:</p>
<p>Real part: \( 1 - \frac{x^2}{2!} + \frac{x^4}{4!} - \frac{x^6}{6!} + \cdots = \cos(x) \)</p>
<p>Imaginary part: \( i(x - \frac{x^3}{3!} + \frac{x^5}{5!} - \frac{x^7}{7!} + \cdots) = i\sin(x) \)</p>
<div class="equation">\( e^{ix} = \cos(x) + i\sin(x) \)</div>
<p>This is Euler's Formula!</p>
</div>
<div id="slide7" class="slide">
<h2>Deriving Euler's Identity</h2>
<p>Now substitute \( x = \pi \) into Euler's Formula:</p>
<p>\( e^{i\pi} = \cos(\pi) + i\sin(\pi) \)</p>
<p>We know: \( \cos(\pi) = -1 \) and \( \sin(\pi) = 0 \)</p>
<p>So: \( e^{i\pi} = -1 + i(0) = -1 \)</p>
<div class="equation">\( e^{i\pi} = -1 \)</div>
</div>
<div id="slide8" class="slide">
<h2>The Final Step</h2>
<p>Add 1 to both sides of the equation:</p>
<div class="equation">\( e^{i\pi} + 1 = 0 \)</div>
<p>And there we have it - Euler's Identity!</p>
<p>This astonishing equation connects the five most important numbers in mathematics with the three basic arithmetic operations: addition, multiplication, and exponentiation.</p>
</div>
<div id="slide9" class="slide">
<h2>Geometric Interpretation</h2>
<p>On the complex plane, \( e^{i\theta} \) represents a point on the unit circle at angle \( \theta \).</p>
<p>When \( \theta = \pi \), we're at angle 180°, which corresponds to the point (-1, 0).</p>
<p>Thus, \( e^{i\pi} = -1 + 0i = -1 \).</p>
<canvas id="complexPlane" class="interactive"></canvas>
</div>
<div id="slide10" class="slide">
<h2>Why Is This Significant?</h2>
<p>Euler's Identity is remarkable because it connects seemingly unrelated areas of mathematics:</p>
<p>• Analysis (e, the base of natural logarithms)</p>
<p>• Geometry (π, from circles)</p>
<p>• Algebra (0 and 1, basic arithmetic)</p>
<p>• Complex numbers (i, the imaginary unit)</p>
<p>It's a profound unification of different branches of mathematics in one simple equation.</p>
</div>
<div id="slide11" class="slide">
<h2>The Beauty of Mathematics</h2>
<div class="equation">\( e^{i\pi} + 1 = 0 \)</div>
<p>Mathematician Benjamin Peirce called this identity "absolutely paradoxical."</p>
<p>Physicist Richard Feynman described it as "the most remarkable formula in mathematics."</p>
<p>It represents the deep, unexpected connections that exist throughout mathematics.</p>
<p>Thank you for exploring this mathematical gem with us!</p>
</div>
</div>
<div class="controls">
<button id="prev">Previous</button>
<button id="next">Next</button>
<button id="restart">Restart</button>
</div>
</div>
<script>
// 3D Background
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('scene').appendChild(renderer.domElement);
// Create stars
const geometry = new THREE.BufferGeometry();
const vertices = [];
for (let i = 0; i < 1000; i++) {
const x = THREE.MathUtils.randFloatSpread(2000);
const y = THREE.MathUtils.randFloatSpread(2000);
const z = THREE.MathUtils.randFloatSpread(2000);
vertices.push(x, y, z);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
const material = new THREE.PointsMaterial({ color: 0x00ffff, size: 0.7 });
const stars = new THREE.Points(geometry, material);
scene.add(stars);
camera.position.z = 500;
// Animation
function animate() {
requestAnimationFrame(animate);
stars.rotation.x += 0.0005;
stars.rotation.y += 0.0005;
renderer.render(scene, camera);
}
animate();
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Slide controls
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
function showSlide(n) {
slides.forEach(slide => {
slide.classList.remove('active');
});
slides[n].classList.add('active');
currentSlide = n;
// Update visualization based on current slide
updateVisualization(n);
}
document.getElementById('next').addEventListener('click', () => {
if (currentSlide < slides.length - 1) {
showSlide(currentSlide + 1);
}
});
document.getElementById('prev').addEventListener('click', () => {
if (currentSlide > 0) {
showSlide(currentSlide - 1);
}
});
document.getElementById('restart').addEventListener('click', () => {
showSlide(0);
});
// Complex plane visualization
const canvas = document.getElementById('complexPlane');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
const container = document.querySelector('.interactive');
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
if (currentSlide === 8) updateVisualization(currentSlide);
}
window.addEventListener('resize', resizeCanvas);
function drawComplexPlane() {
const width = canvas.width;
const height = canvas.height;
const minDim = Math.min(width, height);
const radius = minDim * 0.35;
const centerX = width / 2;
const centerY = height / 2;
// Clear canvas
ctx.clearRect(0, 0, width, height);
// Draw coordinate system
ctx.strokeStyle = 'rgba(0, 255, 255, 0.3)';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(centerX - radius - 20, centerY);
ctx.lineTo(centerX + radius + 20, centerY);
ctx.moveTo(centerX, centerY - radius - 20);
ctx.lineTo(centerX, centerY + radius + 20);
ctx.stroke();
// Draw unit circle
ctx.strokeStyle = 'rgba(0, 255, 255, 0.5)';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.stroke();
// Mark point at angle π (180°)
const pointX = centerX + radius * Math.cos(Math.PI);
const pointY = centerY + radius * Math.sin(Math.PI);
// Draw radius line
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(pointX, pointY);
ctx.stroke();
// Draw point
ctx.fillStyle = '#00ffff';
ctx.beginPath();
ctx.arc(pointX, pointY, 8, 0, 2 * Math.PI);
ctx.fill();
// Labels
ctx.fillStyle = 'white';
ctx.font = '16px Arial';
ctx.textAlign = 'center';
// Axis labels
ctx.fillText('Re', centerX + radius + 40, centerY);
ctx.fillText('Im', centerX, centerY - radius - 40);
// Point label
ctx.fillText('e^(iπ) = -1', pointX - 40, pointY - 15);
// Special points
ctx.fillText('1', centerX + radius + 10, centerY + 15);
ctx.fillText('-1', centerX - radius - 10, centerY + 15);
ctx.fillText('i', centerX + 10, centerY - radius - 10);
ctx.fillText('-i', centerX + 10, centerY + radius + 25);
}
function updateVisualization(slideIndex) {
if (slideIndex === 8) { // Only draw on the geometric interpretation slide
resizeCanvas();
drawComplexPlane();
}
}
// Initialize
resizeCanvas();
animate();
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Euler's Identity Proof – e^(iπ)+1=0</title>
<style>
body { font-family: Arial, sans-serif; margin: 2rem; }
h1 { color: #2c3e50; }
blockquote { font-size: 1.5rem; font-weight: bold; }
iframe { margin-top: 1.5rem; width: 100%; max-width: 640px; height: 360px; border: none; }
</style>
</head>
<body>
<h1>Euler's Identity: e^(iπ) + 1 = 0</h1>
<p>Euler's identity is a remarkable mathematical equation that connects five fundamental constants: <code>e</code>, <code>i</code>, <code>π</code>, <code>1</code>, and <code>0</code>. The following video offers a concise and visually engaging proof.</p>
<blockquote>e<sup>iπ</sup> + 1 = 0</blockquote>
<iframe src="https://www.youtube.com/embed/2N9cGaRSGa8" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Proof of Euler's Identity: e<sup>iπ</sup> + 1 = 0</title>
<style>
body {
background: #181c26;
color: #fff;
font-family: 'Segoe UI', Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
}
h1 {
margin-top: 32px;
font-size: 2.2em;
text-align: center;
letter-spacing: 2px;
}
#videoContainer {
background: #262a3a;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(40,40,60,0.18);
margin: 32px 0 8px 0;
padding: 32px 28px 40px 28px;
max-width: 640px;
width: 100%;
}
canvas {
display: block;
margin: 0 auto 12px auto;
background: #222;
border-radius: 10px;
border: 2px solid #39405a;
}
#controls {
text-align: center;
margin-top: 12px;
}
button {
background: #3542a6;
color: #fff;
border: none;
border-radius: 5px;
font-size: 1em;
padding: 6px 20px;
margin: 0 5px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(70,90,255,0.07);
transition: background 0.15s;
}
button:active {
background: #233093;
}
p {
font-size: 1.07em;
color: #afd2ff;
margin: 0 0 10px 0;
text-align: center;
line-height: 1.5;
}
.formula {
background: #181f34;
padding: 7px 22px;
border-radius: 7px;
margin: 0 0 15px 0;
font-family: 'Cambria Math', 'STIX Math', 'Asana Math', serif;
color: #fffa;
font-size: 1.12em;
text-align: center;
display: inline-block;
}
a, a:visited {
color: #7caaf7;
text-decoration: underline dotted;
font-size: 0.93em;
}
@media (max-width:700px) {
#videoContainer {
padding: 16px 2vw 20px 2vw;
}
h1 {
font-size: 1.3em;
}
}
</style>
</head>
<body>
<h1>Euler's Identity: <span class="formula">e<sup>iπ</sup> + 1 = 0</span></h1>
<div id="videoContainer">
<canvas id="canvas" width="600" height="340"></canvas>
<div id="controls">
<button onclick="restart()">↺ Replay</button>
<button onclick="pauseplay()" id="pausebtn">Pause</button>
</div>
<p id="caption"></p>
</div>
<p>
Euler's formula beautifully connects fundamental constants:<br>
<span class="formula">e<sup>ix</sup> = cos(x) + i sin(x)</span><br>
Setting <b>x = π</b> gives us the remarkable identity.<br>
<a href="https://en.wikipedia.org/wiki/Euler%27s_identity" target="_blank" rel="noopener">Learn more</a>
</p>
<script>
// Animates a step-by-step "video" proof of e^(iπ) + 1 = 0
const steps = [
{
t: 0, dur: 1750,
caption: "Let's recall Euler's formula...",
draw: drawStep0
},
{
t:1750, dur:1800,
caption: 'e<sup>ix</sup> = cos(x) + i sin(x)<br><span style="font-size:1em;">(where i = √-1)</span>',
draw: drawStep1
},
{
t:3550, dur:1800,
caption: "<b>Set x = π...</b>",
draw: drawStep2
},
{
t:5350, dur:2200,
caption: 'e<sup>iπ</sup> = cos(π) + i sin(π)',
draw: drawStep3
},
{
t:7550, dur:1700,
caption: "cos(π) = -1, sin(π) = 0",
draw: drawStep4
},
{
t:9250, dur:2400,
caption: 'e<sup>iπ</sup> = <b>-1</b> + i × 0 = <b>-1</b>',
draw: drawStep5
},
{
t:11650, dur:2100,
caption: 'e<sup>iπ</sup> + 1 = 0 <span style="font-size:1em;">✨ Euler\'s Identity! ✨</span>',
draw: drawStep6
},
{
t:13750, dur:4000,
caption: 'Combines: <span style="font-size:1.3em;"><b>e<sup>iπ</sup> + 1 = 0</b></span><br>Links <b>e</b>, <b>i</b>, <b>π</b>, <b>1</b>, and <b>0</b>.',
draw: drawFinal
}
];
let startTime = null, timerRunning = false, paused = false, pauseTime = 0;
let stepIndex = 0, captionEl = document.getElementById('caption');
const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');
// For trig circle coordinates
const cx = 300, cy = 170, r = 96, scale = 54;
function drawClear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function drawEulerFormula() {
ctx.save();
ctx.font = "bold 26px 'Segoe UI', 'Cambria Math', serif";
ctx.fillStyle = "#f6fdff";
ctx.fillText("e", cx-108, 60);
ctx.font = "20px 'Segoe UI', serif";
ctx.fillText("ix", cx-85, 52);
ctx.font = "bold 26px 'Segoe UI', 'Cambria Math', serif";
ctx.fillStyle = "#ffb870";
ctx.fillText(" = ", cx-55, 60);
ctx.fillStyle = "#aaf";
ctx.fillText("cos(x) + i sin(x)", cx-20, 60);
ctx.restore();
}
function drawUnitCircle(showTheta=true, showLabels=true, showPI=false, showMinusOne=false, highlightPI=false) {
ctx.save();
// Circle
ctx.strokeStyle = "#77cdf7";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI*2);
ctx.stroke();
// Axes
ctx.strokeStyle = "#fff7";
ctx.lineWidth = 1.2;
ctx.beginPath();
ctx.moveTo(cx-r-18, cy); ctx.lineTo(cx+r+18, cy);
ctx.moveTo(cx, cy-r-18); ctx.lineTo(cx, cy+r+18);
ctx.stroke();
// Center dot
ctx.beginPath();
ctx.fillStyle = "#ffe";
ctx.arc(cx, cy, 3.2, 0, 2*Math.PI);
ctx.fill();
// Points: 1, -1
ctx.font = "18px serif";
ctx.fillStyle = "#fff";
ctx.fillText("1", cx+r+10, cy+7);
ctx.fillText("0", cx-14, cy+7);
if(showMinusOne) {
ctx.fillText("-1", cx-r-27, cy+7);
}
if(showPI) {
ctx.font = "bold 20px serif";
ctx.fillStyle = highlightPI ? "#ff7c7c" : "#bbb";
ctx.fillText("π", cx-r-3, cy-16);
}
// Angle arc
if(showTheta) {
ctx.beginPath();
ctx.strokeStyle = "#fffa";
ctx.lineWidth = 2;
ctx.arc(cx, cy, 35, 0, Math.PI, false);
ctx.stroke();
ctx.fillStyle = "#fff";
ctx.font = "18px serif";
ctx.fillText("π", cx-42, cy-32);
}
ctx.restore();
}
function drawStep0() {
drawClear();
drawEulerFormula();
}
function drawStep1() {
drawStep0();
// Optionally place the formula in a highlighted box
ctx.save();
ctx.globalAlpha = 0.12;
ctx.fillStyle = "#fff";
ctx.fillRect(cx-120, 28, 350, 42);
ctx.restore();
}
function drawStep2() {
drawStep1();
// Draw a faded unit circle behind
ctx.globalAlpha = 0.42;
drawUnitCircle(true, true, false, false, false);
ctx.globalAlpha = 1;
// Mark x → π
ctx.save();
ctx.font = "20px 'Segoe UI', serif";
ctx.fillStyle = "#ffe17d";
ctx.fillText("Set x = π", cx-65, 115);
ctx.restore();
}
function drawStep3() {
drawClear();
// Unit circle with theta = π marked
drawUnitCircle(true, true, true, false, false);
// Dashed arc to π
ctx.save();
ctx.setLineDash([4,3]);
ctx.strokeStyle = "#ff9a36";
ctx.lineWidth = 2.6;
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI, false);
ctx.stroke();
ctx.setLineDash([]);
// Highlight end point at (-1,0)
ctx.beginPath();
ctx.arc(cx-r, cy, 7.5, 0, 2*Math.PI);
ctx.fillStyle = "#ffb342";
ctx.globalAlpha = 0.9;
ctx.fill();
ctx.globalAlpha = 1;
// "cos(π), sin(π)"
ctx.font = "18px serif";
ctx.fillStyle = "#ffa";
ctx.fillText("(cos(π), sin(π))", cx-r-10, cy-28);
ctx.restore();
// Formula at top
ctx.save();
ctx.fillStyle = "#f6fdff";
ctx.font = "bold 24px 'Segoe UI', 'Cambria Math', serif";
ctx.fillText("e", cx-105, 44);
ctx.font = "18px 'Segoe UI', serif";
ctx.fillText("iπ", cx-89, 36);
ctx.font = "bold 23px 'Segoe UI', 'Cambria Math', serif";
ctx.fillStyle = "#ffb870";
ctx.fillText(" = ", cx-53, 44);
ctx.fillStyle = "#aaf";
ctx.fillText("cos(π) + i sin(π)", cx-16, 44);
ctx.restore();
}
function drawStep4() {
drawStep3();
// Annotation with cos(π)=-1, sin(π)=0
ctx.save();
ctx.font = "19px serif";
ctx.fillStyle = "#d7ff9a";
ctx.fillText("cos(π) = -1", cx-r-30, cy-65);
ctx.fillText("sin(π) = 0", cx-r-18, cy-87);
// Highlight -1 on x axis
ctx.beginPath();
ctx.arc(cx-r, cy, 10, 0, 2*Math.PI);
ctx.strokeStyle = "#fff";
ctx.lineWidth = 2.3;
ctx.stroke();
ctx.restore();
// Plus values near formula
ctx.save();
ctx.font = "18px 'Cambria', serif";
ctx.fillStyle = "#bae9ff";
ctx.fillText("= -1 + 0i", cx+75, 44);
ctx.restore();
}
function drawStep5() {
drawStep4();
// Final e^{iπ} = -1 emphasis
ctx.save();
ctx.font = "bold 22px 'Segoe UI', 'Cambria Math', serif";
ctx.fillStyle = "#ffe34c";
ctx.fillText("So e", cx-120, 90);
ctx.font = "18px 'Segoe UI', serif";
ctx.fillText("iπ", cx-61, 83);
ctx.font = "bold 23px 'Segoe UI', 'Cambria Math', serif";
ctx.fillStyle = "#ffb870";
ctx.fillText(" = ", cx-38, 90);
ctx.fillStyle = "#f77";
ctx.fillText("-1", cx-8, 90);
ctx.restore();
}
function drawStep6() {
drawClear();
// Show on real axis only
ctx.save();
ctx.strokeStyle = "#7cd1e7";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(cx-106, cy); ctx.lineTo(cx+106, cy);
ctx.stroke();
// Points at -1 and 0
ctx.beginPath();
ctx.arc(cx-90, cy, 7, 0, 2*Math.PI);
ctx.fillStyle = "#ffc98c";
ctx.fill();
ctx.beginPath();
ctx.arc(cx, cy, 7, 0, 2*Math.PI);
ctx.fillStyle = "#85ffde";
ctx.fill();
ctx.font = "18px serif";
ctx.fillStyle = "#ffc98c";
ctx.fillText("-1", cx-109, cy-13);
ctx.fillStyle = "#87ffd1";
ctx.fillText("0", cx+11, cy-10);
// Draw arrow -1 -> 0
ctx.strokeStyle = "#ffda45";
ctx.lineWidth = 3.4;
ctx.beginPath();
ctx.moveTo(cx-90, cy);
ctx.lineTo(cx-16, cy);
ctx.stroke();
drawArrowhead(cx-16, cy, 0, "#ffda45");
ctx.restore();
// Formula
ctx.save();
ctx.font = "bold 30px 'Segoe UI', 'Cambria Math', serif";
ctx.fillStyle = "#fafcfe";
ctx.fillText("e", cx-86, 64);
ctx.font = "22px 'Segoe UI', serif";
ctx.fillText("iπ", cx-64, 55);
ctx.font = "bold 30px 'Segoe UI', 'Cambria Math', serif";
ctx.fillStyle = "#ffb870";
ctx.fillText(" + 1 = 0", cx-40, 64);
ctx.restore();
}
function drawFinal() {
drawStep6();
// Emphasize all the constants
ctx.save();
ctx.font = "bold 22px 'Segoe UI', serif";
ctx.fillStyle = "#7db9ff";
ctx.fillText("e", cx-63, 92);
ctx.fillStyle = "#e174b7";
ctx.fillText("i", cx-47, 92);
ctx.fillStyle = "#ffcf6b";
ctx.fillText("π", cx-35, 92);
ctx.fillStyle = "#6dfff2";
ctx.fillText("1", cx+25, 92);
ctx.fillStyle = "#ff7a7a";
ctx.fillText("0", cx+73, 92);
ctx.fillStyle = "#ccc";
ctx.font = "16px serif";
ctx.fillText("Euler's identity links:", cx-65, 130);
ctx.fillText("e, i, π, 1, and 0", cx-45, 153);
ctx.restore();
// Some sparkles
for(let j=0; j<5; ++j) {
sparkle(cx+60*Math.cos(1.25*j), cy-50+13*j, "#fff7", 3+j%2);
}
}
function drawArrowhead(x,y,theta,color="#fff") {
ctx.save();
ctx.translate(x, y);
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(-10, -5);
ctx.lineTo(-10, +5);
ctx.lineTo(0, 0);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
ctx.restore();
}
function sparkle(x,y,color="#fff",sz=4) {
ctx.save();
ctx.globalAlpha = .68;
ctx.strokeStyle = color;
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.moveTo(x-sz, y); ctx.lineTo(x+sz, y);
ctx.moveTo(x, y-sz); ctx.lineTo(x, y+sz);
ctx.stroke();
ctx.globalAlpha = 1;
ctx.restore();
}
function findStepByTime(time) {
let sum = 0;
for (let i = 0; i < steps.length; ++i) {
sum += steps[i].dur;
if (time < sum) return i;
}
return steps.length-1;
}
function showFrame(elapsed) {
stepIndex = findStepByTime(elapsed);
if(stepIndex >= steps.length) stepIndex = steps.length-1;
steps[stepIndex].draw();
captionEl.innerHTML = steps[stepIndex].caption;
}
function videoFrame(ts) {
if (paused) return;
if (!startTime) startTime = ts;
let elapsed = ts - startTime;
showFrame(elapsed);
if (elapsed < steps.reduce((a, b) => a + b.dur, 0)) {
requestAnimationFrame(videoFrame);
} else {
stepIndex = steps.length-1;
showFrame(steps.reduce((a, b) => a + b.dur, 0));
timerRunning = false;
document.getElementById('pausebtn').innerText = "Replay";
}
}
function restart() {
paused = false;
document.getElementById('pausebtn').innerText = "Pause";
startTime = null;
timerRunning = true;
requestAnimationFrame(videoFrame);
}
function pauseplay() {
if (!timerRunning || stepIndex === steps.length-1) {
restart();
return;
}
paused = !paused;
if(paused) {
pauseTime = performance.now();
document.getElementById('pausebtn').innerText = "Continue";
} else {
// Adjust start time so elapsed stays same
startTime += performance.now() - pauseTime;
requestAnimationFrame(videoFrame);
document.getElementById('pausebtn').innerText = "Pause";
}
}
// Start on load
restart();
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Euler's Identity Proof</title>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-mml-chtml.js"></script>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding-top: 100px;
background-color: #f4f4f4;
}
.step {
position: absolute;
width: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
font-size: 2em;
color: #333;
}
.visible {
opacity: 1;
}
.step-content {
display: inline-block;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="step visible"><div class="step-content">Euler's Formula: $ e^{i\theta} = \cos\theta + i\sin\theta $</div></div>
<div class="step"><div class="step-content">Substitute $ \theta = \pi $: $ e^{i\pi} = \cos\pi + i\sin\pi $</div></div>
<div class="step"><div class="step-content">Calculate values: $ \cos\pi = -1 $, $ \sin\pi = 0 $</div></div>
<div class="step"><div class="step-content">Simplify: $ e^{i\pi} = -1 + i \cdot 0 $</div></div>
<div class="step"><div class="step-content">Further simplification: $ e^{i\pi} = -1 $</div></div>
<div class="step"><div class="step-content">Add 1: $ e^{i\pi} + 1 = -1 + 1 = 0 $</div></div>
<div class="step"><div class="step-content">Final Result: $ e^{i\pi} + 1 = 0 $</div></div>
<script>
(function() {
const steps = document.querySelectorAll('.step');
let current = 0;
function showNext() {
if (current < steps.length) {
if (current > 0) steps[current - 1].classList.remove('visible');
steps[current].classList.add('visible');
current++;
setTimeout(showNext, 2500);
}
}
setTimeout(showNext, 2500);
})();
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Euler’s Formula Proof – e^(iπ)+1 = 0</title>
<style>
html,body{margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#111;color:#eee;display:flex;justify-content:center;align-items:center}
#stage{background:#000;border:2px solid #222;border-radius:12px;width:90vw;max-width:800px;height:60vh;position:relative;overflow:hidden}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
.formula{font-size:4.5vw;font-weight:700;text-anchor:middle;dominant-baseline:middle;fill:#fff;opacity:0}
.axis{stroke:#444;stroke-width:1}
.circle{fill:none;stroke:#0ff;stroke-width:2}
.point{fill:#ff0}
.label{font-size:14px;fill:#ccc;font-family:monospace}
.step-text{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:18px;color:#fff;text-align:center}
</style>
</head>
<body>
<div id="stage">
<svg viewBox="0 0 800 450">
<!-- Axes -->
<line class="axis" x1="400" y1="225" x2="750" y2="225"></line>
<line class="axis" x1="400" y1="0" x2="400" y2="450"></line>
<line class="axis" x1="50" y1="225" x2="400" y2="225"></line>
<line class="axis" x1="400" y1="450" x2="400" y2="225"></line>
<!-- Unit circle -->
<circle class="circle" cx="400" cy="225" r="180"></circle>
<!-- Initial point -->
<circle class="point" id="p" cx="580" cy="225" r="6"></circle>
<!-- Labels -->
<text class="label" x="760" y="240">Re</text>
<text class="label" x="415" y="15">Im</text>
<!-- Formula -->
<text class="formula" id="eq" x="400" y="225">e^{iπ}+1=0</text>
</svg>
<div class="step-text" id="step">Step 1: Start at e^{i0} = 1</div>
</div>
<script>
const sleep = ms => new Promise(r => setTimeout(r, ms));
const stage = document.getElementById('stage');
const p = document.getElementById('p');
const eq = document.getElementById('eq');
const step = document.getElementById('step');
const svgNS = "http://www.w3.org/2000/svg";
const path = document.createElementNS(svgNS,'path');
path.setAttribute('stroke','#ff0');
path.setAttribute('stroke-width','2');
path.setAttribute('fill','none');
stage.querySelector('svg').appendChild(path);
async function animate() {
await sleep(500);
// Fade in formula
eq.style.transition='opacity 1s';
eq.style.opacity='1';
await sleep(1500);
// Step 1: Show e^{i0}=1
step.textContent = "Step 1: e^{i·0} = 1 (starting point)";
await sleep(1500);
// Step 2: Introduce e^{iθ}=cosθ+i·sinθ
step.textContent = "Step 2: e^{iθ} = cos θ + i·sin θ (Euler's formula)";
await sleep(2500);
// Step 3: Animate θ from 0 to π
step.textContent = "Step 3: Travel θ = 0 → π radians (180°)";
const D = 180; // radius
let d = 'M 580 225';
for (let a = 0; a <= Math.PI; a += 0.04) {
const x = 400 + D * Math.cos(a);
const y = 225 - D * Math.sin(a);
d += ` L ${x} ${y}`;
path.setAttribute('d',d);
p.setAttribute('cx',x);
p.setAttribute('cy',y);
await sleep(30);
}
await sleep(500);
// Step 4: Arrive at -1
step.textContent = "Step 4: e^{iπ} = cos π + i·sin π = -1 + 0i";
await sleep(1500);
// Step 5: Add 1
step.textContent = "Step 5: e^{iπ} + 1 = 0";
await sleep(1500);
// Fade out
stage.style.transition='opacity 1s';
stage.style.opacity='0';
await sleep(1000);
stage.style.opacity='1';
step.textContent = "e^{iπ} + 1 = 0 ✓";
}
animate();
</script>
</body>
</html>
```Drag to resize
Here's a complete HTML file that includes a video proof of Euler's identity \( e^{i\pi} + 1 = 0 \). This HTML file uses the MathJax library to render mathematical equations and includes a video from YouTube that provides a proof of the identity.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proof of Euler's Identity</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin: 20px 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Proof of Euler's Identity</h1>
<p>Euler's identity is often considered one of the most beautiful equations in mathematics. It is given by:</p>
<p>\[ e^{i\pi} + 1 = 0 \]</p>
<p>This equation combines five fundamental mathematical constants:</p>
<ul>
<li>\( e \): The base of the natural logarithm.</li>
<li>\( i \): The imaginary unit, satisfying \( i^2 = -1 \).</li>
<li>\( \pi \): The ratio of a circle's circumference to its diameter.</li>
<li>\( 1 \): The multiplicative identity.</li>
<li>\( 0 \): The additive identity.</li>
</ul>
<p>Here is a video proof of Euler's identity:</p>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/mvmuCPvRoWQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>The proof typically involves using the Taylor series expansion for the exponential function \( e^x \), and then substituting \( x \) with \( i\pi \). The resulting series can be simplified using the properties of \( i \) and trigonometric identities to arrive at the identity.</p>
</div>
</body>
</html>
```
This HTML file includes everything you need to render the proof of Euler's identity, including the MathJax library for rendering mathematical equations and a video from YouTube that provides a visual proof.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Proof of Euler's Identity: e^{iπ} + 1 = 0</title>
<style>
body { margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; }
canvas { display: block; margin: 0 auto; border: 1px solid #ccc; }
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let time = 0; // Global time for animation
const phaseDuration = 1000; // Duration per phase in frames (about 16-17s at 60fps)
const totalPhases = 6;
function drawText(text, x, y, size = 20, color = 'black', align = 'center') {
ctx.font = `${size}px Arial`;
ctx.fillStyle = color;
ctx.textAlign = align;
ctx.fillText(text, x, y);
}
function drawAxis() {
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
// X axis
ctx.beginPath();
ctx.moveTo(100, 300);
ctx.lineTo(700, 300);
ctx.stroke();
// Y axis
ctx.beginPath();
ctx.moveTo(400, 100);
ctx.lineTo(400, 500);
ctx.stroke();
drawText('Real', 700, 320, 16);
drawText('Imaginary', 420, 100, 16);
}
function drawUnitCircle() {
ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.arc(400, 300, 200, 0, 2 * Math.PI);
ctx.stroke();
}
function drawPoint(t, color = 'red') {
const x = 400 + 200 * Math.cos(t);
const y = 300 - 200 * Math.sin(t); // Inverted y for canvas
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI);
ctx.fill();
// Draw line from origin
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(400, 300);
ctx.lineTo(x, y);
ctx.stroke();
}
function animate() {
ctx.clearRect(0, 0, 800, 600);
time += 1;
const phase = Math.floor(time / phaseDuration);
const phaseProgress = (time % phaseDuration) / phaseDuration;
drawText("Animated Proof of Euler's Identity: e^{iπ} + 1 = 0", 400, 50, 24, 'blue');
if (phase === 0) {
// Phase 0: Introduce Taylor series for e^x
drawText("Step 1: Taylor Series Expansion of e^x", 400, 100, 20);
drawText("e^x = Σ (x^n / n!) for n=0 to ∞", 400, 150, 18);
drawText("= 1 + x + x²/2! + x³/3! + x⁴/4! + ...", 400, 180, 18);
drawText("(This appears gradually)", 400, 220, 16, 'gray');
// Animate terms appearing
const terms = ["1", "+ x", "+ x²/2!", "+ x³/3!", "+ x⁴/4!", "+ ..."];
for (let i = 0; i < terms.length; i++) {
if (phaseProgress > i / terms.length) {
drawText(terms.slice(0, i+1).join(' '), 400, 250 + i*30, 18, 'black', 'center');
}
}
} else if (phase === 1) {
// Phase 1: Substitute ix
drawText("Step 2: Substitute x = iθ (where i² = -1)", 400, 100, 20);
drawText("e^{iθ} = Σ ((iθ)^n / n!)", 400, 150, 18);
drawText("= 1 + iθ + (iθ)²/2! + (iθ)³/3! + (iθ)⁴/4! + ...", 400, 180, 18);
drawText("= 1 + iθ - θ²/2! - iθ³/3! + θ⁴/4! + ...", 400, 210, 18);
} else if (phase === 2) {
// Phase 2: Group real and imaginary parts
drawText("Step 3: Group Real and Imaginary Terms", 400, 100, 20);
drawText("Real parts (even powers): 1 - θ²/2! + θ⁴/4! - ... = cos(θ)", 400, 150, 18, 'green');
drawText("Imaginary parts (odd powers): i(θ - θ³/3! + θ⁵/5! - ...) = i sin(θ)", 400, 200, 18, 'red');
drawText("Thus, e^{iθ} = cos(θ) + i sin(θ)", 400, 250, 20, 'blue');
} else if (phase === 3) {
// Phase 3: Introduce complex plane
drawAxis();
drawUnitCircle();
drawText("Step 4: Visualize on Complex Plane", 400, 100, 20);
drawText("e^{iθ} traces the unit circle as θ increases.", 400, 550, 18);
// Animate a static point for now
drawPoint(0);
drawText("At θ=0: e^{i0} = 1 (real axis)", 400, 520, 16);
} else if (phase === 4) {
// Phase 4: Animate from 0 to π
drawAxis();
drawUnitCircle();
drawText("Step 5: Animate e^{iθ} from θ=0 to θ=π", 400, 100, 20);
const t = Math.PI * phaseProgress;
drawPoint(t);
drawText(`Current θ: ${(t).toFixed(2)}`, 400, 550, 16);
drawText(`e^{iθ} = cos(${t.toFixed(2)}) + i sin(${t.toFixed(2)}) ≈ ${Math.cos(t).toFixed(2)} + i${Math.sin(t).toFixed(2)}`, 400, 520, 16);
} else if (phase >= 5) {
// Phase 5: Final identity
drawAxis();
drawUnitCircle();
drawPoint(Math.PI, 'green');
drawText("Step 6: At θ=π", 400, 100, 20);
drawText("e^{iπ} = cos(π) + i sin(π) = -1 + i*0 = -1", 400, 150, 18);
drawText("Therefore, e^{iπ} + 1 = 0", 400, 200, 24, 'blue');
drawText("Euler's Identity! (Animation complete)", 400, 550, 18, 'gray');
// Stop animating by not calling requestAnimationFrame again if phase > total
if (phase > totalPhases) return;
}
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
```Drag to resize
Here's a complete HTML file that demonstrates Euler's identity (e^(iπ) + 1 = 0) with an animated proof:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Euler's Identity Proof</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
color: #333;
}
.container {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 30px;
max-width: 800px;
margin: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.proof-step {
margin: 20px 0;
padding: 15px;
border-left: 4px solid #3498db;
background-color: #f8f9fa;
opacity: 0;
transform: translateY(20px);
}
.equation {
font-size: 24px;
text-align: center;
margin: 20px 0;
padding: 10px;
background-color: #f0f8ff;
border-radius: 5px;
}
.final-identity {
font-size: 36px;
text-align: center;
margin: 30px 0;
padding: 20px;
background-color: #e8f4f8;
border-radius: 8px;
font-weight: bold;
color: #2980b9;
border: 2px dashed #3498db;
}
.explanation {
line-height: 1.6;
margin-bottom: 15px;
}
canvas {
display: block;
margin: 30px auto;
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
}
.controls {
margin: 20px 0;
text-align: center;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 0 10px;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<h1>Euler's Identity: e<sup>iπ</sup> + 1 = 0</h1>
<div class="final-identity" id="finalIdentity">
e<sup>iπ</sup> + 1 = 0
</div>
<canvas id="unitCircle" width="400" height="400"></canvas>
<div class="controls">
<button id="startProof">Start Proof</button>
<button id="resetProof">Reset</button>
</div>
<div class="proof-step" id="step1">
<div class="explanation">
Euler's identity connects five fundamental mathematical constants:
</div>
<ul>
<li>0 (additive identity)</li>
<li>1 (multiplicative identity)</li>
<li>π (circle constant)</li>
<li>e (base of natural logarithms)</li>
<li>i (imaginary unit)</li>
</ul>
</div>
<div class="proof-step" id="step2">
<div class="explanation">
We start with Euler's formula, which relates complex exponentials to trigonometric functions:
</div>
<div class="equation">
e<sup>iθ</sup> = cosθ + i sinθ
</div>
</div>
<div class="proof-step" id="step3">
<div class="explanation">
When θ = π, we substitute into Euler's formula:
</div>
<div class="equation">
e<sup>iπ</sup> = cosπ + i sinπ
</div>
</div>
<div class="proof-step" id="step4">
<div class="explanation">
We know the trigonometric values:
</div>
<div class="equation">
cosπ = -1<br>
sinπ = 0
</div>
</div>
<div class="proof-step" id="step5">
<div class="explanation">
Substituting these values back in:
</div>
<div class="equation">
e<sup>iπ</sup> = -1 + i·0 = -1
</div>
</div>
<div class="proof-step" id="step6">
<div class="explanation">
Adding 1 to both sides:
</div>
<div class="equation">
e<sup>iπ</sup> + 1 = 0
</div>
</div>
<div class="proof-step" id="step7">
<div class="explanation">
This completes the proof of Euler's identity, often regarded as the most beautiful equation in mathematics.
</div>
</div>
</div>
<script>
// Initialize canvas
const canvas = document.getElementById('unitCircle');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 150;
function drawUnitCircle(theta = 0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw axes
ctx.beginPath();
ctx.strokeStyle = '#aaa';
ctx.moveTo(0, centerY);
ctx.lineTo(canvas.width, centerY);
ctx.moveTo(centerX, 0);
ctx.lineTo(centerX, canvas.height);
ctx.stroke();
// Draw unit circle
ctx.beginPath();
ctx.strokeStyle = '#3498db';
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.stroke();
// Draw angle
if (theta > 0) {
ctx.beginPath();
ctx.strokeStyle = '#2c3e50';
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + radius * Math.cos(theta), centerY - radius * Math.sin(theta));
ctx.stroke();
// Draw angle arc
ctx.beginPath();
ctx.strokeStyle = '#e74c3c';
ctx.arc(centerX, centerY, 30, 0, theta, true);
ctx.stroke();
// Label angle
ctx.fillStyle = '#e74c3c';
ctx.font = '16px Arial';
ctx.fillText('θ = ' + (theta/Math.PI).toFixed(2) + 'π', centerX + 40, centerY - 20);
// Draw projection lines
const endX = centerX + radius * Math.cos(theta);
const endY = centerY - radius * Math.sin(theta);
// Horizontal projection (cos)
ctx.beginPath();
ctx.strokeStyle = '#27ae60';
ctx.setLineDash([5, 3]);
ctx.moveTo(endX, endY);
ctx.lineTo(endX, centerY);
ctx.stroke();
// Vertical projection (sin)
ctx.beginPath();
ctx.strokeStyle = '#f39c12';
ctx.moveTo(endX, endY);
ctx.lineTo(centerX, endY);
ctx.stroke();
ctx.setLineDash([]);
// Label components
ctx.fillStyle = '#27ae60';
ctx.fillText('cosθ', endX + 5, centerY - 10);
ctx.fillStyle = '#f39c12';
ctx.fillText('sinθ', centerX + 5, endY - 10);
// Label complex number
ctx.fillStyle = '#2c3e50';
ctx.font = '18px Arial';
ctx.fillText('e^(iθ) = cosθ + i sinθ', centerX - 100, 30);
// When theta approaches π
if (theta >= Math.PI * 0.95) {
ctx.fillStyle = '#e74c3c';
ctx.font = 'bold 18px Arial';
ctx.fillText('At θ = π:', centerX - 40, 60);
ctx.fillText('cosπ = -1', centerX - 40, 90);
ctx.fillText('sinπ = 0', centerX - 40, 120);
ctx.fillText('e^(iπ) = -1', centerX - 50, 150);
}
}
}
// Initial draw
drawUnitCircle();
// Animation timeline
const tl = gsap.timeline({paused: true});
// Animate proof steps
tl.to("#step1", {duration: 0.5, opacity: 1, y: 0})
.to("#step2", {duration: 0.5, opacity: 1, y: 0}, "+=0.3")
.to({theta: 0}, {duration: 2, theta: Math.PI, onUpdate: function() {
drawUnitCircle(this.targets()[0].theta);
}, ease: "power1.inOut"}, "+=0.5")
.to("#step3", {duration: 0.5, opacity: 1, y: 0}, "-=1.5")
.to("#step4", {duration: 0.5, opacity: 1, y: 0}, "+=0.3")
.to("#step5", {duration: 0.5, opacity: 1, y: 0}, "+=0.3")
.to("#step6", {duration: 0.5, opacity: 1, y: 0}, "+=0.3")
.to("#step7", {duration: 0.5, opacity: 1, y: 0}, "+=0.3")
.to("#finalIdentity", {duration: 1, scale: 1.1, color: "#e74c3c", borderColor: "#e74c3c", yoyo: true, repeat: 1}, "-=0.5");
// Button controls
document.getElementById('startProof').addEventListener('click', function() {
tl.restart();
});
document.getElementById('resetProof').addEventListener('click', function() {
tl.pause(0);
gsap.set(".proof-step", {opacity: 0, y: 20});
gsap.set("#finalIdentity", {scale: 1, color: "#2980b9", borderColor: "#3498db"});
drawUnitCircle();
});
</script>
</body>
</html>
```
This HTML file includes:
1. A visual proof of Euler's identity with animated steps
2. An interactive unit circle visualization showing how e^(iθ) relates to cosine and sine
3. A step-by-step mathematical proof
4. Controls to start or reset the animation
5. Beautiful styling and typography
6. GSAP for animations and MathJax for mathematical notation
The proof demonstrates:
- Euler's formula (e^(iθ) = cosθ + i sinθ)
- Special case when θ = π
- Trigonometric values at π radians
- The final derivation of e^(iπ) + 1 = 0
The visualization shows the complex exponential moving around the unit circle and landing at -1 when θ = π.Drag to resize
Creating a comprehensive proof of Euler's Identity (e^(iπ) + 1 = 0) in a video format within a single HTML file is quite ambitious, as it involves complex mathematical concepts and typically requires a video editing or a presentation tool. However, we can create a simple HTML file that includes a step-by-step explanation and uses MathJax for rendering mathematical expressions. We'll also include some basic JavaScript to make it interactive and somewhat video-like by advancing through steps automatically.
Here's an example HTML file that does this:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Euler's Identity Proof</title>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.step {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Euler's Identity: \(e^{i\pi} + 1 = 0\)</h1>
<div id="steps">
<div class="step" id="step1">
<h2>Step 1: Introduction to Euler's Formula</h2>
<p>Euler's Formula states that \(e^{ix} = \cos(x) + i\sin(x)\).</p>
</div>
<div class="step hidden" id="step2">
<h2>Step 2: Deriving Euler's Identity</h2>
<p>Substitute \(x = \pi\) into Euler's Formula: \(e^{i\pi} = \cos(\pi) + i\sin(\pi)\).</p>
<p>Since \(\cos(\pi) = -1\) and \(\sin(\pi) = 0\), we have \(e^{i\pi} = -1\).</p>
</div>
<div class="step hidden" id="step3">
<h2>Step 3: Proving Euler's Identity</h2>
<p>Adding 1 to both sides of \(e^{i\pi} = -1\), we get \(e^{i\pi} + 1 = 0\), which is Euler's Identity.</p>
</div>
<div class="step hidden" id="step4">
<h2>Conclusion</h2>
<p>Thus, we have derived Euler's Identity using Euler's Formula, demonstrating the profound connection between \(e\), \(i\), and \(\pi\).</p>
</div>
</div>
<script>
let step = 1;
const totalSteps = 4;
function showNextStep() {
document.getElementById(`step${step}`).classList.add('hidden');
step++;
if (step <= totalSteps) {
document.getElementById(`step${step}`).classList.remove('hidden');
setTimeout(showNextStep, 5000); // Show next step after 5 seconds
}
}
setTimeout(showNextStep, 5000); // Start showing steps after 5 seconds
</script>
</body>
</html>
```
This HTML file uses MathJax to render mathematical expressions. It includes a simple script that advances through the steps of explaining Euler's Identity every 5 seconds, hiding the current step and showing the next one. The content is not a video but rather a step-by-step presentation that auto-advances.
To view it, simply copy the code into an HTML file and open it in a web browser. Make sure you have an internet connection because it loads MathJax from a CDN.Drag to resize
# Euler's Identity e^(iπ) + 1 = 0 Visualization
I'll create an interactive visualization to demonstrate Euler's identity in a single HTML file using Canvas for the animation and MathJax for beautiful mathematical notation.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Euler's Identity: e^{iπ} + 1 = 0</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #2c3e50);
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
overflow-x: hidden;
}
header {
text-align: center;
margin: 20px 0;
max-width: 800px;
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
animation: glow 2s infinite alternate;
}
@keyframes glow {
from { text-shadow: 0 0 5px #fff, 0 0 10px #b300ff, 0 0 15px #0077ff; }
to { text-shadow: 0 0 10px #fff, 0 0 20px #8a2be2, 0 0 30px #1e90ff; }
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 20px;
}
#identity {
font-size: 3.5rem;
margin: 20px 0;
padding: 20px;
border-radius: 15px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1200px;
margin-top: 20px;
}
.canvas-container, .explanation {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.canvas-container {
width: 500px;
height: 500px;
}
#complexCanvas {
width: 100%;
height: 100%;
border-radius: 10px;
background: rgba(0, 0, 30, 0.5);
}
.explanation {
width: 570px;
padding: 30px;
}
h2 {
margin-bottom: 20px;
color: #ffcc00;
text-align: center;
}
.steps {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
}
.step {
background: rgba(0, 0, 30, 0.3);
padding: 15px;
border-radius: 10px;
border-left: 4px solid #ffcc00;
}
.step-title {
font-weight: bold;
margin-bottom: 5px;
color: #ffcc00;
}
.equation {
font-size: 1.4rem;
margin: 20px 0;
text-align: center;
color: lightblue;
overflow-x: auto;
}
.controls {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
}
button {
background: linear-gradient(to right, #ff0080, #ff8c00);
color: white;
border: none;
border-radius: 50px;
padding: 12px 25px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 0, 128, 0.4);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 0, 128, 0.6);
}
button:active {
transform: translateY(1px);
}
.footer {
margin-top: 30px;
text-align: center;
padding: 20px;
opacity: 0.8;
}
@media (max-width: 1100px) {
.canvas-container, .explanation {
width: 85%;
}
h1 {
font-size: 2.3rem;
}
#identity {
font-size: 2.8rem;
}
}
</style>
</head>
<body>
<header>
<h1>Euler's Identity</h1>
<p class="subtitle">The Most Beautiful Equation in Mathematics</p>
<div id="identity">\[ e^{i\pi} + 1 = 0 \]</div>
</header>
<div class="container">
<div class="canvas-container">
<canvas id="complexCanvas" width="500" height="500"></canvas>
</div>
<div class="explanation">
<h2>Understanding Euler's Identity</h2>
<div class="steps">
<div class="step">
<div class="step-title">1. Euler's Formula</div>
<p>Euler's formula relates complex exponentials to trigonometric functions:</p>
<div class="equation">\[ e^{i\theta} = \cos \theta + i \sin \theta \]</div>
</div>
<div class="step">
<div class="step-title">2. Special Case: θ = π</div>
<p>When θ = π radians (180°):</p>
<div class="equation">\[ e^{i\pi} = \cos \pi + i \sin \pi \]</div>
</div>
<div class="step">
<div class="step-title">3. Trigonometric Values</div>
<p>We know that:</p>
<div class="equation">\[ \cos \pi = -1 \quad \text{and} \quad \sin \pi = 0 \]</div>
</div>
<div class="step">
<div class="step-title">4. Substitution</div>
<p>Substituting these values:</p>
<div class="equation">\[ e^{i\pi} = -1 + i \cdot 0 = -1 \]</div>
</div>
<div class="step">
<div class="step-title">5. Euler's Identity</div>
<p>Adding 1 to both sides:</p>
<div class="equation">\[ e^{i\pi} + 1 = -1 + 1 = 0 \]</div>
</div>
</div>
<div class="controls">
<button id="playBtn">Play Animation</button>
<button id="pauseBtn">Pause</button>
<button id="resetBtn">Reset</button>
<button id="proofBtn">Show Me the Proof</button>
</div>
</div>
</div>
<div class="footer">
<p>⨀ Euler's Identity beautifully connects five fundamental mathematical constants: 0, 1, e, i, and π ⨀</p>
</div>
<script>
// Get the canvas and context
const canvas = document.getElementById('complexCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 180;
const scale = 140;
let angle = 0;
let animationId;
let isAnimating = false;
let mode = 'exponential'; // proof | exponential
// Animation states
let animationPhase = 0;
let prevPoint = {x: centerX + radius, y: centerY};
let showVector = false;
let showProof = false;
// Control buttons
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
const proofBtn = document.getElementById('proofBtn');
function drawComplexPlane() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the complex plane
ctx.strokeStyle = 'rgba(200, 200, 255, 0.5)';
ctx.lineWidth = 2;
// Horizontal axis (Real)
ctx.beginPath();
ctx.moveTo(50, centerY);
ctx.lineTo(canvas.width - 50, centerY);
ctx.stroke();
// Vertical axis (Imaginary)
ctx.beginPath();
ctx.moveTo(centerX, 50);
ctx.lineTo(centerX, canvas.height - 50);
ctx.stroke();
// Draw axis labels
ctx.fillStyle = '#ffcc00';
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.fillText('Re', canvas.width - 30, centerY - 10);
ctx.fillText('Im', centerX + 10, 30);
// Draw scale marks
ctx.font = '14px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
[-2, -1, 1, 2].forEach(num => {
const x = centerX + num * scale;
ctx.beginPath();
ctx.moveTo(x, centerY - 5);
ctx.lineTo(x, centerY + 5);
ctx.stroke();
ctx.fillText(num.toString(), x, centerY + 20);
});
[-1, 1, 2].forEach(num => {
const y = centerY - num * scale;
ctx.beginPath();
ctx.moveTo(centerX - 5, y);
ctx.lineTo(centerX + 5, y);
ctx.stroke();
ctx.fillText(num.toString() + 'i', centerX - 20, y);
});
// Draw the unit circle
ctx.strokeStyle = 'rgba(100, 200, 255, 0.5)';
ctx.setLineDash([5, 5]);
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.stroke();
ctx.setLineDash([]);
}
function drawPoint() {
let x, y;
if (mode === 'exponential') {
x = centerX + Math.cos(angle) * radius;
y = centerY - Math.sin(angle) * radius;
ctx.fillStyle = '#ff3860';
ctx.beginPath();
ctx.arc(x, y, 8, 0, Math.PI * 2);
ctx.fill();
// Draw the vector
if (showVector) {
ctx.strokeStyle = '#b967ff';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(x, y);
ctx.stroke();
// Draw the projection
if (angle > Math.PI/3) {
ctx.strokeStyle = '#00d2ff';
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(centerX, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, centerY);
ctx.stroke();
}
}
// Draw angle indicator
if (angle > 0) {
ctx.strokeStyle = '#ffcc00';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(centerX, centerY, radius * 0.3, 0, angle);
ctx.stroke();
// Draw angle label
ctx.fillStyle = '#ffcc00';
ctx.font = '16px Arial';
ctx.fillText(
`θ = ${angle.toFixed(2)} rad`,
centerX + Math.cos(angle/2) * (radius * 0.35),
centerY - Math.sin(angle/2) * (radius * 0.35)
);
}
// Label the point
ctx.fillStyle = '#fff';
ctx.font = 'bold 18px Arial';
const imagPart = Math.round(-Math.sin(angle) * radius * 10 / scale) / 10;
const realPart = Math.round(Math.cos(angle) * radius * 10 / scale) / 10;
ctx.fillText(`e^{iθ} = ${realPart} + ${imagPart}i`, x + 15, y - 15);
// Animation towards π
if (angle < Math.PI && isAnimating) {
angle += 0.015;
} else if (angle >= Math.PI && isAnimating) {
angle = Math.PI;
isAnimating = false;
showVector = true;
// Draw point at (-1, 0)
ctx.fillStyle = '#00ff75';
ctx.beginPath();
ctx.arc(centerX - radius, centerY, 10, 0, Math.PI * 2);
ctx.fill();
ctx.fillText('e^{iπ} = -1', centerX - radius + 15, centerY - 25);
ctx.fillText('-1 + 1 = 0', centerX, centerY + radius + 30);
}
} else if (mode === 'proof') {
// Simple visualization when in proof mode
const progress = Math.min(1, animationPhase / 100);
if (isAnimating) animationPhase++;
const currentAngle = Math.PI * progress;
// Draw Euler representation
ctx.fillStyle = '#ff3860';
x = centerX + Math.cos(currentAngle) * radius;
y = centerY - Math.sin(currentAngle) * radius;
ctx.beginPath();
ctx.arc(x, y, 8, 0, Math.PI * 2);
ctx.fill();
// Draw the vector
ctx.strokeStyle = '#b967ff';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(x, y);
ctx.stroke();
// Draw cos projection
if (currentAngle > Math.PI/4) {
ctx.strokeStyle = '#00d2ff';
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(centerX, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, centerY);
ctx.stroke();
}
// Draw final result at π
if (progress >= 0.95) {
ctx.fillStyle = '#00ff75';
ctx.beginPath();
ctx.arc(centerX - radius, centerY, 10, 0, Math.PI * 2);
ctx.fill();
ctx.fillText('e^{iπ} = -1', centerX - radius + 15, centerY - 25);
}
// Reset when reached end
if (progress >= 1 && isAnimating) {
setTimeout(() => {
animationPhase = 0;
isAnimating = false;
}, 1000);
}
}
}
function animate() {
drawComplexPlane();
drawPoint();
animationId = requestAnimationFrame(animate);
}
function startAnimation() {
if (isAnimating) return;
isAnimating = true;
showVector = false;
if (mode === 'exponential') angle = 0;
else animationPhase = 0;
}
function pauseAnimation() {
isAnimating = false;
}
function resetAnimation() {
isAnimating = false;
angle = 0;
animationPhase = 0;
showVector = false;
drawComplexPlane();
drawPoint();
}
// Initialize
drawComplexPlane();
drawPoint();
// Event listeners
playBtn.addEventListener('click', startAnimation);
pauseBtn.addEventListener('click', pauseAnimation);
resetBtn.addEventListener('click', resetAnimation);
proofBtn.addEventListener('click', () => {
mode = (mode === 'exponential') ? 'proof' : 'exponential';
resetAnimation();
proofBtn.textContent = mode === 'exponential' ? 'Show Detailed Proof' : 'Show Exponential Visualization';
});
// Start animation on load
setTimeout(startAnimation, 1000);
animate();
</script>
</body>
</html>
```
## Key Features of this Visualization
1. **Beautiful Mathematical Rendering**: Uses MathJax to display Euler's identity and related equations in high-quality mathematical notation.
2. **Interactive Visualization**:
- Animated unit circle representation in the complex plane
- Dynamic vector showing the complex exponential function e^(iθ)
- Interactive transition from θ=0 to θ=π
3. **Step-by-Step Explanation**:
- Clear breakdown of Euler's formula
- Trigonometric substitution at θ=π
- Formal derivation of Euler's identity
4. **Interactive Controls**:
- Play/Pause/Reset buttons
- Toggle between exponential visualization and proof demonstration
- Smooth animations to illustrate the concept
5. **Responsive Design**:
- Adapts to different screen sizes
- Elegant color scheme with a dark astronomy-inspired theme
- Clean, modern UI with glassmorphism elements
The visualization demonstrates how as θ approaches π:
- The real part of e^(iθ) approaches -1
- The imaginary part approaches 0
- Thus e^(iπ) = -1, and adding 1 gives the identity
Simply open this file in any web browser to experience the interactive proof!Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Euler's Identity: e^(iπ) + 1 = 0</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #1e3c72, #2a5298);
color: white;
min-height: 100vh;
}
.container {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 2.5em;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.equation {
font-size: 3em;
background: rgba(255,255,255,0.1);
padding: 20px;
border-radius: 15px;
margin: 20px 0;
border: 2px solid rgba(255,255,255,0.3);
}
#canvas {
border: 2px solid white;
border-radius: 10px;
background: #000;
margin: 20px 0;
}
.controls {
margin: 20px 0;
}
button {
background: #ff6b6b;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 8px;
margin: 5px;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background: #ff5252;
transform: translateY(-2px);
}
.step {
background: rgba(255,255,255,0.1);
padding: 15px;
margin: 10px 0;
border-radius: 10px;
text-align: left;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s;
}
.step.visible {
opacity: 1;
transform: translateY(0);
}
.formula {
font-size: 1.2em;
color: #ffeb3b;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Euler's Identity: The Most Beautiful Equation</h1>
<div class="equation" id="mainEquation">e<sup>iπ</sup> + 1 = 0</div>
<canvas id="canvas" width="800" height="400"></canvas>
<div class="controls">
<button onclick="startProof()">Start Proof</button>
<button onclick="resetProof()">Reset</button>
<button onclick="skipToEnd()">Skip to End</button>
</div>
<div id="steps">
<div class="step">
<h3>Step 1: Euler's Formula</h3>
<p>We start with Euler's formula:</p>
<div class="formula">e<sup>ix</sup> = cos(x) + i·sin(x)</div>
<p>This connects exponential functions with trigonometric functions through complex numbers.</p>
</div>
<div class="step">
<h3>Step 2: Substitute π</h3>
<p>Let's substitute x = π into Euler's formula:</p>
<div class="formula">e<sup>iπ</sup> = cos(π) + i·sin(π)</div>
</div>
<div class="step">
<h3>Step 3: Evaluate Trigonometric Functions</h3>
<p>We know that:</p>
<div class="formula">cos(π) = -1</div>
<div class="formula">sin(π) = 0</div>
</div>
<div class="step">
<h3>Step 4: Substitute Values</h3>
<p>Substituting these values:</p>
<div class="formula">e<sup>iπ</sup> = -1 + i·0 = -1</div>
</div>
<div class="step">
<h3>Step 5: Final Result</h3>
<p>Therefore:</p>
<div class="formula">e<sup>iπ</sup> + 1 = -1 + 1 = 0</div>
<p><strong>Q.E.D.</strong> ✨</p>
</div>
</div>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let animationFrame;
let t = 0;
let step = 0;
function drawGrid() {
ctx.strokeStyle = '#333';
ctx.lineWidth = 1;
// Grid lines
for (let i = 0; i <= canvas.width; i += 40) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.stroke();
}
for (let i = 0; i <= canvas.height; i += 40) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(canvas.width, i);
ctx.stroke();
}
// Axes
ctx.strokeStyle = '#fff';
ctx.lineWidth = 2;
// X-axis
ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);
ctx.lineTo(canvas.width, canvas.height / 2);
ctx.stroke();
// Y-axis
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width / 2, canvas.height);
ctx.stroke();
}
function drawUnitCircle() {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 120;
ctx.strokeStyle = '#4CAF50';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.stroke();
// Labels
ctx.fillStyle = '#fff';
ctx.font = '16px Arial';
ctx.fillText('1', centerX + radius + 10, centerY + 5);
ctx.fillText('-1', centerX - radius - 25, centerY + 5);
ctx.fillText('i', centerX - 5, centerY - radius - 10);
ctx.fillText('-i', centerX - 10, centerY + radius + 25);
}
function drawEulerVisualization(progress) {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 120;
// Current angle (from 0 to π)
const angle = progress * Math.PI;
// Point on unit circle
const x = centerX + radius * Math.cos(angle);
const y = centerY - radius * Math.sin(angle); // Negative because canvas Y is flipped
// Draw line from center to point
ctx.strokeStyle = '#FF5722';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(x, y);
ctx.stroke();
// Draw point
ctx.fillStyle = '#FF5722';
ctx.beginPath();
ctx.arc(x, y, 8, 0, 2 * Math.PI);
ctx.fill();
// Draw angle arc
ctx.strokeStyle = '#FFEB3B';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(centerX, centerY, 40, 0, -angle, true);
ctx.stroke();
// Show coordinates
const realPart = Math.cos(angle).toFixed(3);
const imagPart = Math.sin(angle).toFixed(3);
ctx.fillStyle = '#fff';
ctx.font = '18px Arial';
ctx.fillText(`e^(i·${angle.toFixed(2)}) = ${realPart} + ${imagPart}i`, 10, 30);
// Highlight when we reach π
if (Math.abs(angle - Math.PI) < 0.1) {
ctx.fillStyle = '#FFD700';
ctx.font = '24px Arial';
ctx.fillText('e^(iπ) = -1 + 0i = -1', centerX - 120, centerY + 180);
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGrid();
drawUnitCircle();
if (step > 0) {
const progress = Math.min((t % 300) / 300, 1);
drawEulerVisualization(progress);
t++;
animationFrame = requestAnimationFrame(animate);
}
}
function showStep(stepIndex) {
const steps = document.querySelectorAll('.step');
if (stepIndex < steps.length) {
setTimeout(() => {
steps[stepIndex].classList.add('visible');
if (stepIndex < steps.length - 1) {
showStep(stepIndex + 1);
}
}, stepIndex * 1000);
}
}
function startProof() {
step = 1;
t = 0;
animate();
showStep(0);
}
function resetProof() {
step = 0;
t = 0;
if (animationFrame) {
cancelAnimationFrame(animationFrame);
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGrid();
drawUnitCircle();
const steps = document.querySelectorAll('.step');
steps.forEach(step => step.classList.remove('visible'));
}
function skipToEnd() {
step = 1;
t = 290;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGrid();
drawUnitCircle();
drawEulerVisualization(1);
const steps = document.querySelectorAll('.step');
steps.forEach(step => step.classList.add('visible'));
}
// Initialize
drawGrid();
drawUnitCircle();
</script>
</body>
</html>
```Drag to resize
Here is a self‑contained HTML file that animates a clear, step‑by‑step “video‑style” proof of Euler’s identity
\(e^{i\pi}+1=0\). Open the file in any modern browser to see the proof play out.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Euler's Identity Proof Animation</title>
<style>
body { margin:0; background:#111; color:#eee; font-family:Arial,Helvetica,sans-serif; }
canvas { display:block; margin:auto; background:#222; }
</style>
</head>
<body>
<canvas id="stage" width="800" height="500"></canvas>
<script>
// -----------------------------------------------------------
// Simple animation engine
// -----------------------------------------------------------
const canvas = document.getElementById('stage');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
// Utility
function centerText(txt, y, size = '24px') {
ctx.font = `${size} Arial`;
ctx.textAlign = 'center';
ctx.fillStyle = '#fff';
ctx.fillText(txt, W/2, y);
}
//-----------
// Animation frames (each frame is a function returning next frame)
// -----------------------------------------------------------
let frameIndex = 0;
let startTime = null;
function fadeIn(text, y, duration = 2000) {
let t0 = null;
return function(timestamp) {
if (!t0) t0 = timestamp;
const dt = timestamp - t0;
const alpha = Math.min(dt / duration, 1);
ctx.clearRect(0,0,W,H);
ctx.globalAlpha = alpha;
centerText(text, y);
ctx.globalAlpha = 1;
if (alpha < 1) requestAnimationFrame(fadeIn(text, y, duration));
else next();
};
}
function slideIn(formula, y, fromX, toX, duration = 1500) {
let t0 = null;
return function(timestamp) {
if (!t0) t0 = timestamp;
const dt = timestamp - t0;
const progress = Math.min(dt / duration, 1);
const x = fromX + (toX - fromX) * progress;
ctx.clearRect(0,0,W,H);
ctx.textAlign = 'center';
ctx.font = '28px Arial';
ctx.fillStyle = '#ffdd33';
ctx.fillText(formula, x, y);
if (progress < 1) requestAnimationFrame(slideIn(formula, y, fromX, toX, duration));
else next();
};
}
// -----------------------------------------------------------
// Steps of the proof
// -----------------------------------------------------------
function step0() {
// Title
const txt = "Euler's Identity – A Visual Proof";
requestAnimationFrame(fadeIn(txt, H/2));
}
function step1() { // Exponential series
const txt = "e^{x}=1+\\frac{x}{1!}+\\frac{x^{2}}{2!}+\\frac{x^{3}}{3!}+\\dots";
requestAnimationFrame(fadeIn(txt, H/3));
}
function step2() { // Cosine series
const txt = "\\cos x = 1-\\frac{x^{2}}{2!}+\\frac{x^{4}}{4!}-\\dots";
requestAnimationFrame(fadeIn(txt, H/3+50));
}
function step3() { // Sine series
const txt = "\\sin x = x-\\frac{x^{3}}{3!}+\\frac{x^{5}}{5!}-\\dots";
requestAnimationFrame(fadeIn(txt, H/3+100));
}
function step4() { // Combine to get e^{ix}
const formula = "e^{ix}=\\cos x + i\\sin x";
requestAnimationFrame(slideIn(formula, H/2, W+200, W/2));
}
function step5() { // Substitute x = π
const formula = "e^{iπ}=\\cos π + i\\sin π";
requestAnimationFrame(slideIn(formula, H/2+40, -200, W/2));
}
function step6() { // Evaluate cos π and sin π
const txt = "cos π = -1 , sin π = 0";
requestAnimationFrame(fadeIn(txt, H/2+80));
}
function step7() { // Final result e^{iπ} = -1
const txt = "Thus e^{iπ} = -1";
requestAnimationFrame(fadeIn(txt, H/2+120));
}
function step8() { // Add 1 on both sides
const txt = "e^{iπ}+1 = 0";
requestAnimationFrame(fadeIn(txt H/2+180));
}
function step9() { // Closing message
const txt = "A beautiful bridge between e, i, π, 1, and 0.";
requestAnimationFrame(fadeIn(txt, H-60));
}
// -----------------------------------------------------------
// Sequence controller
// -----------------------------------------------------------
const steps = [step0, step1, step2, step3, step4, step5, step6, step7, step8, step9];
function next() {
const fn = steps.shift();
if (fn) fn();
}
next(); // start animation
</script>
</body>
</html>
```
**How it works**
1. **Canvas animation** – The script draws text on a `<canvas>` element and uses `request to create smooth fades and slides, giving the feel of a short video.
2. **Proof flow** –
- Starts with the Taylor series of \(e^{x}\), \(\cos x\) and \(\sin x\).
- Shows the key identity \(e^{ix}= \cos x+i\sin x\).
- Substitutes \(x=\pi\), evaluates \(\cos\pi=-1\) and \(\sin\pi=0\).
- Concludes with \(e^{i\pi}+1=0\).
3. **No external resources** – All HTML, CSS, and JavaScript are bundled in a single file, so you can save it as `euler.html` and open it directly in any browser. Enjoy the animation!Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Euler's Identity Visualization</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
background-color: #fff;
display: block;
margin: 20px auto;
}
#explanation {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Visualizing Euler's Identity: e^(iπ) + 1 = 0</h1>
<p id="explanation">The animation will demonstrate Euler's formula step by step.</p>
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 150;
let angle = 0; // Start at 0 radians
const speed = 0.01; // Animation speed
function drawUnitCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the unit circle
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.stroke();
// Draw the real and imaginary axes
ctx.beginPath();
ctx.moveTo(centerX - radius, centerY);
ctx.lineTo(centerX + radius, centerY); // Real axis
ctx.moveTo(centerX, centerY - radius);
ctx.lineTo(centerX, centerY + radius); // Imaginary axis
ctx.strokeStyle = '#aaa';
ctx.stroke();
// Plot the point e^(iθ)
const x = centerX + radius * Math.cos(angle);
const y = centerY - radius * Math.sin(angle); // y is inverted for canvas
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
// Display current angle and values
ctx.font = '16px Arial';
ctx.fillStyle = '#000';
ctx.fillText(`θ: ${angle.toFixed(2)} radians`, 10, 20);
ctx.fillText(`e^(iθ) = cos(θ) + i sin(θ)`, 10, 40);
ctx.fillText(`Real: ${Math.cos(angle).toFixed(2)}`, 10, 60);
ctx.fillText(`Imaginary: ${Math.sin(angle).toFixed(2)}`, 10, 80);
if (angle >= Math.PI) {
// Highlight at π
ctx.fillStyle = 'blue';
ctx.fillText('e^(iπ) = -1 + 0i', 10, 100);
ctx.fillText('-1 + 1 = 0', 10, 120);
}
}
function animate() {
drawUnitCircle();
angle += speed;
if (angle <= 2 * Math.PI) {
requestAnimationFrame(animate);
} else {
document.getElementById('explanation').innerHTML = 'Animation complete: e^(iπ) + 1 = 0 is shown.';
}
}
animate(); // Start the animation
</script>
</body>
</html>
```Drag to resize