JavaScript Turtle Graphics IDE Guide
IDEs or Integrated Development Environments allow a user to write and test code on a single page. This IDE allows a user to write JavaScript code with Turtle Graphics functions and see the graphical results. code and test it on a single web page. No other program is required. Just a modern browser that can support HTML5 like Chrome or Firefox. Some older browsers may not work.
The IDE screen is divided into four main areas:
- Language Reference lists the Turtle Graphic functions that may be used to draw graphics on the canvas. Underlined examples may be clicked upon to see there immediate effect on the turtle and the canvas.
- Canvas is the area where the graphics are drawn. The drawing is done by the turtle which is modeled as a triangle pointing in the direction of travel. Imagine that the turtle has a pen in its belly and that the pen leaves a mark as the turtle moves.
- Command is an area with controls for entering simple JavaScript commands or to control the examples. There also are a set of buttons that are used to reset the canvas and to control the execution of the example code.
- Code is an area for loading, displaying, and editing JavaScript Turtle Graphic helper functions or whole programs. There are several examples which you can load with the example selector above the code area. Modified code can be downloaded to you computer and saved programs can be loaded as well with buttons at the bottom of the code area.
Each of these areas is explained in more detail below.
Language Reference
The language reference lists the available functions for Turtle Graphics. Parameters are italicized and enclosed within parentheses ‘(’ and ‘)’ characters. Optional parameters and separating commas are enclosed within square brackets ('[’ and ‘]’ characters). The square brackets are not used when invoking the function, but the separating commas must be supplied. So for the function template foo(a [,b [,c]]), one can invoke function foo() as foo(1), foo(1,2) or foo(1,2,3).
Alternative forms of the functions are separated with the pipe ‘|’ character. These forms provide some compatibility with other versions of Turtle Graphics. Each of the alternate forms is identical in function.
Examples are shown in bold typewriter font. Each example may be clicked to immediately execute it to see what it does. This allows the reader to directly experiment with the function. The user may edit the parameters in the command box to see their effect.
This platform uses JavaScript and its syntax. While many programs can be written with the Logo Graphics functions alone, it is possible (and sometime necessary or desirable) to use the full power of the JavaScript language. For a brief tutorial on JavaScript please see JavaScript.
Canvas
The canvas is the area where the graphics are drawn. When the platform is started up or reset, the turtle is moved to the center of the canvas. The turtle is represented as a triangle pointing in the direction that the turtle will move if issued a forward() command.
The canvas is described with a coordinate system, which is like graph paper where the lines are numbers. The center is (0,0) or an X-coordinate of zero and a Y-coordinate of zero. Positive X-coordinates increase to the right of center. Negative X-coordinates increase to the left of center. Positive Y-coordinates increase from the center toward the top of the canvas. Negative Y coordinates increase from the center toward the bottom of the canvas. This mimics the Cartesian coordinate system used in algebra and other mathematics. Note that this coordinate system is different than the normal JavaScript canvas coordinate system (origin at the top left and only positive coordinates). The Turtle Graphics functions hide these differences and much of the mathematical complexity from the user.
Above the canvas is an Information or i button which may be pressed to control the pop-up information which appears when hoovering the mouse over a button or area of the IDE. When it is blue, the pop-up help information is active. When it is red, the pop-up help information is in-active.
Also above the canvas is an Home button which may be pressed to return to the Turtle Graphic home page.
Command Area
The command area has a text box for entering a simple JavaScript code statement to execute or to control execution of code in the code area. A JavaScript statement including Logo Turtle Graphic functions may be entered into the Command box. Normally this is used to execute the code in the code area, which is invoked with the demo() function. You can invoke Turtle Graphics functions, like forward(10)` to see how they work. Indeed most of the functions described in the Language reference page do just that. When ENTER
or RETURN
key is pressed, the statement is executed. Successful
graphic functions are immediately displayed on the canvas. Syntax errors (e.g., missing parentheses, unknown function name, unexpected end of program) and other errors are also shown on the canvas.
The button can be used to clear the canvas, move the turtle to the center of the canvas, and initialize the IDE.
Sometimes the IDE can get locked up and it is necessary to reload the web page with the page reload function of the browser. This can happen if you mistakenly assign a function name to a value. The function will no longer work as once did, because it is now a variable with a value rather than a function. For example, you have tried to executed the code forward() = 10 and you will get the error Forward is not a function. Reload the page with the browser (click on the browser reload button) and all will be well.
The IDE may also need to be reloaded if the program gets stuck in an infinite loop. This is done by closing the browser tab or window and opening a new tab or window.
The
button can be used to run code in the Code box provided that the code includes a demo() function. Syntax errors in the program may not be apparent. Some errors may be
visible on the canvas by invoking demo() from the command text box.
The button can be used to clear the code in the example area.
When the example code executes either animate() or delay()` functions, a
button will appear allowing the user to stop the animation in progress without clearing the canvas. The
button will also stop the animation, but it clears the canvas.
Any code in the Code area is evaluated when the ENTER
or RETURN
key is press with the cursor within the Command box. So the last line of the example code could invoke any of its functions, (e.g., demo();) which could in turn be executed when an ENTER
or RETURN
key is pressed with a cursor in an empty Command box.
Code Area
The example is an area for loading, displaying, and editing JavaScript Turtle Graphic programs. Several examples are available in the select menu above the box. Selecting an example causes the example to be loaded, but not executed. The user must press the button to execute the example code.
The user may edit the example code to make modifications or to try out new code. Changes will survive reloading of the page, but will not be saved in general. To save the modified code, select all of the code, paste it into your favorite text editor, and save it. To load the saved code, use the text editor to access the code, select all of the text, and then paste the text into the Code area. JavaScript, in general, does not access files on your local machine for security reasons.
Limitations
Not all errors are caught. If the error is not apparent, more details are usually available on the on the JavaScript console which is accessed through the developer tools of the browser being used. This can be accessed by pressing control- or command-shift-C or by finding “Developer Tools” or “Web Developer” in the browser menus and selecting the “Console” or “Web Console” functions. The JavaScript console is a very powerful tool that allows you to inspect various elements of a web page and see their attributes, check performance, single step through JavaScript code and other functions, we are only interested in the console at this point. The rest of the console functions are worth exploring as you become more familiar with web programming.
The Logo language is not implemented here, nor is its syntax. This is only a set of JavaScript functions that mimic the Logo Turtle Graphics part of the Logo language.
Stand Alone Mode
The IDE can be used without a connection to the internet in what is called a stand alone mode. Download or clone the files from https://github.com/kirkcarlson/js-turtle into a dedicated directory. Access the files with your browser by opening the index.html file in that directory.