How to display matrices

[Mayank Pandey]

Hello,

Thank you for your help with the spring node, I really appreciate it. (Although it was a little complicated so I will take some time to go through that). For now, I am trying to display matrices on a panel. I have attached an image for what I am trying to do. The thing I am confused about is how do I put "  [ "  and "  ] " character over the whole matrix like in the photo. I might be over complicating this but let's say I have all the numbers for the matrix how do I put it like the photo on a panel? I'd assume it probably has something to do with RichText but I am lost.

[cmalley]

Unfortunately, there's currently no support for easily rendering matrices, equations, etc.  You basically have to create yuor own Nodes and handle the layout yourself. 

That said, I create scenery-phet.MatrixNode, which handles rendering of an MxN matrix. See https://github.com/phetsims/scenery-phet/blob/master/js/MatrixNode.js.  Let me know if you have questions after reading through the code and comments.

Then it's pretty easy to assemble your equation. For example:

const matrix1Node = new MatrixNode( [ [ 2, 3, -2 ], [ 1, 0, -4 ], [ 2, -1, -6 ] ] );
const matrix2Node = new MatrixNode( [ [ 'x' ], [ 'y' ], [ 'z' ] ] );
const equalsNode = new Text( '=', { font: new PhetFont( 20 ) } );
const matrix3Node = new MatrixNode( [ [ 8 ], [ 1 ], [ 4 ] ] );
const equationNode = new HBox( {
  children: [ matrix1Node, matrix2Node, equalsNode, matrix3Node ],
  spacing: 10,
} );

... results in the screenshot attached.

I hope this helps.

Chris Malley

PixelZoom, Inc.

[Mayank Pandey]

Hello Chris,

This is exactly what I was looking for, you are always so helpful!! Thank you so much!

[Mayank Pandey]

Hello Chris,

I had another request for the MatrixNode.js file, how can I go about dynamically changing the dataset for the matrix node? How can I implement a .setDataSet() function for the matrix node

[cmalley]

Happy to help! 

Re changing the dataset, a couple of questions:

(1) After instantiating an MxN MatrixNode, do M and N  remain constant? Of does it need to adapt to matrices with different MxN?

(2) When will the MatrixNode change, and how frequently will it change? For example, does it change while the user is interacting with a slider, during an animation, or some other performance-critical scenario?

Chris Malley

PixelZoom, Inc.

[Mayank Pandey]

Hello Chris,

Yes, the function should account for change in number of rows and columns, for now I am just creating a new MatrixNode with whatever constraints I have per actions (meaning the values for rows and columns and numbers inside the matrix; very memory consuming work around I know haha).

For your second question, I am creating a new instance of the MatrixNode every time a user uses the slider for the number of equations. In the context of this simulation, number of equations = number of rows. So as I user is sliding from 2 to 3, I wanted it to change it in real time.

Thank you once again for all the help!

[cmalley]

If you need to vary the number of rows and columns, then there's not much to be gained by adding something like setMatrix( matrix ) to  MatrixNode.  All of MatrixNode's children will need to be removed and recreated. So there's unlikely to be any performance difference between modifying the MatrixNode and creating a new MatrixNode.   And there will definitely be increased code complexity.

How is the performance if you create new MatrixNode instance as the user drags the slider - have you tried it? If the performance is OK, then I would just do that.  If it's not OK, then consider waiting until the user releases the slider, then modify the matrix and create a new MatrixNode.

Let me know how it goes.

Chris Malley

PixelZoom, Inc.