time to code
Try interacting with the HTML5 Canvas window here. Move objects by using your mouse or finger to drag and fling them.
More on the demos...
- use multi-select to select ONE spring
- copy it (ctrl-c)
- reset the multi-select list: release the shift (or alt) key then click on an empty spot in the canvas
- use multi-select to select a new pair of pucks/pins
- paste the spring (ctrl-v)
- 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, 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.
On the left side of the canvas a spring is mounted on two pins. This can be used to copy a spring (shift key, then mouse over the pins, then ctrl-c) and paste it onto a pair of pucks (release the shift key and click on an open area, then with the shift key down, mouse over two pucks, then ctrl-v).
The "Freeze" (stop translation) and "R" (stop rotation) buttons are especially useful in this demo.
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. Try copying and pasting a spring.
Here are links to JSON captures of editor-modified versions of this demo (versions b, run it and c, run it ). Follow the link 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 "a," "d," and "w" keys point and fire the jet. The "s" key is used to turn the jet to a direction opposing the current motion of the puck (shift-s does a simple 180 flip). These can be useful in breaking (stopping). The "j," "l," and "i" keys point and fire the gun. 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). Box selection (hold the alt key down, then click and drag) is useful for selecting the spring between the drone and the navigation pin. If you've used the ctrl-q feature to disable the drone's movement and shooting, it will come to rest over it's 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 the spring from another drone and pasting 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.
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).
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).
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.
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.
There's even a back-burner plan to make a new Waconia charting page based on Google Charts and Fusion Tables: all client sided to avoid hosting costs. Some folks connected to the Richland, WA airport are patiently waiting for this one.
A note on what's coming next...
Demos: Edit walls & pins