cptluke76/Deep-Impact
1
0
Fork 0
mirror of https://github.com/its-michaelroy/Deep-Impact.git synced 2026-06-04 10:20:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated simulation ui

Browse Source
This commit is contained in:
Dan
2024-05-19 11:50:56 -04:00
parent 3c35f78d8f
commit 75ea879b87
1 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/pages/scenario.jsx
View File

@@ -5,7 +5,7 @@ import axios from 'axios';
const EARTH_RADIUS_KM = 6371; // Earth's radius in kilometers const EARTH_RADIUS_KM = 6371; // Earth's radius in kilometers
const EARTH_DISPLAY_SCALE = 0.01; // Display scale for Earth const EARTH_DISPLAY_SCALE = 0.01; // Display scale for Earth
const ASTEROID_DISPLAY_SCALE = 0.3; // Display scale for asteroids const ASTEROID_DISPLAY_SCALE = 0.4; // Display scale for asteroids
const G = 1e-8; // Gravitational constant for simulation const G = 1e-8; // Gravitational constant for simulation
const EARTH_MASS = 5.972e6; // Scaled down mass of Earth for simulation const EARTH_MASS = 5.972e6; // Scaled down mass of Earth for simulation
const ASTEROID_DENSITY = 2000; // Density in kg/m^3 const ASTEROID_DENSITY = 2000; // Density in kg/m^3
@@ -16,7 +16,7 @@ const EARTH_X = CANVAS_WIDTH - 100;
const EARTH_Y = CANVAS_HEIGHT / 2; const EARTH_Y = CANVAS_HEIGHT / 2;
const SIMULATION_AREA_MULTIPLIER = 2; // Extend the simulation area const SIMULATION_AREA_MULTIPLIER = 2; // Extend the simulation area
const ROCKET_SPEED = 0.025; // Reduced speed of the rocket const ROCKET_SPEED = 0.025; // Reduced speed of the rocket
const ROCKET_RADIUS = 10;
function Scenario() { function Scenario() {
const [asteroid, setAsteroid] = useState({ const [asteroid, setAsteroid] = useState({
name: '', name: '',
@@ -213,7 +213,7 @@ function Scenario() {
setRocketDistance(rocketDistance); setRocketDistance(rocketDistance);
if (rocketDistance <= asteroid.size * ASTEROID_DISPLAY_SCALE && !collisionOccurred) { if (rocketDistance <= (asteroid.size * ASTEROID_DISPLAY_SCALE+ROCKET_RADIUS) && !collisionOccurred) {
setSimulationResult('Rocket intercepted the asteroid!'); setSimulationResult('Rocket intercepted the asteroid!');
setIsSimulating(false); setIsSimulating(false);
return; return;
@@ -257,7 +257,7 @@ function Scenario() {
return ( return (
<> <>
<Box sx={{ padding: '20px', maxWidth: '800px', margin: '0 auto', textAlign: 'center' }}> <Box sx={{ padding: '20px', maxWidth: '800px', margin: '0 auto', textAlign: 'center' }}>
<Typography variant="h4" gutterBottom> <Typography variant="h4" gutterBottom color="white">
Asteroid Collision Scenario Asteroid Collision Scenario
</Typography> </Typography>
<Box sx={{ marginBottom: '20px' }}> <Box sx={{ marginBottom: '20px' }}>
@@ -266,6 +266,7 @@ function Scenario() {
onChange={handleAsteroidSelect} onChange={handleAsteroidSelect}
displayEmpty displayEmpty
fullWidth fullWidth
style={{ color: 'white' }}
> >
{asteroidsData.current.map((ast, index) => ( {asteroidsData.current.map((ast, index) => (
<MenuItem key={index} value={index}> <MenuItem key={index} value={index}>
@@ -280,6 +281,7 @@ function Scenario() {
onChange={(e) => setStrategy(e.target.value)} onChange={(e) => setStrategy(e.target.value)}
displayEmpty displayEmpty
fullWidth fullWidth
style={{ color: 'white' }}
> >
<MenuItem value="">Select Deflection Strategy</MenuItem> <MenuItem value="">Select Deflection Strategy</MenuItem>
<MenuItem value="Nuclear Detonation">Nuclear Detonation</MenuItem> <MenuItem value="Nuclear Detonation">Nuclear Detonation</MenuItem>
@@ -296,21 +298,21 @@ function Scenario() {
</Button> </Button>
{simulationResult && ( {simulationResult && (
<Box sx={{ marginBottom: '20px' }}> <Box sx={{ marginBottom: '20px' }}>
<Typography variant="h6">Simulation Result</Typography> <Typography variant="h6" color="white">Simulation Result</Typography>
<Typography>{simulationResult}</Typography> <Typography color="white">{simulationResult}</Typography>
</Box> </Box>
)} )}
{asteroid.name && ( {asteroid.name && (
<Box sx={{ marginBottom: '20px' }}> <Box sx={{ marginBottom: '20px' }}>
<Typography variant="h6">Asteroid Information</Typography> <Typography variant="h6" color="white">Asteroid Information</Typography>
<Typography><strong>Name:</strong> {asteroid.name}</Typography> <Typography color="white"><strong>Name:</strong> {asteroid.name}</Typography>
<Typography><strong>Size:</strong> {asteroid.size.toFixed(3)} kilometers</Typography> <Typography color="white"><strong>Size:</strong> {asteroid.size.toFixed(3)} kilometers</Typography>
<Typography><strong>Speed:</strong> {(asteroid.speed * 1000).toFixed(3)} km/s</Typography> <Typography color="white"><strong>Speed:</strong> {(asteroid.speed * 1000).toFixed(3)} km/s</Typography>
<Typography><strong>Mass:</strong> {asteroid.mass.toExponential(3)} kg</Typography> <Typography color="white"><strong>Mass:</strong> {asteroid.mass.toExponential(3)} kg</Typography>
</Box> </Box>
)} )}
<Box sx={{ marginBottom: '20px' }}> <Box sx={{ marginBottom: '20px' }}>
<Typography>Time Step: {timeStep}</Typography> <Typography color="white">Time Step: {timeStep}</Typography>
<Slider <Slider
value={timeStep} value={timeStep}
min={10} min={10}
@@ -321,7 +323,7 @@ function Scenario() {
/> />
</Box> </Box>
<Box sx={{ marginBottom: '20px' }}> <Box sx={{ marginBottom: '20px' }}>
<Typography>Initial Angle: {(asteroid.angle * 180 / Math.PI).toFixed(2)}°</Typography> <Typography color="white">Initial Angle: {(asteroid.angle * 180 / Math.PI).toFixed(2)}°</Typography>
<Slider <Slider
value={asteroid.angle} value={asteroid.angle}
min={0} min={0}
@@ -334,20 +336,22 @@ function Scenario() {
</Box> </Box>
<Stage width={CANVAS_WIDTH} height={CANVAS_HEIGHT}> <Stage width={CANVAS_WIDTH} height={CANVAS_HEIGHT}>
<Layer> <Layer>
<Text text="Earth" fontSize={20} x={EARTH_X - EARTH_RADIUS_KM * EARTH_DISPLAY_SCALE} y={EARTH_Y - 10} /> <Text text="Earth" fontSize={20} x={EARTH_X - EARTH_RADIUS_KM * EARTH_DISPLAY_SCALE} y={EARTH_Y - 10} fill="white" />
<Circle x={EARTH_X} y={EARTH_Y} radius={EARTH_RADIUS_KM * EARTH_DISPLAY_SCALE} fill="blue" /> <Circle x={EARTH_X} y={EARTH_Y} radius={EARTH_RADIUS_KM * EARTH_DISPLAY_SCALE} fill="blue" stroke="black" strokeWidth={1}/>
<Circle x={asteroid.x} y={asteroid.y} radius={asteroid.size * ASTEROID_DISPLAY_SCALE} fill="gray" stroke="black" strokeWidth={1} /> <Circle x={asteroid.x} y={asteroid.y} radius={asteroid.size * ASTEROID_DISPLAY_SCALE} fill="white" stroke="black" strokeWidth={1} />
{trajectoryPoints.length > 0 && (
<Line points={trajectoryPoints.flat()} stroke="red" strokeWidth={2} />
)}
{forecastPoints.length > 0 && ( {forecastPoints.length > 0 && (
<Line points={forecastPoints} stroke="gray" strokeWidth={2} dash={[10, 10]} /> <Line points={forecastPoints} stroke="white" strokeWidth={2} dash={[10, 10]} />
)} )}
{rocket.active && (
<Circle x={rocket.x} y={rocket.y} radius={5} fill="red" /> {trajectoryPoints.length > 0 && (
<Line points={trajectoryPoints.flat()} stroke="red" strokeWidth={3} />
)}
{(
<Circle x={rocket.x} y={rocket.y} radius={ROCKET_RADIUS} fill="green" stroke="black" strokeWidth={1}/>
)} )}
{rocket.trajectory.length > 0 && ( {rocket.trajectory.length > 0 && (
<Line points={rocket.trajectory} stroke="green" strokeWidth={2} /> <Line points={rocket.trajectory} stroke="green" strokeWidth={3} />
)} )}
</Layer> </Layer>
</Stage> </Stage>