Introduction to Logo Turtle
I am teaching my 5-year-old son how to program. The language I pick is LOGO programming – 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 (Server version of Logo Interpreter). 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. Please, the Chrome extensions can be easily maintained with future upgrades (no need to ask users to manually download any updates later)
Chrome Webstore of Logo Turtle Graphics
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.
Version 0.0.1 of Logo Turtle Programming
The very first version only supports the following keywords/features:
- FD, FORWARD
- BK, BACKWARD
- RT, RIGHT
- LT, LEFT
- HOME
- CS, CLEARSCREEN
- REPEAT
- PU, PENUP
- 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 it should be successfully interpreted as:
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).
Javascript Implementation of LOGO REPEAT Loop
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.
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 | 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; |
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
- 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) —
a WordPress rating system
Last Post: CoinTools Update: Show Full Cryptocurrency Details by Click or Startup, Add Language Handlers
Next Post: Utopian v0.0.12: Search Top Projects!