Turtle Programming v0.0.8: /* */ comments, dotxy, and javascript!

Introduction to Logo Turtle

LogoTurtle is currently the FIRST and only one Chrome Extension for Turtle Graphics. I have also written a PHP version of Logo Interpreter in 2006 but that runs only on the server.

Previous Contributions

• v0.0.7: Turtle Programming v0.0.7: Functions with Parameters + Recursion!
• v0.0.6: Turtle Programming v0.0.6: Adding Circle, MoveTo, Turn and Screen!
• v0.0.5: Turtle Programming v0.0.5: Adding IF/ELSE and STOP!
• v0.0.4: LogoTurtle: Make Variables and Comments
• 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!

Logo Turtle v0.0.8 New Features

Along with bug fixes and code tweaks, This Commit has added the support of the following features:

• Ignore Multi-line comments /* */ pairs like other high-level modern programming languages.
• dotxy takes two parameters that allow you to place a dot without moving the turtle anywhere.
• js that allows you to run the javascript code that handles the canvas directly!.

Turtle Programming Screenshots

Classic Logo (Spiral), Source code as follows. This takes two parameters the size and the turning angle. The function calls stop once the size is big enough.

# Spiral 
/*
  draw a spiral
*/
cs
to spiral :size :angle
  if (:size>:T) [stop] ; size too big
  forward :size
  right :angle
  spiral :size+2 :angle 
end 
spiral 1 91 ; call the function

Draw a Spiral using LOGO Recursion

Drawing a line using dotxy

cs width 2 make "x 1 make "y 1
repeat 80 [
  dotxy :x :y 
  make "x :x+1 
  make "y :y+1
]

Draw a line in LOGO using dotxy function

You can control the Turtle using Javascript via JS

1
2
3
4
5
6

cs js [
  for (let i = 0; i < 5; i ++ ) {
   this.logo.fd(100);
   this.logo.rt(144);
  }
]

cs js [
  for (let i = 0; i < 5; i ++ ) {
   this.logo.fd(100);
   this.logo.rt(144);
  }
]

turtle-programming-logo-using-javascript

Javascript Parser to Skip Comments, Whitespaces and New Lines

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

// jump comments and white spaces
skipTo(s, i, U) {
    // skip for white spaces and newlines
    while ((i < U) && (isSpace(s[i]) || s[i] == '\n')) {
        i ++;               
    }
    if (i >= U) { // reach block end
        return i;
    }
    // skip comments till the end
    if ((s[i] == ';') || (s[i] == '#')) {
        i ++;
        while ((i < U) && (s[i] != '\n')) {
            i ++;
        }
        i ++;
    }
    // skip // comments
    if (i + 1 < U) {
        if ((s[i] == '/') && (s[i + 1] == '/')) {
            i += 2;
            while ((i < U) && (s[i] != '\n')) {
                i ++;
            }
            i ++;
        }
    }
    // skip /* */ comments
    if (i + 1 < U) {
        if ((s[i] == '/') && (s[i + 1] == '*')) {
            i += 2;
            while ((i < U) && ((s[i] != '*') || (s[i + 1] != '/'))) {
                i ++;
            }
            i += 2;             
        }
    }       
    return i;   
}

// jump comments and white spaces
skipTo(s, i, U) {
    // skip for white spaces and newlines
    while ((i < U) && (isSpace(s[i]) || s[i] == '\n')) {
        i ++;               
    }
    if (i >= U) { // reach block end
        return i;
    }
    // skip comments till the end
    if ((s[i] == ';') || (s[i] == '#')) {
        i ++;
        while ((i < U) && (s[i] != '\n')) {
            i ++;
        }
        i ++;
    }
    // skip // comments
    if (i + 1 < U) {
        if ((s[i] == '/') && (s[i + 1] == '/')) {
            i += 2;
            while ((i < U) && (s[i] != '\n')) {
                i ++;
            }
            i ++;
        }
    }
    // skip /* */ comments
    if (i + 1 < U) {
        if ((s[i] == '/') && (s[i + 1] == '*')) {
            i += 2;
            while ((i < U) && ((s[i] != '*') || (s[i + 1] != '/'))) {
                i ++;
            }
            i += 2;             
        }
    }       
    return 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
• 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) —