This week we get graphical! Many people are exposed to some form of turtle drawing program when they first learn programming (or just basic computer usage and analytical thinking). It’s also a good way to develop the parts of your brain that deal with forward planning.
The challenge for this week is to design a turtle drawing program that accepts any form of user input in order to move, rotate and style a “pen” across a canvas. It should resemble the functionality demonstrated in the following diagram…
The important things we are looking for are the ability to change direction and then to move forward in a straight line. You can do this with HTML elements (and some interesting CSS) but we encourage the use of SVG or canvas in your solutions as they are more suited to the task.
Hint: you don’t have to have the labels on the left and you can use text fields (or even keyboard navigation) instead of links. What is important is how you maintain and modify direction and position of the “pen” (the point at the “front” of the line).
You can make your solutions as intricate or as basic as you wish!
As before; post your solutions in the form of links to jsfiddle, tinker or jsbin (in the comment section) and we’ll update this post with a link to a review post detailing solutions that we think tackle the problem in ways worthy of mention.
EDIT [2012/08/22]: We have posted the review post to for these submissions.