|
const topMargin = 35, |
|
hexR = 30, |
|
nLevels = 13, // 12 semitones + octave |
|
centralFreq = 261.6, // C4 |
|
defaultHorizSemitones = 2, // Major 2nd |
|
defaultDiagonalSemitones = 7 // Perfect 5th |
|
|
|
const noteScale = d3.scaleOrdinal(d3.schemeCategory20c) |
|
.domain(['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']) |
|
|
|
// Init webaudio |
|
const audioCtx = new (window.AudioContext || window.webkitAudioContext)() |
|
|
|
initStatic() |
|
d3Digest() |
|
|
|
// |
|
|
|
function initStatic() { |
|
// Build DOM |
|
d3.select('svg#canvas') |
|
.attr('width', window.innerWidth) |
|
.attr('height', window.innerHeight - topMargin) |
|
.append('g') |
|
.attr('id', 'interval-legend') |
|
.attr('transform', `translate(${window.innerWidth},${window.innerHeight - topMargin})`) |
|
|
|
const horSelect = d3.select('select#hor-select') |
|
const diagSelect = d3.select('select#diag-select') |
|
for (let i=0; i<=12; i++) { |
|
const name = getIntervalName(i).long |
|
horSelect.append('option') |
|
.attr('value', i) |
|
.attr('selected', i === defaultHorizSemitones ? true : null) |
|
.text(name) |
|
|
|
diagSelect.append('option') |
|
.attr('value', i) |
|
.attr('selected', i === defaultDiagonalSemitones ? true : null) |
|
.text(name) |
|
} |
|
|
|
horSelect.on('change', d3Digest) |
|
diagSelect.on('change', d3Digest) |
|
} |
|
|
|
function d3Digest() { |
|
const transitionTime = 900, |
|
hexPath = getPolygonPath(hexR, 6, Math.PI / 2) |
|
let gain, oscillator |
|
|
|
let hexs = d3.select('#canvas') |
|
.selectAll('.hex') |
|
.data(genHexList(hexR, [window.innerWidth / 2, (window.innerHeight - topMargin) / 2], centralFreq, nLevels), d => d.id) |
|
|
|
// Old hexs |
|
hexs.exit().transition().duration(transitionTime) |
|
// Shrink and fade-out |
|
.attr('transform', d => `translate(${d.x},${d.y}) scale(0)`) |
|
.style('opacity', 0) |
|
.remove() |
|
|
|
// New hexs |
|
const newHexs = hexs.enter().append('g') |
|
.attr('class', 'hex') |
|
.attr('transform', d => `translate(${d.x},${d.y}) scale(0)`) // Scale/fade-in new hexs |
|
.style('opacity', 0) |
|
|
|
newHexs.append('path') |
|
.attr('d', hexPath) |
|
.style('fill', d => noteScale(d.name.slice(0, -1))) |
|
|
|
newHexs.append('text') |
|
.attr('text-anchor', 'middle') |
|
.attr('dy', '.35em') |
|
.text(d => d.name) |
|
|
|
newHexs |
|
.on('mouseenter', function(d) { |
|
d3.select(this).classed('highlight', true) |
|
|
|
gain = audioCtx.createGain() |
|
gain.connect(audioCtx.destination) |
|
oscillator = audioCtx.createOscillator() |
|
oscillator.connect(gain) |
|
|
|
//oscillator.type = 'sine' |
|
oscillator.frequency.value = d.freq |
|
oscillator.start() |
|
}) |
|
.on('mouseleave', function() { |
|
d3.select(this).classed('highlight', false) |
|
|
|
// Fade out |
|
if (gain) { |
|
gain.gain.setTargetAtTime(0, audioCtx.currentTime, 0.25) |
|
} |
|
if (oscillator) { |
|
oscillator.stop(audioCtx.currentTime + 2) |
|
} |
|
}) |
|
|
|
// Update all |
|
hexs.merge(newHexs).transition().duration(transitionTime) |
|
.attr('transform', d => `translate(${d.x},${d.y})`) |
|
.style('opacity', 1) |
|
|
|
updLegend() |
|
|
|
// |
|
|
|
function updLegend() { |
|
const centralNoteNumber = MIDIUtils.frequencyToNoteNumber(centralFreq), |
|
hexR = 12, |
|
hexPath = getPolygonPath(hexR, 6, Math.PI / 2) |
|
|
|
let legendHex = d3.select('#interval-legend') |
|
.selectAll('.legend-hex') |
|
.data(genHexList(hexR, [-hexR * 7, -hexR * 7], centralFreq, 4)) |
|
|
|
// New hexs |
|
const newLegendHex = legendHex.enter() |
|
.append('g') |
|
.classed('legend-hex', true) |
|
|
|
newLegendHex.append('path').attr('d', hexPath) |
|
|
|
newLegendHex.append('text') |
|
.attr('text-anchor', 'middle') |
|
.attr('dy', '.35em') |
|
|
|
// Update |
|
legendHex = legendHex.merge(newLegendHex) |
|
|
|
legendHex |
|
.classed('central-hex', d => MIDIUtils.frequencyToNoteNumber(d.freq) === centralNoteNumber) |
|
.attr('transform', d => `translate(${d.x},${d.y})`) |
|
.select('text') |
|
.text(d => { |
|
const intervalNum = MIDIUtils.frequencyToNoteNumber(d.freq) - centralNoteNumber |
|
return `${intervalNum < 0 ? '-' : ''}${getIntervalName(Math.abs(intervalNum)).short}` |
|
}) |
|
} |
|
|
|
function genHexList(r, centerXy, centralFreq, levels) { |
|
levels += (levels % 2) ? 0 : 1 // Round up to nearest odd number |
|
|
|
const {horSemitones, diagSemitones} = getSelectedIntervals(), |
|
diagonalUpSemitones = diagSemitones, |
|
diagonalDownSemitones = horSemitones - diagSemitones, |
|
leftFreq = centralFreq * getIntervalRatio(-horSemitones * (levels - 1) / 2), |
|
leftXy = centerXy |
|
|
|
let noteCnt = {} // Keep track of which notes are added to assign a unique ID to each |
|
|
|
leftXy[0] -= (levels - 1) * r // Left side of the row |
|
|
|
// Central row |
|
let hexs = buildRow(r, leftXy, leftFreq, levels) |
|
|
|
d3.range(1, (levels - 1) / 2 + 1).forEach(i => { |
|
const offset = [i * r * 2 * Math.cos(Math.PI / 3), i * r * 2 * Math.sin(Math.PI / 3)] |
|
|
|
hexs.push( |
|
// Up-right |
|
...buildRow(r, [leftXy[0] + offset[0], leftXy[1] - offset[1]], leftFreq * getIntervalRatio(i * diagonalUpSemitones), levels - i), |
|
// Down-right |
|
...buildRow(r, [leftXy[0] + offset[0], leftXy[1] + offset[1]], leftFreq * getIntervalRatio(i * diagonalDownSemitones), levels - i) |
|
) |
|
}) |
|
|
|
return hexs |
|
|
|
// |
|
|
|
function buildRow(r, xy, freq, levels) { |
|
const hexs = [], |
|
horizInterval = getIntervalRatio(horSemitones) |
|
|
|
let carryX = xy[0], |
|
carryFreq = freq |
|
|
|
while (levels) { |
|
const noteNum = MIDIUtils.frequencyToNoteNumber(carryFreq) |
|
|
|
if (noteNum>=12 && noteNum <= 126) { // Ignore notes below C0 (12) or above F#9 (126) |
|
const noteName = MIDIUtils.noteNumberToName(noteNum).replace(/-/, '') |
|
|
|
// Assign unique id (noteName + counter) |
|
if (!noteCnt.hasOwnProperty(noteName)) noteCnt[noteName] = 0 |
|
noteCnt[noteName]++ |
|
const id = `${noteName}-${noteCnt[noteName]}` |
|
|
|
hexs.push({ |
|
x: carryX, |
|
y: xy[1], |
|
freq: carryFreq, |
|
name: noteName, |
|
id: id |
|
}) |
|
} |
|
|
|
carryX += r * 2 |
|
carryFreq *= horizInterval |
|
levels-- |
|
} |
|
|
|
return hexs |
|
} |
|
|
|
function getIntervalRatio(numSemitones) { |
|
// Equal temperament |
|
return Math.pow(2, numSemitones / 12) |
|
} |
|
} |
|
|
|
function getPolygonPath(r, nSides, startAngle) { |
|
let d = '' |
|
|
|
d3.range(nSides).map(side => { |
|
const angle = startAngle + 2 * Math.PI * side / nSides |
|
return [r * Math.cos(angle), r * Math.sin(angle)] |
|
}).forEach(pt => { |
|
d += (d.length ? 'L' : 'M') + pt.join(',') |
|
}) |
|
|
|
return d + 'Z' |
|
} |
|
|
|
function getSelectedIntervals() { |
|
return { |
|
horSemitones: d3.select('#hor-select').node().value, |
|
diagSemitones: d3.select('#diag-select').node().value |
|
|
|
} |
|
} |
|
} |
|
|
|
function getIntervalName(semitones) { |
|
const shortNames = ['', 'b2', '2', 'b3', '3', '4', 'b5', '5', 'b6', '6', 'b7', 'M7', |
|
'oct', 'b9', '9', 'b10', '10', '11', '#11', '12', 'b13', '13', 'b14', '14', '2-oct'], |
|
longNames = ['Unisson', 'Minor 2nd', 'Major 2nd', 'Minor 3rd', 'Major 3rd', 'Perfect 4th', 'Tritone', |
|
'Perfect 5th', 'Minor 6th', 'Major 6th', 'Minor 7th', 'Major 7th', 'Octave', 'Minor 9th', 'Major 9th', |
|
'Minor 10th', 'Major 10th', '11', '#11th', '12', 'Minor 13', 'Major 13', 'Minor 14', 'Major 14', 'Double Octave'] |
|
|
|
return { |
|
short: shortNames[semitones], |
|
long: longNames[semitones] |
|
} |
|
} |
