IDE User 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 is a guide to 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 bracket '[' 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 separate page.
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 0. 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 it is now a variable with a value. For example, you have executed
the code forward() = 10 and then try to execute
forward(10) 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.
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.