mirror of
https://github.com/its-michaelroy/Deep-Impact.git
synced 2026-06-04 02:20:41 +00:00
359 lines
12 KiB
JavaScript
359 lines
12 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Stage, Layer, Circle, Text, Line } from 'react-konva';
|
|
import { Slider, Button, MenuItem, Select, Typography, Box } from '@mui/material';
|
|
import axios from 'axios';
|
|
|
|
const EARTH_RADIUS_KM = 6371; // Earth's radius in kilometers
|
|
const EARTH_DISPLAY_SCALE = 0.01; // Display scale for Earth
|
|
const ASTEROID_DISPLAY_SCALE = 0.3; // Display scale for asteroids
|
|
const G = 1e-8; // Gravitational constant for simulation
|
|
const EARTH_MASS = 5.972e6; // Scaled down mass of Earth for simulation
|
|
const ASTEROID_DENSITY = 2000; // Density in kg/m^3
|
|
|
|
const CANVAS_WIDTH = window.innerWidth;
|
|
const CANVAS_HEIGHT = window.innerHeight;
|
|
const EARTH_X = CANVAS_WIDTH - 100;
|
|
const EARTH_Y = CANVAS_HEIGHT / 2;
|
|
const SIMULATION_AREA_MULTIPLIER = 2; // Extend the simulation area
|
|
const ROCKET_SPEED = 0.025; // Reduced speed of the rocket
|
|
|
|
function Scenario() {
|
|
const [asteroid, setAsteroid] = useState({
|
|
name: '',
|
|
size: 1,
|
|
speed: 0.05,
|
|
mass: 1,
|
|
angle: Math.PI / 9,
|
|
x: 100,
|
|
y: CANVAS_HEIGHT / 2 - 100,
|
|
});
|
|
const [trajectoryPoints, setTrajectoryPoints] = useState([]);
|
|
const [forecastPoints, setForecastPoints] = useState([]);
|
|
const animationRef = useRef();
|
|
const asteroidsData = useRef([]);
|
|
const [isSimulating, setIsSimulating] = useState(false);
|
|
const [simulationResult, setSimulationResult] = useState('');
|
|
const [strategy, setStrategy] = useState(''); // State for selected strategy
|
|
const [timeStep, setTimeStep] = useState(100); // State for time step
|
|
const [rocket, setRocket] = useState({
|
|
active: false,
|
|
x: EARTH_X,
|
|
y: EARTH_Y,
|
|
trajectory: [],
|
|
vx: 0,
|
|
vy: 0,
|
|
});
|
|
const [rocketDistance, setRocketDistance] = useState(10000);
|
|
const [collisionOccurred, setCollisionOccurred] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchAsteroids = async () => {
|
|
try {
|
|
const response = await axios.get('http://localhost:8080/api/sentry/');
|
|
asteroidsData.current = response.data.near_earth_objects;
|
|
setAsteroidData(0); // Set initial asteroid
|
|
} catch (error) {
|
|
console.error('Error fetching asteroid data:', error);
|
|
}
|
|
};
|
|
fetchAsteroids();
|
|
}, []);
|
|
|
|
const estimateMass = (diameter) => {
|
|
const radius = diameter / 2;
|
|
const volume = (4 / 3) * Math.PI * Math.pow(radius, 3);
|
|
return volume * ASTEROID_DENSITY;
|
|
};
|
|
|
|
const setAsteroidData = (index) => {
|
|
const asteroidData = asteroidsData.current[index];
|
|
console.log('Asteroid Data:', asteroidData);
|
|
const size = asteroidData.estimated_diameter.kilometers.estimated_diameter_max;
|
|
const mass = estimateMass(size);
|
|
const speed = asteroidData.close_approach_data[0].relative_velocity.kilometers_per_second / 1000;
|
|
setAsteroid({
|
|
name: asteroidData.name,
|
|
size: size,
|
|
speed: speed,
|
|
mass: mass,
|
|
angle: Math.PI / 9,
|
|
x: 100,
|
|
y: CANVAS_HEIGHT / 2 - 100,
|
|
});
|
|
setTrajectoryPoints([]);
|
|
calculateForecastPath(size, speed, Math.PI / 9, mass); // Calculate the forecast path once
|
|
setRocket({ active: false, x: EARTH_X, y: EARTH_Y, trajectory: [], vx: 0, vy: 0 });
|
|
setRocketDistance(10000);
|
|
setCollisionOccurred(false);
|
|
};
|
|
|
|
const handleAsteroidSelect = (event) => {
|
|
setAsteroidData(event.target.value);
|
|
};
|
|
|
|
const calculateForecastPath = (size, speed, angle, mass) => {
|
|
let x = 100;
|
|
let y = CANVAS_HEIGHT / 2 - 100;
|
|
let vx = speed * Math.cos(angle);
|
|
let vy = speed * Math.sin(angle);
|
|
const points = [];
|
|
let iterationCount = 0;
|
|
const maxIterations = 2000; // Extended limit to allow for longer forecast
|
|
|
|
while (true) {
|
|
const dx = EARTH_X - x;
|
|
const dy = EARTH_Y - y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
// Check if the asteroid hits Earth
|
|
if (distance <= EARTH_RADIUS_KM * EARTH_DISPLAY_SCALE + size * ASTEROID_DISPLAY_SCALE) {
|
|
break;
|
|
}
|
|
|
|
// Apply gravitational force
|
|
const force = (G * EARTH_MASS * mass) / (distance * distance);
|
|
const ax = force * (dx / distance) / mass;
|
|
const ay = force * (dy / distance) / mass;
|
|
|
|
vx += ax * timeStep;
|
|
vy += ay * timeStep;
|
|
|
|
x += vx * timeStep;
|
|
y += vy * timeStep;
|
|
|
|
points.push(x, y);
|
|
|
|
iterationCount++;
|
|
if (iterationCount >= maxIterations) {
|
|
break;
|
|
}
|
|
|
|
// Stop the loop if the asteroid goes off screen
|
|
if (y > CANVAS_HEIGHT * SIMULATION_AREA_MULTIPLIER || x > CANVAS_WIDTH * SIMULATION_AREA_MULTIPLIER || y < -CANVAS_HEIGHT * SIMULATION_AREA_MULTIPLIER || x < -CANVAS_WIDTH * SIMULATION_AREA_MULTIPLIER) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
setForecastPoints(points);
|
|
};
|
|
|
|
const applyVelocityImpulse = (asteroid, strategy, rocketDx, rocketDy) => {
|
|
let impulseX = 0;
|
|
let impulseY = 0;
|
|
const angle = Math.atan2(rocketDy, rocketDx);
|
|
if (strategy === 'Nuclear Detonation') {
|
|
impulseX = 0.01 * Math.cos(angle);
|
|
impulseY = 0.01 * Math.sin(angle);
|
|
} else if (strategy === 'Kinetic Impact') {
|
|
impulseX = 0.005 * Math.cos(angle);
|
|
impulseY = 0.005 * Math.sin(angle);
|
|
}
|
|
return { vx: asteroid.vx + impulseX, vy: asteroid.vy + impulseY };
|
|
};
|
|
|
|
const simulate = () => {
|
|
let { x, y, speed, angle, mass } = asteroid;
|
|
|
|
let vx = speed * Math.cos(angle);
|
|
let vy = speed * Math.sin(angle);
|
|
|
|
const updateFrame = () => {
|
|
const dx = EARTH_X - x;
|
|
const dy = EARTH_Y - y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance <= EARTH_RADIUS_KM * EARTH_DISPLAY_SCALE + asteroid.size * ASTEROID_DISPLAY_SCALE) {
|
|
setSimulationResult('Asteroid collided with Earth!');
|
|
setIsSimulating(false);
|
|
return;
|
|
}
|
|
|
|
// Apply gravitational force
|
|
const force = (G * EARTH_MASS * mass) / (distance * distance);
|
|
const ax = force * (dx / distance) / mass;
|
|
const ay = force * (dy / distance) / mass;
|
|
|
|
vx += ax * timeStep;
|
|
vy += ay * timeStep;
|
|
|
|
x += vx * timeStep;
|
|
y += vy * timeStep;
|
|
|
|
// Update rocket position
|
|
setRocket((prev) => {
|
|
const rocketDx = x - prev.x;
|
|
const rocketDy = y - prev.y;
|
|
const rocketDistance = Math.sqrt(rocketDx * rocketDx + rocketDy * rocketDy);
|
|
const rocketAngle = Math.atan2(rocketDy, rocketDx);
|
|
|
|
const rocketVX = ROCKET_SPEED * Math.cos(rocketAngle);
|
|
const rocketVY = ROCKET_SPEED * Math.sin(rocketAngle);
|
|
|
|
const newX = prev.x + rocketVX * timeStep;
|
|
const newY = prev.y + rocketVY * timeStep;
|
|
|
|
if (rocketDistance <= asteroid.size * ASTEROID_DISPLAY_SCALE && !collisionOccurred) {
|
|
const newVelocity = applyVelocityImpulse({ vx, vy }, strategy, rocketDx, rocketDy);
|
|
vx = newVelocity.vx;
|
|
vy = newVelocity.vy;
|
|
setSimulationResult('Rocket intercepted the asteroid!');
|
|
setCollisionOccurred(true); // Mark collision occurred
|
|
return { ...prev, active: false, x: newX, y: newY, vx: 0, vy: 0 }; // Stop the rocket
|
|
}
|
|
|
|
return {
|
|
...prev,
|
|
x: newX,
|
|
y: newY,
|
|
vx: prev.active ? rocketVX : 0, // Stop velocity if inactive
|
|
vy: prev.active ? rocketVY : 0, // Stop velocity if inactive
|
|
trajectory: [...prev.trajectory, newX, newY],
|
|
};
|
|
});
|
|
|
|
setRocketDistance(rocketDistance);
|
|
|
|
if (rocketDistance <= asteroid.size * ASTEROID_DISPLAY_SCALE && !collisionOccurred) {
|
|
setSimulationResult('Rocket intercepted the asteroid!');
|
|
setIsSimulating(false);
|
|
return;
|
|
}
|
|
|
|
if (y > CANVAS_HEIGHT * SIMULATION_AREA_MULTIPLIER || x > CANVAS_WIDTH * SIMULATION_AREA_MULTIPLIER || y < -CANVAS_HEIGHT * SIMULATION_AREA_MULTIPLIER || x < -CANVAS_WIDTH * SIMULATION_AREA_MULTIPLIER) {
|
|
setSimulationResult('Asteroid missed Earth!');
|
|
setIsSimulating(false);
|
|
return;
|
|
}
|
|
|
|
setAsteroid((prev) => ({ ...prev, x, y }));
|
|
setTrajectoryPoints((prev) => [...prev, x, y]);
|
|
animationRef.current = window.requestAnimationFrame(updateFrame);
|
|
};
|
|
|
|
setIsSimulating(true);
|
|
setSimulationResult('');
|
|
animationRef.current = window.requestAnimationFrame(updateFrame);
|
|
};
|
|
|
|
const handleSimulate = () => {
|
|
if (isSimulating) {
|
|
setIsSimulating(false);
|
|
window.cancelAnimationFrame(animationRef.current);
|
|
setSimulationResult('Simulation stopped.');
|
|
} else {
|
|
simulate();
|
|
}
|
|
};
|
|
|
|
const handleTimeStepChange = (event, newValue) => {
|
|
setTimeStep(newValue);
|
|
};
|
|
|
|
const handleAngleChange = (event, newValue) => {
|
|
setAsteroid((prev) => ({ ...prev, angle: newValue }));
|
|
calculateForecastPath(asteroid.size, asteroid.speed, newValue, asteroid.mass);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Box sx={{ padding: '20px', maxWidth: '800px', margin: '0 auto', textAlign: 'center' }}>
|
|
<Typography variant="h4" gutterBottom>
|
|
Asteroid Collision Scenario
|
|
</Typography>
|
|
<Box sx={{ marginBottom: '20px' }}>
|
|
<Select
|
|
value={asteroid.name}
|
|
onChange={handleAsteroidSelect}
|
|
displayEmpty
|
|
fullWidth
|
|
>
|
|
{asteroidsData.current.map((ast, index) => (
|
|
<MenuItem key={index} value={index}>
|
|
{ast.name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</Box>
|
|
<Box sx={{ marginBottom: '20px' }}>
|
|
<Select
|
|
value={strategy}
|
|
onChange={(e) => setStrategy(e.target.value)}
|
|
displayEmpty
|
|
fullWidth
|
|
>
|
|
<MenuItem value="">Select Deflection Strategy</MenuItem>
|
|
<MenuItem value="Nuclear Detonation">Nuclear Detonation</MenuItem>
|
|
<MenuItem value="Kinetic Impact">Kinetic Impact</MenuItem>
|
|
</Select>
|
|
</Box>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={handleSimulate}
|
|
style={{ marginBottom: '20px' }}
|
|
>
|
|
{isSimulating ? 'Stop Simulation' : 'Simulate'}
|
|
</Button>
|
|
{simulationResult && (
|
|
<Box sx={{ marginBottom: '20px' }}>
|
|
<Typography variant="h6">Simulation Result</Typography>
|
|
<Typography>{simulationResult}</Typography>
|
|
</Box>
|
|
)}
|
|
{asteroid.name && (
|
|
<Box sx={{ marginBottom: '20px' }}>
|
|
<Typography variant="h6">Asteroid Information</Typography>
|
|
<Typography><strong>Name:</strong> {asteroid.name}</Typography>
|
|
<Typography><strong>Size:</strong> {asteroid.size.toFixed(3)} kilometers</Typography>
|
|
<Typography><strong>Speed:</strong> {(asteroid.speed * 1000).toFixed(3)} km/s</Typography>
|
|
<Typography><strong>Mass:</strong> {asteroid.mass.toExponential(3)} kg</Typography>
|
|
</Box>
|
|
)}
|
|
<Box sx={{ marginBottom: '20px' }}>
|
|
<Typography>Time Step: {timeStep}</Typography>
|
|
<Slider
|
|
value={timeStep}
|
|
min={10}
|
|
max={500}
|
|
step={10}
|
|
onChange={handleTimeStepChange}
|
|
aria-labelledby="time-step-slider"
|
|
/>
|
|
</Box>
|
|
<Box sx={{ marginBottom: '20px' }}>
|
|
<Typography>Initial Angle: {(asteroid.angle * 180 / Math.PI).toFixed(2)}°</Typography>
|
|
<Slider
|
|
value={asteroid.angle}
|
|
min={0}
|
|
max={Math.PI / 2}
|
|
step={Math.PI / 180}
|
|
onChange={handleAngleChange}
|
|
aria-labelledby="angle-slider"
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
<Stage width={CANVAS_WIDTH} height={CANVAS_HEIGHT}>
|
|
<Layer>
|
|
<Text text="Earth" fontSize={20} x={EARTH_X - EARTH_RADIUS_KM * EARTH_DISPLAY_SCALE} y={EARTH_Y - 10} />
|
|
<Circle x={EARTH_X} y={EARTH_Y} radius={EARTH_RADIUS_KM * EARTH_DISPLAY_SCALE} fill="blue" />
|
|
<Circle x={asteroid.x} y={asteroid.y} radius={asteroid.size * ASTEROID_DISPLAY_SCALE} fill="gray" stroke="black" strokeWidth={1} />
|
|
{trajectoryPoints.length > 0 && (
|
|
<Line points={trajectoryPoints.flat()} stroke="red" strokeWidth={2} />
|
|
)}
|
|
{forecastPoints.length > 0 && (
|
|
<Line points={forecastPoints} stroke="gray" strokeWidth={2} dash={[10, 10]} />
|
|
)}
|
|
{rocket.active && (
|
|
<Circle x={rocket.x} y={rocket.y} radius={5} fill="red" />
|
|
)}
|
|
{rocket.trajectory.length > 0 && (
|
|
<Line points={rocket.trajectory} stroke="green" strokeWidth={2} />
|
|
)}
|
|
</Layer>
|
|
</Stage>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Scenario;
|