Ganeshnomicks

For the past couple of days I’ve been trying to finish what I had started off a while back but had abandoned midway - a logo turtle interpreter.
For those who dont know what logo turtle is:

Turtle graphics is a term in computer graphics for a method of programming vector graphics using a relative cursor (the “turtle”) upon a Cartesian plane

It was basically used in schools to familiarize 7-8 year old kids to computers. And I was always interested in making one because it was small little logo turtle that introduced me to the world of computers. Yeah we had logo turtle in first grade(good ol’ days ;). So this is kinda my tribute to the wonderful language.

I’ve been playing with javascript lately so I thought I’d try it out. Basically its a lot of javascript code that basically moves the triangle(which is a svg polygon). The js changes the position attributes of the triangle according to the command. And also a path(svg line) is created accordingly. A lil knowledge of coordinate geometry also helped.

Here is a documented code for the ‘fd’ command.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

if(cmd == "fd")
{
 
//Create the path
//x1 and y1 are set to the current position of the turtle
path.setAttribute("x1", currx);
path.setAttribute("y1", curry);
 
//x2 and y2 are calculated x = mov*sin(angle) where angle is chaged on each lt/rt command
path.setAttribute("x2", currx + (move*sin1));
path.setAttribute("y2", curry - (move*cos1));
path.setAttribute("class", 'line1');
 
//Generates a new path 
document.getElementById("svg_main").appendChild(path);
TransX = TransX + (move*sin1);
TransY = TransY + (-1*(move*cos1));
currx = TransX;
curry = TransY;
 
//Calculate the change in position
ptx = ptx + (move*sin1);
pty = pty + (-1*(move*cos1));
//Moves the turtle
document.getElementById("triangle").setAttribute("transform", 'rotate(' + myangle + ',' + (210+ptx) + ',' + (196+pty) + ') translate('+ ptx + ',' + pty + ')'); 
 
}

Check out the whole code on the live page.

I have to continue playing with javascript and svg…its pretty fun. And yea hopefully next time I’d try out jquery and the canvas element…they seem interesting.

Check it out in action here
PS: And ping me if you find any bug and its open source so feel free to play with the code.
PPS: Yea I know there is a severe lack in the functionality but I guess additional commands can be added easily later…am just too lazy to add them right now
And yea Chrome only!