staltz/matrixmultiplication.xyz

Matrix Multiplication

An interactive matrix multiplication calculator for educational purposes

Visit matrixmultiplication.xyz.

When I first learned about matrix multiplication in high school, it wasn't easy to memorize the method, and it didn't make sense. It felt like someone had invented a weird way of blending those numbers together. Why was it so natural and logical to multiply scalar numbers, but not so when it comes to matrices of numbers?

This question bothered me a few times until I studied math in the university. There, I had in total four linear algebra courses, so matrix multiplication became my bread-and-butter. One day it just snapped in my mind how the number of rows of the first matrix has to match the number of columns in the second matrix, which means they must perfectly align when the second matrix is rotated by 90°. From there, the second matrix trickles down, "combing" the values in the first matrix. The values are multiplied and added together. In my head, I called this the "waterfall method", and used it to perform my calculations in the university courses. It worked.

To this day, I'm not sure if this method has been discovered by others and taught in schools and universities. I haven't found anything similar on the web, at least. So I decided to build this matrix multiplication calculator to help visualize the waterfall method. I hope it will help clarify matrix multiplication for high school and college students, who like me, don't like to memorize arbitrary methods, but prefer self-evident mnemonics.

For Cycle.js Developers

This codebase may serve as a good learning resource on how to structure Cycle.js apps. It's a bit larger than TodoMVC, but not too large, so it can be read in a few minutes or hours. It utilizes:

• xstream
• Cycle DOM
• Cycle onionify
• TypeScript
• TypeStyle (for CSS)
• Immutable.js (just a little bit, in one file)

The structure of the codebase is fractal. Directories with a capitalized name, like App, Calculator, Matrix are Cycle.js components. The top-level index.ts simply imports the App component and runs it as the top-level main function. Model-View-Intent is used in each component, but sometimes it grows large enough so that model is split into many files and grouped under a model/ directory. Check src/Calculator/model, as an example.

For more questions about this repository, open an issue or discuss in the Gitter chat. Enjoy. :)

matrixmultiplication.xyz's Issues

Add HTTPS support

I don't know what host you're using, but you can use cloudflare as a sort of middleware to enable https support for completely free. Its not like https matters for this site, but having it makes people feel better and makes it easier to share the link. Currently when you go to the https version of the site, it says something like "Deceptive site ahead" and whatnot.

add a 'Previous' button?

could be useful to replay a sequence :)
great job!

.xyz problems

I cannot share this link http://matrixmultiplication.xyz/ on social networks like Facebook.

I recommend you to use GitHub Pages.

Great project!

Rounding required?

Valuable visualization of matrix multiplication! However, in my first few tests, I encountered an anomaly.

In some scenarios, a combination of decimals causes overlapping of column results.

Guidance: http://stackoverflow.com/questions/5037839/avoiding-problems-with-javascripts-weird-decimal-calculations

Firefox: end transition glitch

Could be caused by an unholy mix of xstream tween with CSS transitions and snabbdom patches. Happens mostly in Firefox.

Could look at dropping xstream tween and using only CSS transitions.

URL parameters to preload matrices

Hi, I would love to be able to embed matrixmultiplication.xyz in an iframe or be able to pass around a link to the web app with parameters in order to pre-loaded the matrices, and then let the user play with the interactive UI.
Maybe an autoplay parameter would be cool too.

Would this be an interesting feature to you?

If yes, how do I get started with the codebase (and Cycle.js) in order to catch URL parameters, validate the inputs, and then pre-load the two matrices?
I'm completely new to Cycle.js but I find it interesting so it might be a good occasion to give it a try.

Thanks!

Incorrect result for identity matrix

The result of multiplying two identity matrixes should obviously be the identity matrix. matrixmultiplication.xyz incorrectly gives a matrix of threes (or presumably ns).

Screenshots:

This is happening on Firefox.

Assign a different color to each mini-equation

Thanks for making this!

It's easier to see how the multiplication in Matrix AB corresponds to the new entries in Matrix C if each mini-multiplation-equation has a different color, like this:

However, when Matrix B has more than 2 columns, more than 2 colors are required, and I don't know how many / which unique colors you want to build into the site. Also, the multiple colors could be distracting to some people.

My modifications (that only work with a 2-column Matrix B):

Matrix A

// src/Calculator/views/matrixA.ts

      const intersectionTransform = `
        scale(${styles.cellScaleWhenIntersecting})
        translateX(${-styles.cellTranslateXWhenIntersecting}px)
        translateY(${styles.cellTranslateYWhenIntersecting}px)
      `;
      if (rowOfCell === firstIntersectRow + 1) {
        cellElem.style.transform = intersectionTransform;
        cellElem.style.color = styles.colorPallete.orange;
      } else if (rowOfCell === lastIntersectRow) {
        cellElem.style.transform = intersectionTransform;
        cellElem.style.color = styles.colorPallete.blue;
      } else {
        cellElem.style.transform = null;
        cellElem.style.color = null;
      }

Matrix B

// src/Calculator/view/matrixB.ts

      const intersectionTransform = `
        ${rotateZTransform}
        scale(${styles.cellScaleWhenIntersecting})
        translateX(${styles.cellTranslateXWhenIntersecting}px)
        translateY(${-styles.cellTranslateYWhenIntersecting}px)
      `;
      if (
          firstIntersectCol < colOfCell &&
          colOfCell <= lastIntersectCol &&
          colOfCell === 0
      ) {
        cellElem.style.transform = intersectionTransform;
        cellElem.style.color = styles.colorPallete.blue;
      } else if (
          firstIntersectCol < colOfCell &&
          colOfCell <= lastIntersectCol &&
          colOfCell === 1
      ) {
        cellElem.style.transform = intersectionTransform;
        cellElem.style.color = styles.colorPallete.orange;
      } else {
        cellElem.style.transform = rotateZTransform;
        cellElem.style.color = null;
      }

Matrix C

// src/Calculator/views/matrixC.ts

      if (rowOfCell + colOfCell > state.step - 2) {
        cellElem.style.color = null;
        cellElem.style.opacity = '0.01';
      } else if (rowOfCell + colOfCell === state.step - 2) {
        cellElem.style.color = (
          colOfCell === 1 ?
          styles.colorPallete.orange :
          styles.colorPallete.blue
        );
        cellElem.style.opacity = '1';
      } else {
        cellElem.style.color = null;
        cellElem.style.opacity = '1';
      }