Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Canvas Turtle graphics using javascript

Canvas Turtle class provides LOGO Turtle Grpahics Javascript API and LOGO Turtle Grpahic language interpreter for drawing objects in Canvas

Turtle grpahic is a way to draw objects from perspective of a turtle. We are moving turtle and it leaves lines behind which form drawing.

Turtle Graphic for LOGO provides an easy way to draw spyrographs, tree like structures and much more.

Inpterpreter can execute commands one by one or multiple commands seperated using new lines. And perform real time drawing after every executed command.

Package contains canvas_events.js and canvas_events.packed.js (packed javascript) and seven example files:

  • simple_example.html - simple API usage
  • star.html - LOGO command execution
  • interpreter.html - Simple interpreter
  • curves_example.html - example with curves and circles
  • text_example.html - example printing text
  • tree.html - growing trees with Canvas Turtle

Contents

Download

Example codes

<html>
<head>
</head>
<body>
<div id='logo_div'></div>
<script src="./canvas_turtle.packed.js" type="text/javascript"></script>
<script>
var l = new canvas_turtle("logo_div", {
    //width of chart
    width: 800,
    //height of chart
    height: 600,
    //on error callback if canvas is unsupported
    on_error: null,
    //graphic for turtle (for debugging)
    turtle: "./turtle.png"
});
for(var i = 0; i < 4; i++)
{
    l.draw(100);
    l.right(90);
}
</script>
</body>
</html>

Examples in action

Example scripts provided with package in action:

JS API method list

Constructor

Back to method list

Method namenew canvas_turtle(id, config)
DescriptionCreate Canvas Turtle instance
Input parameters

string id - id of container element for example Div

json config - some optional configurations:

  • int width - width of canvas (default: 800)
  • int height - height of canvas (default: 600)
  • function onerror - callback function if canvas isn't supported (default: null)
  • string turtle - path to turtle grpahic file (default: "./turtle.png")

Execute logo like command

Back to method list

Method nameexec(command)
DescriptionExecute LOGO like command or multiple commands, each command in a new line. Commands ar case insensitive
Input parameters

string command - logo like command

Input Example

exec("draw 100")

Move turtle

Back to method list

Method namemove(units)
DescriptionMove turtle into positioned direction without drawing
Input parameters

int units - how many units forward to move turtle

Input Example

move(100)

LOGO examplemove 100

Draw

Back to method list

Method namedraw(units)
DescriptionMove turtle into positioned direction and perform drawing
Input parameters

int units - how many units forward to move turtle

Input Example

draw(100)

LOGO exampledraw 100

Rotate right

Back to method list

Method nameright(deg)
DescriptionTurn right for specified amount of degree
Input parameters

int degree - amount of degree to turn turtle right

Input Example

right(90)

LOGO exampleright 90

Rotate left

Back to method list

Method nameleft(deg)
DescriptionTurn left for specified amount of degree
Input parameters

int degree - amount of degree to turn turtle left

Input Example

left(90)

LOGO exampleleft 90

Point to direction

Back to method list

Method namepoint(deg)
DescriptionPoint turtle to specific direction. 0 is up, 90 is right, 180 is down, 270 is left
Input parameters

int degree - degree where to point turtle

Input Example

point(90)

LOGO examplepoint 90

Clear drawing

Back to method list

Method nameclear()
DescriptionClear drawing and reset turtle position
LOGO exampleclear

Reset turtle position

Back to method list

Method namehome()
DescriptionReset turtle position
LOGO examplehome

Change color

Back to method list

Method namecolor(color)
DescriptionChange color of drawing line
Input parameters

string color - any valid css color (default: black)

Input Example

color("#fff")

LOGO examplecolor #fff

Change line thickness

Back to method list

Method namethick(thickness)
DescriptionChange line thickness
Input parameters

int thickness - line thickness in pixels (default: 1 pixel)

Input Example

thick(10)

LOGO examplethick 10

Change transparency

Back to method list

Method nametransparent(alpha)
DescriptionChange line transparency
Input parameters

int alpha - value 0 to 100 percents of transparency (default: 100 - not transparent)

Input Example

transparent(50)

LOGO exampletransparent 10

Remember position and settings

Back to method list

Method nameremember()
DescriptionSaves current position and settings, like colors, thickness, etc into stack
LOGO exampleremember

Restore position and settings

Back to method list

Method namegoback()
DescriptionRestore previous settings and position from stack
LOGO examplegoback

Point to direction

Back to method list

Method namepoint(deg)
DescriptionPoint turtle to specific direction. 0 is up, 90 is right, 180 is down, 270 is left
Input parameters

int degree - degree where to point turtle

Input Example

point(90)

LOGO examplepoint 90

Save value

Back to method list

Method namelet(name, value)
DescriptionSave value in a variable. Variables can be used in all function that accept value, like draw, move etc. It is also possible to pass mathematical expressions along with variables.
Input parameters

string name - name of a variable

Input parameters

string value - value to save

Input Example

let("a",100)

LOGO example
let a 100
move a
draw a*2

Put value into stack

Back to method list

Method namepush(stack, value)
DescriptionAs in LOGO language you can't pass arguments to function, you can use multiple stacks for recursion.
Input parameters

string stack - name of a stack

Input parameters

string value - value to save

Input Example

push("stack1",100)

LOGO example
push stack1 100
pop stack1 a
draw a

Get value from stack

Back to method list

Method namepop(stack, variable)
DescriptionGet value from stack and saved it into variable
Input parameters

string stack - name of a stack

Input parameters

string variable - name of variable where to save value

Input Example

pop("stack1","a")

LOGO example
push stack1 100
pop stack1 a
draw a

Show turtle

Back to method list

Method nameshowturtle()
DescriptionDisplay turtle - it's position and direction. Good for debugging, if you get lost.
Input Example

showturtle()

LOGO example
draw 100
right 90
showturtle

Hide turtle

Back to method list

Method namehideturtle()
DescriptionHide turtle. Hiding turtle doesn't delete all previous turtles
Input Example

hideturtle()

LOGO example
showturtle
draw 100
hideturtle
draw 100

Draw left curve

Back to method list

Method namegoleft(units, offset)
DescriptionDraw a curve by going forward for specified amount of units and then evenly turn left and go amount of units to specified offset. For example, providing equal amounts for units and offset will draw straight angle with round corner. But if you pass amount of units which will be two times smaller than offset (goleft(50,100)), you will draw a circle in eight iterations
Input parameters

int units - how many units to go forward and then turn left

Input parameters

int offset - offset from your current position, where you'll end up after turning left

Input Example

goleft(100,100)

LOGO examplegoleft 100 100

Draw right curve

Back to method list

Method namegoright(units, offset)
DescriptionDraw a curve by going forward for specified amount of units and then evenly turn right and go amount of units to specified offset. For example, providing equal amounts for units and offset will draw straight angle with round corner. But if you pass amount of units which will be two times smaller than offset (goright(50,100)), you will draw a circle in eight iterations
Input parameters

int units - how many units to go forward and then turn right

Input parameters

int offset - offset from your current position, where you'll end up after turning right

Input Example

goright(100,100)

LOGO examplegoright 100 100

Print text

Back to method list

Method nameprint(text)
DescriptionPrints text in upright direction from turtle position, without moving turtle
Input parameters

string text - text to print

Input Example

print("Hello world")

LOGO exampleprint Hello World

Use text as lines

Back to method list

Method nameturtleprint(text)
DescriptionPrints text in direction turtle is pointed and moves turtle to position where text ends
Input parameters

string text - text to print

Input Example

turtleprint("Hello world")

LOGO exampleturtleprint Hello World

Change text font and size

Back to method list

Method namefont(font)
DescriptionChange font and size for printed text
Input parameters

string font - font size and format

Input Example

font("20px Arial")

LOGO examplefont 20px Arial

Get value from user

Back to method list

Method nameget(name, id)
DescriptionGet value from user and store it in a variable
Input parameters

string name - variable name where to store value

string id (optional) - id of input elements where to get value. If id isn't provided, then user will be prompted to enter value

Input Example

get("a")

LOGO exampleget a

LOGO language constructions

Branching

Back to logo_constructions

DescriptionIf else statments
Command names

if var1 operation var2, else, endif

Possible operations

  • Equal - = or ==
  • Not equal - != or <>
  • Greater, less - < or >
  • Greater equal, less equal - <= or >=

Example
if a>=10
draw 100
else
draw 50
endif

Loops

Back to logo_constructions

DescriptionRepeat nex loop
Command names

repeat iterations, next

Example
repeat 4
draw 100
right 90
next

Functions (Subroutines)

Back to logo_constructions

DescriptionCreating functions to call
Command names

# label, return, go

Example
# square
repeat 4
draw 50
right 90
next
return
go square

Comments

Back to logo_constructions

DescriptionCommenting LOGO code
Command names

;

Example

; this line is commented

Debugging

Back to logo_constructions

DescriptionShowing turtle - it's position and angle
Command names

showturtle

Example
showturtle
draw 100

Variables

Back to logo_constructions

DescriptionSaving values for later usage
Command names

let

Example
let a 100
draw a

Recursion

Back to logo_constructions

DescriptionUsing stacks for recursion
Command names

push, pop

Example

Factorial in LOGO Turtle:

# factorial

  if v == 0

    ; The factorial of 0 ("0!") is simply 1; we're done!
    let v 1

  else

    ; Push the current 'v' onto the stack1 stack, so we can pop it back later
    push stack1 v

    ; Now call the 'factorial' procedure again, with v-1...
    let v v-1
    go factorial

    ; Retrieve the factorial of v-1, and temporarily store it in vriable 'a'
    let a v

    ; Get the original v off of the stack1 stack
    pop stack1 v

    ; The answer (to this particular call of 'factorial')
    ; is that v! is v * (v-1)!
    let v v*a

  endif

return

Latest changes

None for now


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus