Mini Logo Interpreter in 100 lines of pure JS

"Logo is a programming language designed in the 60s. Its most famous feature is turtle graphics: the programmer controls the "turtle" (cursor) with instructions like forward, left, right, repeat and the turtle leaves a 'trace' on the screen. Today we'll build a compact, single-file logo interpreter in about 100 lines of pure JavaScript. To keep the code short, we'll only implement the four instructions above, plus color_cycle (not part of the standard Logo) that cycles through 36 HSV hues."

"Tokenizer The tokenizer normalizes square brackets and splits the input on whitespace. It lowercases tokens so commands are case-insensitive. Brackets are kept as separate tokens so the parser can detect repeat blocks. // Example tokenizer snippet function tokenize(input) { input = input.replace(/\[/g, ' [ ').replace(/\]/g, ' ] '); const raw = input.trim().split(/\s+/).filter(Boolean); return raw.map(t => t.toLowerCase()); } Parser The parser reads tokens and builds nodes: forward, left, right, repeat with a nested body, and color_cycle. It supports nested repeats by using a recursive parseBlock function."

The interpreter is implemented as a single HTML file containing UI controls, a canvas, and all JavaScript so it runs in any modern browser. A tokenizer normalizes square brackets, splits on whitespace, and lowercases tokens so commands are case-insensitive. A parser converts token streams into a minimal AST with nodes for forward, left, right, repeat (with nested bodies), and color_cycle. An executor walks the AST, maintains turtle state (position, heading, pen color), and draws on an HTML5 canvas. The color_cycle command advances the pen color through 36 evenly spaced HSV hues. The implementation targets compactness (~100 lines) and minimal commands.

Read at Slicker