5 ms·
The animation looks really neat but I did not find it very helpful from an pedagocical perspective which is why I built an alternative version inspired by OP. [
by laszlokorte 5y ago
The animation looks really neat but I did not find it very helpful from an pedagocical perspective which is why I built an alternative version inspired by OP. [1]
/edit: I just noticed the OP is built by andrestaltz with Cycle.js. Cycle is a really nice reactive programming js framework that is very great to work with.
[1]: https://static.laszlokorte.de/matrix-multiplication/ https://static.laszlokorte.de/matrix-multiplication/
- rustybolt 5y agoYes, I wanted to comment that it's just taking dot products of the rows of the left matrix and the columns of the right one. That's also more easy to understand since there's just one thing going on at a time, and you don't have to move, flip and overlay matrices. This is nice to animate but almost impossible to do in your head.
- eigenvalue 5y agoI agree, your version is much better and a lot less confusing.
- carbocation 5y agoThis is a nice visualization. Although visually obvious, it might be nice to also show the matrix dimension adjacent to or beneath the Matrix A and Matrix B labels.
- laszlokorte 5y agoThanks for the idea! I added that :)
- carbocation 5y agoThis is great! I think if you swap the order to show (row x column) you'll help people grasp the intuition behind the need for matching up Matrix A's column count with Matrix B's row count.
- dataangel 5y agoYour version has the left most term cut off on Android mobile, the page wants to center too far to the left to see it for some reason.
- laszlokorte 5y agoThank you for your feedback. Should be fixed now :)
- cwilby 5y agoThis cleared up matrix multiplication after a long period of interest/confusion around the subject, great work and derivation.
- Nevermark 5y agoI like it! If you put matrix B over (or under) the Result matrix, the relationship between rows in A, columns in B, and elements in Result would be even more directly visualized. You could even show the intermediate products to be summed as a diagonal between matrices A and B as you step through them. Also with direct visual alignment.
- anilakar 5y ago> If you put matrix B over (or under) the Result matrix, the relationship between rows in A, columns in B, and elements in Result would be even more directly visualized. This is the way I multiply matrices on paper - it's a lot easier to keep track of the current row and column that way.
- laszlokorte 5y agoI added an option for that.
- JetAlone 5y agoI like both of them. I think yours is definitely more comprehensive and robust as a teaching tool, but there is something cool about watching the matrices overlay each other in a smooth transition.
- beshrkayali 5y agoReally nice set of educational utils!
- throway453sde 5y agoIn place of slider having a button with the label of current step would be nice.
- dandellion 5y agoI'd be really nice if it could be parametrized so I could bookmark a specific size, like say https://static.laszlokorte.de/matrix-multiplication/?size=2x3x3x1 https://static.laszlokorte.de/matrix-multiplication/?size=2x....
- laszlokorte 5y agoThanks for your suggestion. I Now added a share link at the allows you to share/bookmark the full state (size, cells, step)
- warmfuzzykitten 5y agoNice one! (Just as it is.)