Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/caesarovich/better-turtle
Isomorphic LOGO Turtle made in TypeScript
https://github.com/caesarovich/better-turtle
education isomorphic isomorphic-javascript library logo turtle turtle-graphics typescript typescript-library
Last synced: 2 months ago
JSON representation
Isomorphic LOGO Turtle made in TypeScript
- Host: GitHub
- URL: https://github.com/caesarovich/better-turtle
- Owner: Caesarovich
- License: gpl-3.0
- Created: 2022-03-01T14:26:50.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-21T16:42:50.000Z (over 1 year ago)
- Last Synced: 2024-11-03T19:21:55.901Z (3 months ago)
- Topics: education, isomorphic, isomorphic-javascript, library, logo, turtle, turtle-graphics, typescript, typescript-library
- Language: TypeScript
- Homepage: https://caesarovich.github.io/better-turtle/
- Size: 677 KB
- Stars: 23
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# better-turtle
A TypeScript port of the famous Turtle JS project.
#### 📔 Complete documentation -> [**Here**](https://caesarovich.github.io/better-turtle/)
## 🐢 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.
```html
```
### Option 2 - Install from NPM
```sh
npm install --save better-turtle
```
### Option 3 - Clone and build from source
```sh
# 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
```js
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
```js
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 📔
```js
const turtle = new Turtle(ctx);
turtle.expose(window);
// ...
forward(50);
right(120);
setColor('red');
forward(150);
hide();
```
## ⏲️ Events
The Turtle class **extends** the [EventEmitter](https://nodejs.dev/learn/the-nodejs-event-emitter) Class. Allowing you to listen to events such as `'step'` or `'forward'` when the turtle is in [StepByStep](https://caesarovich.github.io/better-turtle/classes/Turtle.html#stepByStep) Mode.
```js
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.