81 lines
2.4 KiB
HTML
Executable File
81 lines
2.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Oscillating Circle with Trajectory Reset</title>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
}
|
|
canvas {
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Oscillating Circle with Trajectory Reset</h1>
|
|
<label for="freqX">Frequency X: </label>
|
|
<input type="number" id="freqX" value="1">
|
|
<label for="freqY">Frequency Y: </label>
|
|
<input type="number" id="freqY" value="1">
|
|
<canvas id="canvas" width="500" height="500"></canvas>
|
|
|
|
<script>
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
let freqX = 1;
|
|
let freqY = 1;
|
|
let time = 0;
|
|
|
|
const updateFrequency = () => {
|
|
freqX = parseInt(document.getElementById("freqX").value);
|
|
freqY = parseInt(document.getElementById("freqY").value);
|
|
resetCanvas(); // Efface la trajectoire précédente
|
|
};
|
|
|
|
document.getElementById("freqX").addEventListener("input", updateFrequency);
|
|
document.getElementById("freqY").addEventListener("input", updateFrequency);
|
|
|
|
const animate = () => {
|
|
// Ne pas effacer tout le canvas pour laisser la trajectoire
|
|
const x = 250 + 200 * Math.sin(freqX * time);
|
|
const y = 250 + 200 * Math.cos(freqY * time);
|
|
|
|
// Dessine le cercle
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 2, 0, 2 * Math.PI);
|
|
ctx.fillStyle = 'blue';
|
|
ctx.fill();
|
|
|
|
time += 0.01; // Vitesse de rotation
|
|
|
|
requestAnimationFrame(animate);
|
|
};
|
|
|
|
// Réinitialise le canvas et le temps
|
|
const resetCanvas = () => {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height); // Efface tout le canvas
|
|
time = 0; // Réinitialise le temps
|
|
initCanvas(); // Redessine le fond
|
|
};
|
|
|
|
// Initialise le canvas avec un fond blanc
|
|
const initCanvas = () => {
|
|
ctx.fillStyle = 'white';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
};
|
|
|
|
initCanvas();
|
|
animate();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|