• About
  • Canvas

The Online Turtle System

This is an online version of the downloadable Turtle System. The interface is comparatively streamlined, and does not provide the complete functionality of its downloadable counterpart. Advanced features of the Turtle Machine (PCode trace and memory watch) have not been implemented, and the compilers cannot handle arrays. Any program you write using arrays must be compiled in the downloadable system; though if you save it there as an Export/Upload file (TGX), it can still be run here.

At present, online compilers are available only for Turtle BASIC and Turtle Pascal. This means that Turtle Python files can be run (if they have already been compiled), but cannot be edited.

The PROGAM area on the left of the Home page contains features for opening and saving Turtle programs and editing program text, as well as tabs showing the usage and PCode compilation data (available in the downloadable Turtle System when Power User Mode is enabled). The MACHINE area on the right contains a tab for setting various runtime options, and the Canvas, Console, and Textual output for your programs. Under the memory tab you can also inspect the machine's memory (available in the downloadable Turtle System, together with much fuller information, when Power User Mode is enabled). The various tabs in the Help page duplicate the information available in the downloadable system under the two QuickHelp tabs.

The downloadable Turtle System currently exists in two versions: the stable version 11, and the more powerful but still in development version 12. The underlying virtual machine for these two versions is slightly different (the latter supporting strings as arrays, multi-dimensional arrays, and file handling), and consequently a program compiled in one version will not necessary run as intended (or at all) in the other. In due course version 11 (and its underlying machine) will be phased out, but for the time being the Online Turtle System supports both machines. You can switch between these using the drop-down menu next to the language menu above. Note that the online compilers only compile to the version 12 machine, and consequently that if you edit your program online, it will automatically be converted to the new version.

The HTML5 Canvas API

The Online Turtle System uses the HTML5 Canvas API for rendering the Turtle Graphics output of your programs. Because of the inherent nature of this API, it has not been possible to maintain complete consistency in the visual output of your programs between the downloadable and online systems. The following unavoidable differences remain:

  • Anti-aliasing The HTML5 Canvas API makes its images appear smoother at the edges using a technique called "anti-aliasing". This means, for example, that when you draw a red blot on the Canvas, the pixels immediately surrounding that blot will be filled in using a semi-transparent red of the same shade. The downloadable Turtle System does not do this, giving your shapes sharper and more visibly "pixelated" edges. The most likely practical effect this difference will make to your programs concerns animations. To give the appearance of a red ball moving against a white background, for example, you need to draw a red blot, pause for a moment, then draw a white blot on top of it (to "blot it out"), immediately drawing another red blot in a slightly different position. To achieve this effect in the Online Turtle System, the white blot needs to be slightly larger than the red blot. If it is not, the semi-transparent red pixels around the edges of your red ball will not be blotted out, and you will see a kind of "vapour trail" as the ball moves across the screen.
  • Line drawing A Canvas coordinate corresponds to the top left corner of a square pixel. A horizontal or vertical line from one coordinate to another is thus conceptually centered in between two pixels. If the thickness of the line is even, this causes no difficulty, as the same number of pixels can be filled in on either side. If the thickness of the line is odd, however, it is less obvious what should be done. The downloadable Turtle System fills in an extra pixel either to the right of or below the coordinate line, meaning that horizontal and vertical lines of odd-numbered thickness are centred half a pixel to the right or below their even-numbered counterparts. The HTML5 Canvas API, however, keeps lines of odd-numbered thickness exactly centred, giving the appearance of "half" pixels on either side using anti-aliasing (i.e. an extra pixel is filled in on both sides, but using a semi-transparent colour). At the default (very high) resolution, this will not make any noticeable difference to your programs. At lower resolutions, however, where each pixel is a visible square on the Canvas, the difference can be quite striking. To mitigate this, the Online Turtle System artificially doubles the resolution of the Canvas when it is set to anything below 60 in either dimension (this setting can be changed or turned off entirely in the options tab). The effect of this is to eliminate any lines of odd-numbered thickness, since the actual output thickness will always be multiplied by 2. For an illustration of the problem this is designed to solve, you may like to disable this option, and then run the Snake (classic game) example program.
  • Text underlining The HTML5 Canvas API does not support underlined text. Consequently attempts to print underlined text to the Canvas in the Online Turtle System will result in normal text being printed instead.