simple-turtle

better-turtle

A TypeScript port of the famous Turtle JS project.

Complete documentation -> Here

What is BetterTurtle ?

Turtle JS is a graphic library based on the LOGO programming language aimed towards education. It allows JavaScript beginners to handle programming in a very graphic way, every action is rendered visually, making it easy to understand the principles of programming. BetterTurtle is an improved version of the many existing ones into TypeScript.

Installation

Option 1 - Include in a HTML script tag

You can directly include a minified (No IntelliSense) version of the code into your HTML page.

<script src="https://github.com/Caesarovich/better-turtle/releases/download/v1.2.1/main.min.js"></script>

Option 2 - Install from NPM

npm install --save better-turtle

Option 3 - Clone and build from source

# Clone the repo in your project directory
git clone https://github.com/Caesarovich/better-turtle

# Build the library
cd "better-turtle" && npm i && npm run build

# Then install it to your project

## 1 - Browser
npm exec webpack && mv dist/main.min.js ../turtle.min.js

## 2 - NPM
cd ../ && npm install better-turtle

Quickstart

In browser

const { Turtle } = BetterTurtle;

// Get an HTML Canvas element
const canvas = document.getElementById('my-canvas-element-id');
const ctx = canvas.getContext('2d');

// Instanciate a new Turtle
const tur = new Turtle(ctx);

tur.goto(-350, 0).forward(60).left(50).forward(300);

NodeJS

import { createCanvas } from 'canvas';
import { Turtle } from 'better-turtle';

const canvas = createCanvas(400, 400);
const ctx = canvas.getContext('2d');

const turtle = new Turtle(ctx);

turtle.forward(100).right(90).forward(50);

Exposing methods

Using the .expose method, it is possible to expose a Turtle instance's methods onto a JavaScript Object. It is particularly useful when using it with a global object such as the window object in browsers.

Note: It is possible to remap the methods with the optionnal parameter. Further details in the docs

const turtle = new Turtle(ctx);

turtle.expose(window);

// ...

forward(50);
right(120);
setColor('red');
forward(150);
hide();

Events

The Turtle class extends the EventEmitter Class. Allowing you to listen to events such as 'step' or 'forward' when the turtle is in StepByStep Mode.

const turtle = new Turtle(ctx);

turtle.on('step', (step) => {
  console.log(`The turtle has done an action: ${step}`);
});

turtle.forward(120).left(90).forward(30).right(90);

In this exemple, every action will be logged in the console.