Matrix Multiplication Calculator
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
margin: 0;
padding: 20px;
}
.loan-calc-container {
max-width: 800px;
margin: 20px auto;
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #004a99;
text-align: center;
margin-bottom: 25px;
}
.input-section, .result-section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 5px;
background-color: #fdfdfd;
}
.input-group {
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #004a99;
flex: 1 1 150px; /* Responsive label */
}
.input-group input[type="text"] {
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
flex: 2 1 200px; /* Responsive input */
box-sizing: border-box; /* Include padding and border in element's total width and height */
}
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.9rem;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
margin-top: 5px;
box-sizing: border-box;
min-height: 100px;
resize: vertical;
}
.input-group textarea {
flex: 1 1 100%; /* Textarea takes full width if needed */
}
button {
background-color: #004a99;
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
display: block;
width: 100%;
margin-top: 10px;
}
button:hover {
background-color: #003366;
}
.result-display {
background-color: #e7f3ff;
border-left: 5px solid #28a745;
padding: 20px;
border-radius: 5px;
margin-top: 20px;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
color: #004a99;
word-wrap: break-word; /* Ensure long matrices can wrap */
}
.result-display pre {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1rem;
text-align: left;
white-space: pre-wrap; /* Allow wrapping within pre */
word-wrap: break-word;
background-color: #ffffff;
padding: 15px;
border-radius: 4px;
border: 1px solid #e0e0e0;
margin-top: 10px;
display: inline-block; /* To wrap around content */
max-width: 100%; /* Prevent overflow */
}
.error-message {
color: #dc3545;
font-weight: bold;
text-align: center;
margin-top: 15px;
}
.article-content {
margin-top: 40px;
padding: 25px;
border: 1px solid #e0e0e0;
border-radius: 5px;
background-color: #ffffff;
}
.article-content h3 {
color: #004a99;
margin-bottom: 15px;
}
.article-content p {
margin-bottom: 12px;
}
.article-content code {
background-color: #eef;
padding: 2px 5px;
border-radius: 3px;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
.matrix-input-wrapper {
margin-bottom: 20px;
padding: 15px;
border: 1px dashed #004a99;
border-radius: 5px;
background-color: #f0f7ff;
}
.matrix-input-wrapper h4 {
margin-top: 0;
color: #004a99;
font-size: 1.1rem;
}
/* Responsive adjustments */
@media (max-width: 600px) {
.loan-calc-container {
padding: 20px;
}
.input-group {
flex-direction: column;
align-items: stretch;
}
.input-group label, .input-group input[type="text"] {
flex: none;
width: 100%;
}
button {
font-size: 1rem;
padding: 10px 20px;
}
}
Matrix Multiplication Calculator
Result
Enter matrix dimensions and elements above.
Understanding Matrix Multiplication
Matrix multiplication is a fundamental operation in linear algebra. It involves multiplying two matrices to produce a third matrix. For the multiplication of matrix A (with dimensions m x n) and matrix B (with dimensions p x q) to be defined, the number of columns in matrix A (n) must equal the number of rows in matrix B (p). If this condition is met, the resulting matrix C will have dimensions m x q.
The Multiplication Process
Each element Cij in the resulting matrix C is calculated by taking the dot product of the i-th row of matrix A and the j-th column of matrix B. The formula for an element in the resulting matrix C at row i and column j is:
Cij = Σ (Aik * Bkj) for k from 1 to n (or p, since n=p).
This means you multiply each element of the first row of A by the corresponding element of the first column of B, and then sum up these products to get the element at position (1,1) in C. You repeat this process for every row of A and every column of B.
Conditions for Multiplication
The most crucial condition for matrix multiplication A * B is that the number of columns in matrix A must be exactly equal to the number of rows in matrix B. If matrix A has dimensions m x n and matrix B has dimensions p x q, then multiplication is only possible if n = p. The resulting matrix will have dimensions m x q.
Use Cases of Matrix Multiplication
- Computer Graphics: Used extensively for transformations like translation, rotation, and scaling of 3D models.
- Machine Learning: Core operation in neural networks for processing layers of data.
- Physics and Engineering: Solving systems of linear equations, analyzing structural integrity, and modeling complex systems.
- Economics: Input-output analysis and economic modeling.
- Image Processing: Applying filters and transformations to images.
Example Calculation:
Let's multiply Matrix A and Matrix B:
Matrix A (2×3):
[ 1 2 3 ]
[ 4 5 6 ]
Matrix B (3×2):
[ 7 8 ]
[ 9 10 ]
[11 12 ]
The resulting matrix C will be 2×2.
C11 = (1*7) + (2*9) + (3*11) = 7 + 18 + 33 = 58
C12 = (1*8) + (2*10) + (3*12) = 8 + 20 + 36 = 64
C21 = (4*7) + (5*9) + (6*11) = 28 + 45 + 66 = 139
C22 = (4*8) + (5*10) + (6*12) = 32 + 50 + 72 = 154
Resulting Matrix C (2×2):
[ 58 64 ]
[ 139 154 ]
function getMatrix(rowsId, colsId, dataId) {
var rows = parseInt(document.getElementById(rowsId).value);
var cols = parseInt(document.getElementById(colsId).value);
var dataStr = document.getElementById(dataId).value.trim();
if (isNaN(rows) || rows <= 0 || isNaN(cols) || cols <= 0) {
throw new Error("Invalid dimensions for matrix. Rows and columns must be positive numbers.");
}
var elements = dataStr.split(',')
.map(function(item) { return parseFloat(item.trim()); });
if (elements.length !== rows * cols) {
throw new Error("Number of elements does not match the specified dimensions (" + rows + "x" + cols + "). Expected " + (rows * cols) + " elements, but got " + elements.length + ".");
}
if (elements.some(isNaN)) {
throw new Error("Matrix contains non-numeric values.");
}
var matrix = [];
for (var i = 0; i < rows; i++) {
matrix.push(elements.slice(i * cols, (i + 1) * cols));
}
return matrix;
}
function formatMatrix(matrix) {
if (!matrix || matrix.length === 0) return "[]";
var output = "";
for (var i = 0; i < matrix.length; i++) {
output += "[ ";
for (var j = 0; j < matrix[i].length; j++) {
output += matrix[i][j].toFixed(4) + (j === matrix[i].length – 1 ? "" : ", ");
}
output += " ]" + (i === matrix.length – 1 ? "" : "\n");
}
output += "";
return output;
}
function multiplyMatrices(matrixA, matrixB) {
var rowsA = matrixA.length;
var colsA = matrixA[0].length;
var rowsB = matrixB.length;
var colsB = matrixB[0].length;
if (colsA !== rowsB) {
throw new Error("Matrix multiplication is not possible: The number of columns in Matrix A (" + colsA + ") must equal the number of rows in Matrix B (" + rowsB + ").");
}
var resultMatrix = [];
for (var i = 0; i < rowsA; i++) {
resultMatrix[i] = [];
for (var j = 0; j < colsB; j++) {
var sum = 0;
for (var k = 0; k < colsA; k++) {
sum += matrixA[i][k] * matrixB[k][j];
}
resultMatrix[i][j] = sum;
}
}
return resultMatrix;
}
function calculateMatrixMultiplication() {
var resultDiv = document.getElementById('result');
resultDiv.innerHTML = ''; // Clear previous results or errors
var errorMessageDiv = document.createElement('div');
errorMessageDiv.className = 'error-message';
try {
var matrixA = getMatrix('matrixA_rows', 'matrixA_cols', 'matrixA_data');
var matrixB = getMatrix('matrixB_rows', 'matrixB_cols', 'matrixB_data');
var result = multiplyMatrices(matrixA, matrixB);
var formattedResult = formatMatrix(result);
resultDiv.innerHTML = '
Resulting Matrix (' + result.length + 'x' + result[0].length + '):
' + formattedResult;
} catch (e) {
errorMessageDiv.textContent = "Error: " + e.message;
resultDiv.appendChild(errorMessageDiv);
}
}