Create Projects Courses Learn About
Simulate the Solar System

Explore foundational concepts in Newtonian Mechanics by playing with simulations and exploring + editing the code that makes them.

Notes and recommendations:

  • This course consists of 8 Jippity projects: code that demonstrates and simulates important concepts in physics. Depending on your goals, you can nudge this course to focus more on code or more on math and physics. You can also scale difficulty up and down in a number of ways.
  • To keep the course easy, gloss over details of the code and instead focus on playing with the simulations and discussing their behaviors. Take a scientific approach: ask students to observe and predict, then test their predictions. They can adapt the templates into creative projects like games — a little physics goes a long way!
  • You can also adjust the speed of the course: a rapid class, suitable for advanced students, would move at about one project per class-hour, but a teacher can easily stretch one project into two class hours by working in more thorough explorations and explanations.
  • You can emphasize mathematics in the course, using the simulations as tools to demonstrate the algebra, geometry, and trigonometry of Newtonian mechanics. No project features any explicit calculus, but for advanced students, it is an interesting puzzle to relate discrete frame-by-frame calculations to continuous calculus functions.
  • To emphasize programming, you may choose to Fork a (complete) project and remove some code, creating a puzzle for students: fill in missing code to make the simulation work as desired. This will usually be important movement code; we recommend leaving the HTML skeletons and visual elements alone.
Project 1: Simple Motion
Simple Motion Project
undefined

Simple motion and the coordinate plane.

Notes:

  • Scroll down below the coordinate plane to see the Stats Panel.
  • You can create additional balls in setup() as new instances of the Ball class.
  • You can use this simulation to teach physics concepts without getting into any code at all. But for kids who are interested, the main movement code is simple and can be edited. Code-interested kids should feel free to make visual changes too.

Goals:

  • Introduce X- and Y-coordinates and the coordinate plane.
  • Explore velocity and acceleration, broken down into X- and Y-components.
  • Program linear motion by adding velocity to position.
  • Program fancier motion by adding acceleration to velocity.
  • Visualize velocity and acceleration as vectors.
  • Program a wall bounce by reversing velocity (multiplying by –1).

Activities:

  • Drag the ball around and observe its change in coordinates.
  • Ask to drag the ball to a specific location using coordinates.
  • Use the Stats Panel to type in velocities and accelerations. Predict what you will see before hitting Play!
  • Teacher may remove some code, such as the move() method from Ball.js, and work with students to recreate it (Fork the project to create two versions, one complete and one incomplete). Start by adding simple numbers to the X-position, then abstract to a variable (Ball.vx). Extend to acceleration.
Project 2: Relative Motion and Force
Relative Motion Project
undefined

Relative motion and force with Newton's Second Law.

Notes:

  • The Stats Panel returns below the simulation.
  • It now includes a 'Force Applier' which allows you to specify X- and Y- components and duration of a force, then click a ball to watch it accelerate.
  • Use the checkboxes in the bottom left to center the camera on one ball or the other to demonstrate the Principle of Relativity.

Goals:

  • Show that all motion is relative and that one may choose a Frame of Reference, which effectively sets the position of (0, 0). In code, relate this to the translate() function.
  • Introduce the concept of Force through F = m * a. Apply forces in various directions, of various strengths, to balls of various masses and watch how they move.
  • Explore the force of friction when a ball rubs along the ground.
  • Bonus (advanced): get deeper into collisions. The simulation includes code that resolves collisions between balls using the Conservation of Momentum which includes a bit of fancy geometry.

Activities:

  • Toss balls around and switch between the three perspectives to illustrate Relative Motion.
  • Apply Forces to Balls. Predict how they will move before applying.
  • Can you simulate gravity by programming some acceleration in the Stats Panel?
  • Notice that more mass lessens the effect of force.
  • Toss balls towards the ground and watch how friction always points against motion as a force that decelerates the Ball.
  • Explore the geometry of collisions. (Level 1: Reverse velocity on wall bounce by flipping a component. Level 2: Pythagorean Theorem. Level 3: Tangents and Normals.)
Project 3: Geometry & Trigonometry
Geometry & Trigonometry Project
undefined

The geometry and trigonometry of physical space.

Notes:

  • Click any two points to create a right triangle whose hypotenuse spans those two points.
  • You can drag points around after they have been created.
  • Enable 'Smooth Mode' to disable points snapping to the grid.

Goals:

  • Introduce important triangle geometry that opens the door to thinking with angles for physics.
  • Interact with and understand Pythagoras' Theorem.
  • Get a sense of the meaning and purpose of sine and cosine.

Activities:

  • Make triangles and check out their mathematical stats!
  • Calculate side lengths with Pythagoras' Theorem.
  • Watch the dance of sine and cosine — point out their complementary relationship.
  • Slide points around and observe how the triangle's measurements change.
  • A math-focused teacher can get deeper into geometry and trigonometry, possibly even proving Pythagoras' Theorem in whatever their favorite was is.
  • A code-focused teacher can emphasize how to use vectors and dig into details of how the text is placed, for instance.
  • Open a discussion — why is this so helpful and important for physics?
Project 4: Motion with Angles
Motion with Angles Project
undefined

Motion and forces with angles.

Notes:

  • This project is an adaptation of the first two with the addition of being able to apply forces at an angle, or clockwise or anticlockwise. The Ball also keeps track of its orientation (the smiley face breaks the circular symmetry so that you can see this.)
  • The 'Center on Ball' checkbox will also rotate the canvas to keep the face upright.

Goals:

  • Deepen the notion of relative motion to include angle and rotation.
  • Understand why sine and cosine functions are needed to convert from angular thinking to rectangular grid-based thinking (JavaScript native).
  • Notice the difference between a force applied at a consistent angle versus a rotational force that changes its angle as the ball rotates (clockwise/anticlockwise). Open the door to the notion of centripetal force and/or orbits.
  • Understand the subtle relationship between translate() and rotate(), in which order matters.

Activities:

  • Load up forces, predict what they will do to the Ball, then observe and test predictions.
  • Add more Balls and toggle between perspectives, focusing on relative motion with angles and rotations.
  • Apply clockwise/anticlockwise forces to induce (parts of) orbits.
Project 5: Collisions & Momentum
Collisions & Momentum Project
undefined

Collisions and Momentum.

Notes:

  • "Asteroids" — which are basically hockey pucks — slide around and bounce off each other with accurate momentum. Click an Asteroid to pause the simulation and drag the mouse to load up a (one-frame) force vector that will change its trajectory.
  • Green arrow: current velocity vector.
  • Yellow arrow: upcoming force vector.
  • Orange arrow: resultant — where the Asteroid will go on release.
  • The Stats Panel on the left tracks relevant values. Note how Total Momentum changes when an Asteroid bounces off a wall but does not change when two Asteroids — momentum is conserved!
  • It is easy to add additional Asteroids in code by instantiating them in the setup() function.

Goals:

  • Understand how Momentum determines the behavior of colliding objects: both mass and velocity matter.
  • As with other vector quantities, break momentum into X- and Y-components.
  • This project is another good opportunity to take a look at and some elementary trigonometry. (atan2() is a the star function in code.)

Activities:

  • Fling asteroids around and note how more massive ones send less massive ones flying with higher velocity due to the tradeoff of mass and velocity.
  • Program inelastic collisions by multiplying resultant velocities by a number less than 1.0, simulating the loss of kinetic energy on impact.
  • Take the physics code of this project and adapt it into some kind of game, like billiards or bumper cars.
  • Diagram the geometry of collisions with tangents, normals, and the Pythagorean Theorem.
Project 6: Gravitation & Orbits
Gravitation & Orbits Project
undefined

Gravitation and orbits.

Notes:

  • This project relates most closely to Project 4, but now gravity applies continuously.
  • Images for all the planets are pre-loaded in 'Assets' should students want to program more than just the Sun and the Earth.
  • The masses and positions of the Sun and Earth, and hence the orbits, are not accurate (nor is the Gravitational Constant G) — feel free to adjust them.

Goals:

  • Learn about the factors that go into Newton's Law of Universal Gravitation and the orbital behavior it produces.
  • Masses of the two objects, distance between them squared, and the constant G.
  • Observe that velocity and acceleration at (near) right angles produces (elliptical) circular trajectories.
  • Because the angle between the masses continuously changes, the paths they take trace out smooth curves.
  • See why a nested for loop is used to compute pairwise interactions.

Activities:

  • Adjust masses, initial positions, and initial velocities of the Sun and Earth and observe how their orbits — stable or otherwise — change.
  • Add more planets!
  • Create other celestial bodies like comets or asteroids that can crash into a planet or produce a trail across the cosmos.
  • Try to figure out conditions that produce stable vs. unstable orbits. How important is mass?
Project 6B: Three-Body Problem
Three-Body Problem Project
undefined

The three-body problem.

Notes:

  • This simulation is inspired by the famous sci-fi novel The Three Body Problem in which a system of three stars create chaotic and unpredictable behavior for a nearby planet.
  • The physics behind the system is the same as project 6: Gravitation and Orbits. The additional mass adds a lot of complexity to the trajectories but it's still just force, mass, and acceleration.
  • Some additional calculation use kinetic and potential energy to calculate a 'stability rating,' which can open a discussion for students who want to get deeper into mechanics.

Goals:

  • Note the difference in behavior between a two-body system and a three-body system. Why does the extra body create so much more chaos?
  • Observe changes in the stability rating based on initial conditions.
  • Check out the code that produces the trails behind the bodies. How is the smooth curve built out of small discrete pieces?

Activities:

  • Add additional bodies — how does the behavior change?
  • Try to produce as stable a system as possible. How can symmetry help?
  • Use the system to make a work of celestial art.
Project 7: Solar System Simulation
Solar System Simulation Project
undefined

Simulate the Solar System using NASA data. A "JavaScript Orrery."

Notes:

  • This project takes a different approach to simulating the solar system than Project 6. Rather than relying only on gravity from moment to moment, it pulls on rich NASA data that takes into account some of the more subtle aspects of the planets in order to compute entire orbits, accurate to real time in the real world, then walks the planets along those orbits. See the date in the bottom left.
  • Zoom your screen out and refresh the project if you can't see the gas giants. This project is to scale and needs space!
  • The calculations in this project are more sophisticated than in earlier projects. Interested students can learn more at:
  • http://www.jgiesen.de/kepler/kepler.html
  • http://www.planetaryorbits.com/tutorial-javascript-orbit-simulation.html
  • http://www.stargazing.net/kepler/ellipse.html

Goals:

  • Watch an accurate simulation unfold over time and compare the lengths of the years of each planet. Notice that closer planets must move faster to stay in orbit. (Why?)
  • Discuss how this code renders the simulation: it draws an image of each planet each frame in the correct position, but how does it calculate time and those positions? Ask Jippity to explain plotPlanet_T6() and EccAnom_T6().
  • Open discussion of fancier astronomy and astrophysics if desired.

Activities:

  • Check out some of the included links to go (much) deeper into Keplerian motion.
  • Discuss the history of how scientists moved from Geocentrism to Heliocentrism and how Newton's laws revolutionized our understanding of how that motion unfolds.
  • Play around with the (sensitive) numerical data in the simulation and observe how those changes affect the simulation. (We recommend Forking the project so as not to lose the original correct values!)