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:

1. FD, FORWARD
2. BK, BACKWARD
3. RT, RIGHT
4. LT, LEFT
5. HOME
6. CS, CLEARSCREEN
7. REPEAT
8. PU, PENUP
9. 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;  

Roadmap of Chrome Extension: Logo Turtle

1. Add Functions
2. Add IF/THEN/ELSE
3. Add Variables
4. Add Colors
5. Add MoveTo
6. Add PrintText
7. Add Circlee
8. Add Arc
9. Add Eraser
10. Add Fill
11. Save As Picture
12. Save As Program
13. etc. etc.

Technology Stack

If an App can be written in Javascript, eventually it will be written in Javascript.

Chrome Webstore

Install the Turtle Programming for Kids Now!

Contribution Welcome

Github: https://github.com/DoctorLai/LogoTurtle

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request.

Reposted to https://helloacm.com/teach-your-kids-programming-the-first-logo-interpreter-turtle-graphics-in-chrome-extension/

---

Posted on Utopian.io - Rewarding Open Source Contributors

---