S&P Videos

(revisions) (S&P)

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

In this first video, QuietGuy uses a cell-phone client to aim pool shots on a host computer. This network feature allows for multiple users and is ideal for in-class demonstrations or couch co-op gameplay at home.

The S&P page is the offspring of the ideas and code on the Python page. If you've come from there you may want to stay awhile.

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.

These videos are best viewed full screen and at a quality setting of 1080p60. As each plays, note its fullscreen full-screen icon, bottom right. The esc key will pop you back to this page view.

interactions

This group of videos demonstrates the keyboard and mouse operations used in interacting with the demos of the S&P page.

Fling, catch, and rotate

This first video, shows how to throw, move, and rotate, a single puck, wall, or pin.

  • mouse buttons and cursor spring strength:
    • left: medium
    • center: weak
    • right: strong
  • c key: toggle attachment mode, center or off-center
  • drag with ctrl key down: to position the puck
  • drag with ctrl and shift keys down: to rotate the puck
    • release the mouse button over the puck to disengage
      (and not shoot the puck)
  • e key: to toggle the lock on wall movement

Forecast and shoot

Shoot (launch) a puck as a projectile. Keyboard shortcuts are demonstrated for forecasting the motion and controlling the shot.

Forecasts are based on the same symplectic Euler integration scheme that Box2D uses. The forecast is identical to the result that follows from the physics engine. The code for the forecast can be found in the drawProjectilePath function of the ghostBall.js module.

  • drag with ctrl and shift keys down: to rotate the puck
    • release the mouse button outside the boundaries of the puck to launch it
  • ctrl-Shift-L: lock down ctrl-Shift
    • drag with ctrl key down: to position the bullet
    • drag with ctrl key up: to aim the shot
  • b key: toggles the fine-adjust positioning

Speed shots and the stepper

Visualize high-speed shots into a target (a stack). After composing a shot, interrupt the engine loop with the stepper:

  • o key: stop the physics engine
    • then, release the mouse button: to shoot
  • u key: take a capture for replaying the shot
  • o key: repeatedly single step the engine
  • p key: resume normal engine stepping
  • change Δt: optionally, change the physics engine timestep
  • #1 key: run the capture (if based on a demo from the #1 group)

Note that pucks modeled as bullets are shown in black.

No gravity

Without the effects of gravity in our 2D model, objects behave like balls on a pool table (or pucks on an air table). Shots are aimed using a ghost-ball technique (the ghost of a cue ball). This forecasts the resulting motion after a collision with a puck or wall.

Forecast lines are based on the contact normals for a ghost ball touching the surface of the object ball (or wall). These collision forecasts are ideal in that the ghost ball is kept at the surface and does not penetrate the object. This is very close, but not identical to the approximate collision calculations of Box2D. For a discussion of ideal-contact-normal (exact) collision calculations, refer to the perfect kiss topic on the Python page.

  • z key: set and lock the shot speed
  • z key (with mouse button up): unlocks the shot speed
  • alt key: for opposite direction shooting
  • b key: toggles the fine-adjust positioning

editing

The editing features can help you change existing demos, make new stuff, maybe even try some interactive satire. Coupled with the means to save it (state capture), the editor can produce something to be replayed. All of the demos on the S&P page were (to varying degrees) generated with the use of these features. You can find corresponding discussion on the S&P page (see "editing" link in the outline in the left panel).

Keys used:
  • "e" key enables (toggles) edits of walls and pins and makes hidden elements (like navigation springs) visible
  • →← , ↑↓ , - + , [ ] , 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
  • ctrl-shift and ctrl-alt rotate the group about its center and the object centers respectively
  • "t" key (or shift-t) changes the rotation rate of selected objects


Assembling

First things first: get some pucks, position and rotate them, set attachment points, then connect them together with springs and revolute joints.

Multi-select

A first step in editing is to select one or more objects on the canvas. Do this by attaching a cursor spring (single-select) or by marking one or more objects as selected (multi-select). Objects in a multi-select group are marked with a yellow dot. Selection can be done in two ways: (1) drag the cursor over an object while the shift key is down (use the right mouse button to erase a mark), and (2) drag with the alt key down to form a selection box.


Adjusting Attributes

A system's interactions, with itself and its environment, can be adjusted though the attributes of its pucks and springs. In the "multi-select" section above, size changes were made through the dimensional attributes of the pucks. Other attributes affect energy transfer and dissipation: restitution, damping, surface friction, and spring forces. In this section, I play with these.

Restitution, align and linearize

This is the first in a series of videos that shows how systems can lose energy: restitution, surface friction, translational and rotational drag, and spring damping.

A line of balls with restitutions varying linearly from 0.86 to 0.61 are dropped. This video demonstrates the use of the alignment feature (use alt-L or the "align selected" option under the "remove/add items" control). A small puck is replicated to form a group which is then aligned. The restitution of the far left and right pucks is set using the [ and ] keys. The alignment feature is run again and now acts to linearize the restitution values of the intermediate pucks. Finally, the g key is used to turn on gravity.

The middle segment of the video is rendered at 2x speed (I'm not that fast). The final bouncing-puck segment was recorded at a 4ms timestep and then rendered at 4x speed.

Surface friction

This video has four segments, each showing the effects of changing the surface friction. This puck attribute is changed using the minus (-) and plus (+) keys from the main part of the keyboard. Holding these keys down repeats the change.

  • A puck with surface friction is replicated to form a tacky stack.
  • With no friction, the pucks form a 1-D version of Newton's Cradle.
  • Pucks follow the wall-collision forecast line when surface friction is set to zero.
  • Pharaoh's not happy with this construction done by greasers from the 1950s.

Translational drag

The three segments in this video show the effects of changing the drag coefficient. This puck attribute is changed using the less-than (<) and greater-than (>) keys. Holding these keys down repeats the change.

  • A pair of pucks, connected by a spring, are set in motion about their midpoint. This becomes a perfect circle (note: alt-p is used to toggle the frame erasing) due to damping in the spring and no drag force on the pucks. They slow to a stop only after the puck drag coefficient is increased above zero.
  • Drag affects projectile forecasts.
  • A row of pucks with increasing drag coefficients is dropped.

(Note: this one has been left unannotated, just too pretty to mark up. You might find the annotations, in the video in the Spring Damping section below, related and helpful.)

Rotational drag

This video show the effects of changing the rotational drag coefficient. This puck attribute is changed using the less-than (<) and greater-than (>) keys with the alt key down. Holding these keys down repeats the change.

This section wouldn't be complete without a dandelion being torqued by two springs. The little lion starts out with no rotational drag but some translational drag. There's no damping in the springs. Try cursor interactions with this system. The translational drag, coupled with the spring forces, act to return the puck to center after any displacement.

Spring Damping

Here, the energy loss is affected by changing the damping coefficient of the connecting spring. This attribute is changed using the less-than (<) and greater-than (>) keys with the S key down. Holding these keys down repeats the change.

This video compliments the one above on translational drag. There, the spring damping acts to eliminate the relative motion and form the perfect circular orbit. Here, the F key acts to halt the orbit, leaving the two pucks to oscillate on the damped and later the un-damped spring.

Spring Length and Stiffness

There are three contrasting spring systems in the segments of this video: (a) pair of pucks, (b) blocks on an inclined plane, and (3) a pinned puck without gravity. Each of these demonstrates the spring nature as affected by length and stiffness.

With the S key down, adjust a selected spring using the arrow keys:
  • ← →   strength
  • ↑     ↓   length
With the S and Alt keys down:
  • ← →   unstretched width

Examples

In that it's probably helpful to see the editor in use, here are a few examples.

Some of these videos have a semi-transparent keyboard overlay. The keys typically used in editing 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.

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 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

(A couple things have been renamed since this video was made: "mini-client" was originally "mobile client" and the "springs & pucks" page title was "time to code.")

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 mini-client page is demonstrated here, but the same approach can be used with the full client page.

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.

Note that a host room is 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.


Basketball

Presidents Biden and Trump bring their game. I show some reluctance. If you like, encourage all eight U.S. political leaders to come off the bench. (Follow the link, and then, after the basketball demo loads in, press the v key to view it fullscreen.)


Ghost-Ball Pool

Watch (or play) a game of Ghost-Ball on the host computer.

Take a shot:

  1. Click and drag the ghost out from the cue ball.
  2. Optionally adjust the shot speed with the z key.
  3. Aim the shot by touching the ghost to the object ball.
  4. Release the mouse button to shoot.

Note that "host" indicates playing directly on a computer (or device) without use of the network client (shown in the first video on this page). Shots in this video are aimed directly with a mouse. Touch pads and touch screens also work well on the host for aiming shots.

sundries

This group of unrelated videos was recorded with use of the aspect_ratio full-canvas 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 function in the puckPopper.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.

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).

Thanks for watching...

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

.
.
.

(back to Springs & Pucks)