Processing-js Bug (1557) Release 0.1 – Getting my feet wet

Having used processing.js to create a few simple web animations before, I was keen on working with processing.js. After days of digging though processing.js @ lighthouse I have finally found a simple bug that I could get my feet wet with, or so I thought.

Bug: printMatrix prints negative zeros  (Link)

After cloning the processing.js’s git repo

At first glance the bug seems to be a simple formatting problem, a zero is formatted with a negative sign.

After running a few test sketches with the following code

size(500, 500); rotate(PI); printMatrix();

I have discovered the negative zero happens when the rotate(PI) function is called. This function is suppose to rotate the matrix by 180 degrees given the input value is PI. Without getting into the algebra of matrix rotations and transformations, simply put each of the element of the 2×3 matrix is multiplied by a transformation matrix, and when that calculation is done some of the element have that -0.0000 is not actually 0. Its a rounded number, the actually value is -1.2246467991473532e-16.

So when the print function formats that number into 4 decimal digits (without rounding), its is shown as -0.0000

Well at first I thought this is easily fixable, all I have to do is round the number and then format it into 4 decimal digits. To that end I have upload my fix as my release 0.1 to my git repo under branch t1557

But here is when things get interesting. After further examination the P5 code shows the negative zero in the (1,0) position in the matrix while the PJS code shows the negative zero at (0,1) position. So either the P5’s rotation calculation is wrong or the PJS’s rotation function is wrong.

My next step is:

  1. brush up on my matrix algebra (so I can calculate the values by hand if need be)
  2. download the latest P5 code (to see if P5 have fixed the problem in the latest beta release)
  3. compare the P5 rotate function with PJS’s
  4. if the rotate in PJS is wrong then fix it.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: