Using the examples

One way to use the examples is to (1) read the description of the code, (2) look at the code itself, and experiment with it as desired, then (3) check the syntax of the code and (4) run it in the small window at right. Then go to step 2 and repeat as necessary. If a larger window is needed, "Popup Canvas" can be used to spawn a new tab containing only the running application. In many browsers, this tab can be put into full screen mode to make it even larger. Modified code can be saved to a file on your local hard drive by selecting all (Windows, Ctrl-A), then copying (Windows, Ctrl-C), and then pasting into an editor (Windows, Ctrl-V). To retrieve a copy of the example including all code and art assets, press the "Download" button.

A description of all of the GUI elements follows below.

Code pane
This is the large pane at left. It always contains the main source file for the example. This pane is driven by CodeMirror, and includes a robust editing capability. Keybindings for search/replace functionality on Windows and OS X, respectively, are given below. Ctrl-F / Cmd-F = Start searching, Ctrl-G / Cmd-G = Find next, Shift-Ctrl-G / Shift-Cmd-G = Find previous, Shift-Ctrl-F / Cmd-Option-F = Replace, Shift-Ctrl-R / Shift-Cmd-Option-F = Replace all.
Result pane
This is the large pane at right. It can contain a description of the example, a live simulation, or results of code checking, depending on what button was just pressed.
Download button
Downloads a complete, unmodified, self-contained version of the example to your local hard drive.
Check Code button
Checks your code for possible problems courtesy of JSHint.
Run Code button
Executes the code in the code pane. The live simulation runs in the results pane.
Show Commentary button
Displays a description of the example.
Popup Canvas button
Like the Run Code button, but the live simulation appears in a separate window. This window contains only the simulation and nothing else, so you can easily make the simulation full screen (F11 on Windows Chrome).
Save button
Saves a copy of the current contents of the code window in your browser. There is only one save slot shared by all examples, so saving overwrites whatever was saved last.
Load button
Restores whatever was saved last to the code pane.