2a:null 2b:["$","title",null,{"children":"Colored Sheet Music | fheyen | Observable"}] 30:T6cc,# Colored Sheet Music See here for our paper and supplemental material: [github.com/visvar/sheetmusic-overviews](https://github.com/visvar/sheetmusic-overviews) Allows to more easily see overall structure and spot repeating sections, measures, or harmonies in sheet music. - See [here](https://observablehq.com/@fheyen/coloring-measures-with-open-sheet-music-display) for a version that shows full musical notation. - See [here](https://observablehq.com/d/92513667fb1a8ffd) for an alternative representation using DR for spacial arrangement. - See [here](https://observablehq.com/@fheyen/colored-lyrics) for a version with lyrics **Details** Colors for the *note* mode are fixed, see the legend below. For measures and harmonies, colors are based on similarities, by mapping them into a rainbow color space using [dimensionality reduction](https://en.wikipedia.org/wiki/Dimensionality_reduction) (with [MDS](https://en.wikipedia.org/wiki/Multidimensional_scaling)). MDS allows to use distances between points, and tries to keep these distances when projecting to our color space, so similar measures / harmonies should have similar colors. We compute the distances using [Levenshtein distance](https://en.wikipedia.org/wiki/Levenshtein_distance) (for measures) or the [Jaccard index](https://en.wikipedia.org/wiki/Jaccard_index) (for harmonies) of the contained notes' pitches. To make colors more equally spread over a color scale, we also tried using [hierarchical clustering](https://en.wikipedia.org/wiki/Hierarchical_clustering) and sorting by the order of the tree's leaves. Score compression with [@fheyen/sequence-immediate-repetition-hierarchies](https://observablehq.com/@fheyen/sequence-immediate-repetition-hierarchies)31:T426,colorMaps = [ ["interpolateSpectral (many hues)", d3.interpolateSpectral], ["interpolateWarm (left half of interpolateRainbow)", d3.interpolateWarm], ["interpolateCool (right half of interpolateRainbow)", d3.interpolateCool], [ "interpolateRainbow (many hues, similar brightness, cyclic)", (d) => d3.interpolateRainbow(d * 0.9) ], [ "interpolateSinebow (many hues, cyclic)", (d) => d3.interpolateSinebow(d * 0.9) ], ["interpolateTurbo (many hues)", (d) => d3.interpolateTurbo(d)], [ "interpolateViridis (dark-to-bright, colorblind-friendly)", d3.interpolateViridis ], [ "interpolateCividis (dark-to-bright, colorblind-friendly)", d3.interpolateCividis ], // ["CIELAB", (d) => d3.lab(60, 0, d * 200 - 100)] // [ // "CIELAB (uniform lightness, perceptually uniform)", // (d) => d3.lab(75, 40, d * 200 - 120) // ], [ "interpolateBlues (reversed, single-hue, easier to perceive distances)", (d) => d3.interpolateBlues(1 - d) ], ["white (no coloring)", (d) => "rgb(238, 238, 238)"] ]32:T2296,overviewTree = { const showNotes = showNotesToggle; const rowHeight = 70; const gapHeight = 70; const w = width; const h = 4 * rowHeight + 3 * gapHeight + 20; const context = DOM.context2d(w, h); context.font = `11px sans-serif`; context.lineWidth = 0.25; // Globals let selectedSection = null; let selectedMeasure = null; let selectedHarmony = null; let notes; let measures; let allHarmonies; let sWidth; let mWidth; let hWidth; let nWidth; // Draw function draw() { // Reset context.fillStyle = "white"; context.fillRect(0, 0, w, h); // Get filtered data measures = notesByMeasure; if (selectedSection !== null) { const { startMeasure, endMeasure } = sections[selectedSection]; measures = notesByMeasure.slice(startMeasure, endMeasure + 1); } allHarmonies = mvlib.Chords.detectChordsByExactStart(measures.flat()); if (selectedMeasure !== null) { allHarmonies = mvlib.Chords.detectChordsByExactStart( measures[selectedMeasure] ); } notes = allHarmonies.flat(); // Config const isTab = tabOrPianoRoll === "Tab"; const drawFn = mvlib.Canvas.drawNoteTrapezoid; const pitchExtent = d3.extent(notes, (d) => d.pitch); const noteHeight = isTab ? rowHeight / 6 : rowHeight / (pitchExtent[1] - pitchExtent[0]); let scaleY; if (isTab) { scaleY = d3.scaleLinear().domain([1, 7]).range([0, rowHeight]); } else { scaleY = d3 .scaleLinear() .domain([pitchExtent[0] - 1, pitchExtent[1] + 1]) .range([rowHeight, 0]); } // Draw sections sWidth = w / notesBySection.length; const sWidthInner = sWidth > 3 ? sWidth - 0.5 : sWidth; let rowY = 10; for (const [index, section] of notesBySection.entries()) { const col = index; const mX = col * sWidth; // Background const bgColor = section.length === 0 ? "#f8f8f8" : sectionColors[index]; context.fillStyle = bgColor; context.fillRect(mX, rowY, sWidthInner, rowHeight); if (selectedSection !== null && index !== selectedSection) { // Fade not-selected sections context.fillStyle = "rgba(255, 255, 255, 0.7)"; context.fillRect(mX, rowY, sWidthInner, rowHeight); } const scaleX = d3 .scaleLinear() .domain([ d3.min(section, (d) => d.start), d3.max(section, (d) => d.end) ]) .range([mX, mX + sWidthInner]); // Section name context.fillStyle = "white"; context.fillRect(mX - 5, rowY - 10, w, 10); context.fillStyle = "black"; context.fillText(sections[index].name, mX, rowY - 2); // Draw notes context.fillStyle = getColorLightness(bgColor) > 50 ? "black" : "white"; if (showNotes) { for (const note of section) { const x = scaleX(note.start); const y = rowY + scaleY(isTab ? note.string : note.pitch); const width = scaleX(note.end) - x; drawFn(context, x, y, width, noteHeight, 0); } } } // Measures mWidth = w / measures.length; const mWidthInner = mWidth > 3 ? mWidth - 0.5 : mWidth; // Connection section-measures const y1 = rowY + rowHeight; const y2 = y1 + gapHeight; if (selectedSection === null) { for (const [index, section] of sections.entries()) { if (index > 0) { const x1 = index * sWidth; const x2 = section.startMeasure * mWidth; mvlib.Canvas.drawBezierConnectorY(context, x1, y1, x2, y2); } } } else { const x1 = selectedSection * sWidth; mvlib.Canvas.drawBezierConnectorY(context, x1, y1, 0, y2); const x1b = (selectedSection + 1) * sWidth; mvlib.Canvas.drawBezierConnectorY(context, x1b, y1, w, y2); } // Draw measures rowY += rowHeight + gapHeight; for (const [index, measure] of measures.entries()) { const col = index; const mX = col * mWidth; // Background context.fillStyle = measure.length === 0 ? "#f8f8f8" : measureColors[index]; context.fillRect(mX, rowY, mWidthInner, rowHeight); if (selectedMeasure !== null && index !== selectedMeasure) { // Fade not-selected context.fillStyle = "rgba(255, 255, 255, 0.7)"; context.fillRect(mX, rowY, mWidthInner, rowHeight); } const scaleX = d3 .scaleLinear() .domain([ d3.min(measure, (d) => d.start), d3.max(measure, (d) => d.end) ]) .range([mX, mX + mWidthInner]); // Draw notes if (showNotes) { context.fillStyle = getColorLightness(context.fillStyle) > 50 ? "black" : "white"; for (const note of measure) { const x = scaleX(note.start); const y = rowY + scaleY(isTab ? note.string : note.pitch); const width = scaleX(note.end) - x; drawFn(context, x, y, width, noteHeight, 0); } } } // Harmonies hWidth = w / allHarmonies.length; const hWidthInner = hWidth > 3 ? hWidth - 0.5 : hWidth; // Connection measures-harmonies const y1h = rowY + rowHeight; const y2h = y1h + gapHeight; if (selectedMeasure === null) { let currentHarmony = 0; for (const [index, measure] of measures.entries()) { const harmmoniesOfMeasure = mvlib.Chords.detectChordsByExactStart( measure ); const x1 = index * mWidth; const x2 = currentHarmony * hWidth; currentHarmony += harmmoniesOfMeasure.length; mvlib.Canvas.drawBezierConnectorY(context, x1, y1h, x2, y2h); } } else { const harmmoniesOfMeasure = mvlib.Chords.detectChordsByExactStart( measures[selectedMeasure] ); const x1 = selectedMeasure * mWidth; mvlib.Canvas.drawBezierConnectorY(context, x1, y1h, 0, y2h); const x1b = (selectedMeasure + 1) * mWidth; mvlib.Canvas.drawBezierConnectorY(context, x1b, y1h, w, y2h); } // Draw harmonies rowY += rowHeight + gapHeight; for (const [index, chord] of allHarmonies.entries()) { const col = index; const mX = col * hWidth; context.fillStyle = harmonyColors[index]; context.fillRect(mX, rowY, hWidthInner, rowHeight); // Draw notes if (showNotes) { context.fillStyle = getColorLightness(context.fillStyle) > 50 ? "black" : "white"; for (const note of chord) { const y = rowY + scaleY(isTab ? note.string : note.pitch); drawFn(context, mX, y, hWidthInner, noteHeight, 0); } } } // Notes nWidth = w / notes.length; const nWidthInner = nWidth > 3 ? nWidth - 0.5 : nWidth; // Connection harmonies-notes const y1n = rowY + rowHeight; const y2n = y1n + gapHeight; let currentNote = 0; for (const [index, harmony] of allHarmonies.entries()) { const x1 = index * hWidth; const x2 = currentNote * nWidth; currentNote += harmony.length; mvlib.Canvas.drawBezierConnectorY(context, x1, y1n, x2, y2n); } // Draw notes rowY += rowHeight + gapHeight; for (const [index, note] of notes.entries()) { const col = index; const mX = col * nWidth; context.fillStyle = noteColors[note.pitch % 12]; context.fillRect(mX, rowY, nWidthInner, h); if (showNotes) { context.fillStyle = getColorLightness(context.fillStyle) > 50 ? "black" : "white"; const y = rowY + scaleY(isTab ? note.string : note.pitch); drawFn(context, mX, y, nWidthInner, noteHeight, 0); } } } draw(); // Onclick handler const canvas = context.canvas; canvas.value = null; canvas.dispatchEvent(new CustomEvent("input")); // CLick to select and filter by section, measure, ... canvas.onmouseup = (event) => { event.preventDefault(); const row = Math.floor(event.offsetY / (rowHeight + gapHeight)); if (row === 0) { // Section selected selectedSection = Math.floor(event.offsetX / sWidth); selectedMeasure = null; selectedHarmony = null; } else if (row === 1) { // Measure selected console.log(mWidth); selectedMeasure = Math.floor(event.offsetX / mWidth); selectedHarmony = null; } else if (row === 2) { // Harmony selected selectedHarmony = Math.floor(event.offsetX / hWidth); } // canvas.value = selectedMeasure; // canvas.dispatchEvent(new CustomEvent("input")); draw(); }; // Double-click to reset canvas.ondblclick = (event) => { event.preventDefault(); // canvas.value = null; // canvas.dispatchEvent(new CustomEvent("input")); selectedSection = null; selectedMeasure = null; selectedHarmony = null; draw(); }; return context.canvas; }33:T1857,function sheet( piece, notesByMeasure, w, h, mPerRow = 6, showFrets, showStrings, mode, colors, noteMode = "Piano roll" ) { const isTab = noteMode === "Tab"; const context = DOM.context2d(w, h); const mWidth = width / mPerRow; const mWidthInner = mWidth - 2; const mHeight = Math.floor( (h - 10) / Math.ceil(track.measureIndices.length / mPerRow) ); const mHeightInner = mHeight - 10; const pitchExtent = d3.extent(notesByMeasure.flat(), (d) => d.pitch); const noteHeight = isTab ? mHeightInner / 6 : mHeightInner / (pitchExtent[1] - pitchExtent[0]); const noteEndHeight = isTab && showFrets ? noteHeight * 0.8 : 0; let scaleY; if (isTab) { scaleY = d3.scaleLinear().domain([1, 7]).range([0, mHeightInner]); } else { scaleY = d3 .scaleLinear() .domain([pitchExtent[0] - 1, pitchExtent[1] + 1]) .range([mHeightInner, 0]); } const measureOrSectMode = ["Measures", "Sections"].includes(mode); function draw(selectedMeasure = null) { // If a measure was selected, change colors to reflect distance to selected measure let cols; let dists; if (measureOrSectMode && selectedMeasure !== null) { // Distance of all measures to the currently selected one dists = measureDistMatrix[selectedMeasure]; const distColorScale = d3 .scaleLinear() .domain(d3.extent(dists)) .range([0, 1]); const chromScale = d3.interpolateBlues; const distColor = (dist) => chromScale(distColorScale(dist)); cols = dists.map(distColor); } else if (mode === "Sections") { cols = sections.flatMap((section, index) => Array.from({ length: section.endMeasure - section.startMeasure + 1 }).fill(sectionColors[index]) ); } else { cols = colors; } // Reset background context.fillStyle = "white"; context.fillRect(0, 0, w, h); // Draw measures context.strokeStyle = "black"; context.strokeWidth = 10; context.textBaseline = "middle"; let currentChord = 0; for (const [index, measure] of notesByMeasure.entries()) { const col = index % mPerRow; const row = Math.floor(index / mPerRow); const mX = col * mWidth; const mY = row * mHeight + 10; context.font = `9px sans-serif`; context.fillStyle = "#666"; // Rehearsal / section name const rehearsal = track.measureRehearsalMap.get(index); if (rehearsal) { context.fillText(rehearsal, mX, mY - 3.5); } else if (index % 5 === 0) { // Measure number context.fillText(index, mX, mY - 3.5); } // Distance to selected if (selectedMeasure !== null) { context.fillText(dists[index], mX + mWidthInner - 10, mY - 3.5); } // Background let bgColor; if (!measureOrSectMode || measure.length === 0) { bgColor = "#f8f8f8"; } else { bgColor = cols[index]; } context.fillStyle = bgColor; context.fillRect(mX, mY, mWidthInner, mHeightInner); if (measure.length === 0) { continue; } const scaleX = d3 .scaleLinear() .domain([ d3.min(measure, (d) => d.start), d3.max(measure, (d) => d.end) // measureTimes[index - 1] ?? 0, // measureTimes[index] ]) .range([mX, mX + mWidthInner]); // Draw strings if (isTab && showStrings) { context.fillStyle = mode === "Measures" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.05)"; for (let string = 1.5; string < 7; ++string) { context.fillRect(mX, mY + scaleY(string), mWidthInner, 1); } } // Draw notes const fn = mvlib.Canvas.drawNoteTrapezoid; context.font = `7px sans-serif`; if (mode !== "Harmonies") { for (const note of measure) { const x = scaleX(note.start); const y = mY + scaleY(isTab ? note.string : note.pitch); const width = scaleX(note.end) - x; context.fillStyle = "#333"; if (measureOrSectMode && getColorLightness(bgColor) < 50) { context.fillStyle = "#eee"; } if (mode === "Notes") { context.fillStyle = cols[note.pitch % 12]; } fn(context, x, y, width, noteHeight, noteEndHeight); // Draw fret numbers if (isTab && showFrets) { context.fillStyle = getColorLightness(context.fillStyle) > 50 ? "black" : "white"; context.fillText(note.fret, x + 1, y + noteHeight / 2 + 1); } } } else { const chords = mvlib.Chords.detectChordsByExactStart(measure); for (const chord of chords) { for (const note of chord) { const x = scaleX(note.start); const y = mY + scaleY(isTab ? note.string : note.pitch); const width = scaleX(note.end) - x; context.fillStyle = cols[currentChord]; fn(context, x, y, width, noteHeight, noteEndHeight); // Draw fret numbers if (showFrets) { context.fillStyle = getColorLightness(context.fillStyle) > 50 ? "black" : "white"; context.fillText(note.fret, x + 1, y + noteHeight / 2 + 1); } } currentChord++; } } } } draw(); // Onclick handler const canvas = context.canvas; canvas.value = null; canvas.dispatchEvent(new CustomEvent("input")); // CLick to color by distance to selected measure canvas.onmouseup = (event) => { event.preventDefault(); const row = Math.floor(event.offsetY / rowHeight); const col = Math.floor(event.offsetX / mWidth); let selectedMeasure = row * mPerRow + col; if (selectedMeasure > notesByMeasure.length - 1) { selectedMeasure = null; } canvas.value = selectedMeasure; canvas.dispatchEvent(new CustomEvent("input")); draw(selectedMeasure); }; // Double-click to reset canvas.ondblclick = (event) => { event.preventDefault(); canvas.value = null; canvas.dispatchEvent(new CustomEvent("input")); draw(); }; return context.canvas; }34:Tb4d,viewof selectedMeasures = { const w = width; const h = 250; const context = DOM.context2d(w, h); // Measures const mWidth = w / notesByMeasure.length; const colorY = h - 10; let xExtent; let xPositions; if (coloringSelect === "DR") { xExtent = d3.extent(measureDrPoints); xPositions = measureDrPoints; } else { xExtent = d3.extent(measureColorsFromClustering.measureClusters); xPositions = measureColorsFromClustering.measureClusters.map((d) => d); } const colorXScale = d3.scaleLinear().domain(xExtent).range([0, w]); const xPositionsPixel = xPositions.map((d) => colorXScale(d)); let globalRefToHighlight = null; // Draws measures, colors, arcs const defaultHighlight = selectedMeasure !== null ? new Set([selectedMeasure]) : null; function draw(highlightMeasures = defaultHighlight) { globalRefToHighlight = highlightMeasures; // Reset context.fillStyle = "white"; context.fillRect(0, 0, w, h); // Measures for (let measure = 0; measure < notesByMeasure.length; ++measure) { context.fillStyle = notesByMeasure[measure].length === 0 ? "#eee" : measureColors[measure]; context.strokeStyle = measureColors[measure]; const mX = measure * mWidth; context.fillRect(mX, 0, mWidth + 2, 10); if (notesByMeasure[measure].length === 0) { continue; } // Arcs context.lineWidth = 0.7; if (highlightMeasures && highlightMeasures.size > 0) { const isHighlight = highlightMeasures.has(measure); context.lineWidth = isHighlight ? 2 : 0.2; } const colorX = xPositionsPixel[measure]; mvlib.Canvas.drawBezierConnectorY( context, mX + mWidth / 2, 10, colorX, colorY ); } // Colors const scaleColor = d3.scaleLinear().domain([0, w]); for (let hue = 0; hue < w; ++hue) { context.fillStyle = colorMap(scaleColor(hue)); context.fillRect(hue, colorY, 2, 10); } } draw(); const canvas = context.canvas; // Hover canvas.addEventListener("mousemove", (e) => { if (e.offsetY < h / 2) { // Highlight measure const measure = Math.floor(e.offsetX / mWidth); draw(new Set([measure])); } else { // Highlight color const closest = d3.minIndex(xPositionsPixel, (d) => Math.abs(d - e.offsetX) ); // One color can have multiple measures, highlight all const color = xPositionsPixel[closest]; const sameColor = xPositionsPixel .map((d, i) => [d, i]) .filter((d) => d[0] === color) .map(([d, i]) => i); draw(new Set(sameColor)); } }); canvas.addEventListener("mouseout", (e) => draw()); canvas.addEventListener("click", (e) => { canvas.value = globalRefToHighlight; canvas.dispatchEvent(new CustomEvent("input")); }); return canvas; }35:Td21,{ const type = { value: "dist", name: "distance" }; // const type = { value: "depth", name: "depth" }; const hierarchy = measureClustering.clusterTree; const nodes = hierarchy.root.descendants(); const leaves = nodes.filter((n) => n.isLeaf); const links = []; leaves.forEach((node, i) => (node.x = i)); nodes.forEach((node, i) => { node.x = node.x ?? d3.mean(node.leaves(), (d) => d.x); [node.left, node.right].forEach((child) => { if (child) { links.push({ source: node, target: child }); } }); }); const dendrogram = { nodes: nodes, links: links }; const H_clusters = hierarchy.get_clusters(measureClusterThreshold, type.name); let I = Array.from({ length: notesByMeasure.length }); for ( let cluster_index = 0; cluster_index < H_clusters.length; ++cluster_index ) { H_clusters[cluster_index].forEach( ({ index }) => (I[index] = cluster_index) ); } const clusters = I; const W = width; const H = W * 0.4; const margin = 20; const svg = d3 .create("svg") .attr("width", W) .attr("height", H + margin); function translate(x, y) { return `translate(${x}, ${y})`; } const max = d3.max(nodes, (node) => node[type.value]); svg.selectAll("*").remove(); const g_dendogram = svg.append("g").attr("transform", translate(0, margin)); const x = d3 .scaleLinear() .domain([0, notesByMeasure.length]) .range([margin, W - margin]); const y = d3 .scaleLinear() .domain([max, 0]) .nice() .range([margin, H - margin]); const link = ({ source, target }) => { const x1 = x(source.x); const y1 = y(source[type.value]); const x2 = x(target.x); const y2 = y(target[type.value]); const max_radius = 20; const x_dist = Math.abs(x1 - x2); const y_dist = Math.abs(y1 - y2); const radius = Math.min(x_dist, y_dist, max_radius); const cx = x1 < x2 ? radius : -radius; const counter_clockwise = cx < 0 ? 0 : 1; const xa = x2 - cx; return `M ${x1} ${y1} H ${xa} a ${radius} ${radius} 0 0 ${counter_clockwise} ${cx} ${radius} V ${y2}`; }; g_dendogram .selectAll("path") .data(dendrogram.links) .enter() .append("path") .join() .attr("d", link) .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke", ({ source }) => { const colors = source.index.map((d) => measureColors[d]); if (new Set(colors).size > 1) { return "grey"; } // return source.index.length > 1 ? "grey" : measureColors[source.index[0]]; return measureColors[source.index[0]]; }); g_dendogram .selectAll("circle") .data(dendrogram.nodes.filter((d) => d.isLeaf)) .enter() .append("circle") .join() .attr("cx", (d) => x(d.x)) .attr("cy", (d) => y(d[type.value])) .attr("r", 3) .attr("stroke", "none") .attr("fill", (d, i) => { return d.isLeaf ? measureColors[d.index] : "black"; }); g_dendogram .append("path") .attr("d", `M ${margin} ${y(measureClusterThreshold)} h ${W - 2 * margin}`) .attr("fill", "none") .attr("stroke-dasharray", "4 8") .attr("stroke", "black"); // g_dendogram // .append("g") // .attr("transform", `translate(${margin}, 0)`) // .call(d3.axisLeft(y)); return svg.node(); }36:T563,function findRepetions(matrix, minLength = 1) { // Go through diagonals beside main and look for streaks of 0s const n = matrix.length; const streaks = []; let currentStreak = null; // Matrix is symmetric (has to be!) so one half is enough for (let diag = 1; diag < n - 1; ++diag) { for (let step = 0; step < n - diag; ++step) { const row = diag + step; const col = step; if (matrix[row][col] === 0) { // Start or extent streak if (!currentStreak) { currentStreak = { secondPosition: row, firstPosition: col, length: 1 }; } else { currentStreak.length++; } } else { // Break streak if (currentStreak) { if (currentStreak.length >= minLength) { streaks.push(currentStreak); } currentStreak = null; } } } } const grouped = d3.group(streaks, (d) => d.firstPosition); return grouped; // .map(([firstPosition, group]) => { // return { // firstPosition, // otherPositions: group.sort((a, b) => // a.secondPosition === b.secondPosition // ? b.length - a.length // : a.secondPosition - b.secondPosition // ) // }; // }) // .sort((a, b) => a.firstPosition - b.firstPosition); // TODO: cleanup // e.g. }37:T5ba,{ const w = width; const h = width / 2 + 10; const cellWidth = w / notesByMeasure.length; const context = DOM.context2d(w, h); const canvas = context.canvas; context.fillStyle = "white"; context.fillRect(0, 0, w, h); context.strokeStyle = "rgba(0, 0, 0, 0.05)"; for (let measure = 0; measure < notesByMeasure.length; ++measure) { if (notesByMeasure[measure].length === 0) { // Skip empty measures continue; } const x = measure * cellWidth; context.fillStyle = measureColors[measure]; context.fillRect(x, h - 10, cellWidth, 10); const repetitions = measureRepetitions.get(measure) ?? []; // When showing only first, keep track of already done lengths const doneLengths = new Set(); // Draw arcs to connect repetitions for (const rep of repetitions) { // Show first for EACH LENGTH, leads to chains if (onlyShowFirstRepetition && doneLengths.has(rep.length)) { continue; } const colors = measureColors.slice(measure, measure + rep.length); const avgColor = mvlib.Utils.averageColor(colors); // const avgColor = d3.mode(colors); // console.log(avgColor); context.strokeStyle = setOpacity(avgColor, 0.2); const x2 = rep.secondPosition * cellWidth; const length = rep.length * cellWidth - 0.5 * cellWidth; mvlib.Canvas.drawArc(context, x, x2, length, h - 10); doneLengths.add(rep.length); } } return canvas; }38:T4ca,{ const w = width; const h = 200; const context = DOM.context2d(w, h); context.fillStyle = "white"; context.fillRect(0, 0, w, h); context.font = `11px sans-serif`; context.textAlign = "center"; let colors; if (modeSelect === "Measures") { colors = measureColors; } else if (modeSelect === "Sections") { colors = sectionColors; } else if (modeSelect === "Harmonies") { colors = harmonyColors; } else if (modeSelect === "Notes") { colors = track.notes.map((d) => noteColors[d.pitch % 12]); } const groups = d3 .groups(colors, (d) => d) .sort((a, b) => b[1].length - a[1].length); const scaleX = d3 .scaleLinear() .domain([0, groups.length]) .range([5, w - 5]); const scaleY = d3 .scaleLinear() .domain([0, d3.max(groups, (d) => d[1].length)]) .range([0, h - 20]); const barWidth = (scaleX(1) - scaleX(0)) * 0.8; for (const [index, group] of groups.entries()) { const x = scaleX(index); const y = scaleY(group[1].length); context.fillStyle = "#111"; context.fillText(group[1].length, x + barWidth / 2, h - 3); context.fillStyle = group[0]; context.fillRect(x, h - y - 15, barWidth, y); } return context.canvas; }39:T90d,function drawTreeNode(context, tree, x, y, blockWidth, colors) { if (!tree) { return; } // This is a leaf const offset = blockWidth / 2; const height = 80; const scaleY = d3.scaleLinear().domain([1, 7]).range([0, height]); const noteHeight = scaleY(1) - scaleY(0); const noteHeight2 = 0.5 * noteHeight; if (tree.join) { for (const value of tree) { if (blockWidth > 20) { context.fillText(value, x + offset, y); } const notes = notesByMeasure[value]; // Draw measure context.save(); const bgColor = notes.length === 0 ? "#f8f8f8" : colors[value]; context.fillStyle = bgColor; context.fillRect(x + 1, y + 2, blockWidth - 2, height); // Draw notes context.textAlign = "left"; context.textBaseline = "middle"; context.font = `7px sans-serif`; const scaleX = d3 .scaleLinear() .domain([d3.min(notes, (d) => d.start), d3.max(notes, (d) => d.end)]) .range([x + 1, x + blockWidth - 2]); const fn = mvlib.Canvas.drawNoteTrapezoid; for (const note of notes) { const nx = scaleX(note.start); const ny = y + scaleY(note.string); const width = scaleX(note.end) - nx; context.fillStyle = "#333"; if (getColorLightness(bgColor) < 50) { context.fillStyle = "#eee"; } fn(context, nx, ny, width, noteHeight, noteHeight2); // Draw fret numbers // if (isTab && showFretsToggle) { context.fillStyle = getColorLightness(context.fillStyle) > 50 ? "black" : "white"; context.fillText(note.fret, nx + 1, ny + noteHeight / 2 + 1); // } } context.restore(); x += blockWidth; } return; } // This is not a leaf // Pre if (tree.pre) { drawTreeNode(context, tree.pre, x, y, blockWidth, colors); x += tree.pre.length * blockWidth; } // Repetition const treeWidth = tree.seq.length * blockWidth; context.fillText(`${tree.rep} x`, x + treeWidth / 2, y); mvlib.Canvas.drawBracketH(context, x + 3, y + 5, treeWidth - 6, 5, true); drawTreeNode(context, tree.seq, x, y + 25, blockWidth, colors); // Post if (tree.post) { x += tree.seq.length * blockWidth; drawTreeNode(context, tree.post, x, y, blockWidth, colors); } }3a:T516,measureClustering = { // Perform clustering const druidMatrix = druid.Matrix.from(measureDistMatrix); const clusterTree = new druid.Hierarchical_Clustering( druidMatrix, "complete", "precomputed", druidMatrix.to2dArray ); /** * Traverses a tree in pre-order * * @param {object} node tree node * @returns {object[]} nodes */ function preOrderTraverse(node) { const nodes = []; // Next node always at last position const todo = [node]; while (todo.length > 0) { const currentNode = todo.pop(); nodes.push(currentNode); if (!currentNode.isLeaf) { // Do left before right, so push it last todo.push(currentNode.right, currentNode.left); } } return nodes; } // Get nodes const nodes = preOrderTraverse(clusterTree.root); const leaves = nodes.filter((n) => n.isLeaf); // Compute x from weighted mean of children for (const [i, node] of leaves.entries()) { node.x = i; } const sortedBottomUp = nodes .filter((n) => !n.isLeaf) .sort((a, b) => a.depth - b.depth); for (const node of sortedBottomUp) { const { left, right } = node; node.x = (left.x * left.size + right.x * right.size) / (left.size + right.size); } return { clusterTree, nodes, leaves }; }3b:T46f,measureColorsFromClustering = { const { clusterTree, nodes, leaves } = measureClustering; // Get clusters (e.g. for color) const threshold = measureClusterThreshold; // const clusters = clusterTree.get_clusters(threshold, "depth"); const clusters = clusterTree.get_clusters(threshold, "distance"); // Assign cluster IDs to nodes for (const [clusterId, cluster] of clusters.entries()) { for (const node of cluster) { node.clusterId = clusterId; } } // measures in order of music piece, each entry contains the cluster ID const measureClusters = clusters .flatMap((cluster, cIndex) => cluster.map((item) => { return { mIndex: item.index, cIndex }; }) ) .sort((a, b) => a.mIndex - b.mIndex) .map((d) => d.cIndex); const scaleColor = d3 .scaleLinear() .domain([0, clusters.length - 1]) .range([0, 1]); const measureColors = measureClusters.map((d) => colorMap(scaleColor(d))); // measureClusters is an array with array[measureIndex] = clusterId return { measureClusters, measureColors, nClusters: clusters.length }; }3c:T4c3,guitarProDrumReplacementMap = new Map([ // Crash [49, { y: 0, short: "C", label: "C1" }], [55, { y: 0, short: "C", label: "Cs" }], [42, { y: 0, short: "C", label: "C2" }], [57, { y: 0, short: "C", label: "C2" }], [56, { y: 0, short: "B", label: "B" }], [99, { y: 0, short: "B", label: "Bl" }], [100, { y: 0, short: "B", label: "Bh" }], // Ride [52, { y: 0, short: "C", label: "Ch" }], [51, { y: 0, short: "R", label: "Rm" }], [53, { y: 0, short: "R", label: "Rb" }], [59, { y: 0, short: "R", label: "R" }], [93, { y: 0, short: "R", label: "Re" }], // Hi-Hat [42, { y: 0, short: "H", label: "Hc" }], [44, { y: 0, short: "H", label: "Hh" }], [92, { y: 0, short: "H", label: "Hh" }], [46, { y: 0, short: "H", label: "Ho" }], // Toms [48, { y: 1, short: "T", label: "T1" }], [47, { y: 1, short: "T", label: "T2" }], [45, { y: 1, short: "T", label: "T3" }], [43, { y: 1, short: "T", label: "T4" }], [50, { y: 1, short: "T", label: "T5" }], // Snare [37, { y: 2, short: "S", label: "Ss" }], [38, { y: 2, short: "S", label: "S" }], [91, { y: 2, short: "S", label: "Sr" }], // Bass [35, { y: 3, short: "K", label: "K" }], [36, { y: 3, short: "K", label: "K" }] ])3d:T5f9,function drawGuitarNotes( context, notes, mx, my, mw, mh, bgColor, colors, showFrets = true, showStrings = true ) { context.save(); // Draw background context.fillStyle = bgColor; context.fillRect(mx, my, mw, mh); // Y scale const scaleY = d3 .scaleLinear() .domain([1, 7]) .range([my, my + mh]); const noteHeight = scaleY(1) - scaleY(0); const noteHeight2 = showFrets ? 0.5 * noteHeight : 0; // Draw strings if (showStrings) { context.fillStyle = "rgba(0, 0, 0, 0.2)"; for (let string = 1.5; string < 7; ++string) { context.fillRect(mx, scaleY(string), mw, 1); } } // Draw notes context.textAlign = "left"; context.textBaseline = "middle"; context.font = `7px sans-serif`; const scaleX = d3 .scaleLinear() .domain([d3.min(notes, (d) => d.start), d3.max(notes, (d) => d.end)]) .range([mx + 1, mx + mw - 2]); for (const note of notes) { const nx = scaleX(note.start); const ny = scaleY(note.string); const width = scaleX(note.end) - nx; context.fillStyle = "#333"; if (getColorLightness(bgColor) < 50) { context.fillStyle = "#eee"; } mvlib.Canvas.drawNoteTrapezoid( context, nx, ny, width, noteHeight, noteHeight2 ); // Draw fret numbers if (showFrets) { context.fillStyle = getColorLightness(context.fillStyle) > 50 ? "black" : "white"; context.fillText(note.fret, nx + 1, ny + noteHeight / 2 + 1); } } context.restore(); }3e:T5c7,function drawDrumNotes( context, notes, mx, my, mw, mh, bgColor, colors, showLabels = true ) { // Draw background context.fillStyle = bgColor; context.fillRect(mx, my, mw, mh); // Y scale const scaleY = d3.scaleLinear().domain([0, 4]).range([0, mh]); const noteHeight = scaleY(1) - scaleY(0); const noteHeight2 = 0.5 * noteHeight; // Draw row separators context.fillStyle = "rgba(0, 0, 0, 0.2)"; for (let row = 0; row < 6; ++row) { context.fillRect(mx, scaleY(row), mw, 1); } // Draw notes context.textAlign = "left"; context.textBaseline = "middle"; context.font = `7px sans-serif`; const scaleX = d3 .scaleLinear() .domain([d3.min(notes, (d) => d.start), d3.max(notes, (d) => d.end)]) .range([mx + 1, mx + mw - 2]); for (const note of notes) { const drumInfo = guitarProDrumReplacementMap.get(note.pitch); const nx = scaleX(note.start); const ny = my + scaleY(drumInfo?.y ?? -1); const width = scaleX(note.end) - nx; context.fillStyle = "#333"; if (getColorLightness(bgColor) < 50) { context.fillStyle = "#eee"; } mvlib.Canvas.drawNoteTrapezoid( context, nx, ny, width, noteHeight, noteHeight2 ); // Draw labels if (showLabels && drumInfo) { context.fillStyle = getColorLightness(context.fillStyle) > 50 ? "black" : "white"; context.fillText(drumInfo.label, nx + 1, ny + noteHeight / 2 + 1); } } }3f:T71e,function drawScoreNotes( context, notes, mx, my, mw, mh, bgColor, colors, pitchExtent, transpose = 0 ) { // Draw background context.fillStyle = bgColor; context.fillRect(mx, my, mw, mh); // Map pitches to note lines const noteLines = notes.map((d) => pitchToNoteLine(d.pitch + transpose)); // Y scale const lineExtent = pitchExtent.map((d) => pitchToNoteLine(d + transpose)); // console.log(lineExtent); const [minLine, maxLine] = d3.extent([0, 4, ...lineExtent]); // console.log(minLine); const scaleY = d3 .scaleLinear() .domain([minLine - 1, maxLine + 1]) .range([mh, 0]); const noteRadius = scaleY(0) - scaleY(0.5); const noteRadius2 = 0.5 * noteRadius; // Draw row separators context.fillStyle = "rgba(0, 0, 0, 0.2)"; for (let row of [0, 1, 2, 3, 4]) { context.fillRect(mx, scaleY(row), mw, 1); } // Draw notes context.textAlign = "center"; context.textBaseline = "middle"; context.font = `${noteRadius * 1.5}px sans-serif`; const scaleX = d3 .scaleLinear() .domain([d3.min(notes, (d) => d.start), d3.max(notes, (d) => d.end)]) .range([mx + 1, mx + mw - 2]); for (const [index, note] of notes.entries()) { const nx = scaleX(note.start); const ny = my + scaleY(noteLines[index]); const width = scaleX(note.end) - nx; context.fillStyle = "#333"; if (getColorLightness(bgColor) < 50) { context.fillStyle = "#eee"; } mvlib.Canvas.drawFilledCircle(context, nx + noteRadius, ny, noteRadius); context.fillRect(nx, ny - 1, width - 3, 2); // Mark sharps if (mvlib.Midi.isSharp(note.pitch)) { context.fillStyle = "#333"; if (getColorLightness(context.fillStyle) < 50) { context.fillStyle = "#eee"; } context.fillText("#", nx + noteRadius, ny); } } }40:T44f,{ const w = width; const h = 110; const context = DOM.context2d(w, h); context.font = "13px sans-serif"; context.textAlign = "center"; // Reset context.fillStyle = "white"; context.fillRect(0, 0, w, h); context.fillStyle = "black"; const notes = measureSelect[1]; const w2 = 150; const padd = 30; let x = 0; const y = 10; drawGuitarNotes(context, notes, x, y, w2, 100, "#eee", null, true, true); x += w2 + padd; drawGuitarNotes(context, notes, x, y, w2, 100, "#eee", null, false, false); x += w2 + padd; drawDrumNotes(context, notes, x, y, w2, 100, "#eee", null, true); x += w2 + padd; const pitchExtent = d3.extent(notes, (d) => d.pitch); drawScoreNotes(context, notes, x, y, w2, 100, "#eee", null, pitchExtent, 12); x += w2 + padd; const [min, max] = d3.extent(notes, (d) => d.pitch); const scaleYPianoRoll = d3 .scaleLinear() .domain([min, max + 1]) .range([100, 0]); drawPianoRollNotes( context, notes, x, y, w2, 100, "#eee", null, scaleYPianoRoll, true ); return context.canvas; }41:[] 2e:{"id":"f6aeb13c919e2c54","slug":"colored-tablature","title":"Colored Sheet Music","thumbnail":"af47a012c0b6d6dce912248083e90aaf94c2be4f127018801cc9ed0fe97d205a","access_level":"public","create_time":"$D2021-09-26T18:11:29.799Z","update_time":"$D2023-10-10T15:05:24.890Z","view_time":null,"first_public_time":"$D2023-10-06T16:02:53.268Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5cbdc37d5634c888","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":"starter_2024"},"version":3285,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce539535bc3f40fc","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":null}],"members":[{"type":"individual","id":"ce539535bc3f40fc","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"b72926e49d621c3b","slug":"music","title":"Music","owner":{"id":"5cbdc37d5634c888","login":"fheyen","name":""}},"type":"notebook","body":{"title":"Colored Sheet Music","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":400,"value":"viewof fileUpload = Inputs.file({\n label: \"MusicXML file\",\n accept: \".musicxml,.xml,.mxl\",\n required: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"viewof trackSelect = Inputs.select(piece.tracks, {\n label: \"Track\",\n format: (d, i) => `${i + 1} ${d.name}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1117,"value":"viewof coloringSelect = Inputs.select([\"DR\", \"Clustering\", \"MusicVAE\"], {\n label: \"Coloring\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2072,"value":"viewof measureClusterThreshold = Inputs.range([0, 20], {\n label: \"Clustering threshold\",\n value: 0,\n step: 0.1,\n disabled: coloringSelect !== \"Clustering\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1298,"value":"viewof colorMap = Inputs.select(new Map(colorMaps), {\n label: \"Color map\",\n width: Math.min(width - 200, 500)\n // value:\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2909,"value":"viewof distanceFunction = Inputs.select(\n [\n [\"Levenshtein (pitch)\", measureDistanceFunctionPitch],\n [\"Levenshtein (string, fret)\", measureDistanceFunctionStringFret]\n ],\n { label: \"Distance function\", format: (d) => d[0] }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1337,"value":"{\n const rampHeight = 36;\n const w = 440;\n const h = colorMaps.length * rampHeight;\n const context = DOM.context2d(w, h);\n context.font = \"14px sans-serif\";\n\n // Reset\n context.fillStyle = \"white\";\n context.fillRect(0, 0, w, h);\n const scaleColor = d3.scaleLinear().domain([0, w]);\n for (const [index, [label, cMap]] of colorMaps.entries()) {\n const y = index * rampHeight + 12;\n // Label\n context.fillStyle = \"#222\";\n context.fillText(label, 5, y);\n // Colors\n for (let hue = 0; hue < w; ++hue) {\n context.fillStyle = cMap(scaleColor(hue));\n context.fillRect(hue, y + 3, 2, 12);\n }\n }\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"{\n const w = 200;\n const h = 18;\n const context = DOM.context2d(w, h);\n context.font = `11px sans-serif`;\n context.fillStyle = \"white\";\n context.textAlign = \"center\";\n context.textBaseline = \"top\";\n context.fillRect(0, 0, w, h);\n\n const mWidth = w / 12;\n const mWidthInner = mWidth * 0.5;\n\n // Draw notes\n for (const [index, note] of noteNames.entries()) {\n const col = index;\n const mX = col * mWidth;\n context.fillStyle = noteColors[index];\n context.fillRect(mX, 10, mWidthInner, h);\n context.fillStyle = \"black\";\n context.fillText(note, mX + mWidthInner / 2, 0);\n }\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1342,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1273,"value":"viewof tabOrPianoRoll = Inputs.radio([\"Tab\", \"Piano roll\"], {\n label: \"Encoding\",\n value: track.hasStringFret ? \"Tab\" : \"Piano roll\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":551,"value":"**Overview**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":840,"value":"viewof showNotesToggle = Inputs.toggle({ label: \"Show notes?\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1567,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2876,"value":"**Comparison**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":557,"value":"**Sheet**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":521,"value":"viewof modeSelect = Inputs.select(\n [\"Measures\", \"Sections\", \"Harmonies\", \"Notes\"],\n {\n label: \"Color mode\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"viewof mPerRow = Inputs.range([1, 50], {\n label: \"Measures per row\",\n step: 1,\n value: 16\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":721,"value":"viewof rowHeight = Inputs.range([50, 150], {\n label: \"Row height\",\n step: 5,\n value: 60\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"viewof showFretsToggle = Inputs.toggle({ label: \"Show frets?\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"viewof showStringsToggle = Inputs.toggle({\n label: \"Show strings?\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1241,"value":"*Click to select a measure and color all others by their distance to it. Double-click to return.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":526,"value":"viewof selectedMeasure = {\n const totalHeight = rowHeight * Math.ceil(notesByMeasure.length / mPerRow);\n\n let colors;\n if (modeSelect === \"Measures\") {\n colors = measureColors;\n } else if (modeSelect === \"Sections\") {\n colors = sectionColors;\n } else if (modeSelect === \"Harmonies\") {\n colors = harmonyColors;\n } else {\n colors = noteColors;\n }\n\n return sheet(\n piece,\n notesByMeasure,\n width,\n totalHeight,\n mPerRow,\n showFretsToggle,\n showStringsToggle,\n modeSelect,\n colors,\n tabOrPianoRoll\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":728,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1175,"value":"selectedMeasure","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":886,"value":"## Color Mapping\n\n*Hover over the top half to highlight measures and over the bottom half to highlight colors.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":916,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1669,"value":"selectedMeasures","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3208,"value":"### Clustering Dendrogram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3251,"value":"Inputs.bind(Inputs.range([0, 20]), viewof measureClusterThreshold)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3143,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1978,"value":"measureTimes = piece.measureTimes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1371,"value":"**Measures.** Measures are colored by similarity, meaning that more similar measures should have more similar colors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":102,"value":"notesByMeasure = {\n const sortFn = (a, b) =>\n a.start !== b.start ? a.start - b.start : a.pitch - b.pitch;\n // Get notes by measures\n const indices = [0, ...track.measureIndices];\n const allNotes = track.notes;\n const notesByMeasure = [];\n for (let index = 1; index < indices.length; ++index) {\n const notes = allNotes.slice(indices[index - 1], indices[index]);\n // Sort notes uniformly\n notes.sort(sortFn);\n notesByMeasure.push(notes);\n }\n return notesByMeasure;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2920,"value":"measuresPreprocessed = preprocessNoteCollections(notesByMeasure)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2933,"value":"// Preprocessed a Note[][] for comparison with the distanceFunctions\nfunction preprocessNoteCollections(noteCollections) {\n if (distanceFunction[0] === \"Levenshtein (pitch)\") {\n return noteCollections.map((m) => m.map((n) => n.pitch));\n } else if (distanceFunction[0] === \"Levenshtein (string, fret)\") {\n return noteCollections.map((m) => m.map((n) => `${n.string} ${n.fret}`));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1002,"value":"function measureDistanceFunctionPitch(measure1, measure2) {\n const pitchDistance = mvlib.StringBased.Levenshtein.levenshtein(\n measure1,\n measure2\n );\n // const onsetDistance = mvlib.StringBased.Levenshtein.levenshtein(\n // measure1.map((d) => d.start),\n // measure2.map((d) => d.start)\n // );\n // return pitchDistance + onsetDistance;\n return pitchDistance;\n // return onsetDistance;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2891,"value":"function measureDistanceFunctionStringFret(measure1, measure2) {\n const sortFn = (a, b) =>\n a.start !== b.start ? a.start - b.start : a.pitch - b.pitch;\n const dist = mvlib.StringBased.Levenshtein.levenshtein(measure1, measure2);\n return dist;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1008,"value":"measureDistMatrix = {\n let array = measuresPreprocessed;\n\n // Get distance matrix between all measures\n const measureDistMatrix = Array.from({ length: array.length }).map(() =>\n Array.from({ length: array.length })\n );\n for (const [index1, item1] of array.entries()) {\n for (let index2 = index1; index2 < array.length; index2++) {\n const item2 = array[index2];\n const distance = measureDistanceFunction(item1, item2);\n measureDistMatrix[index1][index2] = distance;\n measureDistMatrix[index2][index1] = distance;\n }\n }\n\n return measureDistMatrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1682,"value":"viewof selected = {\n const labels = notesByMeasure.map((d, i) => i);\n const size = 400;\n return matrixVis(labels, labels, measureDistMatrix, size, size);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1727,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1728,"value":"measureRepetitions = findRepetions(measureDistMatrix, minRepetitionLength)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1789,"value":"viewof minRepetitionLength = Inputs.range([1, 20], {\n label: \"Min. length\",\n step: 1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1869,"value":"viewof onlyShowFirstRepetition = Inputs.toggle({\n label: \"Only show first repetition\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1761,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2969,"value":"measureRepeatedIndices = mvlib.Utils.findRepeatedIndices(\n d3.range(0, notesByMeasure.length),\n (a, b) => measureDistMatrix[a][b] === 0\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2496,"value":"// Don't waste space by having gaps between values\nmeasureRepeatedIndicesSimple = {\n const replaceMap = new Map(\n [...new Set(measureRepeatedIndices)].map((d, i) => [d, i])\n );\n return measureRepeatedIndices.map((d) => replaceMap.get(d));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2498,"value":"Plot.plot({\n width,\n height: 200,\n grid: true,\n x: { label: \"Temporal index\" },\n y: { label: \"1D DR\" },\n color: {\n type: \"categorical\",\n domain: measureRepeatedIndices.map((d, i) => i),\n range: measureColors\n },\n marks: [\n Plot.dot(measureRepeatedIndices, {\n x: (d, i) => i,\n y: (d, i) => measureDrPoints[i],\n // y: (d) => measureDrPoints[d],\n fill: (d) => d,\n title: (d, i) => `temporal: ${i}, minIndex: ${d}`\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2520,"value":"viewof recurencePlotCompactToggle = Inputs.toggle({ label: \"Compact?\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2096,"value":"Plot.plot({\n width,\n height: 200,\n grid: true,\n x: { label: \"Temporal index\" },\n y: { label: \"Min. index of identical measures\" },\n color: {\n type: \"categorical\",\n domain: measureRepeatedIndices.map((d, i) => i),\n range: measureColors\n },\n marks: [\n Plot.dot(\n recurencePlotCompactToggle\n ? measureRepeatedIndicesSimple\n : measureRepeatedIndices,\n {\n x: (d, i) => i,\n y: (d) => d,\n // y: (d) => measureDrPoints[d],\n fill: (d, i) => i,\n title: (d, i) => `temporal: ${i}, minIndex: ${d}`\n }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2405,"value":"measureRepHierarchy = immediateRepetitionHierarchy(measureRepeatedIndices)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2410,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2414,"value":"function treeGraph(tree, blockWidth = 30, colors) {\n const w = tree.length * blockWidth + 10;\n const h = (tree.depth + 1) * 30 + 100;\n const context = DOM.context2d(w, h);\n context.font = \"13px sans-serif\";\n context.textAlign = \"center\";\n\n // Reset\n context.fillStyle = \"white\";\n context.fillRect(0, 0, w, h);\n context.fillStyle = \"black\";\n\n // Draw tree\n const x = 10;\n const y = 10;\n drawTreeNode(context, tree, x, y, blockWidth, colors);\n\n const canvas = context.canvas;\n canvas.addEventListener(\"click\", (e) => {\n const selected = Math.floor(e.offsetX / measureRepHierarchy.length);\n canvas.value = 0;\n canvas.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2437,"value":"viewof repHierarchySize = Inputs.range([5, 120], {\n label: \"Zoom\",\n value: Math.floor((width - 10) / measureRepHierarchy.length),\n step: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2418,"value":"scrollXDiv(treeGraph(measureRepHierarchy, repHierarchySize, measureColors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1013,"value":"measureDrPoints = {\n // DR\n const druidMatrix = druid.Matrix.from(measureDistMatrix);\n let DR;\n DR = new druid.MDS(druidMatrix, 1, \"precomputed\").transform();\n\n // DR = new druid.SAMMON(druidMatrix).init(\"random\", druidMatrix).transform();\n // DR = new druid.SAMMON(druidMatrix, 0.1, 1, druid.euclidean);\n // DR.init(\"random\", druidMatrix);\n // DR = DR.transform();\n\n // DR = new druid.UMAP(druidMatrix, 15, 1, 1, 2, \"precomputed\");\n // DR = new druid.UMAP(druidMatrix, 15, 1, 10e-6, 2, \"precomputed\");\n // DR._X = druidMatrix;\n // DR = DR.transform();\n\n const points = DR.to2dArray.map((d) => d[0]);\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"// Get measure colors through DR\nmeasureColorsFromDr = {\n const points = measureDrPoints;\n // Map to color\n const scaleColor = d3.scaleLinear().domain(d3.extent(points)).range([0, 1]);\n const measureColors = points.map((d) => colorMap(scaleColor(d)));\n\n return measureColors;\n // Add transparency\n // return measureColors.map((d) => `rgba${d.slice(3, -1)}, 0.5)`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1086,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1089,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1122,"value":"measureColors = {\n // Otherwise map colors based on DR or clustering\n if (coloringSelect === \"DR\") {\n return measureColorsFromDr;\n } else {\n return measureColorsFromClustering.measureColors;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1403,"value":"**Sections.** When we have information about sections, we can use it to colorize sections based on similarity.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1410,"value":"sections = {\n const sections = [];\n for (const [startMeasure, name] of track.measureRehearsalMap.entries()) {\n sections.push({ name, startMeasure });\n }\n for (let index = 1; index < sections.length; ++index) {\n sections[index - 1].endMeasure = sections[index].startMeasure - 1;\n }\n // Last section ends with piece\n if (sections.length > 0) {\n const last = sections[sections.length - 1];\n last.endMeasure = track.measureIndices.length - 1;\n }\n // Add first empty section when first does not start at measure 0\n if (sections.length > 0 && sections[0].startMeasure > 0) {\n const first = {\n name: \"\",\n startMeasure: 0,\n endMeasure: sections[0].startMeasure - 1\n };\n sections.unshift(first);\n }\n // Add lengths to each\n for (const section of sections) {\n section.length = section.endMeasure - section.startMeasure + 1;\n }\n return sections;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1418,"value":"notesBySection = {\n // Get notes by measures\n const indices = sections.map((d) => d.startMeasure);\n const notesBySection = [];\n for (let index = 1; index < indices.length + 1; ++index) {\n const notes = notesByMeasure\n .slice(indices[index - 1], indices[index])\n .flat();\n notesBySection.push(notes);\n }\n return notesBySection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2939,"value":"sectionsPreprocessed = preprocessNoteCollections(notesBySection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1428,"value":"sectionDistMatrix = {\n let array = sectionsPreprocessed;\n\n // Get distance matrix between all measures\n const sectionDistMatrix = Array.from({ length: array.length }).map(() =>\n Array.from({ length: array.length })\n );\n for (const [index1, item1] of array.entries()) {\n for (let index2 = index1; index2 < array.length; index2++) {\n const item2 = array[index2];\n const distance = measureDistanceFunction(item1, item2);\n sectionDistMatrix[index1][index2] = distance;\n sectionDistMatrix[index2][index1] = distance;\n }\n }\n\n return sectionDistMatrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1433,"value":"sectionDrPoints = {\n try {\n // DR\n const druidMatrix = druid.Matrix.from(sectionDistMatrix);\n let DR;\n DR = new druid.MDS(druidMatrix, 1, \"precomputed\").transform();\n const points = DR.to2dArray.map((d) => d[0]);\n return points;\n } catch (e) {\n console.log(e);\n return [];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1438,"value":"sectionColors = {\n // Otherwise map colors based on DR or clustering\n if (coloringSelect === \"DR\") {\n // Get measure colors through DR\n const points = sectionDrPoints;\n // Map to color\n const scaleColor = d3.scaleLinear().domain(d3.extent(points)).range([0, 1]);\n return points.map((d) => colorMap(scaleColor(d)));\n } else {\n return measureColorsFromClustering.measureColors;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"**Harmonies.** Instead of measures, the principle above can also be applied to chords and harmonies (notes that start at the same time).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":804,"value":"harmonies = mvlib.Chords.detectChordsByExactStart(notesByMeasure.flat())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2943,"value":"harmoniesPreprocessed = preprocessNoteCollections(harmonies)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"harmonyDistMatrix = {\n let array = harmoniesPreprocessed;\n\n function distanceFunction(chord1, chord2) {\n return mvlib.Utils.jaccardIndex(chord1, chord2);\n }\n\n // Get distance matrix between all measures\n const matrix = Array.from({ length: array.length }).map(() =>\n Array.from({ length: array.length })\n );\n for (const [index1, item1] of array.entries()) {\n for (let index2 = index1; index2 < array.length; index2++) {\n const item2 = array[index2];\n const distance = distanceFunction(item1, item2);\n matrix[index1][index2] = distance;\n matrix[index2][index1] = distance;\n }\n }\n\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1716,"value":"// Get harmony colors through DR\nharmonyColors = {\n // DR\n const druidMatrix = druid.Matrix.from(harmonyDistMatrix);\n const DR = new druid.MDS(druidMatrix, 1, \"precomputed\").transform();\n const points = DR.to2dArray.map((d) => d[0]);\n\n // Map to color\n const scaleColor = d3.scaleLinear().domain(d3.extent(points)).range([0, 1]);\n const colors = points.map((d) => colorMap(scaleColor(d)));\n return colors;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"**Notes.** We can also color each note, assigning different colors to each of the twelve notes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":344,"value":"noteNames = [\"C\", \"C#\", \"D\", \"D#\", \"E\", \"F\", \"F#\", \"G\", \"G#\", \"A\", \"A#\", \"B\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":331,"value":"// noteColors = [\n// \"#ff0000\",\n// \"#ff4e00\",\n// \"#db7b00\",\n// \"#ffcc00\",\n// \"#e4ed00\",\n// \"#81d700\",\n// \"#00ffb4\",\n// \"#00ffea\",\n// \"#00baff\",\n// \"#3c00ff\",\n// \"#a800ff\",\n// \"#ff00fd\"\n// ]\n// noteColors = [\n// \"#C62828\",\n// \"#EF9A9A\",\n// \"#0D47A1\",\n// \"#90CAF9\",\n// \"#0097A7\",\n// \"#2E7D32\",\n// \"#AED581\",\n// \"#F57F17\",\n// \"#FFE0B2\",\n// \"#795548\",\n// \"#D7CCC8\",\n// \"#B0BEC5\"\n// ]\n// noteColors = d3.range(0, 12).map((d) => d3.interpolateRainbow(d / 12))\nnoteColors = d3.range(0, 12).map((d) => \"\" + colorMap(d / 12))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1846,"value":"**Other**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1694,"value":"function matrixVis(rows, cols, values, w = 300, h = 300) {\n const cellHeight = h / rows.length;\n const cellWidth = w / cols.length;\n\n const context = DOM.context2d(w, h);\n const canvas = context.canvas;\n\n context.fillStyle = \"white\";\n context.fillRect(0, 0, w, h);\n // Cells\n context.fillStyle = \"black\";\n for (const [r, row] of rows.entries()) {\n for (const [c, col] of cols.entries()) {\n const x = c * cellWidth;\n const y = r * cellHeight;\n if (values[r][c] === 0) {\n context.fillRect(x, y, cellWidth, cellHeight);\n }\n }\n }\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"**Data**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":403,"value":"piece = await uploadMusicPiece(fileUpload)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"track = trackSelect","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2550,"value":"mvlib.Drums.drumPitchReplacementMapMPS850","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2559,"value":"simpleDrumReplacementMap = new Map([\n // Crash\n [49, { y: 0, label: \"C1\" }],\n [55, { y: 0, label: \"C1\" }],\n [42, { y: 0, label: \"C2\" }],\n [57, { y: 0, label: \"C2\" }],\n // Ride\n [51, { y: 0, label: \"R\" }],\n [53, { y: 0, label: \"R\" }],\n [59, { y: 0, label: \"R\" }],\n // Hi-Hat\n [22, { y: 0, label: \"H\" }],\n [26, { y: 0, label: \"H\" }],\n [42, { y: 0, label: \"H\" }],\n [46, { y: 0, label: \"H\" }],\n [44, { y: 0, label: \"Hp\" }],\n // Toms\n [48, { y: 1, label: \"T1\" }],\n [50, { y: 1, label: \"T1\" }],\n [45, { y: 1, label: \"T2\" }],\n [47, { y: 1, label: \"T2\" }],\n [43, { y: 1, label: \"T3\" }],\n [58, { y: 1, label: \"T3\" }],\n [39, { y: 1, label: \"T3\" }],\n [41, { y: 1, label: \"T3\" }],\n // Snare\n [38, { y: 2, label: \"S\" }],\n [40, { y: 2, label: \"S\" }],\n // Bass\n [35, { y: 3, label: \"K\" }],\n [36, { y: 3, label: \"K\" }],\n [37, { y: 3, label: \"K\" }]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2863,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2728,"value":"function pitchToNoteLine(pitch) {\n const pitchLine = [-1, -1, -0.5, -0.5, 0, 0.5, 0.5, 1, 1, 1.5, 1.5, 2.0];\n const oct = Math.floor((pitch - 60) / 12);\n const line = pitchLine[pitch % 12];\n return oct * 3.5 + line;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2832,"value":"function drawPianoRollNotes(\n context,\n notes,\n mx,\n my,\n mw,\n mh,\n bgColor,\n colors,\n scaleY,\n showC\n) {\n // Draw background\n context.fillStyle = bgColor;\n context.fillRect(mx, my, mw, mh);\n const noteHeight = scaleY(1) - scaleY(0);\n // Draw C lines\n if (showC) {\n context.fillStyle = \"rgba(0, 0, 0, 0.15)\";\n for (let pitch = 12; pitch < 120; pitch += 12) {\n context.fillRect(mx, scaleY(pitch), mw, noteHeight);\n }\n }\n // Draw notes\n const scaleX = d3\n .scaleLinear()\n .domain([d3.min(notes, (d) => d.start), d3.max(notes, (d) => d.end)])\n .range([mx + 1, mx + mw - 2]);\n for (const note of notes) {\n const nx = scaleX(note.start);\n const ny = my + scaleY(note.pitch);\n const width = scaleX(note.end) - nx;\n context.fillStyle = \"#333\";\n if (getColorLightness(bgColor) < 50) {\n context.fillStyle = \"#eee\";\n }\n mvlib.Canvas.drawNoteTrapezoid(context, nx, ny, width, noteHeight, 0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2553,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2672,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2702,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2742,"value":"viewof measureSelect = Inputs.select(\n notesByMeasure.map((d, i) => [i, d]),\n {\n label: \"Measure\",\n format: ([i, d]) => `${i}: ${d.map((n) => n.name).join(\" \")}`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2873,"value":"measureSelect[1].map((d) => d.pitch)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2665,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3019,"value":"## Track Comparison","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3026,"value":"/**\n * Allows to sort notes by time, notes with equal start time will be sorted by\n * pitch.\n *\n * @param {Note} a a note to compare\n * @param {Note} b a note to compare\n * @returns {number} negative for smaller, positive for greater, 0 for euqal\n */\nfunction sortTimePitchComparator(a, b) {\n return a.start !== b.start ? a.start - b.start : a.pitch - b.pitch;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3028,"value":"/**\n * Returns the notes of a track grouped by their measure\n * @param {object} track MusicPiece Track\n * @returns {Note[][]} notes grouped by measures\n */\nfunction getMeasures(track) {\n // Get notes by measures\n const indices = [0, ...track.measureIndices];\n const allNotes = track.notes;\n const measures = [];\n for (let index = 1; index < indices.length; ++index) {\n const notes = allNotes.slice(indices[index - 1], indices[index]);\n // Sort notes uniformly\n notes.sort(sortTimePitchComparator);\n measures.push(notes);\n }\n return measures;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2886,"value":"### Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2997,"value":"function setOpacity(color, opacity = 1) {\n const { r, g, b } = d3.color(color).rgb();\n return `rgba(${r}, ${g}, ${b}, ${opacity})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2914,"value":"measureDistanceFunction = distanceFunction[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":74,"value":"// mvlib = require(\"musicvis-lib@latest\")\nmvlib = require(\"musicvis-lib@0.53.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"mvlib.getVersion()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"druid = require(\"@saehrimnir/druidjs@0.4.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":761,"value":"druid.version","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"import { uploadMusicPiece } from \"@fheyen/parsing-midi-and-musicxml\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":768,"value":"import { getColorLightness, scrollXDiv } from \"@fheyen/observable-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2401,"value":"import { immediateRepetitionHierarchy } from \"@fheyen/sequence-immediate-repetition-hierarchies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W41","stdlib":"1","titling":"auto"}} 2f:"$2e:body"