Reimagining of the graphical turtle of the Logo programming language as a Coffeescript-backed Progressive Web App.
Read the full story at https://danq.me/trrtl
Visit trrtl.com to play with it in your browser. Click the "help" icon in the lower right for documentation on supported commands. Drag-drop or copy-paste code directly to the window to execute it; some samples are provided in the documentation. This app is capable of working entirely offline but will self-update in the background when running online; it's also capable of being installed as a desktop application.
The "reset" button in the bottom right wipes the screen and resets the position and state of the turtle (typing
reset() does the same thing programatically). The "code editor" button in the bottom right opens an editor where you can write and execute longer programs.
Your program state is recorded to the address bar so you can bookmark or share it to carry on from where you left off (e.g. you can simply share the current URL to show a friend what you've produced).
Browsers which do not send "keypress" events are not able to use the (default) "console" mode. This includes most installations of Chrome on Android unless specialised keyboards are installed (e.g. Hacker's Keyboard). Firefox on Android, for the most part, works okay, and any modern browser is capable of using the
Mechanism of operation
<canvas> elements: the uppermost one renders the turtle and is wiped/redrawn every time the turtle moves; the lowermost one shows the output of the turtle's lines. State is produced using JSZip compression, encoded as Base64, into the hash of the window. A service worker and accompanying manifest file facilitate the PWA/offline working/local installation.
Deployment & Security
The project is implemented as a simple static website suitable for deployment virtually anywhere. PWA functionality requires a HTTPS connection.
As part of defence-in-depth, its also advisable to set a Content-Security-Policy header to e.g. prohibit third-party scripts and form submissions. This does not prevent XSS attacks, but reduces the ease with which they can be effected.
Possible future developments include:
- Finding workarounds to the "keypress" limitations in e.g. Chrome for Android
- (Re)implementing more of the UCB Logo command set
- Allowing for "delay" (like the original)
- Facilitating multiline statements through the default console
- "Multiplayer" turtling across a network using WebSockets or WebRTC
- Communicating with a physical turtle (perhaps by adapting an off-the-shelf remote-controlled turtle by adding an Arduino or something) using WebSockets, WebRTC, or the Web Bluetooth API
- Some kind of trainer/tutorial?
- Command-buffer/history (and maybe even autocomplete?)
Please feel free to fork or make pull requests with any of these in (pull requests must be unlicense-friendly).