Membuat Kalkulator Determinan Matriks dengan JavaScript

Halo sobat webbiz, kali ini akan share bagaimana membuat kalkulator Determinan matriks dengan menggunakan JavaScript. Dimana pada aplikasi ini pengguna bisa memilih matriks 2×2-4×4.

Apa Determinan matriks ?

Determinan matriks adalah suatu nilai yang dihitung dari sebuah matriks persegi (matriks dengan jumlah baris dan kolom yang sama). Determinan ini penting dalam berbagai operasi aljabar linear, seperti dalam menghitung invers matriks, sistem persamaan linear, dan lain-lain.

Kalkulator Determinan

Kalkulator Determinan Matriks

Pilih Ukuran Matriks:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Determinan</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .container {
            width: 500px;
            margin: 30px auto;
	          padding: 30px 20px;
            background-color: #f2f2f2;
        }
        .result {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="text-center">Kalkulator Determinan Matriks</h2>
        <div class="form-group">
            <label for="matrixSize">Pilih Ukuran Matriks:</label>
            <select class="form-control" id="matrixSize" onchange="createMatrixInput()">
                <option value="2">2x2</option>
                <option value="3">3x3</option>
                <option value="4">4x4</option>
            </select>
        </div>
        <div id="matrixInput"></div>
        <button class="btn btn-primary" onclick="calculateDeterminant()">Hitung Determinan</button>
        <div class="result" id="result"></div>
    </div>

    <script>
        function createMatrixInput() {
            const size = document.getElementById('matrixSize').value;
            const matrixInput = document.getElementById('matrixInput');
            matrixInput.innerHTML = '';
            for (let i = 0; i < size; i++) {
                let row = '<div class="form-row">';
                for (let j = 0; j < size; j++) {
                    row += `<div class="form-group col"><input type="number" class="form-control" id="cell-${i}-${j}" placeholder="a${i+1}${j+1}"></div>`;
                }
                row += '</div>';
                matrixInput.innerHTML += row;
            }
        }

        function calculateDeterminant() {
            const size = document.getElementById('matrixSize').value;
            let matrix = [];
            for (let i = 0; i < size; i++) {
                matrix[i] = [];
                for (let j = 0; j < size; j++) {
                    matrix[i][j] = parseFloat(document.getElementById(`cell-${i}-${j}`).value) || 0;
                }
            }
            let determinant = 0;
            if (size == 2) {
                determinant = matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];
            } else if (size == 3) {
                determinant = matrix[0][0] * (matrix[1][1] * matrix[2][2] - matrix[1][2] * matrix[2][1]) -
                              matrix[0][1] * (matrix[1][0] * matrix[2][2] - matrix[1][2] * matrix[2][0]) +
                              matrix[0][2] * (matrix[1][0] * matrix[2][1] - matrix[1][1] * matrix[2][0]);
            } else if (size == 4) {
                determinant = matrix[0][0] * this.determinant3x3(matrix, 0) -
                              matrix[0][1] * this.determinant3x3(matrix, 1) +
                              matrix[0][2] * this.determinant3x3(matrix, 2) -
                              matrix[0][3] * this.determinant3x3(matrix, 3);
            }
            document.getElementById('result').innerText = `Determinan: ${determinant}`;
        }

        function determinant3x3(matrix, col) {
            const subMatrix = matrix.slice(1).map(row => row.filter((_, index) => index !== col));
            return subMatrix[0][0] * (subMatrix[1][1] - subMatrix[1][2]) -
                   subMatrix[0][1] * (subMatrix[1][0] - subMatrix[1][2]) +
                   subMatrix[0][2] * (subMatrix[1][0] - subMatrix[1][1]);
        }
    </script>
</body>
</html>

JavaScript

1. Determinan Matriks 2×2

Untuk matriks AAA berukuran 2×2, bentuknya adalah:

2. Determinan Matriks 3×3

Untuk matriks AAA berukuran 3×3, bentuknya adalah:

Determinan dari matriks 3×3 dapat dihitung menggunakan metode Sarrus atau ekspansi kofaktor. Berikut adalah rumus menggunakan metode Sarrus:

3. Determinan Matriks 4×4 atau Lebih

Untuk matriks yang lebih besar (4×4, 5×5, dan seterusnya), determinan dihitung menggunakan ekspansi kofaktor. Prinsip dasarnya adalah menguraikan matriks besar menjadi beberapa submatriks yang lebih kecil hingga kita bisa menghitung determinan menggunakan matriks 2×2 atau 3×3.

Langkah-langkah untuk matriks 4×4:

Pilih baris atau kolom mana saja (biasanya yang memiliki elemen nol terbanyak agar lebih mudah).
Hitung determinan dengan menggunakan ekspansi kofaktor dari baris atau kolom tersebut.
Ulangi proses hingga menyisakan matriks 2×2 atau 3×3.

Contoh Determinan Matriks 4×4

Misalkan matriks AAA berukuran 4×4:

Untuk menghitung determinan, kita ekspansi di sepanjang baris pertama (baris dengan elemen nol paling banyak):

Setelah ekspansi kofaktor, matriks akan menjadi submatriks 3×3, dan determinan dihitung seperti pada contoh 3×3.

Semoga bermanfaat..