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.
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
- Execute logo like command
- Move turtle
- Draw
- Rotate right
- Rotate left
- Point to direction
- Clear drawing
- Reset turtle position
- Change color
- Change line thickness
- Change transparency
- Remember position and settings
- Restore position and settings
- Save value
- Put value into stack
- Get value from stack
- Show turtle
- Hide turtle
- Draw left curve
- Draw right curve
- Print text
- Use text as lines
- Change text font and size
- Get value from user
Constructor
| Method name | new canvas_turtle(id, config) |
| Description | Create Canvas Turtle instance |
| Input parameters | string id - id of container element for example Div json config - some optional configurations:
|
Execute logo like command
| Method name | exec(command) |
| Description | Execute 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
| Method name | move(units) |
| Description | Move turtle into positioned direction without drawing |
| Input parameters | int units - how many units forward to move turtle |
| Input Example | move(100) |
| LOGO example | move 100 |
Draw
| Method name | draw(units) |
| Description | Move turtle into positioned direction and perform drawing |
| Input parameters | int units - how many units forward to move turtle |
| Input Example | draw(100) |
| LOGO example | draw 100 |
Rotate right
| Method name | right(deg) |
| Description | Turn right for specified amount of degree |
| Input parameters | int degree - amount of degree to turn turtle right |
| Input Example | right(90) |
| LOGO example | right 90 |
Rotate left
| Method name | left(deg) |
| Description | Turn left for specified amount of degree |
| Input parameters | int degree - amount of degree to turn turtle left |
| Input Example | left(90) |
| LOGO example | left 90 |
Point to direction
| Method name | point(deg) |
| Description | Point 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 example | point 90 |
Clear drawing
| Method name | clear() |
| Description | Clear drawing and reset turtle position |
| LOGO example | clear |
Reset turtle position
| Method name | home() |
| Description | Reset turtle position |
| LOGO example | home |
Change color
| Method name | color(color) |
| Description | Change color of drawing line |
| Input parameters | string color - any valid css color (default: black) |
| Input Example | color("#fff") |
| LOGO example | color #fff |
Change line thickness
| Method name | thick(thickness) |
| Description | Change line thickness |
| Input parameters | int thickness - line thickness in pixels (default: 1 pixel) |
| Input Example | thick(10) |
| LOGO example | thick 10 |
Change transparency
| Method name | transparent(alpha) |
| Description | Change line transparency |
| Input parameters | int alpha - value 0 to 100 percents of transparency (default: 100 - not transparent) |
| Input Example | transparent(50) |
| LOGO example | transparent 10 |
Remember position and settings
| Method name | remember() |
| Description | Saves current position and settings, like colors, thickness, etc into stack |
| LOGO example | remember |
Restore position and settings
| Method name | goback() |
| Description | Restore previous settings and position from stack |
| LOGO example | goback |
Point to direction
| Method name | point(deg) |
| Description | Point 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 example | point 90 |
Save value
| Method name | let(name, value) |
| Description | Save 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
| Method name | push(stack, value) |
| Description | As 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
| Method name | pop(stack, variable) |
| Description | Get 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
| Method name | showturtle() |
| Description | Display 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
| Method name | hideturtle() |
| Description | Hide turtle. Hiding turtle doesn't delete all previous turtles |
| Input Example | hideturtle() |
| LOGO example | showturtle draw 100 hideturtle draw 100 |
Draw left curve
| Method name | goleft(units, offset) |
| Description | Draw 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 example | goleft 100 100 |
Draw right curve
| Method name | goright(units, offset) |
| Description | Draw 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 example | goright 100 100 |
Print text
| Method name | print(text) |
| Description | Prints text in upright direction from turtle position, without moving turtle |
| Input parameters | string text - text to print |
| Input Example | print("Hello world") |
| LOGO example | print Hello World |
Use text as lines
| Method name | turtleprint(text) |
| Description | Prints 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 example | turtleprint Hello World |
Change text font and size
| Method name | font(font) |
| Description | Change font and size for printed text |
| Input parameters | string font - font size and format |
| Input Example | font("20px Arial") |
| LOGO example | font 20px Arial |
Get value from user
| Method name | get(name, id) |
| Description | Get 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 example | get a |
LOGO language constructions
Branching
| Description | If else statments |
| Command names | if var1 operation var2, else, endif |
| Possible operations |
|
| Example | if a>=10 draw 100 else draw 50 endif |
Loops
| Description | Repeat nex loop |
| Command names | repeat iterations, next |
| Example | repeat 4 draw 100 right 90 next |
Functions (Subroutines)
| Description | Creating functions to call |
| Command names | # label, return, go |
| Example | # square repeat 4 draw 50 right 90 next return go square |
Comments
| Description | Commenting LOGO code |
| Command names | ; |
| Example | ; this line is commented |
Debugging
| Description | Showing turtle - it's position and angle |
| Command names | showturtle |
| Example | showturtle draw 100 |
Variables
| Description | Saving values for later usage |
| Command names | let |
| Example | let a 100 draw a |
Recursion
| Description | Using 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










