This lib is not a Logo interpreter (there are plenty of those), but a fairly unfaithful translation of turtle graphics into the world of HTML5 canvas drawing. Since we're not waiting on a little turtle to move around the screen, rendering is actually quite fast (especially in Chrome).
- Turtle-oriented graphics
- Cartesian and polar coordinate graphics (working in harmony with turtle stuff)
- Wrapper calls for basic canvas styles
- Method chaining for those of us who like a little sloppy code (a'la jQuery)
- Safari, Chrome, Mozilla, Opera and other browser engines which support the
canvastag (including webOS, iOS and Android).
// attach to a canvas tag var p = new Pen("somecanvastag"); // say hello p.jump(10, 20).font("bold 15px Helvetica").text("Hello World!"); // draw a tiny square p.jump(10, 30).right(10).down(10).left(10).up(10).draw(); // make a yellow hexigon with a thicker line p.jump(100, 100).fillstyle("#ff0").pensize(2); for (var i = 0; i < 6; i++) p.go(50).turn(60); p.draw();
pen.jsis the lib
pen.htmlis a more interesting sample than in this README
Zippy. Using the
pen.html demo, which is fairly complex, runs in ~75ms on Chrome and ~310ms on Safari (includes loading script and HTML from cache). This is on a 2nd gen Macbook Air; your mileage may vary.
var turtle = new Pen("mycanvastag"); turtle.goto(100, 100).text("Hello World!");
- coordinate and distance units are expressed in pixels
- angles are expressed in degrees (mecause most humans don't grok radians)
Starts a new path in canvas, and looks more Logo-ish along the way.
Moves forward in the current direction by
The opposite of
Turns your current direction. To turn left (counter-clockwise), use negative numbers. To turn right, well, do the opposite.
Sets the pen down (turns on drawing) or picks it up (turns off drawing).
Makes a relative move using the coordinate system. These are convenience methods.
Moves the pen to the specified coordinates, respecting pen state (up or down).
gotoexcept it will never draw a line to the specified point, and it also quietly calls
Convenience method which calls
stroke(), in that order, but only calls each if there is a fill style and stroke style defined, respectively.
If you're making a closed shape and you want the corners to match up, put this after you're done drawing your shape but before you call
Canvas wrappers which let you manually specify which of these operations you want to perform on your path (everything since the last
Sets the thickness of the line your pen draws with.
A canvas passthru to set the line style of your pen. For example:
penstyle("#00f")will turn your pen blue.
A canvas wrapper, usually this is a solid color, e.g.
fillstyle("#ff0")will fill your shapes with eye-blinding yellow.
Pass in a typical CSS font spec, e.g.
font("bold 15px Helvetica"). The color of your font will depend on your last
fillstyle(defaults to black).
Draws, well, text... at the current position. Currently does not support current angle, but it should in the future.
Sets current location as the origin point for
gotousing polar coordinates which are relative to the last origin set. This is an interesting addition to typical turtle features, and can be a huge time (math) saver.
Stores current position, angle and origin. A call to
home()performs a move to this position. Limited use convenience; it doesn't quite work yet and may go away.
Resets the pen's current direction relative to the page (0 degrees is "up").
- More canvas wrapper methods (makes chaining easier)
- Probably tweaking the method names and functionality (you've been warned)
- Robust kitchen sink test script
- Optimize the code a bit more
- Support rendering in SVG and IE's madness (maybe)
- Auto-render arcs between points in
Second test... does it work?