Hugging Face's logo

Spaces:
SaidAmchghal
/
simulation-de-gravit
Running

App Files Community
simulation-de-gravit / index.html
SaidAmchghal's picture
SaidAmchghal
Add 2 files
6255610 verified
raw
history blame contribute delete
33.6 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gravity Simulator - Comparaison interplanétaire</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.planet {
transition: transform 0.3s ease, box-shadow 0.3s ease;
will-change: transform;
}
.planet:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.gravity-well {
position: absolute;
border-radius: 50%;
opacity: 0.2;
transform: translate(-50%, -50%);
}
#simulationCanvas {
background: radial-gradient(circle at center, #1a202c 0%, #0f172a 100%);
border-radius: 12px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
.object {
position: absolute;
border-radius: 50%;
transform: translate(-50%, -50%);
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.floating {
animation: float 3s ease-in-out infinite;
}
.planet-stats {
position: absolute;
background: rgba(30, 41, 59, 0.8);
border-radius: 8px;
padding: 8px;
font-size: 12px;
pointer-events: none;
transform: translateX(-50%);
}
.fall-data {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(30, 41, 59, 0.8);
border-radius: 8px;
padding: 8px;
font-size: 12px;
text-align: center;
min-width: 120px;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8">
<header class="mb-10 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent">
Gravity Simulator
</h1>
<p class="text-xl text-gray-300 max-w-2xl mx-auto">
Comparez les effets de la gravité sur différentes planètes en temps réel
</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-10">
<!-- Contrôles -->
<div class="bg-gray-800 p-6 rounded-xl shadow-lg col-span-1">
<h2 class="text-2xl font-semibold mb-4 flex items-center">
<i class="fas fa-sliders-h mr-2 text-blue-400"></i> Paramètres
</h2>
<div class="mb-6">
<label class="block text-gray-300 mb-2">Planètes à comparer</label>
<div class="grid grid-cols-2 gap-2">
<button id="earthBtn" class="planet-btn bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded flex items-center justify-center">
<i class="fas fa-globe-americas mr-2"></i> Terre
</button>
<button id="moonBtn" class="planet-btn bg-gray-400 hover:bg-gray-500 text-gray-900 py-2 px-4 rounded flex items-center justify-center">
<i class="fas fa-moon mr-2"></i> Lune
</button>
<button id="marsBtn" class="planet-btn bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded flex items-center justify-center">
<i class="fas fa-globe mr-2"></i> Mars
</button>
<button id="jupiterBtn" class="planet-btn bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded flex items-center justify-center">
<i class="fas fa-globe mr-2"></i> Jupiter
</button>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2">Objet à lâcher</label>
<select id="objectType" class="w-full bg-gray-700 border border-gray-600 rounded py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="ball">Balle (1kg)</option>
<option value="feather">Plume (0.01kg)</option>
<option value="hammer">Marteau (5kg)</option>
<option value="car">Voiture (1000kg)</option>
</select>
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2">Hauteur de chute</label>
<input id="heightSlider" type="range" min="50" max="300" value="150" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between text-sm text-gray-400">
<span>50m</span>
<span id="heightValue">150m</span>
<span>300m</span>
</div>
</div>
<div class="flex space-x-3">
<button id="startBtn" class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded flex items-center justify-center">
<i class="fas fa-play mr-2"></i> Démarrer
</button>
<button id="resetBtn" class="flex-1 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded flex items-center justify-center">
<i class="fas fa-redo mr-2"></i> Réinitialiser
</button>
</div>
</div>
<!-- Simulation -->
<div class="bg-gray-800 p-6 rounded-xl shadow-lg col-span-2">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-semibold flex items-center">
<i class="fas fa-atom mr-2 text-purple-400"></i> Simulation
</h2>
<div class="text-sm bg-gray-700 px-3 py-1 rounded-full flex items-center">
<i class="fas fa-info-circle mr-1 text-blue-400"></i>
<span id="timeScale">Temps réel</span>
</div>
</div>
<div class="relative h-96 w-full" id="simulationContainer">
<canvas id="simulationCanvas" class="w-full h-full"></canvas>
<!-- Conteneurs pour les planètes sélectionnées -->
<div id="planetsContainer" class="absolute inset-0"></div>
<!-- Affichage des résultats -->
<div id="resultsPanel" class="absolute bottom-4 left-4 bg-gray-900 bg-opacity-80 p-3 rounded-lg hidden">
<div class="grid grid-cols-3 gap-4 text-sm">
<div>
<div class="text-gray-400">Temps de chute:</div>
<div id="fallTime" class="font-mono">0.00s</div>
</div>
<div>
<div class="text-gray-400">Vitesse finale:</div>
<div id="finalSpeed" class="font-mono">0.00 m/s</div>
</div>
<div>
<div class="text-gray-400">Force gravitationnelle:</div>
<div id="gravForce" class="font-mono">0.00 N</div>
</div>
</div>
</div>
</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4" id="planetStats">
<!-- Les statistiques des planètes seront ajoutées ici dynamiquement -->
</div>
</div>
</div>
<!-- Tableau comparatif -->
<div class="bg-gray-800 p-6 rounded-xl shadow-lg mb-10">
<h2 class="text-2xl font-semibold mb-4 flex items-center">
<i class="fas fa-table mr-2 text-green-400"></i> Données planétaires
</h2>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead class="bg-gray-700">
<tr>
<th class="py-3 px-4">Planète</th>
<th class="py-3 px-4">Gravité (m/s²)</th>
<th class="py-3 px-4">Masse (×10²⁴ kg)</th>
<th class="py-3 px-4">Rayon (km)</th>
<th class="py-3 px-4">Temps de chute de 100m</th>
<th class="py-3 px-4">Vitesse finale (100m)</th>
</tr>
</thead>
<tbody id="planetData">
<!-- Les données seront ajoutées dynamiquement -->
</tbody>
</table>
</div>
</div>
<!-- Explications scientifiques -->
<div class="bg-gray-800 p-6 rounded-xl shadow-lg">
<h2 class="text-2xl font-semibold mb-4 flex items-center">
<i class="fas fa-book-open mr-2 text-yellow-400"></i> Science de la gravité
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-lg font-medium mb-2 text-blue-300">Loi de la gravitation universelle</h3>
<p class="text-gray-300 mb-3">
La force gravitationnelle entre deux objets est donnée par la formule:
</p>
<div class="bg-gray-800 p-3 rounded font-mono text-center mb-3">
F = G × (m₁ × m₂) / r²
</div>
<p class="text-gray-300">
Où F est la force, G la constante gravitationnelle (6.674×10⁻¹¹ N·m²/kg²),
m₁ et m₂ les masses des objets, et r la distance entre leurs centres.
</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-lg font-medium mb-2 text-purple-300">Mouvement des corps en chute libre</h3>
<p class="text-gray-300 mb-3">
Pour un objet en chute libre près de la surface d'une planète:
</p>
<div class="bg-gray-800 p-3 rounded font-mono text-center mb-3">
v = √(2 × g × h)<br>
t = √(2 × h / g)
</div>
<p class="text-gray-300">
Où v est la vitesse finale, g l'accélération gravitationnelle,
h la hauteur de chute, et t le temps de chute.
</p>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Constantes physiques
const G = 6.67430e-11; // Constante gravitationnelle
const PLANETS = {
earth: { name: "Terre", color: "#3b82f6", g: 9.81, mass: 5.972, radius: 6371, emoji: "🌍" },
moon: { name: "Lune", color: "#9ca3af", g: 1.62, mass: 0.07346, radius: 1737, emoji: "🌕" },
mars: { name: "Mars", color: "#ef4444", g: 3.71, mass: 0.64171, radius: 3389, emoji: "♂️" },
jupiter: { name: "Jupiter", color: "#f59e0b", g: 24.79, mass: 1898.19, radius: 69911, emoji: "♃" }
};
const OBJECTS = {
ball: { name: "Balle", mass: 1, color: "#ffffff", radius: 10 },
feather: { name: "Plume", mass: 0.01, color: "#f3f4f6", radius: 5 },
hammer: { name: "Marteau", mass: 5, color: "#a1a1aa", radius: 12 },
car: { name: "Voiture", mass: 1000, color: "#60a5fa", radius: 15 }
};
// État de la simulation
let selectedPlanets = [];
let simulationRunning = false;
let animationId = null;
let startTime = null;
let objects = [];
let currentHeight = 150;
// Éléments DOM
const simulationContainer = document.getElementById('simulationContainer');
const simulationCanvas = document.getElementById('simulationCanvas');
const planetsContainer = document.getElementById('planetsContainer');
const planetStats = document.getElementById('planetStats');
const planetData = document.getElementById('planetData');
const heightSlider = document.getElementById('heightSlider');
const heightValue = document.getElementById('heightValue');
const objectType = document.getElementById('objectType');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const resultsPanel = document.getElementById('resultsPanel');
const fallTime = document.getElementById('fallTime');
const finalSpeed = document.getElementById('finalSpeed');
const gravForce = document.getElementById('gravForce');
// Initialisation du canvas
const ctx = simulationCanvas.getContext('2d');
simulationCanvas.width = simulationContainer.clientWidth;
simulationCanvas.height = simulationContainer.clientHeight;
// Gestionnaires d'événements
document.querySelectorAll('.planet-btn').forEach(btn => {
btn.addEventListener('click', function() {
const planetId = this.id.replace('Btn', '');
togglePlanetSelection(planetId);
});
});
heightSlider.addEventListener('input', function() {
currentHeight = parseInt(this.value);
heightValue.textContent = `${currentHeight}m`;
updateFallData();
});
startBtn.addEventListener('click', startSimulation);
resetBtn.addEventListener('click', resetSimulation);
// Fonctions
function togglePlanetSelection(planetId) {
const index = selectedPlanets.indexOf(planetId);
const btn = document.getElementById(`${planetId}Btn`);
if (index === -1) {
if (selectedPlanets.length < 3) {
selectedPlanets.push(planetId);
btn.classList.add('ring-2', 'ring-blue-400');
renderPlanetSelection();
updatePlanetDataTable();
updateFallData();
}
} else {
selectedPlanets.splice(index, 1);
btn.classList.remove('ring-2', 'ring-blue-400');
renderPlanetSelection();
updatePlanetDataTable();
updateFallData();
}
}
function renderPlanetSelection() {
planetsContainer.innerHTML = '';
planetStats.innerHTML = '';
if (selectedPlanets.length === 0) {
planetsContainer.innerHTML = `
<div class="absolute inset-0 flex items-center justify-center text-gray-500">
<div class="text-center">
<i class="fas fa-globe-europe text-5xl mb-4"></i>
<p>Sélectionnez au moins une planète pour commencer</p>
</div>
</div>
`;
return;
}
const containerWidth = simulationContainer.clientWidth;
const planetWidth = containerWidth / selectedPlanets.length;
selectedPlanets.forEach((planetId, index) => {
const planet = PLANETS[planetId];
const left = (index * planetWidth) + (planetWidth / 2);
// Création de la représentation visuelle de la planète
const planetEl = document.createElement('div');
planetEl.className = `planet absolute top-1/2 flex flex-col items-center`;
planetEl.style.left = `${left}px`;
planetEl.style.transform = 'translate(-50%, -50%)';
planetEl.innerHTML = `
<div class="w-16 h-16 rounded-full shadow-lg mb-2" style="background-color: ${planet.color}">
<div class="w-full h-full flex items-center justify-center text-2xl">
${planet.emoji}
</div>
</div>
<div class="text-sm font-medium">${planet.name}</div>
<div class="text-xs text-gray-400">${planet.g}m/s²</div>
`;
planetsContainer.appendChild(planetEl);
// Création du puits de gravité (effet visuel)
const gravityWell = document.createElement('div');
gravityWell.className = 'gravity-well';
gravityWell.style.width = `${planetWidth * 0.8}px`;
gravityWell.style.height = `${planetWidth * 0.8}px`;
gravityWell.style.left = `${left}px`;
gravityWell.style.top = '50%';
gravityWell.style.backgroundColor = planet.color;
planetsContainer.appendChild(gravityWell);
// Ajout des données de chute sous chaque planète
const fallDataEl = document.createElement('div');
fallDataEl.className = 'fall-data';
fallDataEl.style.left = `${left}px`;
fallDataEl.style.color = planet.color;
fallDataEl.innerHTML = `
<div>Hauteur: ${currentHeight}m</div>
<div>Temps: ${calculateFallTime(currentHeight, planet.g).toFixed(2)}s</div>
<div>Vitesse: ${calculateFinalSpeed(currentHeight, planet.g).toFixed(2)}m/s</div>
`;
fallDataEl.id = `fall-data-${planetId}`;
planetsContainer.appendChild(fallDataEl);
// Ajout des statistiques de la planète
const statsEl = document.createElement('div');
statsEl.className = 'bg-gray-700 p-4 rounded-lg';
statsEl.innerHTML = `
<div class="flex items-center mb-2">
<div class="w-6 h-6 rounded-full mr-2" style="background-color: ${planet.color}"></div>
<h3 class="font-medium">${planet.name}</h3>
</div>
<div class="grid grid-cols-2 gap-2 text-sm">
<div>
<div class="text-gray-400">Gravité:</div>
<div>${planet.g} m/s²</div>
</div>
<div>
<div class="text-gray-400">Masse:</div>
<div>${planet.mass} ×10²⁴ kg</div>
</div>
<div>
<div class="text-gray-400">Rayon:</div>
<div>${planet.radius} km</div>
</div>
<div>
<div class="text-gray-400">Poids de l'objet:</div>
<div id="weight-${planetId}">0 N</div>
</div>
</div>
`;
planetStats.appendChild(statsEl);
});
}
function calculateFallTime(height, gravity) {
return Math.sqrt(2 * height / gravity);
}
function calculateFinalSpeed(height, gravity) {
return Math.sqrt(2 * gravity * height);
}
function updateFallData() {
selectedPlanets.forEach(planetId => {
const planet = PLANETS[planetId];
const fallDataEl = document.getElementById(`fall-data-${planetId}`);
if (fallDataEl) {
fallDataEl.innerHTML = `
<div>Hauteur: ${currentHeight}m</div>
<div>Temps: ${calculateFallTime(currentHeight, planet.g).toFixed(2)}s</div>
<div>Vitesse: ${calculateFinalSpeed(currentHeight, planet.g).toFixed(2)}m/s</div>
`;
}
});
}
function updatePlanetDataTable() {
planetData.innerHTML = '';
Object.keys(PLANETS).forEach(planetId => {
const planet = PLANETS[planetId];
const isSelected = selectedPlanets.includes(planetId);
const fallTime100m = calculateFallTime(100, planet.g);
const finalSpeed100m = calculateFinalSpeed(100, planet.g);
const row = document.createElement('tr');
row.className = isSelected ? 'bg-gray-700' : 'border-b border-gray-700';
row.innerHTML = `
<td class="py-3 px-4 flex items-center">
${isSelected ? `<span class="w-2 h-2 rounded-full mr-2" style="background-color: ${planet.color}"></span>` : ''}
${planet.name}
</td>
<td class="py-3 px-4">${planet.g}</td>
<td class="py-3 px-4">${planet.mass}</td>
<td class="py-3 px-4">${planet.radius}</td>
<td class="py-3 px-4">${fallTime100m.toFixed(2)} s</td>
<td class="py-3 px-4">${finalSpeed100m.toFixed(2)} m/s</td>
`;
planetData.appendChild(row);
});
}
function startSimulation() {
if (selectedPlanets.length === 0 || simulationRunning) return;
simulationRunning = true;
startBtn.disabled = true;
startTime = Date.now();
objects = [];
const height = currentHeight;
const object = OBJECTS[objectType.value];
// Créer un objet pour chaque planète sélectionnée
selectedPlanets.forEach((planetId, index) => {
const planet = PLANETS[planetId];
const containerWidth = simulationContainer.clientWidth;
const planetWidth = containerWidth / selectedPlanets.length;
const planetX = (index * planetWidth) + (planetWidth / 2);
const obj = {
planetId,
x: planetX,
y: 50,
vy: 0,
mass: object.mass,
radius: object.radius,
color: object.color,
planetX,
planetY: simulationContainer.clientHeight / 2,
g: planet.g,
height,
falling: false,
startTime: null,
fallDuration: null,
finalSpeed: null,
statsEl: null
};
// Créer l'élément pour afficher les stats en temps réel
obj.statsEl = document.createElement('div');
obj.statsEl.className = 'planet-stats';
obj.statsEl.style.left = `${planetX}px`;
obj.statsEl.style.top = '20px';
obj.statsEl.style.color = planet.color;
obj.statsEl.innerHTML = `
<div>Temps: <span class="time-value">0.00</span>s</div>
<div>Vitesse: <span class="speed-value">0.00</span>m/s</div>
`;
planetsContainer.appendChild(obj.statsEl);
objects.push(obj);
// Mettre à jour le poids affiché
const weightEl = document.getElementById(`weight-${planetId}`);
if (weightEl) {
weightEl.textContent = `${(object.mass * planet.g).toFixed(2)} N`;
}
});
// Démarrer l'animation
animate();
// Afficher le panneau de résultats après un délai
setTimeout(() => {
resultsPanel.classList.remove('hidden');
}, 500);
}
function animate() {
animationId = requestAnimationFrame(animate);
const now = Date.now();
const elapsedTime = (now - startTime) / 1000;
// Effacer le canvas
ctx.clearRect(0, 0, simulationCanvas.width, simulationCanvas.height);
// Dessiner les étoiles en arrière-plan
drawStars();
// Mettre à jour et dessiner chaque objet
objects.forEach(obj => {
if (!obj.falling && elapsedTime > 1) {
obj.falling = true;
obj.startTime = now;
}
if (obj.falling) {
// Calculer la position en fonction de la gravité
const fallTime = (now - obj.startTime) / 1000;
// Formule de chute libre: y = y0 + 0.5 * g * t^2
// On ajuste l'échelle pour que la chute soit visible à l'écran
const scaleFactor = (simulationCanvas.height / 2 - 50) / obj.height;
obj.y = 50 + 0.5 * obj.g * fallTime * fallTime * scaleFactor;
// Vitesse: v = g * t
obj.vy = obj.g * fallTime;
// Mettre à jour les stats en temps réel
if (obj.statsEl) {
obj.statsEl.querySelector('.time-value').textContent = fallTime.toFixed(2);
obj.statsEl.querySelector('.speed-value').textContent = obj.vy.toFixed(2);
}
// Vérifier si l'objet a atteint le sol
if (obj.y >= obj.planetY - 30) {
obj.y = obj.planetY - 30;
obj.falling = false;
obj.fallDuration = fallTime;
obj.finalSpeed = obj.vy;
// Mettre à jour l'affichage des résultats
updateResults();
}
}
// Dessiner l'objet
ctx.beginPath();
ctx.arc(obj.x, obj.y, obj.radius, 0, Math.PI * 2);
ctx.fillStyle = obj.color;
ctx.fill();
ctx.closePath();
// Dessiner une ombre
ctx.beginPath();
ctx.ellipse(obj.x, obj.y + obj.radius + 2, obj.radius, obj.radius/3, 0, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(0,0,0,0.3)';
ctx.fill();
ctx.closePath();
});
}
function drawStars() {
ctx.fillStyle = 'white';
// Dessiner des étoiles aléatoires
for (let i = 0; i < 50; i++) {
const x = Math.random() * simulationCanvas.width;
const y = Math.random() * simulationCanvas.height;
const radius = Math.random() * 1.5;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
}
}
function updateResults() {
if (objects.length === 0) return;
// Trouver l'objet avec le temps de chute le plus long
const longestFall = objects.reduce((prev, current) => {
return (prev.fallDuration || 0) > (current.fallDuration || 0) ? prev : current;
});
if (longestFall.fallDuration) {
fallTime.textContent = `${longestFall.fallDuration.toFixed(2)}s`;
finalSpeed.textContent = `${longestFall.finalSpeed.toFixed(2)} m/s`;
// Calculer la force gravitationnelle (poids)
const planet = PLANETS[longestFall.planetId];
const object = OBJECTS[objectType.value];
const force = object.mass * planet.g;
gravForce.textContent = `${force.toFixed(2)} N`;
}
}
function resetSimulation() {
if (animationId) {
cancelAnimationFrame(animationId);
animationId = null;
}
simulationRunning = false;
startBtn.disabled = false;
// Supprimer les éléments de stats
objects.forEach(obj => {
if (obj.statsEl && obj.statsEl.parentNode) {
obj.statsEl.parentNode.removeChild(obj.statsEl);
}
});
objects = [];
// Effacer le canvas
ctx.clearRect(0, 0, simulationCanvas.width, simulationCanvas.height);
// Cacher le panneau de résultats
resultsPanel.classList.add('hidden');
// Réinitialiser les valeurs affichées
fallTime.textContent = '0.00s';
finalSpeed.textContent = '0.00 m/s';
gravForce.textContent = '0.00 N';
// Mettre à jour les poids à 0
selectedPlanets.forEach(planetId => {
const weightEl = document.getElementById(`weight-${planetId}`);
if (weightEl) {
weightEl.textContent = '0 N';
}
});
}
// Initialisation
updatePlanetDataTable();
// Redimensionnement responsive
window.addEventListener('resize', function() {
simulationCanvas.width = simulationContainer.clientWidth;
simulationCanvas.height = simulationContainer.clientHeight;
renderPlanetSelection();
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SaidAmchghal/simulation-de-gravit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>