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.