12 Tone Matrix Calculator

.twelve-tone-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-width: 900px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; color: #333; } .twelve-tone-container h2 { color: #2c3e50; text-align: center; } .input-section { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px; } @media (max-width: 600px) { .input-section { grid-template-columns: repeat(3, 1fr); } } .input-group { display: flex; flex-direction: column; } .input-group label { font-size: 12px; font-weight: bold; margin-bottom: 4px; } .input-group select { padding: 8px; border-radius: 4px; border: 1px solid #ccc; } .controls { text-align: center; margin-bottom: 20px; } .calculate-btn { background-color: #27ae60; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold; } .calculate-btn:hover { background-color: #219150; } .matrix-display { overflow-x: auto; margin-top: 20px; } table.tone-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; } table.tone-matrix td, table.tone-matrix th { border: 1px solid #333; text-align: center; padding: 8px; font-weight: bold; } table.tone-matrix tr:first-child, table.tone-matrix td:first-child { background-color: #eee; } .display-toggle { margin-top: 10px; font-size: 14px; } .article-section { margin-top: 40px; line-height: 1.6; } .article-section h3 { color: #2c3e50; border-bottom: 2px solid #27ae60; padding-bottom: 5px; }

12-Tone Matrix Generator

Enter your Prime Row (P-0) to generate the full dodecaphonic matrix.

CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB
CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB
CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB
CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB
CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB
CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB
CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB
CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB
CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB
CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB
CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB
CC# / DbDD# / EbEFF# / GbGG# / AbAA# / BbB

What is a 12-Tone Matrix?

A 12-tone matrix, also known as a Schoenbergian grid, is a fundamental tool in serialism and dodecaphonic composition. Developed by Arnold Schoenberg, this system ensures that all 12 notes of the chromatic scale are given equal importance, preventing the dominance of a single key center (atonality).

How the Matrix Works

The matrix is a 12×12 grid that displays all possible variations of a "Prime Row" (the original sequence of 12 notes). These variations include:

  • Prime (P): The original row and its transpositions (read left to right).
  • Retrograde (R): The prime rows in reverse (read right to left).
  • Inversion (I): The upside-down versions of the row (read top to bottom).
  • Retrograde Inversion (RI): The inverted rows in reverse (read bottom to top).

Mathematical Logic

To calculate the matrix, we map the notes to integers where C = 0, C# = 1, D = 2, and so on up to B = 11. If we denote the primary row as P, where P0,j is the first row, the rest of the matrix Mi,j is calculated using the formula:

M[i][j] = (P[0][j] – P[0][0] + I[i][0]) mod 12

Essentially, the first column is the inversion of the first row. Once the first row and first column are established, every other cell is filled to maintain the interval relationship of the prime row.

Practical Example

If your Prime Row starts with C (0), D (2), E (4), the interval pattern is +2, +2. The Inversion starting on C (0) would follow the opposite intervals: -2, -2, resulting in C (0), Bb (10), Ab (8). The calculator automates this complex transposition for all 144 cells instantly.

function calculateMatrix() { var noteNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]; var p0 = []; // Collect inputs for (var i = 0; i < 12; i++) { p0.push(parseInt(document.getElementById("n" + i).value)); } // Check for duplicates var uniqueNotes = new Set(p0); if (uniqueNotes.size !== 12) { alert("A valid 12-tone row must contain all 12 unique chromatic pitches. Please remove duplicates."); return; } var matrix = Array.from({ length: 12 }, function() { return new Array(12); }); var displayType = document.querySelector('input[name="displayType"]:checked').value; // First row is p0 for (var j = 0; j < 12; j++) { matrix[0][j] = p0[j]; } // First column is Inversion of p0 // Formula for I: FirstNote – (P[j] – FirstNote) for (var i = 1; i < 12; i++) { var val = (matrix[0][0] – (matrix[0][i] – matrix[0][0])); matrix[i][0] = ((val % 12) + 12) % 12; } // Fill the rest of the matrix // Cell[i][j] = RowHeader[i] + ColHeader[j] – Matrix[0][0] for (var i = 1; i < 12; i++) { for (var j = 1; j < 12; j++) { var val = (matrix[i][0] + matrix[0][j] – matrix[0][0]); matrix[i][j] = ((val % 12) + 12) % 12; } } // Generate HTML Table var html = ''; // Header Row (I labels) html += ''; for (var k = 0; k < 12; k++) { html += ''; } html += ''; for (var i = 0; i < 12; i++) { html += ''; // Row Label (P) html += ''; for (var j = 0; j < 12; j++) { var displayVal = (displayType === "names") ? noteNames[matrix[i][j]] : matrix[i][j]; html += ''; } html += ''; } html += '
P \\ II-' + formatLabel(matrix[0][k], matrix[0][0]) + '
P-' + formatLabel(matrix[i][0], matrix[0][0]) + '' + displayVal + '
'; document.getElementById("resultContainer").innerHTML = html; } function formatLabel(currentNote, startNote) { var diff = (currentNote – startNote); return ((diff % 12) + 12) % 12; } // Initial run window.onload = function() { calculateMatrix(); };

Leave a Reply

Your email address will not be published. Required fields are marked *