time to code
(please use Chrome)
Move objects with your mouse or finger. Drag and fling them. Put on the breaks with the f key. Try the g key.
More: discussion on multiplayer, capture, the editor, and the demos.
- use multi-select to select ONE spring (two pucks/pins)
- copy it (ctrl-c)
- use multi-select to select a new pair of pucks/pins (turn off "Select COM" to select off-center points)
- paste the spring (ctrl-s)
- Dissect (or add to) the jello matrix in demos #6 and #8.
- Select a compound object (like the triangle in demo #5) and change the connecting spring lengths while it's spinning.
- Delete some of the pucks in demo #3. Select and delete without using the freeze button. Notice how the new holes in the puck grid propagate after wall collisions.
When using the single-frame stepper, you'll see that the 'white' wave is colored red for even more visibility. Pause it when the white wave is visible, then click the "step" button. Notice that the center of the red circle never moves, even if the puck is moving.
Here is a second version of this demo (view the capture, run it).
Here is a capture based on this demo (view it, run it). If you run this you'll see it looks a bit like a drone. Try using multi-select to select the whole drone (alt-key and mouse drag), then use the right arrow key to change the length of the rotors. If you make them long enough they will collide and stop spinning. Angular momentum is conserved and causes the drone body to start spinning. In a similar way, you can cause the rotors to collide by changing the length of the springs (select the whole drone, hold the s key down, then up/down arrow keys).
For this next exercise, enable wall and pin edits (click the checkbox). On the left side of the canvas, a spring is mounted on two pins. This can be used to produce a copy (shift key, then carefully mouse-drag over the pins, without selecting the wall, then ctrl-c) and paste it onto a pair of pucks (with the shift key down, mouse-drag over two pucks, then ctrl-s).
The "Freeze" (stop translation) and "R" (stop rotation) buttons are especially useful in this demo.
Try using the "F" key to stop the orbiting behavior. The pucks in the triangle group and the large tethered-to-a-pin puck are all characterized as inelastic so they play well together under tension. Try to get the large puck inside the triangle group. Notice that the triangle group can be flattened out if gravity is on. Turning gravity off will often result in the flattened triangle popping up and moving. Try this a few times under the dangling large puck (might have to lower the two pins of the large puck, get it closer).
This is another good place to try the editing features. Use multi-select to select the three springs on the triangle (hold shift (or alt) key down then mouse over the three pucks), then adjust their length, as a group, using the "s" and the up/down arrow keys. Use the "s" key and the page up/down keys to change their damping coefficients. Try copying and pasting a spring.
Here is a Rube Goldberg type variation of this: view it, run it.
And here's a simple spring pendulum that is tuned to show its two natures: vertical spring bounce and pendulum swing (view it, run it). Give it a little time and you'll see it change back and forth between the two mode.
Traditional springs models are not native to Box2D and are developed here as external objects that apply forces to things modeled in Box2D. Erin Catto uses a soft-constraints approach to spring modeling (distance joints) in Box2D. Here is his presentation on this. I use the equations on page 45 to translate from k and c to frequency and damping ratio.
The following capture (view it, run it) contrasts these two spring types: traditional springs on the left (yellow), and distance joints (cyan) on the right. Use shift-s to toggle the default spring nature (soft-constraints or traditional). Almost all the springs at TimeToCode refer to this default setting as they are being instantiated. So you can toggle this setting and then (you must) re-run a demo to see the change in behavior. The capture links in this paragraph are the exception to this and explicitly specify the spring nature. In this one demo capture, soft will stay soft, traditional will stay traditional. As usual, all the editing features work here, and can be used to build compound spring-puck groups and adjust the spring characteristics (length, spring constant, and damping). The key advantage of the soft constraints is stability: strong spring (or strong damping) forces on small masses will not be unstable. But it always seems that the traditional springs give a better feel, especially in compound groups. So I continue, for now, to leave all the demos starting up with traditional springs.
Here are links to JSON captures of editor-modified versions of this demo (b: view it, run it, and c: view it, run it ). To see the animation, use the run-it links above or follow the view-it links then use ctrl-a and ctrl-c to copy the page. Paste the copy buffer, ctrl-v, into the text area under the "Capture" button. Then click the #6 button to run the capture.
The w-a-s-d group of keys controls the jet that is used to move your puck. The "w" key fires the jet. The "a" and "d" keys rotate the jet clockwise and counterclockwise. The "s" key is used to turn the jet to a direction opposing the current motion of the puck. This can be useful in breaking (stopping). Subsequent "s" presses rotate the jet in 90-degree clockwise steps. Firing the jet, "w", resets this pattern so the flip operation results with the next "s" press.
The i-j-k-l group of keys controls your gun. The "i" key shoots bullets. The "j" and "l" keys rotate the gun clockwise and counterclockwise. The "k" key rotates the gun in 90-degree clockwise steps (shift-k steps counterclockwise).
Holding down the spacebar turns on a shield that protects you from the bullets of an opponent (you can't shoot when your shield is up). Target pucks will pop after 10 hits, client-controlled pucks pop after 20 hits.
The blue pucks are drones. They try to get you (it's time to start using the spacebar to turn your puck shields on). The drones follow a path established by the blue pins. Turn on the editor to see the navigation path. When the editor is on, you can drag these navigation pins to change the drone path. These pins can also be copied and deleted using the features of the editor.
The multi-select features of the editor can be used to detach the drone from the navigation path (delete its spring). First, check that wall and pin edits are enabled. Box selection (click and drag with the alt key down) is useful for selecting the spring between the drone and the navigation pin. If you've used the ctrl-q feature to disable (sleep) the drone's movement and shooting, it will come to rest over its current pin, making it hard to select both pin and drone using the shift-key approach. The box selection method allows pin, drone, and spring to be selected in one action, the box drag. Then ctrl-x deletes the navigation spring.
In a similar way, you can reattach a drone by copying (ctrl-c) the spring from another drone and pasting (ctrl-s) it onto the free drone and a blue navigation pin. Remember, ctrl-q toggles drone shooting and navigation on/off, useful when detaching and reattaching them.
Drones can be copied, to produce a free floating drone: mouse-drag over a drone, then ctrl-c. Attach it to the navigation path using the methods above.
Navigation forces are rendered as jets when the editor is off (rendered as springs when the editor is on).
The drones use raycasting to find puck targets. To hide from the ray, move behind a wall, behind another puck, or beyond the length of the ray.
After finding a puck, they point their gun to "lead" the target. This anticipates where the moving-target puck will be when the bullets arrive. You'll see the gun is angled slightly ahead of the raycast line when the target is moving. The algorithm also accounts for the motion of the drone.
The controlled pucks are inelastic and with some drag to make them a bit easier to drive (bullets and regular pucks are elastic and with no drag).
Scoring in Puck Popper (demos 7 and 8):
- +200 for last puck-player standing
- +50 for popping a puck
- +10 for hitting a puck with one of your bullets
- -10 for getting hit by a bullet
- -1 for shooting a bullet that expires before it hits another puck
A score summary for each player is reported in the chat panel at the end of the game (one puck left).
A leaderboard report, the top 15 scores, is displayed below the game-score summary table. The report consists of two query results, one table sorted by score, the other by time. The backend of the leaderboard, a Google sheet, is queried depending on the version of the Puck Popper game (e.g. demo #7 results are reported separate from #8). Custom versions of Puck Popper, made using the capture feature, are reported separately as distinguished by a unique identifier in the capture. Game results where the mouse was used (in the Canvas area) or the drones are "sleeping", are filtered out of the reports.
From the host page, you can establish a nickname (without connecting to the multiplayer server) by typing the nickname phrase, e.g. nn:Jimbo, into the chat field before starting demos #7 or #8. That nickname will be used when reporting to the leaderboard. To go back to being anonymous, use a nickname phrase of nn: (i.e., no name).
Here are links to a JSON capture of an editor-modified version of this demo (4 drones in a small space; difficult to shoot your way out of this one): view it, run it.
To play without drones, use ctrl-q to stop the drone navigation. Use the editor features to select and delete them. Then capture the drone-free course for repeated play.
The starting position and velocity for each controlled puck is randomized. #8 is intended to be a template that can be edited and captured for later use. Try shooting at the pucks in the spring matrix.
The editor's multi-select feature is useful for carving/slicing up the jello. Hold the shift key down, then mouse over pucks in the jello grid. A first ctrl-x will delete selected springs, a second ctrl-x will delete the selected pucks.
The controlled pucks are inelastic and with some drag to make them a bit easier to drive (bullets are elastic and with no drag; regular pucks are inelastic and with no drag).
The three balls are coupled together with three distance joints (aka springs, with damping). Each ball is also lightly coupled to a corresponding stationary pin and has some linear damping (fluid drag). When "Edit walls & pins" feature is enabled (checked), the pins and springs are visible.
Puck-puck collisions are inhibited by using the collideConnected attribute of the distance joint. If pucks are copied, they will collide with any pucks not coupled to them with a distance joint.
Normal editing and capture features apply here. Use the box-selection feature (alt key) for an easy way to copy or modify the three-puck group. To include the pins in copy operations, the "Edit walls & pins" feature must be enabled.
This demo runs most efficiently in Google Chrome. Frame rates will dip below target for other browsers, especially if the "Edit walls & pins" feature is enabled.
Below the "pause" control is a selection control used in establishing a fixed timestep for the physics-engine (inversely related to framerate). This is automatically set (based on an observation of your framerate) whenever the page is refreshed.
Generally this will get set to 60 Hertz unless you have a DVI or Display Port connection to a monitor that can render at higher rates. Note that the longer timestep of the 30 Hertz setting will be unstable in demos that incorporate springs.
Direct mouse drag (and rotation) of single or multiple objects will produce instability when editing spring systems at rates of 60 Hz or less. At 100 Hz or higher these operations work the best.
If you do have high-refresh-rate gear, try setting your monitor to a refresh rate that the demos can easily match. If a demo is running slower (fps) than your monitor's refresh rate, try reducing your monitor's rate (in Windows 10, right click on the desktop, then "display setting", then "advanced display setting", then "display adapter properties", then "monitor" tab, then change the "screen refresh rate"). Then, after you have dialed back your monitor to the point that the demos can match it, set the timestep control to agree with that value (or refresh the page to set it automatically).
At the beginning of the timestep select list, you'll see the option "variable". This lets the physics timestep (framerate) float along with the refresh rate of your monitor. This can be handy for observing the fps performance of your system. Generally it's best to only use this to test. Then set a similar fixed-timestep value.
The client interface for multiplayer includes a virtual gamepad for touch-screen devices. Yes, cell-phone play for Puck Popper, demos 7 and 8. Try it. Click the multiplayer option here to start hosting a game. Type in a room name, and then connect. Do the same from the client page on your cell phone. Finally, after connecting the client to the host, touch the Two-Thumbs button on the client.
There's a back-burner plan to make a new Waconia charting page based on Google Charts and Fusion Tables: all client sided this time.
Demos: Edit walls & pins