davidbau.com

jQuery-turtle

You have three img elements with ids r, x, and a. What does the following javascript program do with them?

Click here to see a demo.

Open-Source Library

The jQuery extension being used here makes simple javascript game dynamics accessible enough for kids to use directly. The extension is called jQuery-turtle and I am licensing it under MIT license terms. It builds on top of Zachary Johnson's useful rotation extensions to jQuery.

jQuery-turtle source code here.

The extension adds the following methods to jQuery:

$(elt).turn(degrees)      // turns elements right by a number of degrees 
$(elt).turnto(direction)  // sets absolute compass direction
$(elt).move(pixels)       // moves elements forward by a number of pixels
$(elt).moveto(location)   // sets absolute position of the center of the elements
$(elt).mirror(flip)       // mirrors elements across the current axis
$(elt).center()           // returns the absolute center coordinates of an element
$(elt).direction()        // returns the absolute compass direction of an element
$(elt).touches(target)    // true if one element touches another
$(elt).encloses(target)   // true if one element geometrically encloses another
$(elt).pen(color)         // starts tracing a line with the given style
$(elt).fill(color)        // fills the elements with the given style

Any element can be turned and walked around the screen using turtle geometry and hit-tested against any other element. Key features of this extension avoid learning barriers for beginning programmers:

• No need to understand cartesian coordinates. Trigonometry of turtle graphics is handled.
• Plays nicely with css: turtle heading is css rotation, and position is set using css attributes.
• Mouse events are easy: move to the location of a mouse event by $(elt).moveto(event).
• Hit testing is easy: pixel-precise rotated-rectangle hit testing is implemented by $(elt).touches(otherelt).
• Objects are positioned by their center, which simplifies most game calculations.
• Fractional positions are remembered, avoiding roundoff problems at small steps or angles.
• Turning towards another object is implemented by $(elt).turnto(otherelt), an alternative to $(elt).turnto(degrees).
• Window scrolling is also easy and is done by $(window).moveto(pos).
• Every element can have a pen with its own color and size.
• Canvas for pen lines created on-demand and does not interfere with the document.

Learning To Program with jQuery

What is the best programming language to learn first? The right answer in today's world is Javascript - with jQuery.

Javascript is the most widely supported programming language in the world. It has readable algebraic syntax and simple typing that is forgiving for beginners. With its good support for closures, objects, and literals, it is an elegant little language with room to grow.

The main disadvantage of Javascript is its odd and unreliable GUI-oriented standard library, the HTML DOM. But jQuery has fixed that. With its efficient, robust design, jQuery has far outstripped all its rivals as the "version 2" DOM. Today, jQuery is approaching the universality of Javascript itself.

But is jQuery accessible to beginners?

This Fall I will be testing that question. Together with several Google friends, I'm teaching a learn-to-program course to a group of 17 sixth graders (we're doing it as part of the Citizen Schools program where every child in the Dorchester public middle school is required to participate in an after-school program).

The theme of the class is "web game programming" - a popular topic. We are using Javascript and jQuery on Chromebooks along with a small set of jQuery extensions including jquery-turtle, described below. We have ten hours to get the kids from "hello world" to creating their own games.

In our first two hours, we've explored the Javascript debugger and made our own webpages. Hour three is coming up. It will be our first exercise in making a simple game with some scaffolding.

Here is the example for class 3.

Turtle Graphics Fern with jQuery

Here is another classic turtle graphics example:

Click here to see a demo.

Avoiding Selectors for Beginners

I am finding that the jquery syntax of $('#id') is getting in the way of teaching middle-schoolers.

There are two problems: first, the generality of jQuery selectors is an unnecessary concept to know before you even know what a function is. And second, the punctuation is too much for inexperienced typers to type: shift-4 for dollar, shift-9 and shift-0 for smooth parentheses, a choice to decide between single and double quotes, and don't forget shift-3 for the hashmark.

So I am considering giving kids a template that starts all their programs with a call to $.setupids() where idvars is a function defined as follows:

$.setupids = function setupids(prefix) {
  prefix = prefix || '';
  $('[id]').each(function(j, item) {
    window[prefix + item.id] = $('#' + item.id);
  });
};

The idea is that after $.setupids();, every HTML element that has an id of "r" has a corresponding global variable "r = $('#r');" which is the jquery selecting that element (not just the bare element).

<script src="/lib/jq.js"></script>
<img id="a" src="/public/asteroid.gif">
<img id="r" src="/public/rocket.png">
<script>
$.setupids(); // supplied in the template
a.move();
r.turnto(a);
</script>