Video Walkthrough

(revisions) (S&P)

The following videos are recordings from the Springs & Pucks page at Watch, then go there and play, interact with the animations, maybe even edit and save a custom version of a game.

(Click an image to load the YouTube player. Then, click again to play.)

This first video looks at a few of the demos and how to run their variations via the links in the "plus" row. QuietGuy plays Puck Popper and Jello Madness. is the offspring of the ideas and code on the Python page. If you've come from there you may want to stay.

The web browser has a rich development environment for JavaScript, all free. The HTML5 canvas offers beautiful rendering. The WebRTC communication protocol supports multiplayer networking. Box2dWeb animates here, no installations or plugins needed.


The videos on this page are best viewed full screen and at a quality setting of 1080p60. Note the fullscreen full-screen icon, bottom right of each video, as it is playing. The esc key will pop you back to this page view.

This first group of unrelated videos (favorites) were recorded with use of the aspect_ratio full-screen button as seen in the right panel on the S&P page. This enlarges the canvas to match the view port of the monitor (crisp 1:1 rendering) and provides more space to interact with the animations.

Moving the Source

A puck is emitting expanding circles (like sound). Each circle is incrementally tagged with a color from the visible spectrum, yielding the appearance of a rainbow tail behind the moving puck. During the recording, the puck diameter is adjusted (up and down arrow keys).

(low-compression version: Vimeo)

Counting to Pi

A collision-counting method for calculating the digits of pi, is described in Galperin's paper and also a 3Blue1Brown video.

The video here presents calculations of this kind yielding 1, 2, 3, and 5 digits of pi. The 2D pucks provide a good visual representation of the 100,000,000 mass ratio in the 5-digit case. Try this interactively by running 1c, 1d, and 1e on the S&P page.

The first two cases use the Box2D engine. Higher number of digits require a small specialized engine that can be seen as the PiEngine prototype in the constructorsAndPrototypes.js module.

Please, don't erase...

The 2e and 4d demos are run while inhibiting the canvas clearing (erasing) that happens at the beginning of each frame. Simultaneously press the "alt" and "p" keys to try it. For the 2e case, go full-canvas, shrink the puck all the way down (arrow keys), give it a good hard fling, then alt-p.

Leading the target

This video starts with a diagram showing the relationship between the bullet and target velocities in Puck Popper (see next section). This is in the reference frame of the shooter (riding along) looking at the target. The idea is that the bullet will hit the target if the gun is angled such that its perpendicular component of velocity (perpendicular to the line between bullet and target) matches that of the target. This puts the bullet on the needed collision course (left-right movement matching the target). The other requirement is that the parallel component of velocity is such that, in time, the bullet will overtake the target and collide.

The video records a session of the 8e version of the game. This version has settings that yield a nearly ideal environment for this aim-to-lead algorithm: (a) there are no drag forces associated with puck movement, (b) all collisions are elastic. Note that the settings that make this good for the aiming algorithm, make it harder to play. 8c is easier.

This algorithm is implemented in a very small amount of code. Take a look at the AimToLead method in the Client prototype in the constructorsAndPrototypes.js module.

These calculations can be applied in estimating how to aim a shotgun, to lead, when skeet shooting. Assuming a muzzle velocity of 1200 fps, clay pigeon speed of 50 mph (73 fps), a shotgun length of 48 inches, and that your eye is about 3/4 of that length from the bead, you can calculate how far the bead needs to be from the line of site to the target: 36 * (73/1200) = 2 inches.

the games

(game-related playlist)

These games were originally intended to be fertile ground, a coding environment for students in a college J-term course on Python. Especially the Puck Popper game was useful for parsing out small assignments that led to a completed game, all within the scope of a few weeks of class time... So, of course, they are kind of cute and campy, and I think, fun and playable. But that's for you to find out. They are short time-based games, that work well in small groups, couch co-op. No installs, no cost, cell phones are useful. Note the friendly-fire option under multiplayer; unselect it to team up against the drones.

Puck Popper

The Puck Popper game enlists computer drones that travel along a path, searching for targets, anticipating their motion and then shooting at them. The video in the previous section shows a drone puck working to clear out a set of targets. It sweeps the field, locks in, then aims the gun tube so as to lead the target, accounting for the movement that will happen after the shot.

Here are some tips that may help when playing against the drones and their aim-to-lead algorithm:

  • Move out of range of the sweeping rays. That's how the drones sees you.
  • If they lock onto you, keep moving. Acceleration is good. Use your jet, zig and zag. Evasive flying is fun with the virtual game pad (cell-phone controller).
  • Back away. You can out run perfectly-aimed bullets in many cases.
  • Bounce off a wall to confuse the drones.
  • Use your shield (spacebar).
  • Shoot at them. You're bullet stream will deflect the incoming.
  • The drones' algorithm checks if there are drag forces on your puck, and in those cases, it will split the difference between line-of-sight and perfect-lead angle. So, if you can maintain speed (counter the drag force with your jet), the drone will generally miss behind you.
  • If you're using the virtual game pad (see videos below), try the center touch point on the scope. That will instantly freeze your position and possibly avoid leading shots. But don't stay in one spot too long...
  • Try the "f" key (almost cheating).
  • Adjust the drag of your client puck. Grab it with your mouse, then use the "<" or ">" keys to lower or raise the drag. The higher the drag, the easier it is to drive, and the harder for the drones to shoot you.

Driving with the keyboard

This first video, an epic 3 minutes, describes the keyboard interface. The Google voice brings some attitude but does a nice job explaining the puck features. A keyboard is a good way to just get started and try it.

You can bring up the 7a version of the game in a separate tab with this link. You'll see a written description and help in the left panel, similar to what's in this video.

Network connections

This video shows how to connect a cell phone (or laptop) to a second device (usually a desktop) that is serving as the game host. The mobile client page is demonstrated here, but the same approach can be used with the desktop client page on a laptop.

Synchronized cell phone (the virtual game pad) and desktop screen captures are shown superimposed in this and the next two videos. This gives you a sense of the two devices: the cell-phone game pad in your hands, with your eyes looking out at the desktop screen. Cell phone touch points are shown as white dots.

(Network connections are not needed when a solo-player is using a keyboard.)

Virtual game pad

The layout of controls on the virtual game pad (aka Two Thumbs) interface are explained. The game pad offers somewhat more fluid game play and generally, after a little practice, lower time scores in Puck Popper.

Taking aim at the Coronavirus

Want to squish one of those little virus guys? Here's a Puck Popper game played with the drone puck in a Coronavirus costume. Try playing Puck Popper with the CV option selected.

Jello Madness

To stop the madness, detangle. Straighten out the block of jello (no pucks touching each other) and the tangle timer stops. Pass the jello to your opponent. Lowest time wins.

Here are some tips that may help:

  • Spin the jello, grab and fling, using the right mouse button. Sometimes the whole thing will straighten out in one good spin.
  • Use the right-mouse button (to pull on a puck) quickly followed by a click of the "f" key.
  • Use the editor for more creative manipulations (see 6a tricks below). Depending on house rules, you may want to prohibit puck deletions.

Marx brothers straighten out new jello

This shows the rhythm of two players taking turns and playing Jello Madness. Also shown here is the use of the editor and capture features to create a custom version and save it for later use.

While this is ideally played from one computer, this turn-taking approach can be adapted for use under social-distancing guidelines. All you need to do is share the capture (copy and paste it into an email), then load that capture (paste it into the capture box) and run it (click the #6 button) on each computer. Your scores will be reported and ranked by the time it took you to straighten out the jello.

Tricks for beating 6a

Editor can be handy for dealing with stubborn jello. This video shows ways to enlist it in separating those pucks. Any scheme that puts the light of day between the pucks, counts, a win.


In that it's probably more helpful to see the editor in use than to read about it, here are a few video examples. You can find descriptions of features on the S&P page (see "editing" link in the outline). Here's a short summary of the keys used in editing:

  • "e" key enables (toggles) edits of walls and pins and makes hidden elements (like navigation springs) visible
  • arrow keys, - +, [ ], and < > increase or decrease various object properties
  • ctrl-x deletes a selected object or group
  • ctrl-v, ctrl-c, ctrl-s are used in replication
  • "alt" and "shift" keys are used with the mouse in selecting groups
  • "t" key (or shift-t) changes the rotation rate of selected objects

Each video has a semi-transparent keyboard overlay. The keys listed here are highlighted green in the overlay.

Restoring order

First step: the "e" key is used to enable editing (copying) of the anchor pins behind the each three-puck system. The "alt" key is held down while dragging the mouse to select a group. Then paste (replicate) the group at the position of the cursor using control-v. The "g" key is used to toggle the gravity on, then off. The right mouse button (strongest cursor spring) is used to get a good grip on one of the pucks and drag it around for mixing. Try this yourself and leave the wall/pin editor on to see the work that the springs do in restoring order to the multi-group system.

state capture

The capture feature can be used to save work that you've created with the editor and then replay it. There are examples of this in the topics above such as the new jello used by the Marx brothers.

However, there are object attributes that can not be modified through the editor. Many of these are accessible through the capture and can be changed there as shown in the following videos.

Adding angular momentum

The goal: demonstrate conservation of angular momentum by changing the spring lengths of the tri-puck object in demo 5a. (similar to how figure skaters increase their rotation rate by pulling in their arms and legs during a spin) The group must be centered so the longer springs don't cause the pucks to touch the walls.

The method (a dash of physics): Do this by editing a capture of the centered system. Change the y component of velocity of two pucks such that the net change of their y components of momentum is zero. This causes rotation without causing movement of the system's center.

Alternative method (without the capture edit or physics): use multi-select to copy the rotating trio, then paste to a centered cursor position with control-v, then delete the original trio (for the reader to try, not in the video).

auf Wiedersehen...

This shows how to edit the tail and puck attributes in the 2e capture to produce a non-expanding tail.


(back to Springs & Pucks)