Introduction to Logo Turtle

This is the first Logo Interpreter in Google Chrome Webstore.
https://chrome.google.com/webstore/detail/logo-turtle/dcoeaobaokbccdcnadncifmconllpihp

It is a very useful tool to teach kids turtle graphics.

Previous Contributions

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

v0.0.2 New Features

This Commit adds the following features:

1. Show and Hide Turtle, so we know where the turtle is and its angle.
2. Set Line Color and Width
3. Tab Help to show a list of supported commands.

Screenshots

Turtle is at (0, 0) and heading North by default

cs 
color blue width 2
repeat 4 [fd 100 rt 90]
color red width 1
lt 45 repeat 5 [fd 100 rt 144]

The line colors and widths can be set before each FD or BK.

Supported Commands in v0.0.2

How to Set Turtle Direction in JQuery?

    // set turtle angle
    setTurtleAngle(ang) {
        this.turtle.css({
            "-webkit-transform": "rotate(" + ang + "deg)",
            "-moz-transform": "rotate(" + ang + "deg)",
            "transform": "rotate(" + ang + "deg)" /* For modern browsers(CSS3)  */
        });             
    }

How to Get Next Local Scope?

To parse the LOGO program for square brackets.

// get next [] body
const getNextBody = (s, i, U) => {
    let nested = 0;
    // need to match [ and ]
    let start = i;
    while (i < U) {
        if (s[i] == '[') {
            nested ++;
            if (nested == 1) {
                start = i;
            }
        }                                               
        if (s[i] == ']') {
            nested --;
            if (nested == 0) {
                break;
            }
        }
        i ++;
    }
    return {left: start, right: i};
}

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 Circle
8. Add Arc
9. Add Eraser
10. Add Fill
11. Save As Picture
12. Save As Program
13. Comments
14. 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.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---