Introduction to Logo Turtle
LogoTurtle is the first Logo Interpreter in Google Chrome Webstore. It is a very useful tool to teach kids turtle graphics.
Previous Contributions
- LogoTurtle v0.0.2: ShowTurtle, HideTurtle, Color, Width and Help.
- LogoTurtle v0.0.1: Teach Your Kids Programming – The First Logo Interpreter (Turtle Graphics) in Chrome Extension!
LogoTurtle v0.0.3 New Features
This Commit adds the following features:
- text
- dot
- jump
- fontsize
- save canvas as png
Screenshots
Supported Commands in v0.0.3.
You can click ↓ button to download the canvas as PNG. Syntax: dot command asks the turtle to plot a dot where it is.
The turtle can JUMP using command jump or jmp
For example:
cs pu bk 100 pd repeat 5 [jump 10 fd 30]
Syntax: text [text]
Syntax: fontsize size
For example,
fontsize 15 cs color blue repeat 8 [pu fd 100 lt 90 pd text [@justyy] rt 90 pu bk 100 rt 45]
How to Ask Turtle to Jump?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | case "jump": case "jmp": if ((word_next == '') || (!isNumeric(word_next))) { this.pushErr(LOGO_ERR_MISSING_NUMBERS, word_next); return; } let pd = this.logo.isPendown(); this.logo.pu(); this.logo.fd(parseFloat(word_next)); if (pd) { this.logo.pd(); } i = y.next; break; |
case "jump": case "jmp": if ((word_next == '') || (!isNumeric(word_next))) { this.pushErr(LOGO_ERR_MISSING_NUMBERS, word_next); return; } let pd = this.logo.isPendown(); this.logo.pu(); this.logo.fd(parseFloat(word_next)); if (pd) { this.logo.pd(); } i = y.next; break;
How to Download HTML5 Canvas as Image in Javascript?
Canvas has toDataURL which you can assign to the href of a hyper link, or simply in Chrome extension, open a new tab.
1 2 3 | document.getElementById('download').addEventListener('click', () => { chrome.tabs.create({ url: canvas.toDataURL() }); }, false); |
document.getElementById('download').addEventListener('click', () => { chrome.tabs.create({ url: canvas.toDataURL() }); }, false);
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) —
loading...
Last Post: CoinTools: Historical Conversion between Any Two Cryptocurrency
Next Post: CoinTools Update: v0.0.8: Add Coinbase API + Customized History Data