Creating a rotate3D() function for PMatrix3D in Processing

Question

Some time ago, I coded a little fidgetable logo based on CSS transforms alone.

You can fiddle with it over https://document.paris/

The result feels nice, it feels natural to click/touch and drag to rotate the logo.

I remember banging my head against the walls until I found out that I could chain CSS transforms quite easily just by chaining them.

transform: matrix3d(currentMatrix) rotate3d(x, y, z, angle);

And most importantly to get the currentMatrix I would simply do m = $('#logobackground').css('transform'); with jQuery, the browser would magically return the computed matrix instead of the raw "css" which actually avoided me to deal with matrices or to infinitely stack rotate3D() properties.

So the hardest part was then to calculate the rotate3D arguments (x, y, z, angle) based on mouse inputs. In theory shouldn't have problems transposing this part to java so i'll just skip over it.

Now

I'm trying to do the exact same thing with Processing and there is two problems :

1. There is no rotate3D() in processing.
2. There is no browser to apply/chain transformations and return me the current matrix state automatically.

Here's the plan/implementation I'm working on :

I need a "currentMatrix" to apply every frame to the scene

PMatrix3D currentMatrix = new PMatrix3D();

In the setup() I set it to the "identity matrix" which from what I understand is equivalent to "no transformation".

// set currentMatrix to identity Matrix
currentMatrix.set(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

Every frame I would calculate a transformation matrix and apply it to the currentMatrix. Then I would apply this matrix to the scene.

// Apply Matrix to the currentMatrix
void mouseRotate() {
    float diag = sqrt(pow(width,2)+pow(height,2));
    float x = deltaX()/ diag * 10; // deltaX = difference between previous prevous MouseX and current mouseX)
    float y = deltaY()/ diag * 10; // deltaY = same with Y axis
    float angle = sqrt( pow(x, 2) + pow(y, 2) );
    currentMatrix.apply( rotate3D(y,x,0,angle) );
}
// Apply Matrix to the scene
applyMatrix(currentMatrix);

PMatrix3D reference : https://processing.github.io/processing-javadocs/core/processing/core/PMatrix3D.html

ApplyMatrix() reference : https://processing.org/reference/applyMatrix_.html

All I need to do then is to implement the rotate3D css transform as a function which returns a transformation matrix.

Based on what I found on this page https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d()

I implemented this first function :

PMatrix3D rotate3D(float x, float y, float z, float a) {
    PMatrix3D rotationMatrix = new PMatrix3D();
    rotationMatrix.set(
        1+(1-cos(a))*(pow(x,2)-1),  z*sin(a)+x*y*(1-cos(a)),    -y*sin(a)+x*z*(1-cos(a)),   0,
        -z*sin(a)+x*y*(1-cos(a)),   1+(1-cos(a))*(pow(y,2)-1),  x*sin(a)+y*z*(1-cos(a)),    0,
        y*sin(a)+x*z*(1-cos(a)),    -x*sin(a)+y*z*(1-cos(a)),   1+(1-cos(a))*(pow(z,2)-1),  0,
        0,0,0,1
    );
    return rotationMatrix;
}

and based on what I found on this page https://drafts.csswg.org/css-transforms-2/#Rotate3dDefined I implemented this other function :

PMatrix3D rotate3Dbis(float getX, float getY, float getZ, float getA) {
    float sc = sin(getA/2)*cos(getA/2);
    float sq = pow(sin(getA/2),2);
    float normalizer = sqrt( pow(getX,2) + pow(getY,2) + pow(getZ,2) );
    float x = getX/normalizer;
    float y = getY/normalizer;
    float z = getZ/normalizer;

    PMatrix3D rotationMatrix = new PMatrix3D();
    rotationMatrix.set(
        1-2*(pow(y,2)+pow(z,2))*sq, 2*(x*y*sq-z*sc),            2*(x*z*sq+y*sc),            0,
        2*(x*y*sq+z*sc),            1-2*(pow(x,2)+pow(z,2))*sq, 2*(y*z*sq-x*sc),            0,
        2*(x*z*sq-y*sc),            2*(y*z*sq+x*sc),            1-2*(pow(x,2)+pow(y,2)*sq), 0,
        0,                          0,                          0,                          1
    );
    return rotationMatrix;
}

When testing, they don't produce exactly the same result with the same inputs (although the differences are kind of "symmetric" which makes me think that they are kind of equivalent at least in some way ?) Also rotate3Dbis() has a tendency to produce NaN numbers, especially when i'm not moving the mouse (x & y = 0).

But most importantly, in the end it doesn't work. Instead of rotating, the drawing just zooms out progressively when I'm using rotate3D(), and rotate3Dbis() doesn't render correctly because of the NaNs.

The overall question : I'm trying to get guidance from people who understand transformations Matrices and trying to narrow down where the issue is. Are my processing/java implementations of rotate3D() flawed ? Or would the issue come from somewhere else ? And are my rotate3D() and rotate3Dbis functions equivalent ?

Answer 1

You might get away with simply rotating on X and Y axis, as you already mentioned, using the previous and current mouse coordinates:

PVector cameraRotation = new PVector(0, 0);

void setup(){
  size(900, 900, P3D);
  rectMode(CENTER);
  strokeWeight(9);
  strokeJoin(MITER);
}

void draw(){
  //update "camera" rotation
  if (mousePressed){
    cameraRotation.x += -float(mouseY-pmouseY);
    cameraRotation.y += float(mouseX-pmouseX);
  }
  
  background(255);
  translate(width * 0.5, height * 0.5, 0);
  rotateX(radians(cameraRotation.x));
  rotateY(radians(cameraRotation.y));
  rect(0, 0, 300, 450);
}

The Document Paris example you've shared also uses easing. You can have a look at this minimal easing Processing example

Here's a version of the above with easing applied:

PVector cameraRotation = new PVector();
PVector cameraTargetRotation = new PVector();
float easing = 0.01;

void setup(){
  size(900, 900, P3D);
  rectMode(CENTER);
  strokeWeight(9);
  strokeJoin(MITER);
}

void draw(){
  //update "camera" rotation
  if (mousePressed){
    cameraTargetRotation.x += -float(mouseY-pmouseY);
    cameraTargetRotation.y +=  float(mouseX-pmouseX);
  }
  
  background(255);
  translate(width * 0.5, height * 0.5, 0);
  // ease rotation
  rotateX(radians(cameraRotation.x -= (cameraRotation.x - cameraTargetRotation.x) * easing));
  rotateY(radians(cameraRotation.y -= (cameraRotation.y - cameraTargetRotation.y) * easing));
  fill(255);
  rect(0, 0, 300, 450);
  fill(0);
  translate(0, 0, 3);
  rect(0, 0, 300, 450);
}

Additionally there's a library called PeasyCam which can make this much simpler.

If you do want to implement your own version using PMatrix3D here are a couple of tips that could save you time:

• When you instantiate PMatrix3D() it's the identity matrix. If you have transformations applied and you want to reset() to identity.
• If you want to rotate a PMatrix3D() around and axis the rotate(float angleInRadians, float axisX, float axisY, float axisZ) override should help.
• Additionally you could get away without PMatrix3D since resetMatrix() will reset the global transformation matrix and you can call rotate(float angleInRadians, float axisX, float axisY, float axisZ) directly.