Skip to content

Latest commit

History

History
67 lines (47 loc) 路 1.95 KB

File metadata and controls

67 lines (47 loc) 路 1.95 KB

Turtle Graphics

Tinkering implementation of turtle graphics for educational purpose.

Hosted App

Try It Out 馃悽

Examples

Have a look at src/examples.

Manual control

Buttons

Click the control buttons to move forward/backward, turn left/right 45掳/90掳, move the pen up/down, change the pen color and width, and undo the last operation.

Keyboard

Key Function
Cursor up Forward
Cursor down Backward
Cursor left Turn left 45掳
Cursor right Turn right 45掳
Space Pen down
Escape Pen up
Backspace Undo last operation

Code a turtle graphic

Turtle

API Description
forward(d) Move forward with d distance
backward(d) Move backward with d distance
left(a) Turn left with a degree
right(a) Turn right with a degree
penDown() Move pen down
penUp() Move pen up
pen.color Set pen color (color/gradient/pattern)
pen.width Set pen width
pushState() Explicitly add new new state from current state (e.g. for pen change)
popState() Removes the last state (i.e. undo)
resetStates() Remove all states and create a new with the current state

Simulation

API Description
mainLoop() Start the main loop
init() Reset state index to start (replay states)

Dev setup

Assuming we're using Yarn.

yarn
yarn dev

And then browse to http://localhost:5173/.