Sindbad~EG File Manager

Current Path : /home/beeson/public_html/WebMathXpert/

Current File : //home/beeson/public_html/WebMathXpert/AnimationTest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Sine Wave Animation</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; }
        svg { border: 1px solid black; }
    </style>
</head>
<body>

<h3>Animating sin(a * x) as 'a' changes</h3>
<svg id="graph" width="600" height="200" viewBox="0 -1.5 6 3">
    <path id="wave" stroke="blue" stroke-width="0.05" fill="none"></path>
</svg>
<br>
<button onclick="startAnimation()">Animate</button>

<script>
const numFrames = 100;  // Number of parameter steps
const paths = [];       // Store precomputed paths
const wave = document.getElementById("wave");

// Generate all paths for different values of 'a'
for (let i = 0; i < numFrames; i++) {
    const a = 0.5 + (i / numFrames) * 2;  // 'a' varies from 0.5 to 2.5
    let d = "M 0 " + Math.sin(a * 0);  // Start path
    for (let x = 0.1; x <= 6; x += 0.1) {
        d += ` L ${x} ${Math.sin(a * x)}`;
    }
    paths.push(d);
}

let frame = 0;
function animate() {
    wave.setAttribute("d", paths[frame]);  // Update path data
    frame = (frame + 1) % numFrames;       // Loop over frames
    requestAnimationFrame(animate);
}

function startAnimation() {
    frame = 0;
    animate();
}
</script>

</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists