Tag Archives: animation

Simple CesiumJS Skydive Sim


Note: updated version with guidance lights here.

On July 30, 2016, a man named Luke Aikins went skydiving, without a parachute, and landed safely in a net. I was curious what that would feel like, so I made this simple skydiving simulation using CesiumJS.

You can track using W, A, S, D to feel how much control you could possibly have on the descent.

The simulation parameters are as follows:

  • the location is similar to the event, but I’m not exactly sure where it took place. Apparently, it was at the Big Sky movie ranch, near Simi Valley, CA. This is the nearest open area to where Google Maps tells me that is.
  • the red target on the ground is 30m x 30m, same as at the event
  • the simulation starts at 7620m (or 25,000 feet), same as at the event
  • you fall at 53.6448 meters/second, which is 120mph, which is at the slower end of the velocity range a human would travel during free fall. I figure he was trying to go as slow as possible, but there’s only so much you can do to make that happen!
  • I was surprised to learn (simultaneously from both @tkw954 and @erikfriesen – thanks!) that a good skydiver can track at 45 degrees (1:1 glide ratio), which made the math for horizontal movement super-simple – it equals the fall rate.

I stole borrowed most of the animation/control code from the Cesium Camera Tutorial.

The simulation ends in blackness, which is because I was too lazy to make a net, however with no net, that seems fitting. Have fun!

edit (08/06/16): this post was featured on Maps Mania!

edit (08/09/16): added guidance lights to this example. This is likely not how the actual light guidance system worked. In my example, the farther you’re aimed from each corner (up to 100m), the more red the circle turns. The closer you’re aimed to each corner, the more green it turns. It would be more useful to code the lights to indicate in which direction to correct, but I only have so much time.

edit (09/01/16): this post was mentioned in the Cesium Blog!

edit (12/29/16): this post was mentioned in the Exploratorium Blog!

Runaway Train Simulation (Regina, SK)


CBC reported on a runaway train car that rumbled through Regina, SK early Wednesday morning (article here). After about 15 minutes, the car stopped itself about 4km away, after crossing several busy streets.

I’ve made a simulation here. I used the default truck model provided by Cesium. The animation takes the full 15 minutes to run at 1x speed, so you may want to speed it up using the green arrow in the control at bottom left.

PaperJS Voronoi Diagrams


I’ve been tinkering around with Voronoi diagrams, inspired by the example on the PaperJS site. My example (here) uses Raymond Hill’s Voronoi Javascript implementation and PaperJS to derive the diagram from a point distribution. Note: the redraw animation is a bit backwards, as the point locations are determined first, driving the placement of the Voronoi diagram.

Another, more festive example, can be found here, which shows the distribution of lights on our Christmas tree. Falalalala-la-la-la-la.

D3 Ski Trip Player: Update (Compass Rose)


I’ve added a couple pieces of “functionality” (not obviously useful) to my previously posted Ski Trip Player (here and here, and now HERE). There is now a button on the map portion that allows the user to switch between projections (1. Mercator and 2. Lambert Azimuthal Equal Area). The entire map switches and the little ski man keeps moving along. The trickier part was creating the compass rose and having it rotate within the map boundary, which it does. Take a look at the source code to see how I do it – I’m positive there is a more efficient way to do it. Let me know!

D3 Ski Trip Player: Update


I had some time to kill waiting for a Python script to wrap itself up, so I worked on my D3-powered Ski Trip Player. I focused on the elevation profile, adding: 1) diverging color scale to indicate climbing/sliding areas, 2) horizon line to demarcate the travel path, and 3) legend. I suspect I’ve compromised looks for function in this iteration, but it was instructive nonetheless.