Like everybody else, I am huge fan of Processing, and like everybody else I find myself working more and more with Javascript. There is a implementation port of Processing (aptly called ProcessingJS) by John Resig of jQuery fame. It’s still lacking the 3D features, but not because they would be hard to implement in JS, but rather the OpenGL bindings in the browsers don’t exists wide-spreadly (yet). Let’s hope WebGL is going to change that soon. After working a lot with Processing, one becomes quite spoilt with it’s methods. The two best kept secrets of Processing are on the one hand the matrix state operations – pushMatrix(), and popMatrix() – and on the other hand the very handy map() method, basically mapping a number from one range to another. In Javascript’s canvas you have the pushMatrix() popMatrix() equivalents as save() and restore(). The map() methods does not exists as such, but it is easy implemented. I took a look at the Processing source and rewrote the Java methods in Javascript.

var p5 = {};

p5.sq = function(a) {
	return a*a;
}

p5.constrain = function(amt, low, high) {
  return (amt < low) ? low : ((amt > high) ? high : amt);
}

p5.degrees = function(radians) {
  return radians * (180/Math.PI);
}

p5.mag = function(a, b) {
  return Math.sqrt(a*a + b*b);
}

p5.dist = function(x1, y1, x2, y2) {
  return Math.sqrt(p5.sq(x2-x1) + p5.sq(y2-y1));
}

p5.lerp = function(start, stop, amt) {
  return start + (stop-start) * amt;
}

p5.norm = function(value, start, stop) {
  return (value - start) / (stop - start);
}

p5.map = function (value, istart, istop, ostart, ostop) {
	return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
}

The code including comments and a minified version is also up on GitHub, show you love and fork it. https://github.com/trembl/p5.Math.js/ Rather than creating a dedicated object, and as all the function are kind of related to Math, I thought it would be a good idea to extend the Math object itself. (Well, it’s a good idea for my project – your mileage, especially if you are flying with a lot of libraries might vary). And how to you extend a Javascript build-in object? With prototype, right?

Math.prototpe.sq = function(a) {
	return a*a;
}

Wrong. Because Math does not have a constructor, it therefore hasn’t been constructed and therefore does not have the prototype method. It has been instantiated and you add methods (or functions?) like this:

Math.sq = function(a) {
	return a*a;
}

You get the idea. The new code also lives at GitHub, check it out. https://github.com/trembl/p5.Math.js/