How to extract / decompose Matrix4 components?

[miran248]

Any idea on how would one extract components from Matrix4, after the rotation was applied?
I need them to clamp the matrix position (bounds), scale (min, max), rotation (nearest 90 deg, for example) and a few other things.

Life's simple without it

scaleX = matrix[0]
x = matrix[3]
y = matrix[7]

Any libraries i should look into?

This code works, as long as i don't do any rotations

const MIN_SCALE = 1;
const MAX_SCALE = 5;

const clampMatrix = (
  aspectRect: SkRect,
  imageRect: SkRect,
  imageScale: number,
  matrix: Matrix4,
  origin: SkPoint
) => {
  "worklet";

  const scaleDiff = scaleClampDiff(matrix[0], MIN_SCALE, MAX_SCALE);
  if (scaleDiff !== 1) {
    matrix = multiply4(scale(scaleDiff, scaleDiff, 1, origin), matrix);
  }

  const s = matrix[0];

  const maxX = aspectRect.x;
  const minX = maxX + aspectRect.width - imageRect.width * imageScale * s;
  const diffX = clampDiff(matrix[3], minX, maxX);

  const maxY = aspectRect.y;
  const minY = maxY + aspectRect.height - imageRect.height * imageScale * s;
  const diffY = clampDiff(matrix[7], minY, maxY);

  if (diffX !== 0 || diffY !== 0) {
    matrix = multiply4(translate(diffX, diffY), matrix);
  }

  return matrix;
};

const scaleClampDiff = (value: number, min: number, max: number) => {
  "worklet";

  let diff = min - value;
  if (diff > 0) {
    return min / value;
  }

  diff = max - value;
  if (diff < 0) {
    return max / value;
  }

  return 1;
};
const clampDiff = (value: number, min: number, max: number) => {
  "worklet";

  let diff = min - value;
  if (diff > 0) {
    return diff;
  }

  diff = max - value;
  if (diff < 0) {
    return diff;
  }

  return 0;
};

[wcandillon]

is this a 2d matrix? if yes, we have code that does it nicely: https://github.com/wcandillon/react-native-redash/blob/master/src/Matrix3.ts#L354 If your matrix is 2d, you can easily go from m4 to m3. If your matrix is 3d it is doable but much harder: https://github.com/wcandillon/react-native/blob/d827335671711fe2095e399128c3099ecb32c6cd/Libraries/Utilities/MatrixMath.js#L729 I hope this helps.

…

On Fri, Feb 16, 2024 at 12:31 PM Miran ***@***.***> wrote: Any idea on how would one extract components from Matrix4, after the rotation was applied? I need them to clamp the matrix position (bounds), scale (min, max), rotation (nearest 90 deg, for example) and a few other things. Life's simple without it scaleX = matrix[0] x = matrix[3] y = matrix[7] Any libraries i should look into? This code works, as long as i don't do any rotations const MIN_SCALE = 1; const MAX_SCALE = 5; const clampMatrix = ( aspectRect: SkRect, imageRect: SkRect, imageScale: number, matrix: Matrix4, origin: SkPoint ) => { "worklet"; const scaleDiff = scaleClampDiff(matrix[0], MIN_SCALE, MAX_SCALE); if (scaleDiff !== 1) { matrix = multiply4(scale(scaleDiff, scaleDiff, 1, origin), matrix); } const s = matrix[0]; const maxX = aspectRect.x; const minX = maxX + aspectRect.width - imageRect.width * imageScale * s; const diffX = clampDiff(matrix[3], minX, maxX); const maxY = aspectRect.y; const minY = maxY + aspectRect.height - imageRect.height * imageScale * s; const diffY = clampDiff(matrix[7], minY, maxY); if (diffX !== 0 || diffY !== 0) { matrix = multiply4(translate(diffX, diffY), matrix); } return matrix; }; const scaleClampDiff = (value: number, min: number, max: number) => { "worklet"; let diff = min - value; if (diff > 0) { return min / value; } diff = max - value; if (diff < 0) { return max / value; } return 1; }; const clampDiff = (value: number, min: number, max: number) => { "worklet"; let diff = min - value; if (diff > 0) { return diff; } diff = max - value; if (diff < 0) { return diff; } return 0; }; — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[miran248]

Ha, wasn't aware of your library, at a quick glance it looks exactly what i'm looking for!

Yes, it's 2d only, so i'll switch to Matrix3, thank you!

[wcandillon]

to be fair there might be some checks that need to be done, I haven't looked at it in a while not sure if the format are compatible and so on (I do remember it not being buggy as I used it in some tutorials). We have tests in redash: https://github.com/wcandillon/react-native-redash/blob/master/src/__tests__/Matrix4.test.ts if you run into troubles we can try to add some tests to test this feature.

…

On Fri, Feb 16, 2024 at 1:33 PM Miran ***@***.***> wrote: Ha, wasn't aware of your library, at a quick glance it looks exactly what i'm looking for! Yes, it's 2d only, so i'll switch to Matrix3, thank you! — Reply to this email directly, view it on GitHub <#2222 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVUNYTSDN4UX7LVYSZLYT5GZ5AVCNFSM6AAAAABDL4ANYGVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DIOJRHE4DM> . You are receiving this because you commented.Message ID: ***@***.*** com>

[wcandillon]

I think this is the tutorial where I used this functionality: https://www.youtube.com/watch?v=LK9iOKk62nw On Fri, Feb 16, 2024 at 1:46 PM William Candillon ***@***.***> wrote:

…

to be fair there might be some checks that need to be done, I haven't looked at it in a while not sure if the format are compatible and so on (I do remember it not being buggy as I used it in some tutorials). We have tests in redash: https://github.com/wcandillon/react-native-redash/blob/master/src/__tests__/Matrix4.test.ts if you run into troubles we can try to add some tests to test this feature. On Fri, Feb 16, 2024 at 1:33 PM Miran ***@***.***> wrote: > Ha, wasn't aware of your library, at a quick glance it looks exactly what > i'm looking for! > > Yes, it's 2d only, so i'll switch to Matrix3, thank you! > > — > Reply to this email directly, view it on GitHub > <#2222 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AACKXVUNYTSDN4UX7LVYSZLYT5GZ5AVCNFSM6AAAAABDL4ANYGVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DIOJRHE4DM> > . > You are receiving this because you commented.Message ID: > ***@***.*** > com> >