Create Basic Astronomy Simulation - Halley's Comet
Kids Activity - Create Halley's Comet stimulation using Chat GPT
It is easy to create basic simulation using Chat GPT by giving prompt .Below is example of sample prompt
"create java script code to create Halley's comet such that it is orbiting Sun. Also show distance in number"
User can create more creative prompt
Below is JavaScript code which created above graphical simulation(just copy past in note pad and save file as html and then open in browser)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
border: 1px solid #000;
display: block;
margin: 20px auto;
}
</style>
<title>Comet Animation</title>
</head>
<body>
<canvas id="solarSystemCanvas" width="800" height="800"></canvas>
<script>
const canvas = document.getElementById('solarSystemCanvas');
const context = canvas.getContext('2d');
const sun = { x: canvas.width / 2, y: canvas.height / 2, radius: 50, color: '#FFD700' };
let comet = { x: -200, y: 0, radius: 5, color: 'gray', speed: 1, angle: 0, parabolicConstant: 0.05, orbitNumber: 1 };
function draw() {
// Clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw the Sun
context.beginPath();
context.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2);
context.fillStyle = sun.color;
context.fill();
context.closePath();
// Draw the Parabolic Orbit
context.beginPath();
for (let i = -200; i < 200; i += 1) {
const x = i;
const y = comet.parabolicConstant * i * i;
const drawX = sun.x + x * Math.cos(comet.angle) - y * Math.sin(comet.angle);
const drawY = sun.y + x * Math.sin(comet.angle) + y * Math.cos(comet.angle);
if (i === -200) {
context.moveTo(drawX, drawY);
} else {
context.lineTo(drawX, drawY);
}
}
context.strokeStyle = 'blue';
context.stroke();
context.closePath();
// Draw the Comet
const cometX = comet.x * Math.cos(comet.angle) - comet.y * Math.sin(comet.angle);
const cometY = comet.x * Math.sin(comet.angle) + comet.y * Math.cos(comet.angle);
context.beginPath();
context.arc(sun.x + cometX, sun.y + cometY, comet.radius, 0, Math.PI * 2);
context.fillStyle = comet.color;
context.fill();
context.closePath();
// Draw labels
context.fillStyle = '#000';
context.font = '12px Arial';
context.fillText('Sun', sun.x - 15, sun.y - sun.radius - 5);
context.fillText(`Comet ${comet.orbitNumber}`, sun.x + cometX - 30, sun.y + cometY - comet.radius - 5);
const distance = Math.sqrt(cometX ** 2 + cometY ** 2);
context.fillText(`Distance: ${distance.toFixed(2)}`, sun.x - 50, sun.y + sun.radius + 15);
// Update the Comet's position for animation
comet.x += comet.speed;
comet.y = comet.parabolicConstant * comet.x * comet.x;
comet.angle += 0.01;
// If 15 seconds have passed, reset the comet's orbit
if (Math.floor(comet.angle * 100) % (15 * 100) === 0) {
comet = { x: -200, y: 0, radius: 5, color: 'gray', speed: 1, angle: 0, parabolicConstant: 0.05, orbitNumber: comet.orbitNumber + 1 };
}
requestAnimationFrame(draw);
}
draw(); // Start the animation
</script>
</body>
</html>
Comments
Post a Comment