Matrix Calculator
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
margin: 0;
padding: 20px;
}
.calc-container {
max-width: 900px;
margin: 20px auto;
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
}
h1, h2 {
color: #004a99;
text-align: center;
margin-bottom: 25px;
}
.input-section, .output-section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background-color: #fdfdfd;
}
.input-group {
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 15px;
}
.input-group label {
flex: 1;
max-width: 150px;
font-weight: bold;
color: #004a99;
}
.input-group input[type="text"],
.input-group select {
flex: 2;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
box-sizing: border-box;
}
.input-group input[type="text"]:focus,
.input-group select:focus {
border-color: #004a99;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 74, 153, 0.2);
}
button {
display: block;
width: 100%;
padding: 12px 20px;
background-color: #004a99;
color: white;
border: none;
border-radius: 5px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: 10px;
}
button:hover {
background-color: #003366;
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
}
#result {
margin-top: 20px;
padding: 20px;
background-color: #e8f5e9; /* Light green success background */
border: 1px solid #28a745;
border-radius: 6px;
text-align: center;
font-size: 1.4rem;
font-weight: bold;
color: #00695c; /* Darker green for text */
min-height: 50px; /* Ensure some height even when empty */
display: flex;
align-items: center;
justify-content: center;
word-wrap: break-word;
}
.matrix-display {
margin-top: 15px;
display: inline-block; /* Allow centering */
text-align: left;
}
.matrix-row {
display: flex;
gap: 10px;
margin-bottom: 5px;
}
.matrix-cell {
width: 40px;
text-align: center;
border: 1px solid #ccc;
padding: 5px;
background-color: #f0f0f0;
border-radius: 3px;
}
.error-message {
color: #dc3545;
font-weight: bold;
text-align: center;
margin-top: 15px;
}
.article-section {
margin-top: 40px;
padding-top: 20px;
border-top: 2px solid #004a99;
}
.article-section h2 {
text-align: left;
margin-bottom: 15px;
}
.article-section p, .article-section ul, .article-section ol {
margin-bottom: 15px;
}
.article-section code {
background-color: #e0e0e0;
padding: 3px 6px;
border-radius: 3px;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
@media (max-width: 768px) {
.calc-container {
padding: 20px;
}
.input-group {
flex-direction: column;
align-items: stretch;
}
.input-group label {
max-width: 100%;
margin-bottom: 5px;
}
.input-group input[type="text"],
.input-group select {
width: calc(100% – 24px); /* Account for padding */
}
#result {
font-size: 1.2rem;
}
}
Matrix Calculator
Understanding Matrix Calculations
Matrices are fundamental mathematical objects used extensively in various fields like linear algebra, physics, engineering, computer graphics, economics, and statistics. A matrix is a rectangular array of numbers, symbols, or expressions, arranged in rows and columns. The number of rows and columns determines the dimensions (or order) of the matrix. For instance, a matrix with 'm' rows and 'n' columns is said to have dimensions m x n.
Basic Matrix Operations
Matrices can be manipulated using several operations:
- Addition/Subtraction: To add or subtract two matrices, they must have the same dimensions. The operation is performed element-wise. If A and B are matrices of the same size, then (A + B)ij = Aij + Bij and (A – B)ij = Aij – Bij.
- Scalar Multiplication: Multiplying a matrix by a scalar (a single number) involves multiplying every element of the matrix by that scalar. If 'c' is a scalar and A is a matrix, then (cA)ij = c * Aij.
- Matrix Multiplication: This is a more complex operation. For the product of two matrices, A (of dimensions m x n) and B (of dimensions p x q), to be defined, the number of columns in A (n) must equal the number of rows in B (p). The resulting matrix C will have dimensions m x q. The element Cij is calculated by taking the dot product of the i-th row of A and the j-th column of B. That is, Cij = Σk=1n (Aik * Bkj).
- Transpose: The transpose of a matrix A, denoted as AT, is obtained by interchanging its rows and columns. If A is an m x n matrix, then AT is an n x m matrix where (AT)ij = Aji.
- Determinant: The determinant is a scalar value that can be computed from the elements of a square matrix (a matrix with the same number of rows and columns). It provides important information about the matrix, such as whether it is invertible. For a 2×2 matrix A = [[a, b], [c, d]], the determinant is det(A) = ad – bc. For larger matrices, cofactor expansion or row reduction methods are used.
Use Cases for Matrix Calculations
- Computer Graphics: Transformations like translation, rotation, and scaling are represented and applied using matrices.
- Solving Systems of Linear Equations: Matrix methods (like Gaussian elimination) are standard for solving systems of linear equations, which appear in numerous scientific and engineering problems.
- Data Analysis & Machine Learning: Techniques like Principal Component Analysis (PCA), regression analysis, and neural networks heavily rely on matrix operations for data manipulation and model computation.
- Physics: Quantum mechanics, mechanics, and electromagnetism use matrices to represent states, transformations, and operators.
- Economics: Input-output models and optimization problems often employ matrix algebra.
This calculator allows you to perform common matrix operations, providing a quick way to verify calculations or explore matrix properties.
function getInt(id, defaultValue) {
var val = parseInt(document.getElementById(id).value);
return isNaN(val) ? defaultValue : val;
}
function getFloat(id, defaultValue) {
var val = parseFloat(document.getElementById(id).value);
return isNaN(val) ? defaultValue : val;
}
function parseMatrix(matrixId) {
var matrixContainer = document.getElementById(matrixId + 'Container');
var rows = getInt('rows' + matrixId, 2);
var cols = getInt('cols' + matrixId, 2);
var matrix = [];
for (var r = 0; r < rows; r++) {
matrix.push([]);
for (var c = 0; c < cols; c++) {
var cellId = matrixId + 'Cell' + r + c;
var cellValue = getFloat(cellId, 0);
matrix[r].push(cellValue);
}
}
return matrix;
}
function displayMatrix(matrix, containerId, idPrefix) {
var container = document.getElementById(containerId);
container.innerHTML = ''; // Clear previous matrix
if (!matrix || matrix.length === 0) {
return;
}
var rows = matrix.length;
var cols = matrix[0].length;
var matrixDiv = document.createElement('div');
matrixDiv.className = 'matrix-display';
for (var r = 0; r < rows; r++) {
var rowDiv = document.createElement('div');
rowDiv.className = 'matrix-row';
for (var c = 0; c < cols; c++) {
var cellSpan = document.createElement('span');
cellSpan.className = 'matrix-cell';
var inputId = idPrefix + 'Cell' + r + c;
cellSpan.innerHTML = '';
rowDiv.appendChild(cellSpan);
}
matrixDiv.appendChild(rowDiv);
}
container.appendChild(matrixDiv);
}
function updateMatrixInputs(matrixId) {
var rows = getInt('rows' + matrixId, 2);
var cols = getInt('cols' + matrixId, 2);
var currentMatrix = parseMatrix(matrixId);
// Adjust dimensions if they changed
if (currentMatrix.length !== rows || (currentMatrix.length > 0 && currentMatrix[0].length !== cols)) {
var newMatrix = [];
for (var r = 0; r < rows; r++) {
newMatrix.push([]);
for (var c = 0; c < cols; c++) {
if (r < currentMatrix.length && c < currentMatrix[r].length) {
newMatrix[r].push(currentMatrix[r][c]);
} else {
newMatrix[r].push(0); // Default to 0 for new cells
}
}
}
currentMatrix = newMatrix;
}
displayMatrix(currentMatrix, matrixId + 'Container', matrixId);
}
function validateMatrices(matrixA, matrixB) {
if (!matrixA || matrixA.length === 0 || !matrixA[0] || matrixA[0].length === 0) return "Matrix A is invalid or empty.";
if (!matrixB || matrixB.length === 0 || !matrixB[0] || matrixB[0].length === 0) return "Matrix B is invalid or empty.";
var rowsA = matrixA.length;
var colsA = matrixA[0].length;
var rowsB = matrixB.length;
var colsB = matrixB[0].length;
var operation = document.getElementById("operation").value;
if (operation === "add" || operation === "subtract") {
if (rowsA !== rowsB || colsA !== colsB) {
return "For " + operation + ", matrices must have the same dimensions.";
}
} else if (operation === "multiply") {
if (colsA !== rowsB) {
return "For multiplication, the number of columns in Matrix A must equal the number of rows in Matrix B.";
}
} else if (operation === "determinantA" || operation === "determinantB") {
var matrix = (operation === "determinantA") ? matrixA : matrixB;
if (matrix.length !== matrix[0].length) {
return "Determinant can only be calculated for square matrices.";
}
}
return null; // No validation errors
}
function addMatrices(matrixA, matrixB) {
var rows = matrixA.length;
var cols = matrixA[0].length;
var result = [];
for (var r = 0; r < rows; r++) {
result.push([]);
for (var c = 0; c < cols; c++) {
result[r][c] = matrixA[r][c] + matrixB[r][c];
}
}
return result;
}
function subtractMatrices(matrixA, matrixB) {
var rows = matrixA.length;
var cols = matrixA[0].length;
var result = [];
for (var r = 0; r < rows; r++) {
result.push([]);
for (var c = 0; c < cols; c++) {
result[r][c] = matrixA[r][c] – matrixB[r][c];
}
}
return result;
}
function multiplyMatrices(matrixA, matrixB) {
var rowsA = matrixA.length;
var colsA = matrixA[0].length;
var rowsB = matrixB.length;
var colsB = matrixB[0].length;
var result = [];
for (var r = 0; r < rowsA; r++) {
result.push([]);
for (var c = 0; c < colsB; c++) {
var sum = 0;
for (var k = 0; k < colsA; k++) {
sum += matrixA[r][k] * matrixB[k][c];
}
result[r][c] = sum;
}
}
return result;
}
function transposeMatrix(matrix) {
var rows = matrix.length;
var cols = matrix[0].length;
var result = [];
for (var c = 0; c < cols; c++) {
result.push([]);
for (var r = 0; r < rows; r++) {
result[c][r] = matrix[r][c];
}
}
return result;
}
function determinant2x2(matrix) {
return matrix[0][0] * matrix[1][1] – matrix[0][1] * matrix[1][0];
}
// Recursive function for determinant of n x n matrix
function determinantNxN(matrix) {
var n = matrix.length;
if (n === 1) {
return matrix[0][0];
}
if (n === 2) {
return determinant2x2(matrix);
}
var det = 0;
for (var j = 0; j < n; j++) {
var subMatrix = [];
for (var r = 1; r < n; r++) {
var row = [];
for (var c = 0; c < n; c++) {
if (c !== j) {
row.push(matrix[r][c]);
}
}
subMatrix.push(row);
}
var sign = (j % 2 === 0) ? 1 : -1;
det += sign * matrix[0][j] * determinantNxN(subMatrix);
}
return det;
}
function calculateMatrix() {
var resultDiv = document.getElementById("result");
var resultMatrixContainer = document.getElementById("resultMatrixContainer");
var errorMessageDiv = document.getElementById("errorMessage");
resultDiv.innerHTML = '';
resultMatrixContainer.innerHTML = '';
errorMessageDiv.innerHTML = '';
var operation = document.getElementById("operation").value;
var matrixA = parseMatrix('A');
var matrixB = parseMatrix('B');
var validationError = validateMatrices(matrixA, matrixB);
if (validationError) {
errorMessageDiv.innerHTML = validationError;
return;
}
var finalResult = null;
var resultIsMatrix = false;
try {
switch (operation) {
case "add":
finalResult = addMatrices(matrixA, matrixB);
resultIsMatrix = true;
break;
case "subtract":
finalResult = subtractMatrices(matrixA, matrixB);
resultIsMatrix = true;
break;
case "multiply":
finalResult = multiplyMatrices(matrixA, matrixB);
resultIsMatrix = true;
break;
case "transposeA":
finalResult = transposeMatrix(matrixA);
resultIsMatrix = true;
break;
case "transposeB":
finalResult = transposeMatrix(matrixB);
resultIsMatrix = true;
break;
case "determinantA":
finalResult = determinantNxN(matrixA);
break;
case "determinantB":
finalResult = determinantNxN(matrixB);
break;
default:
errorMessageDiv.innerHTML = "Unknown operation selected.";
return;
}
if (resultIsMatrix) {
displayMatrix(finalResult, "resultMatrixContainer", "result"); // Use generic prefix for displayed result matrix
resultDiv.innerHTML = "Result Matrix:";
} else {
resultDiv.innerHTML = "Result: " + finalResult;
}
} catch (e) {
errorMessageDiv.innerHTML = "Calculation error: " + e.message;
console.error(e);
}
}
// Initial setup of matrices on page load
document.addEventListener('DOMContentLoaded', function() {
updateMatrixInputs('A');
updateMatrixInputs('B');
});