Web Interpreter Usage Guide
This interpreter implements the web level of 61A Scheme, adding several additional features. An overview of some of them is below. A full reference of the additional primitives this interpreter implements is available here. This supplements the regular 61A Scheme primitives that this interpreter also implements.
You can also run Logic in this interpreter by calling
clicking here. Logic is currently based on the Summer 2016
version. Make sure to include
(logic) at the top of your files when using
Diagramming and Visualization
You can draw an environment diagram of the current environment with
(diagram). This diagram will not automatically update, so you'll need to call
(diagram) again if you want to see changes. If you don't want to draw the entire environment you can instead call
(draw-pair pair), passing in a pair to draw just that pair.
To visualize the execution of some code (in a manner similar to the Python Tutor), use
(visualize code) (replacing
code with one or more Scheme expressions). This will diagram the environment before the execution of the code and then allow you to use the buttons above the visualization to navigation between visualization steps. Each time a new frame is created, a frame returns, or a name is bound or modified (except for binding arguments), one step is added to the visualization. Note that your code is executed immediately when using the visualizer and that the environments you see are only saved snapshots.
To exit the visualizer, click the
x button. You will not be able to call visualize anything else until you exit the existing visualization.
The diagramming may break with large environments. It will definitely crash if your lists have any cycles (in fact, lists with cycles will probably crash the entire interpreter).
While the visualizer will execute the code provided to it immediately,
(debug code) actually lets you step through the execution of your code. Click the
Step button to execute one step at a time or click the
Continue button to keep executing until encountering a breakpoint or the end of your code. You can set a breakpoint by calling
(breakpoint) somewhere in your code. The debugger will diagram your code after every step.
Libraries and Demos
You can load various libraries and demos with the
(library 'id) and
(demo 'id) commands.
Available libraries and demos:
(library 'math)- Various math operations (mostly implemented with JS)
(library 'strings)- Various string operations (mostly implemented with JS)
(library 'timing)- Check the runtime of your code with
(library 'hash)- Hash table implemented using Scheme vectors (outside the scope of 61A)
(library 'music)- Create musical compositions with Scheme code. See here.
(demo 'autopair)- After loading, expressions which evaluate to pairs will be automatically drawn
(demo 'chess)- Play a game of chess (complete except for checkmate detection, castling, en passant, and underpromotion)
(demo 'paint)- Click and drag to draw on the canvas
(demo 'go)- Play a game of Go (not yet complete; needs scoring)
(demo 'songs)- Play songs created with the music library. See here.
You can change the interpreter's theme with
(theme 'theme-name). Use
(reset-theme) to return to the default.
(theme 'monokai)- Variant of the Monokai theme (not to be confused with Monokai Sublime, which the default theme is based on)
(theme 'solarized)- Dark version of the Solarized theme
(theme 'monochrome)- All backgrounds are white and all text is black
(theme 'gobears)- Blue and gold monochrome theme
Also, after loading the monochrome theme, you can call
(ui-monochrome background foreground) to use your own colors.
If you want to customize your own theme, you can use they
ui-text-style primitives (see
ui-monochrome for an example). You can also add custom CSS with
Your theme will automatically be saved whenever you make a change and will be re-applied when you reopen the interpreter.
Event Listeners and Buttons
Event listeners allow you to execute a given procedure when a certain event is triggered. You can create a listener with
(listener 'event-name procedure). Use
(cancel 'event-name) to cancel all listeners attached to that event or
(handle 'event-name procedure) to cancel all existing listeners and then bind a new one. You can listen for mouse events on the turtle canvas with
You can create buttons that appear in the upper right corner of the screen with
(create-button 'id "Label") and delete them with
(delete-button 'id). Listen for button clicks with with
(listener 'button_id procedure) (replacing
id with your button's id).
You can also trigger your own events with
(trigger-event 'event-name args...).
This interpreter implements 61A's version of Turtle graphics in Scheme using an HTML5 Canvas. There are a couple of differences:
(exitonclick)only displays an info message. Use
(exit_turtle)to actually exit.
(internal_canvas x y)changes the size of the internal grid used to draw on the canvas. Calling this command clears any existing drawing. The default internal grid is 1000 by 1000.
(external_canvas x y)changes the size in pixels of the canvas. Calling this command will scale the canvas but it will not clear any existing drawing. The default external size is 500px by 500px.
(speed x)are still bound to prevent errors, but they do nothing. The turtle is always hidden and drawings are rendered as fast as possible.
(save_image)to open the image in a new tab, allowing you to save your drawing.
- Drawing partial circles is not particularly precise. This may cause drawings that use a lot of them to render improperly.
- I haven't properly tested the new commands added in the Spring 2015 iteration of the course. Please let me know if you find any issues.
Saving, Loading, and Editing
An editor where you can edit code side-by-side with the interpreter is available here. Anything you enter in the editor will be autosaved, but cannot be referenced from the regular interpreter. You can save to a particular file by adding the
file URL parameter with the name of the file to use (e.g.
editor.html?file=my-filename). You can also open a file in the editor from the interpreter with the
(edit 'file) command. You can load code saved to a file with
(load 'file). You can also save a log of everything you've typed into the interpreter to a file with
If you want to load code from a URL, you can use
(download 'url). The URL must start with
http:// and special characters and spaces should be URL encoded to avoid issues with interpretation.
If you want to share your current environment with a friend (or another browser), use the
(upload) command to upload all of the code you've entered into the interpreter. Once the upload is complete, you'll be provided with a link to a GitHub gist with your code. There will be a comment on the gist with links to open the code in the interpreter or the editor. You can also load the code into the interpreter with
The interpreter supports HTML5 caching that allows it to be loaded without an Internet connection. All of your saved bindings will remain available while you're offline, though for obvious reasons, you will not be able to use the
download commands. You will, however, be able to use the
theme commands, since the code necessary for using them is pre-cached.
An embeddable version of this interpreter is available here. See this page for more information
The web interpreter supports fairly comprehensive JS interop. A full guide is available here