LogoTurtle: Make Variables and Comments

Introduction to Logo Turtle

LogoTurtle is the first Chrome Extension for Turtle Graphics.

Previous Contributions

• v0.0.3: Turtle Graphics Programming Update: Adding text, jump, dot, fontsize, download as png
• v0.0.2: LogoTurtle v0.0.2: ShowTurtle, HideTurtle, Color, Width and Help.
• v0.0.1: Teach Your Kids Programming – The First Logo Interpreter (Turtle Graphics) in Chrome Extension!

Turtle Graphics v0.0.4 New Features

This Commit supports the Make command which declares a variable in LOGO programming. Also, a single line comment starts with a semi-colon.

Screenshots

With variable support, you’ll see how powerful the turtle is.

logoturtle-repeat-squares-rotated

logo-squares

How to Store Variables in Javascript for Logo Turtle?

We use the dictionary to store a global key-pair values for variables. In future versions, it will be improved to support variables of different scopes.

Getter and Setter:

1
2
3
4
5
6
7
8
9
10
11
12

// push a varaible
addVar(name, value) {
    this.vars[name] = this.evalVars(value);
}
 
// find a variable
getVar(name) {
    if (name in this.vars) {
        return this.vars[name];
    }
    return null;
}

// push a varaible
addVar(name, value) {
    this.vars[name] = this.evalVars(value);
}

// find a variable
getVar(name) {
    if (name in this.vars) {
        return this.vars[name];
    }
    return null;
}

To evaluate the value of a expression:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// eval variables
evalVars(s) {
    let var_arr = parseVarName(s);
    let varlen = var_arr.length;
    for (let i = 0; i < varlen; ++ i) {
        let var_name = var_arr[i].substring(1);         
        let local = this.getVar(var_name);
        if (local) {                    
            s = s.replaceAll(":" + var_name, local);
            break;
        }
    }
    return s;
}

// eval variables
evalVars(s) {
    let var_arr = parseVarName(s);
    let varlen = var_arr.length;
    for (let i = 0; i < varlen; ++ i) {
        let var_name = var_arr[i].substring(1);         
        let local = this.getVar(var_name);
        if (local) {                    
            s = s.replaceAll(":" + var_name, local);
            break;
        }
    }
    return s;
}

where the parseVarName looks for :var

1
2
3
4
5
6
7
8
9
10

// parse var name
const parseVarName = (s) => {
    let pat = /(:[a-zA-Z]+[a-zA-Z0-9]*)/g;
    let arr = [];
    let matches;
    while (matches = pat.exec(s)) {
        arr.push(matches[1]);       
    }
    return arr;
}

// parse var name
const parseVarName = (s) => {
    let pat = /(:[a-zA-Z]+[a-zA-Z0-9]*)/g;
    let arr = [];
    let matches;
    while (matches = pat.exec(s)) {
        arr.push(matches[1]);       
    }
    return arr;
}

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
• Add Recursion Support
• Add Global/Local Scopes
• 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) —