TinyTurtle for LiaScript: Teach JavaScript with Interactive Turtle Graphics

Turtle graphics is one of the most effective ways to introduce programming. The immediate visual feedback — a turtle drawing lines on screen — connects commands to results in a way that abstract code examples cannot.

The TinyTurtle template brings Atul Varma’s TinyTurtle library to LiaScript. It provides a minimal but complete turtle implementation on an HTML5 canvas, with an optional interactive terminal for live command entry.

Quick Start

<!--
import: https://raw.githubusercontent.com/liaTemplates/tiny-turtle/master/README.md
-->

One macro: @TinyTurtle(width, height) or @TinyTurtle(width, height, shell).

@TinyTurtle(width, height) — Execute Turtle Code

Attach @TinyTurtle(width, height) to any JavaScript code block. A canvas of the specified size is created, and the turtle starts at the center facing up.

```js
// Draw a square
for (let i = 0; i < 4; i++) {
  forward(100);
  right(90);
}
```
@TinyTurtle(400, 300)

Interactive Shell: @TinyTurtle(width, height, true)

Pass true as the third argument to enable an interactive terminal below the canvas. Students can type turtle commands directly and see results in real time.

```js
// Start with a clear canvas and a message
penStyle = 'blue';
penWidth = 2;
// Try: forward(100), right(90), forward(100)
```
@TinyTurtle(400, 300, true)

The interactive shell is ideal for exercise sessions. Give students a canvas and ask them to draw shapes by typing commands, without modifying the course code.

Turtle API

All turtle commands operate on the turtle object in scope:

Properties:

Example: Building Up Complexity

TinyTurtle is well-suited to progressive exercises. Start with a straight line, build up to shapes, then to patterns using loops:

```js
// Level 1: A line
forward(150);
```
@TinyTurtle(300, 200)

```js
// Level 2: A square using a loop
for (let i = 0; i < 4; i++) {
  forward(100);
  right(90);
}
```
@TinyTurtle(300, 200)

```js
// Level 3: A spiral
let step = 5;
for (let i = 0; i < 40; i++) {
  forward(step);
  right(91);
  step += 3;
}
```
@TinyTurtle(300, 300)

Full Template Demo

Use Cases

Introductory programming — Use turtle graphics to teach variables, loops, functions, and conditionals with immediate visual feedback. Students draw a square, then a hexagon, then a circle — each step introducing a new concept.

Geometry and mathematics — Explore angles, polygon properties, and coordinate geometry visually. Calculating the exterior angle of a regular polygon becomes a turtle exercise.

Computational thinking — Turtle tasks are naturally sequenced and decomposable. Students practice breaking a complex shape into sub-problems (draw one arm, repeat for the star).

Game-based learning — Ask students to reproduce a given shape. The canvas output makes it immediately clear whether the answer is correct.

JavaScript fundamentals — TinyTurtle is a JavaScript library, so students learn real JavaScript — loops, variables, function calls — while drawing.

Technical Facts

Try It

Related Templates

• p5js — more powerful creative coding library for intermediate learners
• WebDev — HTML, CSS, and JavaScript with full browser rendering
• Pyodide — full Python for beginners who prefer Python syntax