Assign a different color to each mini-equation

[JanCVanB]

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';
      }

[matt-erhart]

Came here (from fast.ai's machine learning course) to say this. Btw, one of the best educational visualizations around.

[JanCVanB]

Fixed by #12, whenever that gets merged!
Note to readers: @dvincent1337's fork includes this improvement and some bug fixes :)