Logo in the browser

The smell of dust and warm plastic. The faint flicker of a CRT in a room with blinds half-drawn. On extra computer science classes, when I was around thirteen, we had two worlds in one: Pascal for “serious” programming, and Logo for the turtle. Forward, back, left, right. Type repeat 4 [ fd 100 rt 90 ] and a square appeared on the screen. It felt like a game and like magic at the same time.

That Logo was Logo Komeniusz - the Polish educational variant, from the ecosystem around EI System, that many of us met in school. Instead of fd and bk you had NP (naprzód) and WS (wstecz); instead of rt and lt, PW (prawo) and LW (lewo). The core commands looked like this:

Core commands (Polish ↔ English)

Plus pen and turtle visibility: POD / OPU (pen up/down), PŻ / SŻ (show/hide turtle), and UKP, UGP, USTALTŁO for pen colour, pen width, and background. That mix of Polish keywords and a little triangle on the screen stayed in the back of my head as one of those old tools.

Years later I thought: what if that environment lived in the browser? No floppies, no lab schedule. Just a canvas, a turtle, and the same idea. So I built it in TypeScript (logo.bwozniak.com): a small interpreter that runs the script line by line, and a transpiler so you can flip the UI between English and Polish and keep the same program. When you switch language, your code is translated to the other set of keywords - same drawing, different words.

How the transpiler works

There’s no regex over the whole script and no full Abstract Syntax Tree (AST). I chose a simpler approach on purpose: Logo’s grammar here is mostly keyword + optional argument, and the goal was to swap words, not to analyse structure. A full AST would mean a proper parser, expression trees, and careful handling of every construct - correct and flexible, but more than this project needed. A line-by-line token swap is quick to implement, easy to extend with new commands, and enough to keep Polish and English in sync.

The pipeline is:

1. Split the script into lines and strip out procedure definitions (Polish oto ... już or English to ... end) so we can translate their bodies separately.
2. For each line, tokenize by whitespace - e.g. powtórz 24 [ np 80 pw 165 ] becomes a list of tokens.
3. Map each token through a bilingual keyword table: if it’s a known command, replace it with the equivalent in the target language; numbers, brackets, and procedure names stay as-is.
4. Rejoin tokens with spaces and output the translated script.

The mapping logic is literally “look up token → emit translation or keep original”. In pseudo-code:

function translateLine(line, targetLang):
  tokens = split(line, whitespace)
  result = []
  for each token in tokens:
    if token is "[" or "]":
      result.append(token)
    else if token is in keywordMap:
      result.append(keywordMap[token][targetLang])   // e.g. "powtórz" → "repeat"
      if token takes an argument:
        result.append(next token)   // keep number/expression as-is
        skip next token in loop
    else:
      result.append(token)   // numbers, procedure names, :variables
  return join(result, " ")

So powtórz 4 [ np 100 pw 90 ] becomes repeat 4 [ fd 100 rt 90 ] - same structure, different words. Procedure bodies and the main script are translated the same way.

Thirteen-year-old me, in that class with Pascal and Logo, wouldn’t have believed that the same turtle would one day run in a browser. He also wouldn’t have imagined that an article like this could be drafted from a short prompt - same nostalgia, different tools. There’s something odd about that. Back then, we typed every line ourselves, debugged by eye, and learned by changing one command and watching the turtle. Today we can describe what we want and get code and prose back. The gap between doing it by hand and guiding an AI to do it is real. But the goal is still the same: to make something that works and that reminds us why we liked this in the first place. The turtle still draws only what we ask it to.

So here it is: a small tribute to those extra CS classes, to Logo Komeniusz, and to the fact that some things - like a turtle that draws when you tell it to - are worth bringing back.

Try it yourself

The app lives at logo.bwozniak.com. Paste the snippet below into the editor and hit Run. It will clear the screen, draw blue coordinate axes (a horizontal and a vertical line), then plot a parabola by repeating a small procedure nine times: at each step the turtle moves forward a bit and draws a vertical segment whose height is the square of the step number (1², 2², …, 9²). You’ll see the classic y = x² curve appear under the axes - the same kind of thing we used to do on the lab machines, now in the browser.

odnowa
pż
ukp blue
pod
np 350
bk 350
bk 350
np 350
lw 90
np 200
bk 200
bk 200
np 200
pw 90
pod
ws 80
opu
oto parabola :x
np 8
lw 90
np iloczyn :x :x
pw 90
już
powtórz 9 [ parabola :repcount ]

The turtle will do the rest. Just like it did back then.