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.