Turtle Graphics - JavaScript/VRML - Notes

These notes refer to the turtle graphics page. This page demonstrates simple turtle graphics. When the user clicks on one of the button the associated JavaScript function is executed. The JavaScript function in turn "calls" a function in the embedded VRML (in VRML speak - the JavaScript sends events to the turtle "Tommy").

Some key points:

embed

A VRML scene may be "embedded" in a web page so long as the browser supports an appropriate plug-in. The syntax is as follows:

<embed width=400 height=300 src="turtle.wrl">

JavaScript

JavaScript is interpreted at the browser. JavaScript functions can be included in HTML and triggered by HTML form controls.

Defining a JavaScript function:

JavaScript functions should be incldued in script tags. The script is usually put in the head section.

<script>
function MyFunction(s){
alert(s + ' was here!');
}
</script>

alert is a JavaScript command to display a simple dialog box.

Executing the function:

HTML controls may be defined the controls must be in a form. Trigger events may be directed to functions.

<input type="button" value="Who?" onClick="MyFunction('Andrew')">

JavaScript to VRML

A JavaScript function in the browser can communicate with an embedded VRML world. The turtle node "Tommy" has a number of EventIn's which can be triggered.

document.embeds[0].getNode("Tommy").getEventIn("forward").setValue(v*1.0);

Note that we must force a type conversion from string to float by multiplying by 1.0

Other turtle commands
Command	Parameter type	Notes
forward	float	A distance - 100 is fairly small.
left	float	Rotate by the angle in degrees.
dive	float	Rotate nose downwards by the angle given.
roll	float	Bank right wing downwards by angle given.
show	boolean	Turtle may be visible or not.
pen	boolean	No trail is left when the pen is up (false).
penColor	string	The string consists of three space separated decimal numbers between 0 and 1. These represent the Red, Green and Blue components.

Sadly Internet Explorer does not support this particular interface.