A simple yet powerful turtle graphics library for JavaScript. It aims to make turtle graphics in JavaScript as simple as possible while giving insights to HTML canvas by staying close to its spec

Try it out🚀

Try it out (async mode)🚀

Install it via NPM

npm i real-turtle

Import the class in your JS file

import RealTurtle from 'real-turtle'

Create a RealTurtle Instance

const turtle = new RealTurtle(element, options)

Include a the script tag above your command code

<script type="text/javascript" src="https://unpkg.com/real-turtle"></script>

var turtle = new RealTurtle.default(element, options)

If you are a JavaScript beginner who wants to get started quickly, a helper is recommended. It creates a RealTurtle instance with predefined options and makes it acessible through a global turtle variable. All you need to provide is an HTML-Element with the ID #real-turtle

Note: The helper is only recommended for simple use cases such as playgrounds.

Include the helper script tag below your RealTurtle HTML element.

<script type="text/javascript" src="https://unpkg.com/real-turtle/dist/helpers/simple.js"></script>

<script type="text/javascript" src="https://unpkg.com/real-turtle"></script>
<canvas id="real-turtle"></canvas>
<script type="text/javascript" src="https://unpkg.com/real-turtle/build/helpers/simple.js"></script>

<script type="text/javascript">
//Your turtle commands go here
turtle.forward(100)
</script>

When creating a new RealTurtle() instance, you can pass an options object as the second parameter which may contain the following properties:

In you options object, you can declare the initial State of your turtle via the state property. It may contain the folloing properties:

This list is not completed yet

Normally real-turtle gathers your commands and lists them in a task list before executing them. The commands you give the turtle are therefore not executed until everything is stored in the task list. This makes animations possible. However, this is not how JavaScript works and it means that forever loops such as while(true) are not possible that way.

With async mode, which can be enabled by using the async option when creating the instance or the async helper, you can solve this. You write your code into an async function and wait for the tasks to be executed using await .

async function run(){
     //Your turtle commands go here
     await turtle.move(200)
     console.log("Done")
}
run()

The .start()command tells the turtle to actually start the drawing process.

Unless you are using autoStart or a helper, your turtle will only move if you add the turtle.start() command at the very end of your commands!

To manipulate the canvas and the context of the RealTurtle() instance directly, you can use .canvas and .ctx.

Note: To avoid an overwrite of your changes to the context, it is recommended to use async mode or to use these properties only inside an .eval(func) command.