EcmaTurtle Manual

Welcome to EcmaTurtle. There is no real manual yet, but I wrote this quick introduction for you.

Except for this first section, the contents of the manual can be accessed from within the program via the context help. When you place the cursor over a known command in the source code editor, the related section is shown.

Purpose of the Program

EcmaTurtle is an educational tool and a toy. Its main focus is centered around turtle graphics. Commands similar to those found in the Logo Programming Language are provided, but JavaScript is used as the programming language instead. Because JavaScript is very flexible, you can use most programming paradigms in your programs.

As an Educational Tool

Although I tried to include a set of useful example programs, EcmaTurtle was not made for autodidact study. It is a tool for teachers, that will guide their students through the learning process.

If you are on your own, I recommend you take a look at the Learning Area of the MDN web site. You can also get help from real people on the IRC Network. You will probably want to join ##javascript on Freenode.

User Interface

Hopefully, the UI of EcmaTurtle is self-explanatory, but a few aspects may not be as intuitive:

If you run into problems, be it my software not working right or you having questions, feel free to contact me.

Context Help Pages

The following sections are used in the program as context specific help.
The links will only work on this very page, if JavaScript is enabled in your browser:

EcmaTurtle

Set the cursor on a command in the source code above to get help on it.

Read the
Manual

TurtleScript

JavaScript functions provided by EcmaTurtle:

Drawing

Control

Math

JavaScript

Predefined Objects

Supplementary Articles

Introductions on MDN

Supplementary Articles

Scope

Short description

Example code

See also:

Hoisting

Variables declared with var are put into memory during the compile phase, before the program is started. Therfore, those variables are available, before they seemingly have been declared, as if they were automagically moved to the top of the scope. This can be prevented by never using the outdated var instruction, but instead using let (which was added to JavaScript at a later time), thus preventing nasty surprises:

function func() {
	console.log(my_var);
	console.log(my_let);

	var my_var = "This will be logged to the console.";
	let my_let = "Will trigger a Reference Error.";
}

See also:

Code Security

JavaScript is a very powerful language. Unfortunately, it has some really strange quirks, that can easily trip unexpirienced programmers, sometimes even experts are scratching their heads. It also allows you to do things, that are not always smart to do. Simpler code is safer in general, and easier to understand, when you come back to it a long time later.

Therefore, I recommend, you stick to certain coding styles and refrain from writing clever constructs. Here are a few hints, that will make your code easier to debug and will prevent certain mistakes from happenening in the first place:

See also:

Comments

Short description

Example code

See also:

Arrays

Short description

Example code

See also:

Curly Braces

Short description

Example code

See also:

Parentheses

Short description

Example code

See also:

Comparisons

Short description

Example code

See also:

Operators

Short description

Example code

See also:

Turtle Commands

FD(units)

moves the turtle forward. If the turtle is "down", this will draw a line.

FD(10);

See also:

BK(units)

moves the turtle backwards. If the turtle is "down", this will draw a line.

BK(10);

See also:

LT(degrees)

turns the turtle to the left.

LT(90)

See also:

RT(degrees)

turns the turtle to the right.

RT(90)

See also:

UP()

lifts the turtle, so it will not draw a line, when moving.

UP()

See also:

DN()

Lowers the turtle, so it will draw a line, while moving.

DN()

See also:

HOME()

Sets the pen to the home positio (0|0) and the direction 0° (to the right).

DN()

See also:

PUSH()

Pushes position, direction, color, line width and pen up/down status to the stack.

PUSH()

See also:

POP()

Retreives position, direction, color, line width and pen up/down status from the stack.

POP()

See also:

SHOW()

Shows the pen.

SHOW()

See also:

HIDE()

Hides the pen

HIDE()

See also:

WIDTH(1/SCALE_FACTOR units)

sets the line width. At 100% zoom, a unit is SCALE_FACTOR pixels on the screen.

WIDTH(1)

COLOR("color code")

sets the drawing color. CSS color codes and names are allowed.

COLOR("red")
COLOR("#f00")
COLOR("#ff0000")
COLOR("rgb(255,0,0)")
COLOR("rgba(100%,0,0, 0.5)")
COLOR("hsl(0,1,0.5)")
COLOR("hsla(0,100%,50%, 0.5)")

See also:

BACKGROUND("color code")

sets the background color. CSS color codes and names are allowed

BACKGROUND("red")
BACKGROUND("#f00")
BACKGROUND("#ff0000")
BACKGROUND("rgb(255,0,0)")
BACKGROUND("rgba(100%,0,0, 0.5)")
BACKGROUND("hsl(0,1,0.5)")
BACKGROUND("hsla(0,100%,50%, 0.5)")

See also:

REPEAT

Repeats a block of commands a given number of times.

REPEAT 12 BEGIN
	do_this_12_times();
END

See also:

BEGIN

Starts a block of repeated commands.

REPEAT 12 BEGIN
	do_this_12_times();
END

See also:

END

Ends a block of repeated commands.

REPEAT 12 BEGIN
	do_this_12_times();
END

See also:

SLEEP(milliseconds)

upadets the screen and pauses program execution.

SLEEP(1000)

See also:

UPDATE()

shows, what has been drawn so far. Useful, when speed is set to "No animation".

UPDATE()

See also:

RESET(options)

Clears the drawing, sets options.

RESET()
RESET(NO_GRID)
RESET(NO_GRID | NO_TURTLE)
RESET(NO_GRID | NO_TURTLE | FULL_SPEED)
RESET(NO_GRID | NO_TURTLE | NO_ANIMATION | NO_TRACE | NO_LOG)

RESET will enable all options, unless one or more flags prohibiting the option(s) are set.

Options

NO_GRID
Same effect as GRID(OFF)
NO_TURTLE
Same effect as HIDE()
NO_ANIMATION
Same effect as SPEED(-1) (Single turtle operations are not shown), sets maximum execution speed, no automatic screen updates, see UPDATE()
NO_TRACE
Don't follow the code in the debugger
NO_LOG
Don't add turtle commands to the log. Slightly improves speed, but redrawing is impossible. FULL_SPEED
const FULL_SPEED = (NO_ANIMATION | NO_TRACE | NO_LOG);

See also:

SPEED(milliseconds)

Set execution speed as a delay between every command.

SPEED(33)
SPEED(NO_ANIMATION)   // No automatic update of the screen while running.
                      // See RESET() and UPDATE()

See also:

GRID([on|off])

toggles the grid on or off. The grid will never be saved when downloading the image.

GRID()       // Turns the grid on
GRID(ON)
GRID(1)
GRID(true)

GRID(OFF)    // Turns the grid off
GRID(0)
GRID(false)

See also:

Math

RND([min, max])

returns a random value from 0..1 or min..max

let random_float = RND()      // Returns values from 0 to 0.999...
let random_integer = (2, 9)   // Returns values from 2 to 9

See also:

SIN(degrees)

returns the sinus of a value. Turtle functions take radians as parameter.

let y = SIN(PI/2)
let y = SIN(45°)    // "°" will be seen as "*PI/180"

See also:

COS(degrees)

returns the cosinus of a value. Turtle functions take radians as parameter.

let x = COS(PI/2)
let x = COS(45°)    // "°" will be seen as "*PI/180"

See also:

TAN(angle)

returns the tangens of a value

let y = TAN(90);

See also:

COT(angle)

returns the cotangens of a value

let x = COT(90);

See also:

SQRT(n)

returns the square root of a value.

let r = SQRT(4);   // r will be 2

See also:

PI

- the mathematical constant π.

let radians = degrees / 180 * PI;
let degrees = radians * 180 / π;    // The unicode charcter is allowed, too.

See also:

TAU

- the mathematical constant τ = 2π).

let radians = degrees / 360 * TAU;
let degrees = radians * 360 / τ;     // The unicode charcter is allowed, too.

See also:

°

- Every instance of "°" will be turned into "*PI/180" before execution.

let angle = 45°;
let x = SIN(angle)
let y = COS(45°)

See also:

JavaScript

const

defines a constant and assigns a value to it.

const my_string = "String";
const my_array  = ["with", 1, 3, "mixed", "content"];
const my_object = { name:"My PC", type:"Notebook", GB_ram:8 };

It is a good idea to define all variables as const, if you don't intend to change their contents later. This prevents you from accidentially assigning values to it.

See also:

var

defines a variable for the current function. Initial values can also be set:

var π;
var my_string = "String";
var my_array  = ["with", 1, 3, "mixed", "content", my_string];
var my_object = { name:"My PC", type:"Notebook", GB_ram:8 };

See also:

let

defines a variable for the current scope.

Initial values can also be set:

let my_string = "String";
let my_array  = ["with", 1, 3, "mixed", "content"];
let my_object = { name:"My PC", type:"Notebook", GB_ram:8 };
for( let i = 0 ; i < MAX ; ++i ) { console.log(i); }

See also:

if

short description

Example code

See also:

else

short description

Example code

See also:

switch

short description

Example code

See also:

case

short description

Example code

See also:

default

short description

Example code

See also:

break

short description

Example code

See also:

continue

short description

Example code

See also:

for

short description

Example code

See also:

while

short description

Example code

See also:

function

short description

Example code

See also:

return

short description

Example code

See also:

this

short description

Example code

See also:

true

- Boolean flag. Equal to ON and +1

if (true) always_do_this();
GRID(true)
GRID(ON)
GRID(1)

See also:

false

- Boolean flag, equal to OFF and 0

if (false) never_do_this();
GRID(false)
GRID(OFF)
GRID(0)

See also:

Pre-defined Objects

Array

short description

Example code

See also:

Object

short description

Example code

See also:

Math

short description

Example code

See also: