LogoTurtle v0.0.2: ShowTurtle, HideTurtle, Color, Width and Help.

Introduction to Logo Turtle

This is the first Logo Interpreter in Google Chrome Webstore.

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

Previous Contributions

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

LogoTurtle v0.0.2 New Features

This Commit adds the following features:

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

Turtle Screenshots

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

logo-turtle-graphics-programming

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

logo-turtle-star-square

The line color and width can be set before each FD (Forward) or BK (Move Backwards).

Supported Commands in v0.0.2

support-commands-logo

How to Set Image (Turtle) Direction in Javascript/JQuery?

1
2
3
4
5
6
7
8

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

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

Logo Source code Parsing – How to Get Next Local Scope?

To parse the LOGO program for square brackets.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 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};
}

// 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

• Add Functions
• Add IF/THEN/ELSE
• Add Variables
• Add Colors
• Add MoveTo
• Add PrintText
• Add Circle
• Add Arc
• Add Eraser
• Add Fill
• Save As Picture
• Save As Program
• Comments
• 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

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am ‘Add some feature’
• Push to the branch: git push origin my-new-feature
• Submit a pull request.

–EOF (The Ultimate Computing & Technology Blog) —