Here is an object at resting state. We set a rotation center point at coords (1,2).

What do we expect as a result of setting the Brayns transformation to
{ translation: [3,0], rotation_center: [1,2], rotation: <90 deg clockwise> }?

According to Brayns code, we should get through these steps:

  • Translate( -1, -2 )
  • Scale( 1, 0.5 )
  • Rotate 90 deg clockwise
  • Translate( 4, 2 ) = Translate( 3 + 1, 0 + 2)

Here's the original code:

return translate(
    {translation.x + rotationCenter.x,
     translation.y + rotationCenter.y})
    * rotation * scale *
    translate({-rotationCenter.x,
               -rotationCenter.y})

Translate( -1, -2 )

    {
        scale: [1, 0.5],
        translation: [3,0],
        rotation_center: [1,2],
        rotation: <90 deg clockwise>
    }
                    

Translate( -1, -2 )

Scale( 1, 0.5 )

{
    scale: [1, 0.5],
    translation: [3,0],
    rotation_center: [1,2],
    rotation: <90 deg clockwise>
}
                

Translate( -1, -2 )

Scale( 1, 0.5 )

Rotate( 90 deg clockwise )

{
    scale: [1, 0.5],
    translation: [3,0],
    rotation_center: [1,2],
    rotation: <90 deg clockwise>
}
                

Translate( -1, -2 )

Scale( 1, 0.5 )

Rotate( 90 deg clockwise )

Translate( 4, 2 )

{
    scale: [1, 0.5],
    translation: [3,0],
    rotation_center: [1,2],
    rotation: <90 deg clockwise>
}
                

Intuitively, we were expecting to end up in the green place. This can be performed through these steps:

  • Scale( 1, 0.5 )
  • Translate( 3, 0 )
  • Translate( -1, -2 )
  • Rotate( 90 deg clockwise )
  • Translate( 1, 2 )