Teach Your Kids Programming - The First Logo Interpreter (Turtle Graphics) in Chrome Extension!

justyy(74)

Published in

#utopian-io

Words

331

Reading

2 min

Listen

Play

Introduction to Logo Turtle

I am teaching my 5-year-old son how to program. The language I pick is LOGO which is known as the turtle graphics.

There are some good implementations using Javascript, in the browser, some desktop logo interpreters, and also the one in PHP. However, these are not exactly what I want: a simple-but-powerful, safe (no need to download native software), be-able-to-run-offline and most importantly, the ads-free version.

The chrome webstore is the ideal place, but unfortunately, there is None for Logo Programming. Therefore, I decide to make one, and will bring more customized features in the next coming versions.

Chrome Webstore

It is available now so you can install it in Chrome webstore. This is platform-independent, meaning that with Chrome browser, you can just install the Logo Interpreter and have fun with it.

https://chrome.google.com/webstore/detail/logo-turtle/dcoeaobaokbccdcnadncifmconllpihp

Version 0.0.1

The very first version only supports the following keywords/features:

FD, FORWARD
BK, BACKWARD
RT, RIGHT
LT, LEFT
HOME
CS, CLEARSCREEN
REPEAT
PU, PENUP
PD, PENDOWN

So you should be able to write this

cs repeat 8 [pu fd 20 pd repeat 5 [fd 20 rt 144] pu bk 20 rt 45]

and see how it goes:

The Log tab prints any errors and warnings:

Also, in Settings, you can choose a different UI language, currently simplified Chinese (will add more when the project is at beta version).

How it works?

logocanvas.js is the view-model that supports the basic turtle instructions and draw to a canvas.
logointerpreter.js parses the LOGO source code. The repeat loop is implemented via recursion.

case "repeat":
    if ((word_next == '') || (!isNumeric(word_next))) {
        this.pushErr(LOGO_ERR_MISSING_NUMBERS, word_next);
        return;
    }
    let find_left = getNextWord(s, y.next, U);
    if (find_left.word != '[') {
        this.pushErr(LOGO_ERR_MISSING_LEFT, find_left.word);
        return;
    }
    let repeat_left = find_left.next;
    let find_right = repeat_left + 1;
    let nested = 1;
    // need to match [ and ]
    while (find_right < U) {
        if (s[find_right] == '[') {
            nested ++;
        }                                               
        if (s[find_right] == ']') {
                nested --;
                if (nested == 0) {
                        break;
                }
        }
        find_right ++;
    }
    if (find_right >= U) {
        this.pushWarning(LOGO_ERR_MISSING_RIGHT);                       
    }
    for (let i = 0; i < word_next; ++ i) {
        // recursive call repeat body
        this.run(s, repeat_left, find_right);
    }
    i = find_right + 1;
    break;