{"id":21852609,"url":"https://github.com/caesarovich/better-turtle","last_synced_at":"2025-04-14T16:24:57.633Z","repository":{"id":48525307,"uuid":"464925760","full_name":"Caesarovich/better-turtle","owner":"Caesarovich","description":"Isomorphic LOGO Turtle made in TypeScript","archived":false,"fork":false,"pushed_at":"2023-10-21T16:42:50.000Z","size":693,"stargazers_count":23,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T05:11:15.381Z","etag":null,"topics":["education","isomorphic","isomorphic-javascript","library","logo","turtle","turtle-graphics","typescript","typescript-library"],"latest_commit_sha":null,"homepage":"https://caesarovich.github.io/better-turtle/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Caesarovich.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-03-01T14:26:50.000Z","updated_at":"2023-12-02T21:42:53.000Z","dependencies_parsed_at":"2023-10-10T14:43:42.567Z","dependency_job_id":"a48f9451-b8a3-4d45-ae95-e0ef5f61b9cf","html_url":"https://github.com/Caesarovich/better-turtle","commit_stats":{"total_commits":60,"total_committers":4,"mean_commits":15.0,"dds":0.08333333333333337,"last_synced_commit":"8aaad98a704fa21d7a9d535ef43d34b59b663b8c"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caesarovich%2Fbetter-turtle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caesarovich%2Fbetter-turtle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caesarovich%2Fbetter-turtle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caesarovich%2Fbetter-turtle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Caesarovich","download_url":"https://codeload.github.com/Caesarovich/better-turtle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248915246,"owners_count":21182595,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["education","isomorphic","isomorphic-javascript","library","logo","turtle","turtle-graphics","typescript","typescript-library"],"created_at":"2024-11-28T01:17:47.653Z","updated_at":"2025-04-14T16:24:57.609Z","avatar_url":"https://github.com/Caesarovich.png","language":"TypeScript","readme":"# better-turtle\n\nA TypeScript port of the famous Turtle JS project.\n\n#### 📔 Complete documentation -\u003e [**Here**](https://caesarovich.github.io/better-turtle/)\n\n## 🐢 What is BetterTurtle ?\n\nTurtle JS is a **graphic library** based on the [LOGO](\u003chttps://en.wikipedia.org/wiki/Logo_(programming_language)\u003e) programming language aimed towards education.\nIt allows JavaScript beginners to handle programming in a very graphic way,\n**every action is rendered visually**,\nmaking it easy to understand the principles of programming.\nBetterTurtle is an improved version of the many existing ones into TypeScript.\n\n## 📥 Installation\n\n### Option 1 - Include in a HTML script tag\n\nYou can directly include a **minified** (_No IntelliSense_) version of the code into your HTML page.\n\n```html\n\u003cscript src=\"https://github.com/Caesarovich/better-turtle/releases/download/v1.4.0/main.min.js\"\u003e\u003c/script\u003e\n```\n\n### Option 2 - Install from NPM\n\n```sh\nnpm install --save better-turtle\n```\n\n### Option 3 - Clone and build from source\n\n```sh\n# Clone the repo in your project directory\ngit clone https://github.com/Caesarovich/better-turtle\n\n# Build the library\ncd \"better-turtle\" \u0026\u0026 npm i \u0026\u0026 npm run build\n\n# Then install it to your project\n\n## 1 - Browser\nnpm exec webpack \u0026\u0026 mv dist/main.min.js ../turtle.min.js\n\n## 2 - NPM\ncd ../ \u0026\u0026 npm install better-turtle\n```\n\n## ⌛ Quickstart\n\n### In browser\n\n```js\nconst { Turtle } = BetterTurtle;\n\n// Get an HTML Canvas element\nconst canvas = document.getElementById('my-canvas-element-id');\nconst ctx = canvas.getContext('2d');\n\n// Instanciate a new Turtle\nconst tur = new Turtle(ctx);\n\ntur.goto(-350, 0).forward(60).left(50).forward(300);\n```\n\n### NodeJS\n\n```js\nimport { createCanvas } from 'canvas';\nimport { Turtle } from 'better-turtle';\n\nconst canvas = createCanvas(400, 400);\nconst ctx = canvas.getContext('2d');\n\nconst turtle = new Turtle(ctx);\n\nturtle.forward(100).right(90).forward(50);\n```\n\n## 🔗 Exposing methods\n\nUsing 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.\n\n\u003e **Note:** It is possible to remap the methods with the optionnal parameter. Further details in the docs 📔\n\n```js\nconst turtle = new Turtle(ctx);\n\nturtle.expose(window);\n\n// ...\n\nforward(50);\nright(120);\nsetColor('red');\nforward(150);\nhide();\n```\n\n## ⏲️ Events\n\nThe 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.\n\n```js\nconst turtle = new Turtle(ctx);\n\nturtle.on('step', (step) =\u003e {\n  console.log(`The turtle has done an action: ${step}`);\n});\n\nturtle.forward(120).left(90).forward(30).right(90);\n```\n\nIn this exemple, every action will be logged in the console.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaesarovich%2Fbetter-turtle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaesarovich%2Fbetter-turtle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaesarovich%2Fbetter-turtle/lists"}