At the same time, I wanted to see what Khan Academy is all about. Turns out they have lessons on vector math, but there’s very little on vectors specifically. There are two lessons on vector basics, where this second one is a lot more practical. There are also two exercises, one for addition of vectors, one for scaling. Both are pretty easy and you should be done within a minute if you watched the video.

With that knowledge under your belt, let’s look at some practical application, the aforementioned bouncing ball. To start, take a look at the demo and play around with it, there are some instructions at the top.

You can find the source code for that demo on GitHub, here is the main file for the bouncing balls demo. I’m not going to discuss the Point and Vector classes that this uses, though you should take a look. They just implement adding and scaling of vectors, and calculating a vector based on two points. Let’s walk through the code:

var GRAVITY = new Vector(0, 9.81);
var FRICTION = 0.85;
var world = {
	x1: 0,
	y1: 0
};
$(window).resize(function() {
	world.x2 = $(window).width();
	world.y2 = $(window).height();
}).trigger("resize");

This defines two constants, GRAVITY and FRICTION, which we’ll use later to affect simulated objects. GRAVITY is a vector pointing downwards, where the second component represents the 9.81 meters per second, while the first component is zero. FRICTION is used in collisions later, and completely arbitrary.

The world object is also used in collision detection, and represents the dimensions of our 2d world. It starts at 0/0 in the left top corner, and ends in the right bottom corner. We bind a resize handler on window to update this calculation, that way collisions happen within the browser window, no matter how big it currently is.

Next up is the definition of our Ball class:

function Ball() {
	this.position = new Point(200, 200);
	this.output = $("<div>").addClass("dot").appendTo("body");
	this.velocity = new Vector(-5, 0);
}
Ball.prototype = {
	remove: function() {
		this.output.remove();
	},
	move: function() {
		// apply gravity
		this.velocity = this.velocity.add(GRAVITY.scale(0.1));

		// collision detection against world
		if (this.position.y > world.y2) {
			this.velocity.x2 = -this.velocity.x2 * FRICTION;
			this.position.y = world.y2;
		} else if (this.position.y < world.y1) {
			this.velocity.x2 = -this.velocity.x2 * FRICTION;
			this.position.y = world.y1;
		}
		if (this.position.x < world.x1) {
			this.velocity.x1 = -this.velocity.x1 * FRICTION;
			this.position.x = world.x1;
		} else {
			if (this.position.x > world.x2) {
				this.velocity.x1 = -this.velocity.x1 * FRICTION;
				this.position.x = world.x2;
			}
		}

		// update position
		this.position.x += this.velocity.x1;
		this.position.y += this.velocity.x2;

		// render
		this.output.css({
			left: this.position.x,
			top: this.position.y
		});
	}
};

This defines a Ball constructor, which initializes a new Ball at some arbitrary position, with some velocity to the left. It also creates a simple DOM element that we use for output.

The prototype of Ball has two methods. The remove method just removes the DOM element, which we use for cleanup. The move method is much more intersting: It gets called for each ‘tick’ of our animation loop, so we use it to update the current velocity, look for collisions, update the current position and render the result. Step by step:

this.velocity = this.velocity.add(GRAVITY.scale(0.1));

This adds GRAVITY to the balls velocity. While GRAVITY has a real world value, we need to adapt it to our pixel-based dimension. Doing this in every tick causes the ball to accelerate downwards, or when moving upwards, to deccelarate. With this alone our ball would start falling, but never stop. That’s where the next block comes in, the collision detection:

if (this.position.y > world.y2) {
	this.velocity.x2 = -this.velocity.x2 * FRICTION;
	this.position.y = world.y2;
} else if (this.position.y < world.y1) {
	this.velocity.x2 = -this.velocity.x2 * FRICTION;
	this.position.y = world.y1;
}
if (this.position.x < world.x1) {
	this.velocity.x1 = -this.velocity.x1 * FRICTION;
	this.position.x = world.x1;
} else {
	if (this.position.x > world.x2) {
		this.velocity.x1 = -this.velocity.x1 * FRICTION;
		this.position.x = world.x2;
	}
}

Here we compare the current position of our ball to the dimensions of the world. For each direction, there’s a check if the call is beyond the limit, if so, it inverts the velocity for that direction, while applying FRICTION. This causes the ball to bounce back slightly slower then it was before, simulating very primitive friction. To avoid glitches, where the ball goes beyond the world dimensions and doesn’t come back, the position gets updated to move it back inside the defined limits.

Now that we’ve updated the velocity (and fixed the position in case of a collision), we can update the resulting position and output it:

// update position
this.position.x += this.velocity.x1;
this.position.y += this.velocity.x2;

// render
this.output.css({
	left: this.position.x,
	top: this.position.y
});

This adds the velocity components to the position of the ball, then uses inline styles to update the position in the DOM.

Next we’ll look at the setup and animation loop:

var balls = [];
balls.push(new Ball());

// animation loop
setInterval(function() {
	balls.forEach(function(ball) {
		ball.move();
	});
}, 25);

Here we create an array of balls and add one initial Ball. Then start an interval to at 25ms, which should give us about 40 frames per second (fps). To get more smooth 60fps, we’d have to go down to 16.5ms, which would also be even more CPU intensive then this becomes with lots of balls.

Inside the interval, we just loop through all balls and call the move method for each. In a proper game engine, this loop would separate the position updates from the rendering to ensure that, when frames get dropped, the game itself doesn’t slow down.

Up next, we’ve got the code to add new balls, with user controlled initial velocity:

var start;
$(document).mousedown(function(event) {
	start = new Point(event.pageX, event.pageY);
}).mouseup(function(event) {
	var end = new Point(event.pageX, event.pageY);
	var ball = new Ball();
	ball.position = end;
	ball.velocity = start.relative(end).scale(0.2);
	ball.move();
	balls.push(ball);
});

Here we bind mousedown and mouseup events, each time creating a Point object from the pageX and pageY event properties. In the mouseup handler, we then use the end point as the starting position for the new Ball object. Using Point’s relative method, we calculate a vector between those two points, scale it down and use it as the velocity for the new ball. That way, you can just click anywhere to add a new ball, or click, drag and let go to create one with intial velocity based on the drag. To get the ball animated along with the others, its added to the balls array.

With that we’re almost at the end. The last piece just clears all balls when pressing Escape:

$(document).keyup(function(event) {
	if (event.keyCode === 27) {
		balls.forEach(function(ball) {
			ball.remove();
		});
		balls.splice(0, balls.length);
	}
});

And that’s it! Thanks to Vector, we’ve got a pretty sane implementation, and a good starting point for further improvements. And there’s lots of potential:

• Better friction simulation: Currently balls keep bouncing pretty often, they don’t slow down as much as they should after loosing some height.
• More collision detection: Detecting collisions with other balls, the mouse or other objects would make the whole thing a lot more interesting.
• Better collision detection: Currently collision detection just happens against a fixed position, not the actual ball’s dimensions. Taking the (rounded) borders into account would make things quite a bit more complicated, but also more realistic.
• More moving objects with other shapes: Currently there’s just pixels bouncing around, even though they’re rendering as balls. Adding square objects both animated and static could make things a lot more interesting.
• 3D: Moving from a 2D to a 3D simulation involves adding another component to both the Vecotor and Point class, and would add that third dimensions to each calculation, making especially the collision detection, already the most complex part, even more complex.

With this, I’ll get back to working on the basics for my flocking simulation.

Another change should make the setup of forms with hidden elements easier, these are now ignored by default (option “ignore” has “:hidden” now as default). In theory, this could break an existing setup. In the unlikely case that it actually does, you can fix it by setting the ignore-option to “[]” (square brackets without the quotes).

A few improvements and bug fixes for validation methods landed:

• Creditcard now accepts spaces between the other valid characters
• Email doesn’t accept a dot character at the end anymore.
• The time method (in additionalMethods.js) is now more thorough.
• A time12h method got added (also in additionalMethods.js), to validate 12-hour times, while the existing time method does 24-hour times.

There also two new localizations, resulting in a total number of 38 localizations. Existing localizations saw various improvements – thanks to everyone who contributed those! Its the only feature where I’m relying completely on contributions, as I can’t verify the correctness of any of the localizations (other then English and German).

Backwards compatibility is still going strong: The plugin should work with anything from jQuery 1.3.x to 1.6.x.

Download this release.

The full changelog:

• Added Basque (EU) localization
• Added Slovenian (SL) localization
• Fixed issue #127 – Finnish translations has one : instead of ;
• Fixed Russian localization, minor syntax issue
• Added in support for HTML5 input types, fixes #97
• Improved HTML5 support by setting novalidate attribute on the form, and reading the type attribute.
• Fixed showLabel() removing all classes from error element. Remove only settings.validClass. Fixes #151.
• Added ‘pattern’ to additional-methods to validate against arbitraty regular expressions.
• Improved email method to not allow the dot at the end (valid by RFC, but unwanted here). Fixes #143
• Fixed swedish and norwedian translations, min/max messages got switched. Fixes #181
• Fixed #184 – resetForm: should unset lastElement
• Fixed #71 – improve existing time method and add time12h method for 12h am/pm time format
• Fixed #177 – Fix validation of a single radio or checkbox input
• Fixed #189 – :hidden elements are now ignored by default
• Fixed #194 – Required as attribute fails if jQuery>=1.6 – Use .prop instead of .attr
• Fixed #47, #39, #32 – Allowed credit card numbers to contain spaces as well as dashes (spaces are commonly input by users).

• Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “validate”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
• Please post bug reports and other contributions (enhancements, features, eg. new validation methods) to the GitHub issue tracker

Enjoy!

The bug was related to the plugin’s usage of the form.elements property, which jQuery 1.6 doesn’t support anymore. Other then that, there is a bug fix for adding and removing the error and valid classes on radio and checkbox elements (thanks to Phil Haack for the contribution), as well as two new localizations: Thai and Vietnamese. That brings the plugin to a total of 37 supported locales.

If you’ve been testing 1.8.0 release with jQuery 1.6 and couldn’t get it to work, despite the note saying that its working, please update to 1.8.1. The form.elements fix was in place before 1.6 final got released, and I only tested against latest code on GitHub, while 1.8.0 was indeed broken.

Download this release.

The full changelog:

• Added Thai (TH) localization, fixes #85
• Added Vietnamese (VI) localization, thanks Ngoc
• Fixed issue #78. Error/Valid styling applies to all radio buttons of same group for required validation.
• Don’t use form.elements as that isn’t supported in jQuery 1.6 anymore. Its buggy as hell anyway (IE6-8: form.elements === form).

• Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “validate”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
• Please post bug reports and other contributions (enhancements, features, eg. new validation methods) to the GitHub issue tracker

Enjoy!

A bug related to remove validation with client-side formatted messages was fixed, along with improvements to localizations and four new ones, resulting in a total of 34 localizations.

This release is the first to use Google Closure Compiler for minifying files. Like other projects, I’ve dropped the .pack.js files in favor of minifying and gzipping.

Download this release.

The full changelog:

• Improved NL localization
• Added Georgian (GE) localization, thanks Avtandil Kikabidze
• Added Serbian (SR) localization, thanks Aleksandar Milovac
• Added ipv4 and ipv6 to additional methods, thanks Natal Ngétal
• Added Japanese (JA) localization, thanks Bryan Meyerovich
• Added Catalan (CA) localization, thanks Xavier de Pedro
• Fixed missing var statements within for-in loops
• Fix for remote validation, where a formatted message got messed up
• Bugfixes for compability with jQuery 1.5.1, while maintaining backwards-compability

The migration to GitHub is mostly complete, issues are now tracked there:

• Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “validate”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
• Please post bug reports and other contributions (enhancements, features, eg. new validation methods) to the GitHub issue tracker

Enjoy!

Today I’ve finally finished the Autocomplete Migration Guide, which explains how to migrate from ye olde plugin to the new jQuery UI Autocomplete widget. It covers the various options and their replacements, if any. In a lot of cases, we were able to get rid of the options by providing better defaults or by restructuring the API, with the source option being the most prominent example.

The next major jQuery UI release should include the new Tooltip widget, paving the way to shut down another plugin on this site.

There are four new localizations: Lithuanian, Greek, Latvian and Hebrew. The Spanish localization got a few improvements (I fully trust my contributors on that). Someone also contributed phoneUK and mobileUK methods, which can be found in additional-methods.js (while adding those, I renamed the phone-method to phoneUS).

And as a first proof of concept, there is now a demo styled with jQuery UI Themeroller classes. I’ll improve that when form support gets better in jQuery UI (planned for 1.9).

Download this release.

The full changelog:

• Added Lithuanian (LT) localization
• Added Greek (EL) localization (http://plugins.jquery.com/node/12319)
• Added Latvian (LV) localization (http://plugins.jquery.com/node/12349)
• Added Hebrew (HE) localization (http://plugins.jquery.com/node/12039)
• Fixed Spanish (ES) localization (http://plugins.jquery.com/node/12696)
• Added jQuery UI themerolled demo
• Removed cmxform.js
• Fixed four missing semicolons (http://plugins.jquery.com/node/12639)
• Renamed phone-method in additional-methods.js to phoneUS
• Added phoneUK and mobileUK methods to additional-methods.js (http://plugins.jquery.com/node/12359)
• Deep extend options to avoid modifying multiple forms when using the rules-method on a single element (http://plugins.jquery.com/node/12411)
• Bugfixes for compability with jQuery 1.4.2, while maintaining backwards-compability

The right place for support changed a bit – the mailinglist is no more, replaced by a much cooler forum:

• Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “validate”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
• Please post bug reports and other contributions (enhancements, features, eg. new validation methods) to the plugins.jQuery.com bug tracker (requires registration).

Enjoy!

An update for the jQuery validation plugin is available. There are five new localizations (now at 26 in total), including Arabic and Farsi (both right-to-left). Validation of selects is now more interactive, click events are properly handled to provide quicker feedback (also a bug related to selects in IE8 is fixed). The equalTo-method is now aware of changes to the target field, so a change to a password field will be reflected in a confirm-password field. And more…

Download this release.

The only not fully backwards-compatible change (if you spot anything else, please report it as a bug): The dateDE and numberDE methods were replaced with a localization/methods_de.js file, with localized versions of both the date and number methods. There are also localized methods for the NL and PT locales. The goal is to gather more localized versions of these, similar to the localized messages.

The full changelog:

• Added Arabic (AR), Portuguese (PTPT), Persian (FA), Finnish (FI) and Bulgarian (BR) localization
• Updated Swedish (SE) localization (some missing html iso characters)
• Fixed $.validator.addMethod to properly handle empty string vs. undefined for the message argument
• Fixed two accidental global variables
• Enhanced min/max/rangeWords (in additional-methods.js) to strip html before counting; good when counting words in a richtext editor
• Added localized methods for DE, NL and PT, removing the dateDE and numberDE methods (use messages_de.js and methods_de.js with date and number methods instead)
• Fixed remote form submit synchronization, kudos to Matas Petrikas
• Improved interactive select validation, now validating also on click (via option or select, inconsistent across browsers); doesn’t work in Safari, which doesn’t trigger a click event at all on select elements; fixes http://plugins.jquery.com/node/11520
• Updated to latest form plugin (2.36), fixing http://plugins.jquery.com/node/11487
• Bind to blur event for equalTo target to revalidate when that target changes, fixes http://plugins.jquery.com/node/11450
• Simplified select validation, delegating to jQuery’s val() method to get the select value; should fix http://plugins.jquery.com/node/11239
• Fixed default message for digits (http://plugins.jquery.com/node/9853)
• Fixed issue with cached remote message (http://plugins.jquery.com/node/11029 and http://plugins.jquery.com/node/9351)
• Fixed a missing semicolon in additional-methods.js (http://plugins.jquery.com/node/9233)
• Added automatic detection of substitution parameters in messages, removing the need to provide format functions (http://plugins.jquery.com/node/11195)
• Fixed an issue with :filled/:blank somewhat caused by Sizzle (http://plugins.jquery.com/node/11144)
• Added an integer method to additional-methods.js (http://plugins.jquery.com/node/9612)
• Fixed errorsFor method where the for-attribute contains characters that need escaping to be valid inside a selector (http://plugins.jquery.com/node/9611)

As usual, support is available via:

• Please post questions to the jQuery discussion list, putting “(validate)” into the subject of your post, making it easier to spot it and respond quickly. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
• Please post bug reports and other contributions (enhancements, features, eg. new validation methods) to the plugins.jQuery.com bug tracker (requires registration).

Enjoy!

More details can be found on the new plugin page.

Enjoy!

Probably most notable: The remote method now allows you to specify custom messages! Return JSON “true” for a valid field, false/null/undefined for an invalid field and the default message, or any other value to use as the message.

The full changelog:

• Fixed a bug related to the wrapper-option, where all ancestor-elements that matched the wrapper-option where selected (http://plugins.jquery.com/node/7624)
• Updated multipart demo to use latest jQuery UI accordion
• Added dateNL and time methods to additionalMethods.js
• Added Traditional Chinese (Taiwan, tw) and Kazakhstan (KK) localization
• Moved jQuery.format (fomerly String.format) to jQuery.validator.format, jQuery.format is deprecated and will be removed in 1.6 (see http://code.google.com/p/jquery-utils/issues/detail?id=15 for details)
• Cleaned up messages_pl.js and messages_ptbr.js (still defined messages for max/min/rangeValue, which were removed in 1.4)
• Fixed flawed boolean logic in valid-plugin-method for multiple elements; now all elements need to be valid for a boolean-true result (http://plugins.jquery.com/node/8481)
• Enhancement $.validator.addMethod: An undefined third message-argument won’t overwrite an existing message (http://plugins.jquery.com/node/8443)
• Enhancement to submitHandler option: When used, click events on submit buttons are captured and the submitting button is inserted into the form before calling submitHandler, and removed afterwards; keeps submit buttons intact (http://plugins.jquery.com/node/7183)
• Added option validClass, default “valid”, which adds that class to all valid elements, after validation (http://dev.jquery.com/ticket/2205)
• Added creditcardtypes method to additionalMethods.js, including tests (via http://dev.jquery.com/ticket/3635)
• Improved remote method to allow serverside message as a string, or true for valid, or false for invalid using the clientside defined message (http://dev.jquery.com/ticket/3807)
• Improved accept method to also accept a Drupal-style comma-seperated list of values (http://plugins.jquery.com/node/8580)

As usual, support is available via:

• Please post questions to the jQuery discussion list, putting “(validate)” into the subject of your post, making it easier to spot it and respond quickly. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
• Please post bug reports and other contributions (enhancements, features, eg. new validation methods) to the plugins.jQuery.com bug tracker (requires registration).

Enjoy!

Update:
Just uploaded a hotfix 1.5.4 release, with a fix for the remote method.

Update II:
Uploaded another release, now at 1.5.5, hopefully the final fix for the remote method: http://plugins.jquery.com/node/8659

An alternative to Lightbox and its various clones, with the sole purpose of displaying images: One or more thumbnails point at the full resolution image, and instead of displaying that image on a new page, its displayed, above an overlay, on the current page.

When a group of anchors with thumbnails is selected, the user can navigate with mouse and keyboard to rotate through the images.

The result is this:

Demo

There’s another demo showing how the widget can resize images that don’t fit into the browser window, as well as customizing animations.

Worth mentioning about the current implementation:

• A “canvas” element is used to render the shadow. This allows a lot of flexibility in terms of positioning, color and size of the shadow; if a browser doesn’t support canvas (IE without excanvas) the shadow simply isn’t rendered
• You can click anywhere to close the viewer, or press Escape
• Cursor keys, mousewheel as well as mouse navigation buttons (previous/next buttons on some models) can be used to rotate through an image gallery
• By using the mousewheel to rotate images, there is no need to emulate fixed positioning or similar hacks, though you need to include the mousewheel plugin
• When the last image is reached, the first is displayed, and the other way round; that way its more obvious that you reached the end of a gallery (“I’ve seen that one already” instead of “Why isn’t anything happening?”)
• A loading indicator is displayed when loading takes more then 250ms. That way you won’t see it most of the time, just in those cases where you’d otherwise wonder if anything is happening at all
• The jQuery UI “drop’” effect is used by default to rotate images in a gallery, giving the slight illusion of a slide-projector, therefore giving the viewer a more natural/human feel
• Images that are too big are resized to fit into the browser window; that also happens when the browser window is resized while the viewer is open
• The markup is very simply, therefore easy to style: There is one element for the overlay (currently buggy in IE6), one container element containing the canvas-shadow element as well as the actual image (by default styled with 15px rounded white borders)

I’d like to hear your feedback! Post a comment here, send me an email, or participate on the planning wiki page.