Turtle Path Editor

inspired by: Daniel Shiffman

Turtles can't speak and don't understand human language, except there is one who also doesn't understand human language, but she understands something. The language she speaks is strange, but it can be mastered relatively fast and after that you will wield the turtle the way you always desired. See the rest of this documentation to learn her tongue.

Features

• uses a version of Logo programming language;
• random example is shown each time webpage is reloaded;
• there is an option to save both your code and a generated image;
• you can Drag and Drop .logocode file right into the editor;
• works Offline after first load.

Turtle words

• fd followed by a number (ex.: fd 50, fd 87):
  turtle will move forward number of times;
• bd means the same as fd but backwards (ex.: bd 10);
• rt followed by an angle (ex.: rt 45, rt 120):
  turtle will turn right by the angle;
• lt means the same as rt but the other way (ex.: lt 90);
• pu:
  turtle stops drawing and moves more secretive;
• pd:
  turtle starts drawing the line after itself;
• clr followed by a color (ex.: clr cyan, clr #fff):
  turtle changes line color to a new one;
• repeat followed by a number and [array of commands]:
  turtle will repeat commands in the array number of times (can be nested).
  Examples: repeat 3 [fd 100 rt 120], repeat 4 [rt 90 repeat 36 [fd 10 rt 10] ];
• bckgr followed by a color (ex.: bckgr purple, bckgr #022a42):
  image will be filled with the new color ;
• save:
  save an image drawn by the turtle (be careful with this one);
• to followed by a name:
  create a method, callable by the name. To use the method call it by name.
  Example:
  to triangle repeat 3 [fd 100 rt 120] end
triangle.

Go, try them out!

Usage locally

1. Clone this repo (or obtain in other way);
2. In terminal go to the directory you have files in;
3. Enter python3 -m http.server;
4. Visit localhost:8000 in your browser;

or just double click on index.html after saving and unzipping this repo.

Possible improvements

• add more examples into ./examples directory
• add cheatsheet with commands to the web page (improve editor further).

Links

• Coding Challenge #121: Logo Interpreter
• Logo (programming language) on Wikipedia
• Google Color Picker