+ lastclick // Event object of the last click event in the doc.
+ lastmousemove // The last mousemove event.
+ lastmouseup // The last mouseup event.
+ lastmousedown // The last mousedown event.
+ keydown // The last keydown event.
+ keyup // The last keyup event.
+ keypress // The last keypress event.
+ speed(movesPerSec) // Sets $.fx.speeds.turtle to 1000 / movesPerSec.
+ tick([perSec,] fn) // Sets fn as the tick callback (null to clear).
+ random(n) // Returns a random number [0...n-1].
+ random(list) // Returns a random element of the list.
+ random('normal') // Returns a gaussian random (mean 0 stdev 1).
+ random('uniform') // Returns a uniform random [0...1).
+ random('position') // Returns a random {pageX:x, pageY:y} in the document.
+ remove() // Removes default turtle and its globals (fd, etc).
+ hatch([n,], [img]) // Creates and returns n turtles with the given img.
+ see(a, b, c...) // Logs tree-expandable data into debugging panel.
+ output(html || text) // Appends html into the document body.
+ input([label,] fn) // Makes a one-time input field, calls fn after entry.
+ button([label,] fn) // Makes a clickable button, calls fn when clicked.
+
For example, after eval($.turtle()), the following is a valid program
in CoffeeScript syntax:
-speed 100 -pen 'red' -chaser = hatch() -chaser.moveto 0,0 -chaser.bg 'red' -player = turtle +speed Infinity +output "Try to catch blue." +r = hatch 'red' +b = hatch 'blue' +safe = 20 tick 10, -> - player.turnto lastmousemove - player.fd 5 - chaser.turnto player - chaser.rt (random 60) - 30 - chaser.fd 5 - if chaser.touches player - output "tag! you're it!" - tick -> + turnto lastmousemove + fd 6 + if safe > 0 + safe = safe - 1 + else + r.turnto turtle + r.fd 4 + b.turnto r + b.fd 3 + if b.touches(turtle) + output "You win!" + tick null + else if r.touches(turtle) + output "Too slow!" + tick nullThe turtle teaching environment is designed to work well with either @@ -501,7 +525,7 @@ function transformStyleAsMatrix(transformStyle) { ////////////////////////////////////////////////////////////////////////// // ABSOLUTE PAGE POSITIONING -// Dealing with the element center, rectangle, and direction on the page, +// Dealing with the element origin, rectangle, and direction on the page, // taking into account nested parent transforms. ////////////////////////////////////////////////////////////////////////// @@ -731,7 +755,7 @@ function getCenterInPageCoordinates(elem) { { position: "absolute", visibility: "hidden", display: "block" } : {}, st = swapout[transform] = (inverseParent ? 'matrix(' + $.map(inverseParent, cssNum).join(', ') + ', 0, 0)' : 'none'), - substTransform = (st == 'matrix(1, 0, 0, 1, 0, 0)') ? 'none' : st; + substTransform = (st == 'matrix(1, 0, 0, 1, 0, 0)') ? 'none' : st, saved = elem.style[transform], gbcr = cleanSwap(elem, swapout, readPageGbcr), middle = readTransformOrigin(elem, [gbcr.width, gbcr.height]), @@ -837,7 +861,7 @@ function scrollWindowToDocumentPosition(pos, limit) { if (ty < wh2) { ty = wh2; } targ = { pageX: tx, pageY: ty }; if ($.isNumeric(limit)) { - targ = limitMovement(w.center(), targ, limit); + targ = limitMovement(w.origin(), targ, limit); } w.scrollLeft(targ.pageX - ww2); w.scrollTop(targ.pageY - wh2); @@ -1573,7 +1597,7 @@ function withinOrNot(obj, within, distance, x, y) { } var ctr = $.isNumeric(x) && $.isNumeric(y) ? { pageX: x, pageY: y } : isPageCoordinate(x) ? x : - $(x).center(), + $(x).origin(), d2 = distance * distance; return obj.filter(function() { var gbcr = getPageGbcr(this); @@ -1682,7 +1706,7 @@ var turtlefn = { if (!style) { style = 'black'; } var ps = parsePenStyle(style, 'fillStyle'); return this.direct(function(j, elem) { - var c = this.center(); + var c = this.origin(); // Scale by sx. (TODO: consider drawing ellipse for sx != sy.) var s = $.map($.css(elem, 'turtleScale').split(' '), parseFloat); fillDot(c, diameter * s[0], ps); @@ -1720,7 +1744,7 @@ var turtlefn = { } }); }, - center: function() { + origin: function() { if (!this.length) return; return getCenterInPageCoordinates(this[0]); }, @@ -1737,7 +1761,7 @@ var turtlefn = { } return this.direct(function(j, elem) { var pos = position; - if (pos && !isPageCoordinate(pos)) { pos = $(pos).center(); } + if (pos && !isPageCoordinate(pos)) { pos = $(pos).origin(); } if (!pos || !isPageCoordinate(pos)) return this; if ($.isWindow(elem)) { scrollWindowToDocumentPosition(pos, limit); @@ -1751,19 +1775,19 @@ var turtlefn = { flushPenState(elem); }); }, - direction: function() { + bearing: function() { if (!this.length) return; var elem = this[0], dir; if ($.isWindow(elem) || elem.nodeType === 9) return 0; return getDirectionOnPage(elem); }, - turnto: function(direction, limit) { + turnto: function(bearing, limit) { return this.direct(function(j, elem) { if ($.isWindow(elem) || elem.nodeType === 9) return; - var dir = direction; - if (!$.isNumeric(direction)) { - var pos = direction, cur = $(elem).center(); - if (pos && !isPageCoordinate(pos)) { pos = $(pos).center(); } + var dir = bearing; + if (!$.isNumeric(bearing)) { + var pos = bearing, cur = $(elem).origin(); + if (pos && !isPageCoordinate(pos)) { pos = $(pos).origin(); } if (!pos || !isPageCoordinate(pos)) return; dir = radiansToDegrees( Math.atan2(pos.pageX - cur.pageX, cur.pageY - pos.pageY)); @@ -1961,7 +1985,8 @@ var dollar_turtle_methods = { random: random, hatch: hatch, input: input, - output: output + output: output, + button: button }; $.turtle = function turtle(id, options) { @@ -2357,12 +2382,30 @@ function output(html) { if (html === undefined || html === null) { return $('
' + escapeHtml(html) + '
';
}
return $(html).appendTo('body');
}
+// Simplify $('body'>.append('').click(fn).
+function button(name, callback) {
+ if ($.isFunction(name) && callback === undefined) {
+ callback = name;
+ name = null;
+ }
+ if (name === null || name === undefined) {
+ name = '\u25CE';
+ }
+ var result = $('');
+ result.appendTo('body');
+ if (callback) {
+ result.click(callback);
+ }
+ return result;
+}
+
+
// Simplify $('body').append('' + label) and onchange hookup.
function input(name, callback) {
if ($.isFunction(name) && callback === undefined) {
From 292c40ba2539ea4acd00b4a845242570e997f283 Mon Sep 17 00:00:00 2001
From: David Bau jQuery-turtle
jQuery-turtle
++jQuery-turtle
-version 2.0.4
+version 2.0.5
jQuery-turtle is a jQuery plugin for turtle graphics.
@@ -49,9 +50,6 @@jQuery-turtle
positioning, and absolute direction reading and setting.Try an interactive demo (CoffeeScript syntax) here.
-Under the covers, CSS3 2D transforms and jQuery animations are used to execute and store turtle movement, so jQuery-turtle @@ -71,7 +69,8 @@
jQuery-turtle
and creation of new turtles. The jQuery teaching environment has been developed to support a curriculum for young students. -JQuery Methods for Turtle Movement
++JQuery Methods for Turtle Movement
Turtle-oriented methods taking advantage of the css support:
@@ -80,25 +79,28 @@JQuery Methods for Turtle Movement
$(x).bk(50) // Back. $(x).rt(90) // Right turn. $(x).lt(45) // Left turn. + + // Methods below happen in an instant, but queue after animation. $(x).pen('red') // Sets a pen style, or 'none' for no drawing. - $(x).dot(12) // Draws a dot of diameter 12. + $(x).dot(12) // Draws a circular dot of diameter 12. $(x).erase() // Erases under the turtles collision hull. $(x).img('blue') // Switch the image to a blue pointer. May use any url. $(x).moveto({pageX: 40, pageY: 140}) // Absolute motion in page coordinates. $(x).turnto(heading || position) // Absolute heading adjustment. - $(x).scale(1.5) // Scales the element up to 150% size. + $(x).scale(1.5) // Scales turtle size and motion by 150%. $(x).twist(180) // Changes which direction is considered "forward". - $(x).mirror(true) // Flips the turtle across its direction axis. + $(x).mirror(true) // Flips the turtle across its main axis. $(x).reload() // Reloads the turtle's image (restarting animated gifs) $(x).direct(fn) // Like each, but this is set to $(elt) instead of elt. + // Methods below this line do not queue for animation. - $(x).center() // Page coordinate position of transform-origin. - $(x).direction() // Absolute bearing taking into account nested transforms. + $(x).origin() // Page coordinate position of transform-origin. + $(x).bearing() // Absolute direction taking into account all transforms. $(x).shown() // Shorthand for is(":visible") $(x).hidden() // Shorthand for !is(":visible") $(x).touches(y) // Collision tests elements (uses turtleHull if present). $(x).encloses(y) // Containment collision test. - $(x).within(d, t) // Filters to items with centers within d of t.center(). + $(x).within(d, t) // Filters to items with origins within d of t.origin(). $(x).notwithin() // The negation of within. @@ -119,7 +121,8 @@JQuery Methods for Turtle Movement
the bounding box of the elements (as transformed) but can be overridden by the turtleHull CSS property, if present. -JQuery CSS Hooks for Turtle Geometry
++JQuery CSS Hooks for Turtle Geometry
Turtle-oriented 2d transform cssHooks, with animation support on all motion:
@@ -152,7 +155,8 @@JQuery CSS Hooks for Turtle Geometry
If set to 'auto' (the default) the hull is just the bounding box for the element. -Turtle Teaching Environment
++Turtle Teaching Environment
An optional teaching environment setup is created by eval($.turtle()). It provides easy packaging for the above functionality.
@@ -164,41 +168,63 @@Turtle Teaching Environment
For example, after eval($.turtle()), the following is a valid program +
+ lastclick // Event object of the last click event in the doc.
+ lastmousemove // The last mousemove event.
+ lastmouseup // The last mouseup event.
+ lastmousedown // The last mousedown event.
+ keydown // The last keydown event.
+ keyup // The last keyup event.
+ keypress // The last keypress event.
+ speed(movesPerSec) // Sets $.fx.speeds.turtle to 1000 / movesPerSec.
+ tick([perSec,] fn) // Sets fn as the tick callback (null to clear).
+ random(n) // Returns a random number [0...n-1].
+ random(list) // Returns a random element of the list.
+ random('normal') // Returns a gaussian random (mean 0 stdev 1).
+ random('uniform') // Returns a uniform random [0...1).
+ random('position') // Returns a random {pageX:x, pageY:y} in the document.
+ remove() // Removes default turtle and its globals (fd, etc).
+ hatch([n,], [img]) // Creates and returns n turtles with the given img.
+ see(a, b, c...) // Logs tree-expandable data into debugging panel.
+ output(html || text) // Appends html into the document body.
+ input([label,] fn) // Makes a one-time input field, calls fn after entry.
+ button([label,] fn) // Makes a clickable button, calls fn when clicked.
+
+
+For example, after eval($.turtle()), the following is a valid program in CoffeeScript syntax:
-speed 100 -pen 'red' -chaser = hatch() -chaser.moveto 0,0 -chaser.bg 'red' -player = turtle +speed Infinity +output "Try to catch blue." +r = hatch 'red' +b = hatch 'blue' +safe = 20 tick 10, -> - player.turnto lastmousemove - player.fd 5 - chaser.turnto player - chaser.rt (random 60) - 30 - chaser.fd 5 - if chaser.touches player - output "tag! you're it!" - tick -> + turnto lastmousemove + fd 6 + if safe > 0 + safe = safe - 1 + else + r.turnto turtle + r.fd 4 + b.turnto r + b.fd 3 + if b.touches(turtle) + output "You win!" + tick null + else if r.touches(turtle) + output "Too slow!" + tick null
The turtle teaching environment is designed to work well with either Javascript or CoffeeScript.
-License (MIT)
++License (MIT)
Copyright (c) 2013 David Bau
@@ -227,4 +253,4 @@