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 stepD– draw forward by stepS(n)– set step to nM(n)– move forward by nD(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 positionD(x, y)– draw to absolute positionH– 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 widthZ– 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 zeroR(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:
$xxxfor 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
Gallery
Click on a canvas to show editor.
Discussion
There is only one comment.