js-turtle Documentation

Last updated: Jun 13th, 2018

Star Fork

Intro

js-turtle is an environment to learn/teach programming with JavaScript language. Idea initialy comes from Seymour Papert.
Javascript version of turtle graphycs initialy started by bjpop, then forked and developed by hanumanum

Write and Run code

Work Offline

  1. Download archive
  2. Extract it
  3. Open turtle.js in your favorite text editor (Visual Studio Code, Notepad++, Geany, Sublime Text ...)
  4. Open turtle.html in browser
  5. Write code in turtle.js, save and reload browser

Download js-turtle

js-turtle (for old browsers)

Work Online

You also can write and test your code at the codepan: js-turtle already integrated.

js-turtle on codepan

Turtle terms

turtle
- green triangle
canvas
- area where turtle moves
coordinates
- point in canvas, in x y

Useful Tip:

Coordinates will been copyed to buffer, then you click on the canvas.

Useful Tip:

You can divide execution speed using «ֆ» or «f» keys.

Basic functions

forward()

Turtle moves forward and draw line by given steps, if we write 100 between parentheses, then turtle will move by 100 step.

forward(steps)

arguments

int: steps

Example 1
forward(100)
Result

left()

Turtle turn left by given degree, if we write 30 between parentheses, then turtle will turn by 30 degrees.

left(degrees)

arguments

int: degrees

Example 1
left(30)
left(60)
left(90)
                                                
Result
Example 2
forward(100)
left(30)
forward(100)
left(50)
                                                    
Result
Geometry

Note!

turtle turns by angle, not becomes to an angle provided to function left()

You can play with it here.

Result

width()

Sets line thickness

width(thickness)

arguments

int: thickness

Example
width(3)
forward(100)
                                                       
width(15)
forward(100)

width(6)
forward(100)
Result

color()

Sets color of next lines

color(r [, g [, b ]]])

arguments

string: a (color name)
int: a, b, c (RGB)
string: a (color hexcode)
array: [a,b,c]

Example 1 (color name)
color("red")
forward(100)

color("green")
forward(60)

color("dodgerblue")
forward(120)

You can explore all available color names here
Result
Example 2 (RGB)
color(255,15,20)
forward(100)

color(12,250,65)
forward(60)

color(89,100,36)
forward(120)

You can pick colors from here
Result
Example 3 (HEX)
color("#3EEF0F")
forward(100)

color("#ED16A2")
forward(60)

color("#EDCD16")
forward(120)

You can pick colors from here
Result
Example 4 (array RGB)
color([15,20,200])
forward(100)

color([65,250,150])
forward(60)

color([255,100,200])
forward(120)

You can pick colors from here
Result

goto()

Move to x,y coordinates without drawing a line

goto(x,y)

arguments

int: x, int: y

Example 1
color("red")
goto(-213,128)
forward(100)

color("blue")
goto(-7,105)
forward(60)

color("green")
goto(238,-182)
forward(120)
Result

penup() & pendown()

penup() sets to not draw next lines. pendown() removes that setting

penup()

pendown()

arguments

no arguments

Example
color("red")
forward(100)

penup()
forward(60)

pendown()
color("blue")
forward(100)
Result

clear()

Clear all canvas. Use clear() mostly for animations.

clear()

arguments

no arguments

Example
clear()

Helper Functions

We have some interesting and useful functions here.

showGrid()

Shows Euclidean grid on canvas. We recomend call this function before all others. Argument sets grid scale.

showGrid(scale)

arguments

int: scale

Example 1
showGrid(50)
Result
Example 2
showGrid(20)
Result

randomColor_h()

Set random color on each time it called.

randomColor_h()

arguments

no arguments

Example 1
width(4)

setInterval(function(){
    goto(0,0)
    randomColor_h()
    forward(100)
    left(10)
},300)
Result

"Strange" Functions

strangeLine()

strangeLine() is like forward() but line has random pattern

strangeLine([steps])

arguments

int: steps

Example
color("red")
strangeLine(200)

goto(186,-164)

color("blue")
strangeLine(250)
Result

strangeSquare()

strangeSquare() draws patterned square, by particles

strangeSquare(length[,step])

arguments

int: length
int: step

Example
goto(-206,169)
color("red")
strangeSquare(200,15)

goto(138,98)
color("blue")
strangeSquare(100,5)
Result

strangeCircle()

strangeCircle() draws patterned cirlce, by particles

strangeCircle(radius)

arguments

int: radius

Example
goto(-15,-26)
color("red")
strangeCircle(200)

goto(37,-63)
color("blue")
strangeCircle(100)
Result

strangeGalaxy()

strangeGalaxy() draws patterned "galaxy", by particles

strangeGalaxy(radius)

arguments

int: radius

Example
goto(-158,167)
color("red")
strangeGalaxy(180)

goto(149,-165)
color("blue")
strangeGalaxy(100)
Result