# How to get the values of the current matrix (after translate, scale, rotateY...)?

**URL:** <https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995>\
**Category:** Coding Questions\
**Created:** [July 15, 2026, 5:31pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995 "2026-07-15T17:31:59Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [July 15, 2026, 5:31pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/1 "2026-07-15T17:31:59Z")

</div>

To see if I could get from it the Global position, the global scale, the global rotations x y z after using translate(), rotate x,y, z, scale()… multiple times

🙂

---

<div class="post-metadata">

**Author:** ![davepagurek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davepagurek/32/17535_2.png) [@davepagurek](https://discourse.processing.org/u/davepagurek)\
**Post date:** [July 15, 2026, 6:41pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/2 "2026-07-15T18:41:07Z")

</div>

Take a look at [screenToWorld](https://beta.p5js.org/reference/p5/screenToWorld/) and [worldToScreen](https://beta.p5js.org/reference/p5/worldToScreen/) to see if they do what you need.

There is also access to the underlying matrix via something like:

```js
renderer = createCanvas(w, h)
// ...
console.log(new DOMMatrix(...renderer.getWorldToScreenMatrix().mat4))

```

…but it’s an internal API that may change in the future.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 15, 2026, 10:15pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/3 "2026-07-15T22:15:35Z")

</div>

Hello @EricRogerGarcia

GitHub issue #4743 may be of interest:

> <https://github.com/processing/p5.js/issues/4743>
>
> \### How would this new feature help increase access to p5.js?
> 
> This feature se…t would increase access by improving feature parity between Java P5 and p5.js. Js seems more accessible than Java these days, (esp. on the Web), and both are learning tools, so I feel, where possible, equivalent functionality would be desirable.
> 
> I also believe 3D is a core Processing.org feature, offering a uniquely low bar to entry.
> 
> The alternative to these "matrix access" functions seems to be direct matrix manipulation and/or access to WebGL. In my experience so far, these both add steep learning curves to what may be accomplished in Java P5 quite intuitively using push()/pop(), transformation, and these "matrix access" functions.
> 
> From the history of related requests, besides limiting common access to a well-implemented feature set, I feel the lack of easier "matrix access" functions also poses a risk to learners (like me!) getting frustrated trying to integrate unmaintained, external dependencies, or cooking up their own creative & idiosyncratic, but also potentially limiting theories & workarounds , (as valuable as such frustrations may be).
> 
> \#### Most appropriate sub-area of p5.js?
> 
> \- \[\] Color
> \- \[\] Core/Environment/Rendering
> \- \[\] Data
> \- \[\] DOM
> \- \[\] Events
> \- \[\] Image
> \- \[\] IO
> \- \[x\] Math
> \- \[\] Typography
> \- \[\] Utilities
> \- \[x\] WebGL
> \- \[\] Other (specify if possible)
> 
> \#### New feature details:
> This is a request to implement, specifically for \`WEBGL\` mode, \[\`modelX()\`\](https://processing.org/reference/modelX\_.html), \[\`modelY()\`\](https://processing.org/reference/modelY\_.html), & \[\`modelZ()\`\](https://processing.org/reference/modelZ\_.html), and \[\`screenX()\`\](https://processing.org/reference/screenX\_.html), \[\`screenY()\`\](https://processing.org/reference/screenY\_.html), & \[\`screenZ()\`\](https://processing.org/reference/screenZ\_.html).
> 
> I've collected all the related requests I could find below, but most of them are P2D-specific and seem to be precluded by canvas-specific issues. (Maybe a future WebGL-implementation of 2D mode would remove that obstacle, and offer users a common 2D/3D code and visualization space...?)
> 
> ~~As a compromise/alternative to implementation of \`modelX/Y/Z()\` (departing a little from Java P5 convenience), if "\`let gl = getGlMatrix();\`" were a thing in p5.js, could that be used à la \[\`applyMatrix( gl.a, gl.b, gl.c, gl.d., gl.e., gl.f., gl.g, gl.h, gl.i, gl.j, gl.k, gl.l, gl.m, gl.n, gl.o, gl.p )\`\](https://p5js.org/reference/#/p5/applyMatrix) to reproduce WebGL transformations outside of \`push()\`/\`pop()\`? \`applyMatrix()\` seems to require matrix elements as individual arguments...so maybe a separate array? mat4? version "\`applyGlMatrix( gl )\`" would be nicer?~~ \_(Something like this seems to exist in the p5.Matrix functions.)\_
> 
> ~~Is there already an easy way to grab the current 3D transformation matrix, (\`p5.Matrix.mat4\` or something)? I feel this would be less accessible and intuitive than \`modelX/Y/Z()\`, but still sufficiently abstracted for a learner like me to get things done....~~ \_(Did it, I think! Please see next post....)\_
> 
> With the transformation matrix, (a bit more study, and a few more steps), I gather we should be able to get transformed coordinates just as we would with \`modelX/Y/Z()\`, right?
> 
> Lastly, there's the "projection matrix", of possible relevance to the \`screenX/Y/Z()\` part of this request, I think. I understand from playing with Java P5, that \`screenZ()\` returns z-buffer values, for 3d picking, "screen space" effects etc.--a little unpredictable, but still fun....
> 
> Out of my depth, but some of this even seems semi-doable for me! If I could figure out how to get the current GL context and transformation matrix...and get help writing code on par for contribution here....
> 
> Thanks for considering!
> 
> \#243 (push()/pop() discussion)
> \#377 (modelX(), modelY() feature request)
> \#1553 (screenX() screenY(), screenZ() feature request)
> \#1873 (modelX(), modelY() feature request)
> \#4337 (matrix functions...completed!)

I was able to:

• Show the current model matrix in the console  
• Recover the same global coordinates that Processing’s `modelX/Y/Z()` returns using a helper (not included) that emulates those functions.

As an exercise, I took some vertices, applied transformations, then multiplied them by the model matrix to obtain their global coordinates.  
I then displayed these to confirm.

`:)`

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [July 17, 2026, 4:35am UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/4 "2026-07-17T04:35:35Z")

</div>

Thank you 🙂

I’m going to see if I can write a **globalCoordinates()** function that returns the position of the origin (in relative coordinates) in global coordinates based on the current transformation matrix.

It should be:

```auto
                                  0 globalX
                                  0 globalY
current-transformation-matrix . 0 = globalZ
                                  1 1

```

It should do the trick !

🙂

**P.S.** It was an opportunity to review the matrix mathematics and to learn about 4x4 transformation matrix!

Reference for now : [markdown](https://ericrogergarcia.legtux.org/out/matrices3D-english.md)

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [July 17, 2026, 4:11pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/5 "2026-07-17T16:11:27Z")

</div>

to begin with :

```auto
function transformationMatrix() { // return an Array with 16 numbers
  // may change if P5js API modification so this function is needed (may be used several times) !
  return Array.from(G.canvas.uMVMatrix.copy().matrix);
}

```

**N.B.** G is a static class for global things

with G.canvas=createCanvas(…) in setup()

(uMVMatrix.matrix is a “Float32Array” !? )

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [July 18, 2026, 8:56am UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/7 "2026-07-18T08:56:40Z")

</div>

Well… it doesn’t work… and I don’t know why for now !

In draw, I use translate(5,6,7) and my result for globalCoordinates() should be (5,6,7) but it is (0,0,0). I wonder what I did wrong !

```auto
"use strict";
// tests Tranformation matrix

function setup() {
  G.canvas = createCanvas(500, 400, WEBGL);
  noLoop();
}

function draw() {
  background(200);
  translate(5, 6, 7);
  let v = globalCoordinates();
  print("x: "+v.x);
  print("y: "+v.y);
  print("z: "+v.z);
}

class G { // static class, G for Global
  static canvas=null; // initialized in setup()
}

function transformationMatrix() { // return an Array with 16 numbers
  // may change if P5js API modification so this function is needed (may be used several times) !
  let myReturn=G.canvas.uMVMatrix.copy().matrix;
  myReturn=Array.from(myReturn);
  return myReturn;
}

function mulTMV(tm, v) { // (transformation matrix, vector) : result vector

  // a b c d x ax+by+cz+dw
  // e f g h y ex+fy+gz+hw
  // i j k l . z = ix+jy+kz+lw
  // m n o p w mx+ny+oz+pw

  let a=tm[0];
  let b=tm[1];
  let c=tm[2];
  let d=tm[3];
  let e=tm[4];
  let f=tm[5];
  let g=tm[6];
  let h=tm[7];
  let i=tm[8];
  let j=tm[9];
  let k=tm[10];
  let l=tm[11];
  let m=tm[12];
  let n=tm[13];
  let o=tm[14];
  let p=tm[15];
  let x=v.x;
  let y=v.y;
  let z=v.z;
  let w=1;
  let result=createVector(0, 0, 0);
  result.x=a*x+b*y+c*z+d*w;
  result.y=e*x+f*y+g*z+h*w;
  result.z=i*x+j*y+k*z+l*w;
  return result;
}

function globalCoordinates() {
  return mulTMV(transformationMatrix(), createVector(0, 0, 0));
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 18, 2026, 1:18pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/8 "2026-07-18T13:18:25Z")

</div>

Hello @EricRogerGarcia ,

Hint:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/8/f8c2e2695af871b3acbf911c8c56d1ba7ca31044.png)

I have done a lot of work with matrices in Processing and now migrating this to p5.js and learning a lot along the way!

`:)`

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [July 18, 2026, 5:21pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/9 "2026-07-18T17:21:17Z")

</div>

Hello,

where can I look to your code ? (processing and p5js !) to see what I can learn ?

🙂

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [July 20, 2026, 8:32pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/11 "2026-07-20T20:32:42Z")

</div>

> [@glv](#):
>
> Here is the p5.js example exploring this topic (mouse click toggle):

I’m going to look at this thanks

How to access the code ? (a simple link maybe ?) 🙂 - thanks ! lol

Anyway, I’ve already found the math for all the transformations with (4x4) matrices. 🙂

I’m going to update a math documentation on my repository in some times 🙂

I’m going to have to find the transformation matrix to write / p5js camera (cf code in next message) to apply for correcting my transformationMatrix() function now ! so this isn’t finished yet !

I think I’m going to store the transformation matrix for each Node3D (just storing variables is fast) and compute the globalCoordinates with them only when it is needed not to have to use many times cosinus and sinus functions (they are slow) for each node3D each frame (as I use the parents global variables now) … or something like that 🙂 I’m still thinking about this… for a bit later !

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [July 20, 2026, 8:35pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/12 "2026-07-20T20:35:48Z")

</div>

Now it works !!!

Unfortunately, it’s complicated to get the Transformation Matrix from P5js because it takes into account the camera!!!

I’m going to have to figure out how to take that into account specifically :(( !!!

(cf comments in the code in transformationMatrix() !)

```auto
"use strict";
// tests Tranformation matrix 2 : works now !

function setup() {
  G.canvas = createCanvas(500, 400, WEBGL);
}

function draw() {
  background(200);
  let v = globalCoordinates();
  print("Before:");
  print("x: "+v.x);
  print("y: "+v.y);
  print("z: "+v.z);
  transformationMatrix().print();
  translate(5, 6, 7);
  v = globalCoordinates();
  print("After:");
  print("x: "+v.x);
  print("y: "+v.y);
  print("z: "+v.z);
  transformationMatrix().print();
  if (frameCount==1) noLoop();
}

class G { // static class, G for Global
  static canvas=null; // initialized in setup()
}

class Matrix {
  constructor(m=[1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1]) { //not sure the default is correct lol !
      
    this.a=m[0];
    this.b=m[4];
    this.c=m[8];
    this.d=m[12];
    this.e=m[1];
    this.f=m[5];
    this.g=m[9];
    this.h=m[13];
    this.i=m[8];
    this.j=m[6];
    this.k=m[10];
    this.l=m[14];
    this.m=m[3];
    this.n=m[7];
    this.o=m[11];
    this.p=m[15];
    
    // a, b, c, d
    // e, f, g, h
    // i, j, k, l
    // m, n, o, p
    
    // Indices of m :
    // 0, 4, 8,12
    // 1, 5, 9,13
    // 2, 6,10,14
    // 3, 7,11,15
  }

  print() {
    let l=3; // left
    let r=1; // right
    print(nfs(this.a, l, r)+nfs(this.b, l, r)+nfs(this.c, l, r)+nfs(this.d, l, r));
    print(nfs(this.e, l, r)+nfs(this.f, l, r)+nfs(this.g, l, r)+nfs(this.h, l, r));
    print(nfs(this.i, l, r)+nfs(this.j, l, r)+nfs(this.k, l, r)+nfs(this.l, l, r));
    print(nfs(this.m, l, r)+nfs(this.n, l, r)+nfs(this.o, l, r)+nfs(this.p, l, r));
  }
}

function transformationMatrix() { 
  // may change if P5js API modification so this function is needed (may be used several times) !
  let myReturn=G.canvas.uMVMatrix.copy().matrix; // return a Float32Array with 16 numbers
  myReturn=Array.from(myReturn);
  myReturn=new Matrix(myReturn);
  myReturn.l+=800; // to take into account the default camera,
  /*
   so here you need to make a correction based on the camera settings (TODO :(( ), 
   as they are not directly accessible in P5JS :
   put them in the global coordinates: G and update them manually each time the camera is modified.
  */
  return myReturn;
}

function multMV(m, v) { // (Matrix, vector) : vector

  // a b c d x ax+by+cz+dw
  // e f g h y ex+fy+gz+hw
  // i j k l . z = ix+jy+kz+lw
  // m n o p w mx+ny+oz+pw

  // m n o p : 0 0 0 1 and w=1 !

  let result=createVector(0, 0, 0);
  result.x=m.a*v.x+m.b*v.y+m.c*v.z+m.d;
  result.y=m.e*v.x+m.f*v.y+m.g*v.z+m.h;
  result.z=m.i*v.x+m.j*v.y+m.k*v.z+m.l;
  return result;
}

function globalCoordinates() {
  return multMV(transformationMatrix(), createVector(0, 0, 0));
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 20, 2026, 11:24pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/13 "2026-07-20T23:24:46Z")

</div>

> [@EricRogerGarcia](#):
>
> How to access the code ? (a simple link maybe ?) 🙂 - thanks ! lol

I will post in the gallery in the future.

`:)`

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [July 21, 2026, 4:47pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/14 "2026-07-21T16:47:48Z")

</div>

**Ok, I’ll let it go because on second thought, I’m going to do it another way.**

I 'm going to calculate the transformation matrices myself for each Node (2D or 3D) but not systematically (in each frame) and as little as possible, that is, only when the application needs them and only if the calculation has not already been done before (and also that nothing has changed since the last calculation).

Only the transformation matrices of moving objects (in the world) whose global coordinates must be met will be recalculated regularly… which concerns a small number of objects in general.

**In total, this should make the programs faster.**

**P.S.** Using the P5js Transformation Matrix in each frame does not seem like a good idea to me, since I would have to multiply it by a complicated matrix based on the camera to obtain the world T.M. for each Node, which would be slower in generals. In addition, there’s no need to take into account the two different systems (2D and 3D) of P5js !

🙂

I write and test a little sketch based on the new classes and functions for this and I come back here

🙂

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [July 26, 2026, 6:54pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/17 "2026-07-26T18:54:55Z")

</div>

OK, [this works](https://editor.p5js.org/EricRogerGarcia/sketches/96j1dm7XS) !!! (2D)

(3D soon)

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [July 27, 2026, 7:36pm UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/18 "2026-07-27T19:36:11Z")

</div>

[and in 3D here !](https://editor.p5js.org/EricRogerGarcia/sketches/nUnlYdicG) 🙂

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 28, 2026, 7:45am UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/19 "2026-07-28T07:45:59Z")

</div>

Nice sketch 😁

You might want to turn off loop protection in this sketch. Click on Preferences scroll down to the last option and turn it off.

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [July 28, 2026, 9:18am UTC](https://discourse.processing.org/t/how-to-get-the-values-of-the-current-matrix-after-translate-scale-rotatey/48995/20 "2026-07-28T09:18:07Z")

</div>

> [@quark](#):
>
> You might want to turn off loop protection in this sketch. Click on Preferences scroll down to the last option and turn it off.

Done thanks !

😀