Gravity Explorer

Prompt

Code in html, css, and javascript a simulation for elementary students learning about gravity. Make the code self-contained, complete, and embeddable. In this simulation, students will be learning about the gravitation on bodies in our solar system. Use the sun, Mercury, Venus, Earth with gravity set at 1.0 and all others a decimal or multiple of that, Mars, Jupiter, Saturn, Uranus, Neptune, Pluto, Earth's moon, Ganymede, and Io. Create a Fire Cannon button to fire a cannon and show the path of a user selected 1 kg, 5 kg, 10 kg and 100 kg cannonball. Show the distance fired in meters (if the cannonball lands on the surface of the body at all.) Make the solar system bodies resemble the actual solar system body for realism. Add a cannon firing sound when the Fire Cannon button is pressed and a thunk sound when the cannonball lands.

Iteration

The cannonball is not firing out of the cannon. Animate the cannonball and show its flight path.

Iteration 2

How can a 1 kg cannonball and a 100 kg cannonball fired on earth fly the same distance? If the amount of gunpowder in the cannon stays constant, the 1 kg cannonball should fly much farther. Add an Amount of Powder slider in kg to adjust the amount of gunpowder used in each firing.