Tuesday, April 17th, 2007

Sylvester: Vector and Matrix Math for JavaScript

Category: JavaScript, Library

James Coglan wanted to create a generally useful JavaScript library that does vector and matrix math well.

He has released Sylvester, which let’s developers write readable object-oriented code for dealing with vector and matrix mathematics. Its first release includes classes for vectors, matrices, and lines and planes in 3D space. Future releases will add more sophisticated geometry functions and hopefully a 3D rendering engine for the canvas element.

The initial version is available for download, and there are API docs for the vector and matrix components available, with more documentation coming.

Vector math


  1. var V1 = $V([3,4,5]);
  2. var V2 = $V([9,-3,0]);
  4. var d = V1.dot(V2);
  5. // d is 15
  7. var c = V1.cross(V2);
  8. // c is the vector (15,45,-45)



  1. var M1 = $M([
  2.   [1,7,3],
  3.   [9,4,0],
  4.   [2,7,1]
  5. ]);
  7. var M2 = $M([
  8.   [6,2,8],
  9.   [9,1,3],
  10.   [0,7,6]
  11. ]);
  13. var M = M1.x(M2);
  15. // M is the matrix
  16. //   69 30 47
  17. //   90 22 84
  18. //   75 18 43

Posted by Dion Almaer at 6:37 am

3.4 rating from 19 votes


Comments feed TrackBack URI

The next thing will be javascript opengl :))

Comment by Vote for the worst — April 17, 2007

matrix is not only for 3D, or am i wron? maybe you can use it for all kind of matrix-based math-problems like “network paths” or something like this… .. .

Comment by ajaxianer — April 17, 2007

@ajaxianer – You’re exactly right, there’s all sorts of useful things you can do with matrices. 3D is one direction I’m taking this library in, but I didn’t just want to write a 3D library. I want to write a 3D library, AND expose all the underlying maths bits for more general use.

Comment by James Coglan — April 17, 2007

Sylvester site seems to be down… would like to take a look at the lib.

Btw, does anyone have a good reference on Applied Linear Algebra with reference to web applications, data applications, etc.? …looking for books related to algorithms, or applying matrices and linear algebra to data and web apps.

thanks for the info as always, Dion

Comment by Mark Holton — April 17, 2007

Why the $ sign? $ sign used to be reserved for pre compiler generated code and only used by Perl/PHP programmers being ignorant. Now everyone seems to think that a $ makes things more readable?

Comment by Erik Arvidsson — April 17, 2007

Erik, a priority for me with this library is making code consise and clear. As you get into some of the more advanced functions with Line and Plane classes, code quickly gets bloated with Vector.create() all over the place – hence my wanting a shorthand function. I figured just using V() and M() over $V() and $M() would be too likely to cause conflicts with variable names.

I do have a background in PHP (now more of a Ruby guy) and the $ sign there really annoys me – PHP’s variable syntax is just plain messy. However, Prototype, jQuery et al have established a convention of sorts for using $ in JavaScript that people are familiar with.

Comment by James Coglan — April 18, 2007

Grab your $ variables fast! Prototype has already taken $A, $F, $H and $R. Sylvestor has taken $L, $M, $P and $V! Only 18 letters left!

Comment by Jordan — April 18, 2007

@James, re “$”: using that character doesn’t make the code clear (though it will make it concise); instead of having some sort of hint as to what the function actually *does*, you’ve instead forced everyone to refer to the documentation to figure out what it means. Just because Prototype started it and jQuery copied it doesn’t mean it’s right; in fact, I think they made it worse because (IIRC) they have very slightly different meanings between both libraries.
I’m most certainly not a fan of MakeSureYouNameAllVariablesWithAsMuchClarificationAsPossible (what was that article, Java–the Land of Nouns?) but *some* clarity is much better than none. I think too many people take the “its so heavy and bloated” argument too far, and for those who are still concerned about it, you can *always* use Dean Edward’s Packer or something like Dojo’s ShrinkSafe.

Comment by Tom Trenka — April 18, 2007

@ Tom – I completely agree with your point of view – I’ve tried to make all method names in Sylvester read like natural English and maths statements — stuff like ‘if (A.isPerpendicularTo(B)) …’ — and I favour legible code over alphabet soup every time. I pack my scripts for deployment but always keep legible source available. I would disagree that I’m forcing use of $V() – as the API docs state, that’s just an alias for Vector.create(). You can use whichever you think is more appropriate. The latter is more clear, but you will not want to be using it when you start chaining lots of vector maths together — not because of filesize, but because your code will quickly become full of Foo.create() statements and it will be harder to read the actual maths.

Comment by James Coglan — April 18, 2007

@Jordan: LOL

Comment by Mike Ritchie — April 18, 2007

I remember doing a simple math app in Javascript once. I was doing something pretty simple, but a few of my results had .000000000005 tagged on the end for no apparent reason.

I eventually figured out it had something to do with the binary-decimal conversions in the calculation process.

So I’m impressed when anyone tries to do serious math in JS. The workarounds can be un-fun.

Comment by Andrew — April 18, 2007

Quick update: API docs are finished now. Probably should have had them out last week but time was not on my side. http://sylvester.jcoglan.com/docs

Comment by James Coglan — April 22, 2007

Leave a comment

You must be logged in to post a comment.