Turtle Graphics Programming Update: Adding text, jump, dot, fontsize, download as png

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?

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.

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) —

See more 699 words
Last Post: CoinTools: Historical Conversion between Any Two Cryptocurrency
Next Post: CoinTools Update: v0.0.8: Add Coinbase API + Customized History Data