Turtle graphics in SVG? - svg

Question

Is there a equivalent in svg path to logo's turtlegraphics?
instead of the hardcoded x and y coordinates, which also force me to adjust controlpoints on shifting a more relative "delta" approach.
My solution should work for the FOCS (Firefox Opera Chrome Safaries ex IE) browsers.
regards
Jeroen.

Answer 1

Edit: I made a live-editing webapp out of this concept: http://forresto.github.com/turtle-svg/
If you want to make a SVG path with turtle graphics (with rotation) in JavaScript it doesn't take much math:
// Turtle graphics drawing to SVG path
var TAU = 2 * Math.PI;
var pen = true;
var d = "";
var vector = {
x: 0,
y: 1
};
var currentAngle = 0;
// Relative turns, angles are 0.0 to 1.0
var turnRight = function(angle){
currentAngle += angle;
currentAngle = currentAngle%1;
vector.x = Math.sin(TAU*currentAngle);
vector.y = Math.cos(TAU*currentAngle);
};
var turnLeft = function(angle){
turnRight(-angle);
};
// Absolute turn
var turnTo = function(angle){
currentAngle = angle;
vector.x = Math.sin(TAU*currentAngle);
vector.y = Math.cos(TAU*currentAngle);
};
// Drawing
var penUp = function(){
pen = false;
};
var penDown = function(){
pen = true;
};
// Relative moves
var moveForward = function (distance) {
d += pen ? "l " : "m ";
d += (distance * vector.x) + " " + (distance * vector.y) + " ";
}
// Absolute moves
var moveTo = function (x, y) {
d += pen ? "L " : "M ";
d += x + " " + y + " ";
}
And then set your path d to the generated d. See it in action with some recursive drawing: http://jsfiddle.net/forresto/hVE2U/

Answer 2

1st Google result for SVG Path: http://www.w3schools.com/svg/svg_path.asp
Quote: "Capital letters means absolutely positioned, lower cases means relatively positioned."