23w46a

# Turtle Graphics

Turtle graphics is a popular way for introducing programming to non-programmers. More information about turtle graphics on Wikipedia.

This is a simple turtle graphics implementation in JavaScript that works in browser. Imagine a robotic turtle starting at (0, 0) in the x-y plane. Give it the command `D(50)`, and it moves (on-screen) 50 pixels in the direction it is facing, drawing a line as it moves. Give it the command `+(45)`, and it rotates in-place 45 degrees counter-clockwise. There are many other commands as well as variables, conditions, loops and procedures.

Development: from 2021. Technologies: JavaScript (ES6), Rollup.js, jQuery, Bootstrap 5, CodeMirror. Simple object-oriented design. The source code is hosted on GitHub.

## User Manual

Commands – Relative plotting:

• `M` – move forward by step
• `D` – draw forward by step
• `S(n)` – set step to n
• `M(n)` – move forward by n
• `D(n)` – draw forward by n
• `+` – increment angle by 45 degrees
• `-` – decrement angle by 45 degrees
• `+(n)` – increment angle by n degrees
• `-(n)` – decrement angle by n degrees
• `[` – push position and angle into stack
• `]` – pop position and angle from stack

Commands – Absolute plotting:

• `M(x, y)` – move to absolute position
• `D(x, y)` – draw to absolute position
• `H` – move home (0x0)
• `A(n)` – set angle to n degrees

Commands – Graphics & paths:

• `B(r, g, b, a)` – set background color (rgb = 0-255, a = 0-1)
• `C(r, g, b, a)` – set stroke color (rgb = 0-255, a = 0-1)
• `W(n)` – set stroke width
• `Z` – close path (connects first and last point)
• `E` – end path (C, W, Z, F and B also end path)
• `F` – fill path

Commands – Program flow:

• `?(x) { ... }` – evaluates body only if x is not zero
• `R(n) { ... }` – repeat body n times
• `@xxx(\$x, \$y...) { ... }` – define procedure named xxx with arguments x, y...
• `@xxx()` – execute procedure named xxx
• `!(n)` – set stack (recursion) limit to n (max: 1000)
• `\$xxx(y)` – set global variable xxx to y

Expressions:

• Standard infix notation, support for parenthesis
• Arithmetical operators: `+ - √ ∛ ² ³` (unary), `+ - * × / ÷ % ^` (binary)
• Logical operators: `!` (unary), `| & = < > >= <= !=` (binary)
• Custom variables: `\$xxx` for variable named xxx
• Build-in variables: `\$\$x`, `\$\$y`, `\$\$a`, `\$\$s`, `\$\$width`, `\$\$height`, `\$\$rnd`, only in R block: `\$\$it`

Interpreter behaviour:

• Designed to be fault-tolerant (the main reason is that rendering is done while typing)
• Case insensitive
• Argument list is also terminated by line feed or curly bracket
• Characters allowed in identifiers (variable/procedure names): A-Z, _
• The maximum number of executed commands is limited to 1,000,000 (no infinite loops)

Default values:

• Default position = [0, 0] (center)
• Default step = 20
• Default angle = 0 degrees (→)
• Default angle change = 45 degrees
• Default stroke width = 1
• Default recursion limit = 100

Click on a canvas to show editor.

## Discussion

There are no comments yet. You can be the first.