Big Time

{"name":"avery rhythm collider","description":"Dodge falling emojis in this fun and fast-paced game!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/m6dstpdkm81umsmagrqu","view_count":7,"fork_count":0,"expires_at":null,"created_at":"2024-12-14T22:45:36.368705Z","updated_at":"2024-12-14T22:45:36.368707Z","user_id":60,"status":"PRIVATE","parent_id":2111,"id":3183,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"code":{"script.js":"// Global variables to keep track of the playback state, the last valid frequency,\n// active synths, the toggle state of rhythm layers, and the search results\nlet isPlaying = false;\nlet lastValidFrequency = 110; // Default value since fundamental-frequency input is missing\nlet activeSynths = [];\nlet toggleLayers = {\n 'A': true,\n 'B': true,\n 'C': true,\n 'D': true\n};\nlet searchResults = new Map();\nlet searchedCombinations = new Map(); // Map to track searched combinations\nlet dotPositions = []; // Array to store positions and layers of each dot\nlet whiteNoise;\nlet noiseEnvelope;\nlet plotMultiplier = 1; // Default multiplier value\n\n// Function to create the white noise sound\nfunction createWhiteNoise() {\n whiteNoise = new Tone.Noise(\"white\").start();\n noiseEnvelope = new Tone.AmplitudeEnvelope({\n attack: 0.01,\n decay: 0.09,\n sustain: 0,\n release: 0.01\n }).toDestination();\n whiteNoise.connect(noiseEnvelope);\n console.log('White noise created');\n}\n\n// Full setup function with all event listeners\nfunction setup() {\n const canvas = createCanvas(800, 400);\n canvas.parent('graph-container');\n console.log('Canvas initialized and attached to graph-container.');\n\n const form = document.getElementById('rhythmic-form');\n form.addEventListener('submit', handleFormSubmit);\n\n const searchForm = document.getElementById('search-form');\n searchForm.addEventListener('submit', handleSearchFormSubmit);\n\n const inversePGForm = document.getElementById('inverse-pg-form');\n inversePGForm.addEventListener('submit', handleInversePGFormSubmit);\n\n const clearInversePGResultsButton = document.getElementById('clear-inverse-pg-results');\n clearInversePGResultsButton.addEventListener('click', clearInversePGResults);\n\n const specialScalesGridForm = document.getElementById('special-scales-grid-form');\n specialScalesGridForm.addEventListener('submit', handleSpecialScalesGridFormSubmit);\n\n const clearSpecialScalesGridResultsButton = document.getElementById('clear-special-scales-grid-results');\n clearSpecialScalesGridResultsButton.addEventListener('click', clearSpecialScalesGridResults);\n\n const searchFundamentalForm = document.getElementById('search-fundamental-form');\n searchFundamentalForm.addEventListener('submit', handleFundamentalSearchFormSubmit);\n\n const clearFundamentalSearchResultsButton = document.getElementById('clear-fundamental-search-results');\n clearFundamentalSearchResultsButton.addEventListener('click', clearFundamentalSearchResults);\n\n // Add event listeners to update the displayed values for sliders and input fields\n document.getElementById('max-search-time').addEventListener('input', updateSearchTimeValue);\n document.getElementById('max-inverse-pg-time').addEventListener('input', updateInversePGTimeValue);\n document.getElementById('max-grid-search-time').addEventListener('input', updateGridSearchTimeValue);\n document.getElementById('max-fundamental-search-time').addEventListener('input', (event) => {\n const searchTimeValue = event.target.value;\n document.getElementById('fundamental-search-time-value').textContent = searchTimeValue;\n });\n document.getElementById('tempo-input').addEventListener('keypress', handleTempoKeypress);\n document.getElementById('fundamental-frequency').addEventListener('keypress', handleFrequencyKeypress);\n document.getElementById('play-tone-row').addEventListener('click', togglePlayback);\n document.getElementById('volume-slider').addEventListener('input', updateVolume);\n\n // Add event listeners for the solo buttons\n document.getElementById('solo-layer-a').addEventListener('click', () => toggleSolo('a'));\n document.getElementById('solo-layer-b').addEventListener('click', () => toggleSolo('b'));\n document.getElementById('solo-layer-c').addEventListener('click', () => toggleSolo('c'));\n document.getElementById('solo-layer-d').addEventListener('click', () => toggleSolo('d'));\n\n // Add event listeners for the show/hide toggle buttons\n document.getElementById('toggle-composite-rhythm').addEventListener('click', toggleCompositeRhythm);\n document.getElementById('toggle-spaces-plot').addEventListener('click', toggleSpacesPlot);\n document.getElementById('toggle-plot').addEventListener('click', togglePlot);\n document.getElementById('toggle-ratios').addEventListener('click', toggleRatios);\n\n // Add event listeners to export tuning files\n document.getElementById('export-tun').addEventListener('click', exportAsTun);\n document.getElementById('export-scl').addEventListener('click', exportAsScl);\n\n // Add event listener for the clear search results button\n document.getElementById('clear-search-results').addEventListener('click', clearSearchResults);\n\n // Ensure that the event listener for exporting MIDI is added in the setup function\n document.getElementById('export-midi').addEventListener('click', exportToneRowAsMidi);\n\n // Ensure that the event listener for the new Export Info button is added\n document.getElementById('export-info').addEventListener('click', exportInfo);\n\n // Initialize ADSR and waveform control events\n initializeADSRControlEvents();\n initializeWaveformControlEvents();\n\n document.getElementById('plot-multiplier').addEventListener('input', (event) => {\n plotMultiplier = parseInt(event.target.value);\n document.getElementById('plot-multiplier-value').textContent = plotMultiplier;\n if (currentPlotType === 'spherical') {\n redrawPlot(); // Redraw the plot if the current plot type is spherical\n }\n });\n\n\n // Initialize limiter with the current value of the volume slider\n const volumeValue = parseInt(document.getElementById('volume-slider').value);\n limiter = new Tone.Limiter(volumeValue === -100 ? -Infinity : volumeValue).toDestination();\n\n isAnimating = true; // Start animating\n\n noLoop();\n}\n\nfunction addEventListenersSafely(id, event, handler) {\n const element = document.getElementById(id);\n if (element) {\n element.addEventListener(event, handler);\n } else {\n console.warn(`Element with id '${id}' not found.`);\n }\n}\n\nfunction handleLayerToggle(event) {\n const layer = event.target.id.split('-')[2].toUpperCase();\n toggleLayers[layer] = event.target.checked;\n console.log(`Layer ${layer} toggled ${toggleLayers[layer] ? 'on' : 'off'}`);\n}\n\nfunction updateSearchTimeValue(event) {\n const searchTimeValue = event.target.value;\n document.getElementById('search-time-value').textContent = searchTimeValue;\n}\n\nfunction updateTempoValue(event) {\n let tempoValue = parseInt(event.target.value);\n\n // Ensure the tempo value is at least 1 and at most 600\n if (tempoValue < 1) {\n tempoValue = 1;\n event.target.value = 1; // Update the input field value to 1\n } else if (tempoValue > 600) {\n tempoValue = 600;\n event.target.value = 600; // Update the input field value to 600\n }\n\n document.getElementById('tempo-value').textContent = tempoValue;\n Tone.Transport.bpm.value = 60 / tempoValue; // Update BPM in real-time\n}\n\nfunction handleTempoKeypress(event) {\n if (event.key === 'Enter') {\n event.preventDefault();\n updateTempoValue(event);\n }\n}\n\nfunction handleFrequencyKeypress(event) {\n if (event.key === 'Enter') {\n event.preventDefault();\n updateFrequencyValue(event);\n }\n}\n\nfunction updateFrequencyValue(event) {\n const inputElement = event.target;\n let frequencyValue = parseFloat(inputElement.value);\n const minFrequency = 55;\n const maxFrequency = 3520;\n\n // Ensure the value is within the specified range\n if (frequencyValue < minFrequency) {\n frequencyValue = minFrequency;\n } else if (frequencyValue > maxFrequency) {\n frequencyValue = maxFrequency;\n }\n\n document.getElementById('frequency-value').textContent = frequencyValue;\n inputElement.value = frequencyValue; // Update the input field value\n lastValidFrequency = frequencyValue; // Update the last valid frequency\n}\n\n// Toggle functions for Composite Rhythm and Spaces Plot\nfunction toggleCompositeRhythm() {\n const compositeRhythmDiv = document.getElementById('composite-rhythm');\n const toggleButton = document.getElementById('toggle-composite-rhythm');\n if (compositeRhythmDiv.style.display === 'none') {\n compositeRhythmDiv.style.display = 'block';\n toggleButton.textContent = 'Hide Composite Rhythm';\n } else {\n compositeRhythmDiv.style.display = 'none';\n toggleButton.textContent = 'Show Composite Rhythm';\n }\n}\n\nfunction toggleSpacesPlot() {\n const spacesPlotDiv = document.getElementById('spaces-plot');\n const toggleButton = document.getElementById('toggle-spaces-plot');\n if (spacesPlotDiv.style.display === 'none' || spacesPlotDiv.style.display === '') {\n spacesPlotDiv.style.display = 'block';\n toggleButton.textContent = 'Hide Spaces Plot';\n } else {\n spacesPlotDiv.style.display = 'none';\n toggleButton.textContent = 'Show Spaces Plot';\n }\n}\n\n// Function to toggle the visibility of the ratios table\nfunction toggleRatios() {\n const ratiosDiv = document.getElementById('ratios');\n const toggleButton = document.getElementById('toggle-ratios');\n if (ratiosDiv.style.display === 'none') {\n ratiosDiv.style.display = 'block';\n toggleButton.textContent = 'Hide Scale Chart';\n } else {\n ratiosDiv.style.display = 'none';\n toggleButton.textContent = 'Show Scale Chart';\n }\n}\n\nfunction getRatios() {\n const ratiosDiv = document.getElementById('ratios');\n const ratioElements = ratiosDiv.querySelectorAll('tr > td:first-child');\n const ratios = Array.from(ratioElements).map(el => el.textContent);\n return ratios;\n}\n\n// Add this event listener to setup function to initialize the toggle button\ndocument.getElementById('toggle-ratios').addEventListener('click', toggleRatios);\n\n// Function to calculate the Greatest Common Divisor (GCD) using the Euclidean algorithm\nfunction gcd(a, b) {\n a = Math.abs(a);\n b = Math.abs(b);\n while (b) {\n [a, b] = [b, a % b];\n }\n return a;\n}\n\n// Function to calculate the Least Common Multiple (LCM) of two numbers\nfunction lcm(a, b) {\n return (a * b) / gcd(a, b);\n}\n\n// Function to calculate the LCM of four numbers\nfunction calculateTotalLCM(a, b, c, d) {\n const lcmAB = lcm(a, b);\n const lcmABC = lcm(lcmAB, c);\n return lcm(lcmABC, d);\n}\n\n// Function to handle form submission and plot generation\n// Function to handle form submission and plot generation\nfunction handleFormSubmit(event) {\n event.preventDefault();\n const rhythmA = parseInt(document.getElementById('rhythm-a').value);\n const rhythmB = parseInt(document.getElementById('rhythm-b').value);\n const rhythmC = parseInt(document.getElementById('rhythm-c').value);\n const rhythmD = parseInt(document.getElementById('rhythm-d').value);\n\n const totalLCM = calculateTotalLCM(rhythmA, rhythmB, rhythmC, rhythmD);\n\n console.log('Rhythmic Values:', { rhythmA, rhythmB, rhythmC, rhythmD });\n console.log('Total LCM:', totalLCM);\n\n displayTotalLCM(totalLCM);\n\n const compositeRhythm = createCompositeRhythm(totalLCM, [rhythmA, rhythmB, rhythmC, rhythmD]);\n console.log('Composite Rhythm:', compositeRhythm);\n displayCompositeRhythm(compositeRhythm);\n\n const spacesPlot = calculateSpacesPlot(compositeRhythm);\n console.log('Spaces Plot:', spacesPlot);\n displaySpacesPlot(spacesPlot);\n\n const spacesPlotByLayer = calculateSpacesPlotByLayer(compositeRhythm, [rhythmA, rhythmB, rhythmC, rhythmD]);\n\n const scaleLength = 12; // Assuming a 12-tone scale for this example\n const midiNotesByLayer = convertSpacesPlotToMidiNotes(spacesPlotByLayer, scaleLength);\n console.log('MIDI Notes by Layer:', midiNotesByLayer);\n\n console.log('Spaces Plot by Layer:', spacesPlotByLayer);\n\n const { sortedRatios, intervalDistances, avgDeviation, deviations } = convertSpacesPlotToRatiosAndIntervals(spacesPlot);\n console.log('Ratios:', sortedRatios);\n\n displayRatios(sortedRatios);\n\n const isSpecialScale = checkSpecialScale(sortedRatios);\n displaySpecialScaleIndicator(isSpecialScale);\n\n if (spacesPlot && spacesPlot.length > 0) {\n console.log('Drawing Spaces Plot:', spacesPlot);\n redrawPlot(); // Ensure the selected plot type is displayed\n } else {\n console.error('No valid spaces plot available to draw.');\n }\n}\n\n// Function to display the calculated LCM\nfunction displayTotalLCM(totalLCM) {\n let resultDiv = document.getElementById('result');\n resultDiv.innerHTML = `

Grid: ${totalLCM}

`;\n}\n\n// Function to create the composite rhythm with layer information\nfunction createCompositeRhythm(grid, layers) {\n const compositeRhythm = new Set();\n\n layers.forEach((layer) => {\n const stepSize = grid / layer;\n for (let i = 0; i < layer; i++) {\n compositeRhythm.add(i * stepSize);\n }\n });\n\n return Array.from(compositeRhythm).sort((a, b) => a - b); // Sort the composite rhythm in ascending order\n}\n\n// Function to calculate the spaces plot\nfunction calculateSpacesPlot(compositeRhythm) {\n const spacesPlot = [];\n for (let i = 1; i < compositeRhythm.length; i++) {\n spacesPlot.push(compositeRhythm[i] - compositeRhythm[i - 1]);\n }\n // Append the first value to the end to account for the distance to the beginning of the next cycle\n if (spacesPlot.length > 0) {\n spacesPlot.push(spacesPlot[0]);\n }\n return spacesPlot;\n}\n\n// Function to display the composite rhythm\nfunction displayCompositeRhythm(compositeRhythm) {\n let rhythmDiv = document.getElementById('composite-rhythm');\n rhythmDiv.innerHTML = `

Composite Rhythm: ${compositeRhythm.join(', ')}

`;\n}\n\n// Function to display the spaces plot\nfunction displaySpacesPlot(spacesPlot) {\n let spacesDiv = document.getElementById('spaces-plot');\n spacesDiv.innerHTML = `

Spaces Plot: ${spacesPlot.join(', ')}

`;\n console.log('Displayed Spaces Plot:', spacesPlot);\n}\n\n// Function to simplify a fraction\nfunction simplifyFraction(numerator, denominator) {\n const divisor = gcd(numerator, denominator);\n return [numerator / divisor, denominator / divisor];\n}\n\n// Function to convert the spaces_plot to ratios and calculate interval distances\nfunction convertSpacesPlotToRatiosAndIntervals(spacesPlot) {\n if (!spacesPlot || spacesPlot.length === 0) {\n console.error('Spaces plot is not defined or empty');\n return { sortedRatios: [], intervalDistances: [], avgDeviation: 0, deviations: [] };\n }\n\n const fundamental = spacesPlot[0];\n const ratios = new Set([\"1/1\"]); // Always include 1/1\n let centsValues = [0]; // Array to store all cents values\n\n spacesPlot.forEach(space => {\n if (space === fundamental) return;\n let denominator = space;\n while (denominator <= fundamental) {\n const ratio = fundamental / denominator;\n if (ratio > 1 && ratio <= 2) {\n const [simplifiedNumerator, simplifiedDenominator] = simplifyFraction(fundamental, denominator);\n const ratioStr = `${simplifiedNumerator}/${simplifiedDenominator}`;\n ratios.add(ratioStr);\n const centsValue = ratioToCents(simplifiedNumerator, simplifiedDenominator);\n centsValues.push(centsValue);\n }\n denominator *= 2;\n }\n });\n\n // Sort and normalize the cents values to the same octave\n centsValues = centsValues.map(c => c % 1200).sort((a, b) => a - b);\n\n // Calculate interval distances and deviations from 100 cents\n const intervalDistances = [];\n const deviations = [];\n\n // For deviation calculation, ensure we have exactly 13 values including the octave\n const deviationCentsValues = [...new Set(centsValues)];\n deviationCentsValues.push(1200);\n\n if (deviationCentsValues.length === 13) {\n for (let i = 1; i < deviationCentsValues.length; i++) {\n const intervalDistance = deviationCentsValues[i] - deviationCentsValues[i - 1];\n intervalDistances.push(intervalDistance);\n const deviation = Math.abs(100 - intervalDistance);\n deviations.push(deviation);\n }\n }\n\n // Calculate average deviation\n const totalDeviation = deviations.reduce((sum, deviation) => sum + deviation, 0);\n const avgDeviation = deviations.length > 0 ? totalDeviation / deviations.length : 0;\n\n const sortedRatios = Array.from(ratios).sort((a, b) => {\n const [numA, denA] = a.split('/').map(Number);\n const [numB, denB] = b.split('/').map(Number);\n return (numA / denA) - (numB / denB);\n });\n\n return { sortedRatios, intervalDistances, avgDeviation, deviations };\n}\n\n// Function to convert a ratio to cents\nfunction ratioToCents(numerator, denominator) {\n return 1200 * Math.log2(numerator / denominator);\n}\n\n// Function to convert the spaces_plot to ratios\nfunction convertSpacesPlotToRatios(spacesPlot) {\n const result = convertSpacesPlotToRatiosAndIntervals(spacesPlot);\n return result.sortedRatios;\n}\n\n// Function to display the ratios and their cents values in a table\nfunction displayRatios(ratios) {\n let ratiosDiv = document.getElementById('ratios');\n ratiosDiv.innerHTML = '';\n\n if (!ratios || ratios.length === 0) {\n ratiosDiv.innerHTML = '

No ratios available.

';\n return;\n }\n\n // Count the number of unique tones\n const uniqueTones = new Set(ratios.filter(ratio => ratio !== \"2/1\")).size;\n\n let tableHTML = `

Pitches: ${uniqueTones}

`;\n tableHTML += `\n \n \n \n `;\n\n ratios.forEach(ratio => {\n const [numerator, denominator] = ratio.split('/').map(Number);\n const cents = ratioToCents(numerator, denominator).toFixed(2);\n tableHTML += `\n \n \n `;\n });\n\n tableHTML += `

Ratio	Cents
${ratio}	${cents}

`;\n ratiosDiv.innerHTML = tableHTML;\n}\n\nfunction addLayerToggles() {\n const ratiosDiv = document.getElementById('ratios');\n const toggleButtons = document.createElement('div');\n toggleButtons.id = 'layer-toggle-buttons';\n ['A', 'B', 'C', 'D'].forEach(layer => {\n const button = document.createElement('button');\n button.textContent = `Toggle Layer ${layer}`;\n button.id = `toggle-layer-${layer}`;\n button.onclick = () => toggleLayerLights(layer);\n toggleButtons.appendChild(button);\n });\n ratiosDiv.insertBefore(toggleButtons, ratiosDiv.firstChild);\n}\n\nfunction toggleLayerLights(layer) {\n const rows = document.querySelectorAll(`#ratios table tr`);\n rows.forEach(row => {\n row.classList.toggle(`hide-layer-${layer}`);\n });\n}\n\n// Function to draw the spaces plot as a dot graph\nfunction drawSpacesPlotGraph(spacesPlot) {\n clear(); // Clear the previous drawing\n background(255); // White background\n\n dotPositions = []; // Clear previous positions\n\n if (!spacesPlot || spacesPlot.length === 0) {\n console.error('No valid spaces plot available to draw.');\n return;\n }\n\n console.log('Drawing Graph for Spaces Plot:', spacesPlot);\n\n const maxPoints = 200000; // Set a maximum number of points to display\n let sampledPlot = spacesPlot;\n\n if (spacesPlot.length > maxPoints) {\n const step = Math.ceil(spacesPlot.length / maxPoints);\n sampledPlot = spacesPlot.filter((_, index) => index % step === 0);\n }\n\n stroke(0); // Black dots\n fill(0);\n\n const maxVal = Math.max(...sampledPlot);\n const xSpacing = width / sampledPlot.length;\n const yScale = (height - 20) / maxVal;\n\n // Calculate dot size based on the number of dots\n const dotSize = Math.max(2, Math.min(20, 400 / sampledPlot.length));\n\n for (let i = 0; i < sampledPlot.length; i++) {\n const x = i * xSpacing + xSpacing / 2;\n const y = height - sampledPlot[i] * yScale;\n ellipse(x, y, dotSize, dotSize); // Draw a dot with dynamic size\n dotPositions.push({ x, y, size: dotSize, value: sampledPlot[i], index: i }); // Store the position, size, value, and index\n }\n}\n\nfunction drawDot(x, y, size, index) {\n ellipse(x, y, size, size); // Draw dot\n const dotElement = document.querySelector(`.dot-${index}`);\n if (dotElement) {\n dotElement.style.left = `${x - size / 2}px`;\n dotElement.style.top = `${y - size / 2}px`;\n } else {\n const newDot = document.createElement('div');\n newDot.className = `dot dot-${index}`;\n newDot.style.position = 'absolute';\n newDot.style.left = `${x - size / 2}px`;\n newDot.style.top = `${y - size / 2}px`;\n newDot.style.width = `${size}px`;\n newDot.style.height = `${size}px`;\n newDot.style.backgroundColor = 'black';\n newDot.style.borderRadius = '50%';\n document.getElementById('graph-container').appendChild(newDot);\n }\n}\n\n// Function to toggle the visibility of the plot\nlet currentPlotType = 'linear'; // Track the current plot type\n\nfunction togglePlot() {\n const graphContainer = document.getElementById('graph-container');\n const toggleButton = document.getElementById('toggle-plot');\n\n if (graphContainer.style.display === 'none' || graphContainer.style.display === '') {\n graphContainer.style.display = 'block';\n toggleButton.textContent = 'Hide Plot';\n\n redrawPlot();\n } else {\n graphContainer.style.display = 'none';\n toggleButton.textContent = 'Show Plot';\n }\n}\n\nfunction switchPlotType(newType) {\n currentPlotType = newType;\n redrawPlot();\n}\n\nfunction redrawPlot() {\n const spacesPlotElement = document.getElementById('spaces-plot');\n if (spacesPlotElement && spacesPlotElement.textContent) {\n const spacesPlot = spacesPlotElement.textContent.split(': ')[1]?.split(', ').map(Number);\n if (spacesPlot && spacesPlot.length > 0) {\n console.log('Redrawing spaces plot:', spacesPlot);\n\n // Determine if the current plot type is 3D\n let is3DPlot = (currentPlotType === 'spherical');\n if (is3DPlot && !isWebGLContext()) {\n // Remove the existing canvas and create a new 3D canvas\n removeCanvas();\n createCanvas(windowWidth, windowHeight, WEBGL).parent('graph-container');\n } else if (!is3DPlot && isWebGLContext()) {\n // Remove the existing canvas and create a new 2D canvas\n removeCanvas();\n createCanvas(windowWidth, windowHeight).parent('graph-container');\n }\n\n // Clear the canvas and set the background color\n clear();\n background(255); // White background\n\n // Draw the appropriate plot based on the current plot type\n if (currentPlotType === 'linear') {\n drawSpacesPlotGraph(spacesPlot); // Use the original linear plot function\n } else if (currentPlotType === 'circular') {\n drawCircularPlot(spacesPlot); // Use the original circular plot function\n } else if (currentPlotType === 'spherical') {\n drawSphericalPlot(spacesPlot); // Use the new spherical plot function\n } else if (currentPlotType === 'bar') {\n drawBarGraph(spacesPlot); // Use the bar graph function\n }\n } else {\n console.error('No valid spaces plot available to draw.');\n }\n }\n}\n\nfunction isWebGLContext() {\n return _renderer.drawingContext instanceof WebGLRenderingContext;\n}\n\nfunction removeCanvas() {\n // Remove the existing canvas if it exists\n if (canvas) {\n canvas.remove();\n }\n}\n\n// Special Scale Searches\n\n// Utility function to sort the table based on a given column index\nfunction sortTable(tableId, columnIndex) {\n const table = document.getElementById(tableId);\n const rows = Array.from(table.getElementsByTagName('tr')).slice(1);\n const isNumericColumn = true; // All columns are treated as numeric for proper sorting\n const currentSortOrder = table.getAttribute(`data-sort-${columnIndex}`) || 'asc';\n const newSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';\n\n rows.sort((rowA, rowB) => {\n const cellA = rowA.getElementsByTagName('td')[columnIndex].innerText;\n const cellB = rowB.getElementsByTagName('td')[columnIndex].innerText;\n\n const numA = parseFloat(cellA);\n const numB = parseFloat(cellB);\n\n if (numA === numB && columnIndex === 0) {\n // If there is a tie in Layer A, compare subsequent layers\n const layersA = rowA.getElementsByTagName('td')[0].innerText.split(':').map(Number);\n const layersB = rowB.getElementsByTagName('td')[0].innerText.split(':').map(Number);\n\n for (let i = 1; i < layersA.length; i++) {\n if (layersA[i] !== layersB[i]) {\n return newSortOrder === 'asc' ? layersA[i] - layersB[i] : layersB[i] - layersA[i];\n }\n }\n }\n\n return newSortOrder === 'asc' ? numA - numB : numB - numA;\n });\n\n // Append sorted rows to the table\n rows.forEach(row => table.appendChild(row));\n\n // Update sort order attribute\n table.setAttribute(`data-sort-${columnIndex}`, newSortOrder);\n}\n\n// Function to calculate and display the special scale search results\n\nfunction getRangeInputValue(inputId) {\n const rangeInput = document.getElementById(inputId).value;\n const rangeValue = parseFloat(rangeInput);\n return isNaN(rangeValue) || rangeValue < 1 ? Infinity : rangeValue;\n}\n\nfunction calculateRange(layers) {\n const sortedLayers = layers.sort((a, b) => b - a); // Sort layers in descending order\n return sortedLayers[0] / sortedLayers[sortedLayers.length - 1]; // Calculate the range\n}\n\nfunction handleSearchFormSubmit(event) {\n event.preventDefault();\n\n const searchRhythmLayer = document.getElementById('search-rhythm-layer').value;\n const searchRhythmValue = parseInt(document.getElementById('search-rhythm-value').value);\n const maxSearchTime = parseInt(document.getElementById('max-search-time').value);\n const rangeValue = getRangeInputValue('range-input');\n\n if (isNaN(searchRhythmValue) || searchRhythmValue < 1) {\n console.error('Invalid input for searchRhythmValue');\n return;\n }\n\n console.log(`Starting search with Rhythm ${searchRhythmLayer}:`, searchRhythmValue, 'Max Search Time:', maxSearchTime);\n const startTime = Date.now();\n const maxGridValue = 999999999; // Define a maximum grid value\n\n // Iterate over all possible combinations of layers\n for (let a = searchRhythmLayer === 'A' ? searchRhythmValue : 1; a <= maxGridValue; a++) {\n if (searchRhythmLayer === 'A' && a !== searchRhythmValue) continue;\n for (let b = searchRhythmLayer === 'B' ? searchRhythmValue : 1; b < a; b++) {\n if (searchRhythmLayer === 'B' && b !== searchRhythmValue) continue;\n for (let c = searchRhythmLayer === 'C' ? searchRhythmValue : 1; c < b; c++) {\n if (searchRhythmLayer === 'C' && c !== searchRhythmValue) continue;\n for (let d = searchRhythmLayer === 'D' ? searchRhythmValue : 1; d < c; d++) {\n if (searchRhythmLayer === 'D' && d !== searchRhythmValue) continue;\n\n if ((Date.now() - startTime) > maxSearchTime) {\n console.warn('Search terminated early due to time limit.');\n displaySearchResults(Array.from(searchResults.entries()));\n return;\n }\n\n const layers = [a, b, c, d].filter(x => x > 1);\n\n if (layers.length < 2) continue;\n\n const range = calculateRange(layers);\n if (range > rangeValue) continue; // Skip results that exceed the specified range\n\n const combinationKey = layers.join(':');\n if (searchedCombinations.has(combinationKey)) continue;\n searchedCombinations.set(combinationKey, true); // Use Map instead of Set\n\n const gridSize = layers.reduce((acc, layer) => lcm(acc, layer), 1);\n if (gridSize > maxGridValue) continue; // Ensure grid size is within the limit\n\n // Check for duplicates and direct factors\n const hasRedundantLayers = layers.some((layer, idx) =>\n layers.some((otherLayer, otherIdx) =>\n idx !== otherIdx && (otherLayer % layer === 0)\n )\n );\n if (hasRedundantLayers) continue;\n\n // Check if layers share an unsimplified GCF\n const commonDivisor = layers.reduce((acc, layer) => gcd(acc, layer), layers[0]);\n if (commonDivisor > 1) continue;\n\n const compositeRhythm = createCompositeRhythm(gridSize, layers);\n const spacesPlot = calculateSpacesPlot(compositeRhythm);\n const { sortedRatios, avgDeviation } = convertSpacesPlotToRatiosAndIntervals(spacesPlot);\n\n if (checkSpecialScale(sortedRatios)) {\n const scaleStr = layers.join(':');\n searchResults.set(scaleStr, { ratios: sortedRatios, avgDeviation });\n console.log(`Added scale: ${scaleStr}`);\n }\n }\n }\n }\n }\n\n console.log('Finished search, found results:', Array.from(searchResults.keys()));\n displaySearchResults(Array.from(searchResults.entries()));\n}\n\nfunction displaySearchResults(results) {\n const resultsDiv = document.getElementById('search-results');\n resultsDiv.innerHTML = '';\n\n if (results.length === 0) {\n resultsDiv.innerHTML = '

No special scales found.

';\n return;\n }\n\n // Compute the grid size, layer sum, and range for each result\n const resultsWithDetails = results.map(([result, { ratios, avgDeviation }]) => {\n const layers = result.split(':').map(Number);\n const gridSize = layers.reduce((acc, layer) => lcm(acc, layer), 1);\n const layerSum = layers.reduce((sum, layer) => sum + layer, 0);\n const range = calculateRange(layers);\n return { result, layers, gridSize, avgDeviation, layerSum, range };\n });\n\n // Sort results by grid size\n resultsWithDetails.sort((a, b) => a.gridSize - b.gridSize);\n\n let resultsHTML = `\n \n \n \n \n \n \n \n `;\n resultsWithDetails.forEach(({ result, gridSize, avgDeviation, layerSum, range }) => {\n const uniqueId = result.replace(/:/g, '-'); // Create a unique ID by replacing colons\n resultsHTML += `\n \n \n \n \n \n \n `;\n });\n resultsHTML += '

Results: ${resultsWithDetails.length} ▼	Layer Sum ▼	Grid Size ▼	Avg Dev (cents) ▼	Range ▼	Actions
${result}	${layerSum}	${gridSize}	${avgDeviation.toFixed(2)}	${range.toFixed(2)}	\n \n

';\n resultsDiv.innerHTML = resultsHTML;\n}\n\nfunction copyAndSubmit(resultId) {\n const result = resultId.replace(/-/g, ':'); // Convert the ID back to the original result string\n const searchResult = searchResults.get(result);\n if (!searchResult) {\n console.error('Result not found:', result);\n return;\n }\n\n const layers = result.split(':').map(Number);\n\n // Populate the input fields\n document.getElementById('rhythm-a').value = layers[0] || 1;\n document.getElementById('rhythm-b').value = layers[1] || 1;\n document.getElementById('rhythm-c').value = layers[2] || 1;\n document.getElementById('rhythm-d').value = layers[3] || 1;\n\n // Programmatically submit the form\n const form = document.getElementById('rhythmic-form');\n form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));\n}\n\nfunction clearSearchResults() {\n searchResults.clear();\n searchedCombinations.clear(); // Clear the searched combinations map\n let resultsDiv = document.getElementById('search-results');\n resultsDiv.innerHTML = ''; // Clear the displayed results\n}\n\n// Function to check if the scale has exactly 12 unique tones excluding 2/1\nfunction checkSpecialScale(ratios) {\n const uniqueTones = new Set(ratios);\n uniqueTones.delete(\"2/1\"); // Exclude the octave\n return uniqueTones.size === 12;\n}\n\n// Function to display the special scale indicator (black star)\nfunction displaySpecialScaleIndicator(isSpecialScale) {\n let starDiv = document.getElementById('special-scale-indicator');\n starDiv.innerHTML = isSpecialScale ? `

★

` : '';\n}\n\nlet inversePGResults = new Map();\n\nfunction handleInversePGFormSubmit(event) {\n event.preventDefault();\n const layerA = parseInt(document.getElementById('inverse-pg-a').value);\n const maxSearchTime = parseInt(document.getElementById('max-inverse-pg-time').value);\n const rangeValue = getRangeInputValue('range-input-inverse');\n\n if (isNaN(layerA) || layerA < 1) {\n console.error('Invalid input for Layer A');\n return;\n }\n\n console.log('Starting Inverse PG search with Layer A:', layerA, 'Max Search Time:', maxSearchTime);\n const startTime = Date.now();\n inversePGResults.clear(); // Clear the previous results\n\n // Iterate over possible combinations for Inverse PG\n for (let b = 1; b <= layerA; b++) {\n for (let c = 1; c <= layerA; c++) {\n for (let d = 1; d <= layerA; d++) {\n if ((Date.now() - startTime) > maxSearchTime) {\n console.warn('Inverse PG search terminated early due to time limit.');\n displayInversePGResults(Array.from(inversePGResults.entries()));\n return;\n }\n\n const layers = [layerA, b, c, d].filter(x => x !== 1).sort((a, b) => b - a);\n if (layers.length !== 4) continue; // Ensure exactly 4 layers\n\n const range = calculateRange(layers);\n if (range > rangeValue) continue; // Skip results that exceed the specified range\n\n // Check for duplicate layers\n if (new Set(layers).size !== layers.length) continue;\n\n // Ensure no layer is a factor of another layer\n let hasFactor = false;\n for (let i = 0; i < layers.length; i++) {\n for (let j = 0; j < layers.length; j++) {\n if (i !== j && layers[j] % layers[i] === 0) {\n hasFactor = true;\n break;\n }\n }\n if (hasFactor) break;\n }\n if (hasFactor) continue;\n\n const grid = calculateTotalLCM(...layers);\n\n // Check the refined conditions\n if ((grid / layerA === d) && (grid / d === layerA) && (grid / b === c) && (grid / c === b)) {\n const compositeRhythm = createCompositeRhythm(grid, layers);\n const spacesPlot = calculateSpacesPlot(compositeRhythm);\n const { sortedRatios } = convertSpacesPlotToRatiosAndIntervals(spacesPlot);\n\n const uniqueTones = new Set(sortedRatios);\n uniqueTones.delete(\"2/1\"); // Exclude the octave\n inversePGResults.set(layers.join(':'), { ratios: sortedRatios, uniqueTones: uniqueTones.size, grid });\n console.log(`Added inverse PG: ${layers.join(':')}`); // Log when a result is added\n }\n }\n }\n }\n\n console.log('Finished Inverse PG search, found results:', Array.from(inversePGResults.keys()));\n displayInversePGResults(Array.from(inversePGResults.entries()));\n}\n\nfunction clearInversePGResults() {\n const resultsDiv = document.getElementById('inverse-pg-results');\n resultsDiv.innerHTML = ''; // Clear the displayed results\n inversePGResults.clear(); // Clear the search results set\n searchedCombinations.clear(); // Clear the searched combinations set\n}\n\n\nfunction copyAndSubmitInversePG(resultId) {\n const result = resultId.replace(/-/g, ':'); // Convert the ID back to the original result string\n const searchResult = inversePGResults.get(result);\n if (!searchResult) {\n console.error('Result not found:', result);\n return;\n }\n\n const layers = result.split(':').map(Number);\n\n // Populate the input fields\n document.getElementById('rhythm-a').value = layers[0] || 1;\n document.getElementById('rhythm-b').value = layers[1] || 1;\n document.getElementById('rhythm-c').value = layers[2] || 1;\n document.getElementById('rhythm-d').value = layers[3] || 1;\n\n // Programmatically submit the form\n const form = document.getElementById('rhythmic-form');\n form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));\n}\n\nfunction displayInversePGResults(results) {\n const resultsDiv = document.getElementById('inverse-pg-results');\n resultsDiv.innerHTML = '';\n\n if (results.length === 0) {\n resultsDiv.innerHTML = '

No scales found.

';\n return;\n }\n\n // Sort results first by unique tones (descending), then by grid size (ascending)\n results.sort((a, b) => {\n const uniqueTonesA = a[1].uniqueTones;\n const uniqueTonesB = b[1].uniqueTones;\n const gridA = a[1].grid;\n const gridB = b[1].grid;\n\n if (uniqueTonesA === uniqueTonesB) {\n return gridA - gridB;\n }\n return uniqueTonesB - uniqueTonesA; // Sort descending by unique tones\n });\n\n const resultsWithDetails = results.map(([result, { uniqueTones, grid }]) => {\n const layers = result.split(':').map(Number);\n const layerSum = layers.reduce((sum, layer) => sum + layer, 0);\n const range = calculateRange(layers);\n return { result, uniqueTones, grid, layerSum, range };\n });\n\n let resultsHTML = `\n \n \n \n \n \n \n \n `;\n resultsWithDetails.forEach(({ result, uniqueTones, grid, layerSum, range }) => {\n const uniqueId = result.replace(/:/g, '-'); // Create a unique ID by replacing colons\n resultsHTML += `\n \n \n \n \n \n \n `;\n });\n resultsHTML += '

Results: ${results.length} ▼	Layer Sum ▼	Unique Tones ▼	Grid Size ▼	Range ▼	Actions
${result}	${layerSum}	${uniqueTones}	${grid}	${range.toFixed(2)}	\n \n

';\n resultsDiv.innerHTML = resultsHTML;\n}\n\nfunction updateInversePGTimeValue(event) {\n const inversePGTimeValue = event.target.value;\n document.getElementById('inverse-pg-time-value').textContent = inversePGTimeValue;\n}\n\nfunction handleSpecialScalesGridFormSubmit(event) {\n event.preventDefault();\n const gridValue = parseInt(document.getElementById('grid-value').value);\n const maxSearchTime = parseInt(document.getElementById('max-grid-search-time').value);\n const rangeValue = getRangeInputValue('range-input-grid'); // Get the range input value\n\n if (isNaN(gridValue) || gridValue < 1) {\n console.error('Invalid input for Grid Value');\n return;\n }\n\n console.log('Starting Special Scales by Grid search with Grid Value:', gridValue, 'Max Search Time:', maxSearchTime);\n const startTime = Date.now();\n\n // Find all factors of the grid value\n const factors = [];\n for (let i = 1; i <= gridValue; i++) {\n if (gridValue % i === 0) {\n factors.push(i);\n }\n }\n console.log('Factors of grid value:', factors);\n\n // Iterate over combinations of factors for Special Scales by Grid\n for (let i = 0; i < factors.length; i++) {\n for (let j = i; j < factors.length; j++) {\n for (let k = j; k < factors.length; k++) {\n for (let l = k; l < factors.length; l++) {\n if ((Date.now() - startTime) > maxSearchTime) {\n console.warn('Special Scales by Grid search terminated early due to time limit.');\n displaySpecialScalesGridResults(Array.from(searchResults.entries()));\n return;\n }\n\n const layersList = [\n [factors[i], factors[j]],\n [factors[i], factors[j], factors[k]],\n [factors[i], factors[j], factors[k], factors[l]]\n ];\n\n for (const layers of layersList) {\n const nonOneLayers = layers.filter(x => x !== 1).sort((a, b) => b - a);\n if (nonOneLayers.length < 2) continue;\n\n const range = calculateRange(nonOneLayers);\n if (range > rangeValue) continue; // Skip results that exceed the specified range\n\n const combinationKey = nonOneLayers.join(':');\n if (searchedCombinations.has(combinationKey)) continue;\n searchedCombinations.set(combinationKey, true); // Correct usage of Map\n\n const gridSize = nonOneLayers.reduce((acc, layer) => lcm(acc, layer), 1);\n if (gridSize !== gridValue) continue;\n\n // Check for duplicates and direct factors\n const hasRedundantLayers = nonOneLayers.some((layer, idx) =>\n nonOneLayers.some((otherLayer, otherIdx) =>\n idx !== otherIdx && (otherLayer % layer === 0)\n )\n );\n if (hasRedundantLayers) continue;\n\n // Check if layers share an unsimplified GCF\n const commonDivisor = nonOneLayers.reduce((acc, layer) => gcd(acc, layer), nonOneLayers[0]);\n if (commonDivisor > 1) continue;\n\n const compositeRhythm = createCompositeRhythm(gridSize, nonOneLayers);\n const spacesPlot = calculateSpacesPlot(compositeRhythm);\n const { sortedRatios, avgDeviation } = convertSpacesPlotToRatiosAndIntervals(spacesPlot);\n\n if (checkSpecialScale(sortedRatios)) {\n const scaleStr = nonOneLayers.join(':');\n if (!searchResults.has(scaleStr)) {\n searchResults.set(scaleStr, { ratios: sortedRatios, avgDeviation });\n console.log(`Added scale: ${scaleStr}`); // Log when a result is added\n }\n }\n }\n }\n }\n }\n }\n\n console.log('Finished Special Scales by Grid search, found results:', Array.from(searchResults.keys()));\n displaySpecialScalesGridResults(Array.from(searchResults.entries()));\n}\n\nfunction calculateAverageDeviation(ratios) {\n const deviations = ratios.map(ratio => {\n const [numerator, denominator] = ratio.split('/').map(Number);\n const cents = ratioToCents(numerator, denominator);\n return Math.abs(100 - cents % 100); // Calculate deviation from 100 cents\n });\n const totalDeviation = deviations.reduce((sum, deviation) => sum + deviation, 0);\n return deviations.length > 0 ? totalDeviation / deviations.length : 0;\n}\n\n// Function to find all factors of a given number\nfunction findFactors(num) {\n const factors = [];\n for (let i = 1; i <= num; i++) {\n if (num % i === 0) {\n factors.push(i);\n }\n }\n return factors;\n}\n\nfunction displaySpecialScalesGridResults(results) {\n const resultsDiv = document.getElementById('special-scales-grid-results');\n resultsDiv.innerHTML = '';\n\n if (results.length === 0) {\n resultsDiv.innerHTML = '

No special scales found.

';\n return;\n }\n\n const resultsWithDetails = results.map(([result, { ratios, avgDeviation }]) => {\n const layers = result.split(':').map(Number);\n const layerSum = layers.reduce((sum, layer) => sum + layer, 0);\n const range = calculateRange(layers);\n return { result, layerSum, avgDeviation, range };\n });\n\n resultsWithDetails.sort((a, b) => a.layerSum - b.layerSum);\n\n let resultsHTML = `\n \n \n \n \n \n \n `;\n resultsWithDetails.forEach(({ result, layerSum, avgDeviation, range }) => {\n const uniqueId = result.replace(/:/g, '-'); // Create a unique ID by replacing colons\n resultsHTML += `\n \n \n \n \n \n `;\n });\n resultsHTML += '

Results: ${resultsWithDetails.length} ▼	Layer Sum ▼	Avg Dev (cents) ▼	Range ▼	Actions
${result}	${layerSum}	${avgDeviation.toFixed(2)}	${range.toFixed(2)}	\n \n

';\n resultsDiv.innerHTML = resultsHTML;\n}\n\nfunction copyAndSubmitGrid(resultId) {\n const result = resultId.replace(/-/g, ':'); // Convert the ID back to the original result string\n const searchResult = searchResults.get(result);\n if (!searchResult) {\n console.error('Result not found:', result);\n return;\n }\n\n const layers = result.split(':').map(Number);\n\n // Populate the input fields\n document.getElementById('rhythm-a').value = layers[0] || 1;\n document.getElementById('rhythm-b').value = layers[1] || 1;\n document.getElementById('rhythm-c').value = layers[2] || 1;\n document.getElementById('rhythm-d').value = layers[3] || 1;\n\n // Programmatically submit the form\n const form = document.getElementById('rhythmic-form');\n form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));\n}\n\nfunction copyAndSubmitSpecial(resultId) {\n const result = resultId.replace(/-/g, ':'); // Convert the ID back to the original result string\n const searchResult = searchResults.get(result);\n if (!searchResult) {\n console.error('Result not found:', result);\n return;\n }\n\n const layers = result.split(':').map(Number);\n\n // Populate the input fields\n document.getElementById('rhythm-a').value = layers[0] || 1;\n document.getElementById('rhythm-b').value = layers[1] || 1;\n document.getElementById('rhythm-c').value = layers[2] || 1;\n document.getElementById('rhythm-d').value = layers[3] || 1;\n\n // Programmatically submit the form\n const form = document.getElementById('rhythmic-form');\n form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));\n}\n\nfunction clearSpecialScalesGridResults() {\n const resultsDiv = document.getElementById('special-scales-grid-results');\n resultsDiv.innerHTML = ''; // Clear the displayed results\n searchResults.clear(); // Clear the search results set\n searchedCombinations.clear(); // Clear the searched combinations set\n}\n\n// Ensure that the event listener for the clear special scales grid results button is added\ndocument.getElementById('clear-special-scales-grid-results').addEventListener('click', clearSpecialScalesGridResults);\n\nfunction updateGridSearchTimeValue(event) {\n const gridSearchTimeValue = event.target.value;\n document.getElementById('grid-search-time-value').textContent = gridSearchTimeValue;\n}\n\nlet fundamentalSearchResults = new Map();\nlet searchedFundamentalCombinations = new Set(); // Set to track searched combinations\n\nlet previouslySearchedGridValues = new Set(); // Set to track previously searched grid values\n\nfunction handleFundamentalSearchFormSubmit(event) {\n event.preventDefault();\n const searchFundamental = parseFloat(document.getElementById('search-fundamental').value);\n const maxSearchTime = parseInt(document.getElementById('max-fundamental-search-time').value);\n const rangeValue = getRangeInputValue('range-input-fundamental'); // Get the range input value\n\n if (isNaN(searchFundamental) || searchFundamental < 1) {\n console.error('Invalid input for Search Fundamental');\n return;\n }\n\n console.log('Starting search with Fundamental:', searchFundamental, 'Max Search Time:', maxSearchTime);\n const startTime = Date.now();\n\n let resultsCount = 0;\n let gridValue = searchFundamental;\n const maxGridValue = 999999999;\n\n while ((Date.now() - startTime) <= maxSearchTime && gridValue <= maxGridValue) {\n gridValue += searchFundamental;\n\n if (previouslySearchedGridValues.has(gridValue)) {\n continue; // Skip grid values that have already been processed\n }\n\n previouslySearchedGridValues.add(gridValue); // Mark this grid value as processed\n\n // Find all factors of the grid value\n const factors = [];\n for (let i = 1; i <= gridValue; i++) {\n if (gridValue % i === 0 && i <= gridValue / searchFundamental) {\n factors.push(i);\n }\n }\n console.log('Factors of grid value:', factors);\n\n // Iterate over combinations of factors for Special Scales by Grid\n for (let i = 0; i < factors.length; i++) {\n for (let j = i; j < factors.length; j++) {\n for (let k = j; k < factors.length; k++) {\n for (let l = k; l < factors.length; l++) {\n if ((Date.now() - startTime) > maxSearchTime) {\n console.warn('Search terminated early due to time limit.');\n displayFundamentalSearchResults(Array.from(fundamentalSearchResults.entries()));\n return;\n }\n\n const layersList = [\n [factors[i], factors[j]],\n [factors[i], factors[j], factors[k]],\n [factors[i], factors[j], factors[k], factors[l]]\n ];\n\n for (const layers of layersList) {\n const nonOneLayers = layers.filter(x => x !== 1).sort((a, b) => b - a);\n if (nonOneLayers.length < 2) continue;\n\n const range = calculateRange(nonOneLayers);\n if (range > rangeValue) continue; // Skip results that exceed the specified range\n\n const combinationKey = nonOneLayers.join(':');\n if (searchedFundamentalCombinations.has(combinationKey)) continue;\n searchedFundamentalCombinations.add(combinationKey);\n\n const gridSize = nonOneLayers.reduce((acc, layer) => lcm(acc, layer), 1);\n if (gridSize !== gridValue) continue;\n\n // Ensure Layer A is the largest and check grid / Layer A\n const layerA = Math.max(...nonOneLayers);\n if (gridSize / layerA !== searchFundamental) continue;\n\n // Check for duplicates and direct factors\n const hasRedundantLayers = nonOneLayers.some((layer, idx) =>\n nonOneLayers.some((otherLayer, otherIdx) =>\n idx !== otherIdx && (otherLayer % layer === 0)\n )\n );\n if (hasRedundantLayers) continue;\n\n // Check if layers share an unsimplified GCF\n const commonDivisor = nonOneLayers.reduce((acc, layer) => gcd(acc, layer), nonOneLayers[0]);\n if (commonDivisor > 1) continue;\n\n const compositeRhythm = createCompositeRhythm(gridSize, nonOneLayers);\n const spacesPlot = calculateSpacesPlot(compositeRhythm);\n const { sortedRatios, avgDeviation } = convertSpacesPlotToRatiosAndIntervals(spacesPlot);\n\n if (checkSpecialScale(sortedRatios)) {\n const scaleStr = nonOneLayers.join(':');\n if (!fundamentalSearchResults.has(scaleStr)) {\n fundamentalSearchResults.set(scaleStr, { ratios: sortedRatios, avgDeviation, gridSize });\n console.log(`Added fundamental scale: ${scaleStr}`); // Log when a result is added\n resultsCount++;\n }\n }\n }\n }\n }\n }\n }\n }\n\n console.log('Finished search, found results:', Array.from(fundamentalSearchResults.keys()));\n displayFundamentalSearchResults(Array.from(fundamentalSearchResults.entries()));\n}\n\nfunction displayFundamentalSearchResults(results) {\n const resultsDiv = document.getElementById('fundamental-search-results');\n resultsDiv.innerHTML = '';\n\n if (results.length === 0) {\n resultsDiv.innerHTML = '

No special scales found.

';\n return;\n }\n\n // Sort results by grid size in ascending order\n results.sort((a, b) => a[1].gridSize - b[1].gridSize);\n\n const resultsWithDetails = results.map(([result, { gridSize, avgDeviation }]) => {\n const layers = result.split(':').map(Number);\n const layerSum = layers.reduce((sum, layer) => sum + layer, 0);\n const range = calculateRange(layers);\n return { result, gridSize, avgDeviation, layerSum, range };\n });\n\n let resultsHTML = `\n \n \n \n \n \n \n \n `;\n resultsWithDetails.forEach(({ result, gridSize, avgDeviation, layerSum, range }) => {\n const uniqueId = result.replace(/:/g, '-'); // Create a unique ID by replacing colons\n resultsHTML += `\n \n \n \n \n \n \n `;\n });\n resultsHTML += '

Results: ${results.length} ▼	Layer Sum ▼	Grid Size ▼	Avg Dev (cents) ▼	Range ▼	Actions
${result}	${layerSum}	${gridSize}	${avgDeviation.toFixed(2)}	${range.toFixed(2)}	\n \n

';\n resultsDiv.innerHTML = resultsHTML;\n}\n\nfunction copyAndSubmitFundamental(resultId) {\n const result = resultId.replace(/-/g, ':'); // Convert the ID back to the original result string\n const searchResult = fundamentalSearchResults.get(result);\n if (!searchResult) {\n console.error('Result not found:', result);\n return;\n }\n\n const layers = result.split(':').map(Number);\n\n // Populate the input fields\n document.getElementById('rhythm-a').value = layers[0] || 1;\n document.getElementById('rhythm-b').value = layers[1] || 1;\n document.getElementById('rhythm-c').value = layers[2] || 1;\n document.getElementById('rhythm-d').value = layers[3] || 1;\n\n // Programmatically submit the form\n const form = document.getElementById('rhythmic-form');\n form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));\n}\n\nfunction clearFundamentalSearchResults() {\n const resultsDiv = document.getElementById('fundamental-search-results');\n resultsDiv.innerHTML = ''; // Clear the displayed results\n fundamentalSearchResults.clear(); // Clear the search results set\n searchedFundamentalCombinations.clear(); // Clear the searched combinations set\n previouslySearchedGridValues.clear(); // Clear the previously searched grid values set\n}\n\n// MIDI Export Functionality\n\n// Scale export as .tun and .scl\nfunction exportAsTun() {\n const ratios = getRatios().filter(ratio => ratio !== \"2/1\");\n\n if (ratios.length === 0) {\n console.error('No ratios available to export.');\n return;\n }\n\n const rhythmA = parseInt(document.getElementById('rhythm-a').value);\n const rhythmB = parseInt(document.getElementById('rhythm-b').value);\n const rhythmC = parseInt(document.getElementById('rhythm-c').value);\n const rhythmD = parseInt(document.getElementById('rhythm-d').value);\n\n const title = `Layers A:${rhythmA}, B:${rhythmB}, C:${rhythmC}, D:${rhythmD}`;\n const currentDate = new Date().toISOString().split('T')[0];\n const description = `Generated from rhythms: ${rhythmA}, ${rhythmB}, ${rhythmC}, ${rhythmD}`;\n\n let tunContent = \"[Tuning]\\n\";\n tunContent += `Name=${title}\\n`;\n tunContent += \"Filename=Untitled.tun\\n\";\n tunContent += \"Format=1\\n\";\n tunContent += \"Function=Linear\\n\";\n tunContent += \"\\n[Exact Tuning]\\n\";\n\n // Calculate the cents values for each note\n const centsValues = [];\n ratios.forEach((ratio, index) => {\n const [numerator, denominator] = ratio.split('/').map(Number);\n const cents = ratioToCents(numerator, denominator).toFixed(6);\n centsValues.push(cents);\n });\n\n let noteIndex = 0;\n while (noteIndex < 128) {\n for (let i = 0; i < centsValues.length && noteIndex < 128; i++) {\n const octaveShift = Math.floor(noteIndex / centsValues.length) * 1200;\n const cents = (parseFloat(centsValues[i]) + octaveShift).toFixed(6);\n tunContent += `note ${noteIndex}=${cents}\\n`;\n noteIndex++;\n }\n }\n\n tunContent += \"\\n; AnaMark section\\n\";\n tunContent += \"[Scale Begin]\\n\";\n tunContent += 'Format= \"AnaMark-TUN\"\\n';\n tunContent += 'FormatVersion= 100\\n';\n tunContent += 'FormatSpecs= \"http://www.mark-henning.de/eternity/tuningspecs.html\"\\n';\n tunContent += \"\\n[Info]\\n\";\n tunContent += `Name= \"${title}\"\\n`;\n tunContent += `ID= \"${title}\"\\n`;\n tunContent += `Filename= \"${title}.tun\"\\n`;\n tunContent += `Description= \"${description}\"\\n`;\n tunContent += `Date= \"${currentDate}\"\\n`;\n tunContent += 'Editor= \"Your Editor Name\"\\n';\n tunContent += \"\\n[Exact Tuning]\\n\";\n noteIndex = 0;\n while (noteIndex < 128) {\n for (let i = 0; i < centsValues.length && noteIndex < 128; i++) {\n const octaveShift = Math.floor(noteIndex / centsValues.length) * 1200;\n const cents = (parseFloat(centsValues[i]) + octaveShift).toFixed(6);\n tunContent += `note ${noteIndex}= ${cents}\\n`;\n noteIndex++;\n }\n }\n\n tunContent += \"\\n[Scale End]\\n\";\n\n const filename = `${rhythmA}-${rhythmB}-${rhythmC}-${rhythmD}.tun`;\n const tunBlob = new Blob([tunContent], { type: 'text/plain' });\n const tunUrl = URL.createObjectURL(tunBlob);\n const tunLink = document.createElement('a');\n tunLink.href = tunUrl;\n tunLink.download = filename;\n tunLink.click();\n}\n\nfunction ratioToCents(numerator, denominator) {\n return 1200 * Math.log2(numerator / denominator);\n}\n\nfunction exportAsScl() {\n const ratios = getRatios().filter(ratio => ratio !== \"2/1\");\n\n if (ratios.length === 0) {\n console.error('No ratios available to export.');\n return;\n }\n\n const rhythmA = parseInt(document.getElementById('rhythm-a').value);\n const rhythmB = parseInt(document.getElementById('rhythm-b').value);\n const rhythmC = parseInt(document.getElementById('rhythm-c').value);\n const rhythmD = parseInt(document.getElementById('rhythm-d').value);\n\n const title = `Layers A:${rhythmA}, B:${rhythmB}, C:${rhythmC}, D:${rhythmD}`;\n\n let sclContent = `! ${title}\\n`;\n sclContent += `! Ratios:\\n`;\n\n ratios.forEach((ratio, index) => {\n sclContent += `! ${index + 1}: ${ratio}\\n`;\n });\n\n sclContent += `\\n${ratios.length}\\n`;\n sclContent += `\\n! Cents:\\n`;\n\n ratios.forEach((ratio, index) => {\n const [numerator, denominator] = ratio.split('/').map(Number);\n const cents = ratioToCents(numerator, denominator).toFixed(5);\n sclContent += `${cents}\\n`;\n });\n\n const filename = `${rhythmA}-${rhythmB}-${rhythmC}-${rhythmD}.scl`;\n const sclBlob = new Blob([sclContent], { type: 'text/plain' });\n const sclUrl = URL.createObjectURL(sclBlob);\n const sclLink = document.createElement('a');\n sclLink.href = sclUrl;\n sclLink.download = filename;\n sclLink.click();\n}\n\n// Helper function to determine the layer based on pulse size and composite rhythm position\nfunction determineLayer(position, layers) {\n for (let i = 0; i < layers.length; i++) {\n if (position % layers[i] === 0) {\n return i;\n }\n }\n return -1; // Return -1 if no matching layer found (shouldn't happen in correct input)\n}\n\n// Function to calculate spaces plot values by layer\nfunction calculateSpacesPlotByLayer(compositeRhythm, layers) {\n const spacesPlotByLayer = layers.map(() => []);\n const totalLCM = calculateTotalLCM(...layers);\n const groupingSizes = layers.map(layer => totalLCM / layer);\n\n // Calculate the spaces plot\n const spacesPlot = calculateSpacesPlot(compositeRhythm);\n\n // Loop through the composite rhythm to assign spaces plot values to layers\n for (let i = 0; i < compositeRhythm.length - 1; i++) {\n const currentValue = compositeRhythm[i];\n const nextValue = compositeRhythm[i + 1];\n const spaceValue = nextValue - currentValue;\n\n layers.forEach((layer, layerIndex) => {\n if (currentValue % groupingSizes[layerIndex] === 0) {\n spacesPlotByLayer[layerIndex].push(spaceValue);\n }\n });\n }\n\n // Handle wrap-around for the last value\n const lastValue = compositeRhythm[compositeRhythm.length - 1];\n const firstValue = compositeRhythm[0];\n const wrapAroundValue = totalLCM - lastValue + firstValue;\n\n layers.forEach((layer, layerIndex) => {\n if (lastValue % groupingSizes[layerIndex] === 0) {\n spacesPlotByLayer[layerIndex].push(wrapAroundValue);\n }\n });\n\n return spacesPlotByLayer;\n}\n\n// Function to convert spaces plot values to midi notes \nfunction convertSpacesPlotToMidiNotes(spacesPlotByLayer, scaleLength) {\n // Flatten the spacesPlotByLayer to get the entire spaces plot\n const entireSpacesPlot = spacesPlotByLayer.flat();\n\n // Sort the entire spaces plot in descending order\n const sortedSpacesPlot = entireSpacesPlot.sort((a, b) => b - a);\n\n // Log the sorted spaces plot\n console.log('Sorted Spaces Plot:', sortedSpacesPlot);\n\n const fundamental = Math.max(...sortedSpacesPlot);\n const halfFundamental = fundamental / 2;\n\n // Create the compressed list and map original values to their compressed counterparts\n const compressedList = [];\n const originalToCompressedMap = new Map();\n sortedSpacesPlot.forEach(value => {\n if (value === 0) {\n throw new Error('Zero value encountered in spaces plot, which can cause infinite loop');\n }\n let compressedValue = value;\n let octaveShift = 0;\n // Ensure the loop terminates correctly\n while (compressedValue <= halfFundamental && compressedValue !== 0) {\n compressedValue *= 2;\n octaveShift += 1;\n }\n compressedList.push(compressedValue);\n originalToCompressedMap.set(value, { compressedValue, octaveShift });\n });\n\n // Remove duplicates and sort the compressed list in descending order\n const uniqueCompressedList = Array.from(new Set(compressedList)).sort((a, b) => b - a);\n\n // Log the compressed sorted spaces plot without duplicates\n console.log('Compressed Sorted Spaces Plot (CSSP):', uniqueCompressedList);\n\n // Assign MIDI notes to the unique compressed list starting from 9\n const compressedToMidiMap = new Map();\n uniqueCompressedList.forEach((value, index) => {\n compressedToMidiMap.set(value, 9 + index);\n });\n\n // Map the original spaces plot values to their corresponding MIDI notes\n const midiNotesByLayer = spacesPlotByLayer.map(spacesPlot => {\n return spacesPlot.map(value => {\n const { compressedValue, octaveShift } = originalToCompressedMap.get(value);\n const baseMidiNote = compressedToMidiMap.get(compressedValue);\n const finalMidiNote = baseMidiNote + (scaleLength * octaveShift);\n return finalMidiNote;\n });\n });\n\n return midiNotesByLayer;\n}\n\n// Function to export all relevant information as a text file\nfunction exportInfo() {\n console.log('Export Info button clicked.');\n\n const rhythmA = parseInt(document.getElementById('rhythm-a').value);\n const rhythmB = parseInt(document.getElementById('rhythm-b').value);\n const rhythmC = parseInt(document.getElementById('rhythm-c').value);\n const rhythmD = parseInt(document.getElementById('rhythm-d').value);\n\n const totalLCM = calculateTotalLCM(rhythmA, rhythmB, rhythmC, rhythmD);\n const compositeRhythm = createCompositeRhythm(totalLCM, [rhythmA, rhythmB, rhythmC, rhythmD]);\n\n const spacesPlotByLayer = calculateSpacesPlotByLayer(compositeRhythm, [rhythmA, rhythmB, rhythmC, rhythmD]);\n console.log(\"Spaces Plot by Layer:\", spacesPlotByLayer);\n\n const fundamentalFrequency = parseFloat(document.getElementById('fundamental-frequency').value);\n const midiByLayer = generateMidiByLayer(spacesPlotByLayer, fundamentalFrequency);\n console.log('MIDI by Layer:', midiByLayer);\n\n const ratios = getRatios().filter(ratio => ratio !== \"2/1\");\n\n // Create text content\n let textContent = `Rhythms:\\nA: ${rhythmA}\\nB: ${rhythmB}\\nC: ${rhythmC}\\nD: ${rhythmD}\\n\\n`;\n textContent += `Spaces Plot by Layer:\\n`;\n\n [0, 1, 2, 3].forEach(layerIndex => {\n const layerValue = [rhythmA, rhythmB, rhythmC, rhythmD][layerIndex];\n if (layerValue !== 1) {\n const layerSpaces = spacesPlotByLayer[layerIndex];\n textContent += `${['A', 'B', 'C', 'D'][layerIndex]}: ${layerSpaces.join(', ')}\\n`;\n }\n });\n\n textContent += `\\nMIDI by Layer:\\n`;\n\n [0, 1, 2, 3].forEach(layerIndex => {\n const layerValue = [rhythmA, rhythmB, rhythmC, rhythmD][layerIndex];\n if (layerValue !== 1) {\n const layerMIDI = midiByLayer[layerIndex];\n const midiNotes = layerMIDI.join(', ');\n textContent += `${['A', 'B', 'C', 'D'][layerIndex]}: ${midiNotes}\\n`;\n }\n });\n\n textContent += `\\nComposite Rhythm:\\n${compositeRhythm.join(', ')}\\n`;\n\n textContent += `\\nScale (Ratios / Cents):\\n`;\n\n if (ratios.length === 0) {\n textContent += 'No ratios available.\\n';\n } else {\n textContent += `Ratio\\tCents\\n`;\n ratios.forEach(ratio => {\n const [numerator, denominator] = ratio.split('/').map(Number);\n const cents = ratioToCents(numerator, denominator).toFixed(2);\n textContent += `${ratio}\\t${cents}\\n`;\n });\n }\n\n // Create a blob and a download link for the text file\n const textBlob = new Blob([textContent], { type: 'text/plain' });\n const textUrl = URL.createObjectURL(textBlob);\n const textLink = document.createElement('a');\n textLink.href = textUrl;\n textLink.download = `${rhythmA}-${rhythmB}-${rhythmC}-${rhythmD} info.txt`;\n textLink.click();\n\n console.log('Text file generated and download triggered.');\n}\n\n// Convert frequency to MIDI note number\nfunction frequencyToMidiNoteNumber(frequency) {\n return Math.round(69 + 12 * Math.log2(frequency / 440));\n}\n\n// Function to create a MIDI header chunk\nfunction createMidiHeader(ticksPerQuarterNote, numTracks) {\n return new Uint8Array([\n 0x4d, 0x54, 0x68, 0x64, // \"MThd\" header\n 0x00, 0x00, 0x00, 0x06, // Header length\n 0x00, 0x01, // Format type (1 for multiple tracks)\n 0x00, numTracks, // Number of tracks\n (ticksPerQuarterNote >> 8) & 0xff, (ticksPerQuarterNote) & 0xff // Division (ticks per quarter note)\n ]);\n}\n\n// Function to create a MIDI track chunk with note events\nfunction createMidiTrack(midis, ticksPerQuarterNote, layerName) {\n const events = [];\n\n // Set the track name meta event\n const nameBytes = new TextEncoder().encode(layerName);\n events.push(0x00, 0xff, 0x03, nameBytes.length, ...nameBytes);\n\n // Set the tempo event (in microseconds per quarter note)\n const tempoBPM = 120; // Assuming a default tempo of 120 BPM for MIDI export\n const microsecondsPerQuarterNote = Math.round(60000000 / tempoBPM);\n events.push(0x00, 0xff, 0x51, 0x03,\n (microsecondsPerQuarterNote >> 16) & 0xff,\n (microsecondsPerQuarterNote >> 8) & 0xff,\n microsecondsPerQuarterNote & 0xff);\n\n const noteDuration = ticksPerQuarterNote; // Fixed duration as quarter notes\n let currentTime = 0;\n\n // Iterate over the midi notes to create note events\n midis.forEach((midiNoteNumber, index) => {\n // Delta time for Note On event\n const deltaTimeOn = index === 0 ? 0x00 : noteDuration;\n // Add Note On event\n events.push(deltaTimeOn, 0x90, midiNoteNumber, 0x64); // Note on with velocity 100\n\n // Delta time for Note Off event is always after the note duration\n const deltaTimeOff = noteDuration;\n // Add Note Off event\n events.push(deltaTimeOff, 0x80, midiNoteNumber, 0x64); // Note off with velocity 100\n });\n\n // End of track event\n events.push(0x00, 0xff, 0x2f, 0x00);\n\n // Calculate track length\n const trackLength = events.length;\n const trackLengthBytes = [\n (trackLength >> 24) & 0xff,\n (trackLength >> 16) & 0xff,\n (trackLength >> 8) & 0xff,\n trackLength & 0xff\n ];\n\n return new Uint8Array([\n 0x4d, 0x54, 0x72, 0x6b, // \"MTrk\" header\n ...trackLengthBytes, // Track length\n ...events // Track events\n ]);\n}\n\n// Function to generate MIDI note information by layer\nfunction generateMidiByLayer(spacesPlotByLayer, fundamentalFrequency) {\n const midiByLayer = spacesPlotByLayer.map(spaces => {\n const midiNotes = [];\n spaces.forEach(space => {\n const ratio = spaces[0] / space;\n const frequency = fundamentalFrequency * ratio;\n const midiNote = frequencyToMidiNoteNumber(frequency);\n midiNotes.push(midiNote);\n });\n return midiNotes;\n });\n\n return midiByLayer;\n}\n\n// Function to export each rhythm layer as a separate MIDI file\nfunction exportLayerAsMidi(midis, layerName, ticksPerQuarterNote) {\n // Log the MIDI note sequence for the layer\n console.log(`Exporting MIDI layer: ${layerName}`);\n console.log(`MIDI Note Sequence: ${midis.join(', ')}`);\n\n // Create a new MIDI file\n const midi = new Midi();\n\n // Set the tempo\n const tempoBPM = 120; // Assuming a default tempo of 120 BPM for MIDI export\n midi.header.setTempo(tempoBPM);\n\n // Add a track to the MIDI file\n const track = midi.addTrack();\n\n // Set the track name\n track.name = layerName;\n\n // Add MIDI notes to the track\n const noteDuration = 1 / (ticksPerQuarterNote / 960); // Fixed duration as quarter notes\n let currentTime = 0;\n\n midis.forEach(midiNoteNumber => {\n track.addNote({\n midi: midiNoteNumber,\n time: currentTime,\n duration: noteDuration,\n velocity: 0.64 // Velocity as a fraction of 1\n });\n currentTime += noteDuration;\n });\n\n // Export the MIDI file as a Blob\n const midiBlob = new Blob([midi.toArray()], { type: 'audio/midi' });\n const url = URL.createObjectURL(midiBlob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `${layerName}-layer.mid`;\n a.click();\n}\n\n// Function to export the tone row as a MIDI file and individual layers as separate MIDI files\nfunction exportToneRowAsMidi() {\n const spacesPlotElement = document.getElementById('spaces-plot');\n\n if (!spacesPlotElement || !spacesPlotElement.textContent) {\n console.error('No valid spaces plot available to export.');\n return;\n }\n\n const spacesPlot = spacesPlotElement.textContent.split(': ')[1]?.split(', ').map(Number);\n\n if (!spacesPlot || spacesPlot.length === 0) {\n console.error('No spaces plot available to export.');\n return;\n }\n\n const fundamentalFrequency = parseFloat(document.getElementById('fundamental-frequency').value);\n const rhythmA = parseInt(document.getElementById('rhythm-a').value);\n const rhythmB = parseInt(document.getElementById('rhythm-b').value);\n const rhythmC = parseInt(document.getElementById('rhythm-c').value);\n const rhythmD = parseInt(document.getElementById('rhythm-d').value);\n\n const ticksPerQuarterNote = 960; // High value for more precision\n\n // Generate MIDI note information by layer\n const spacesPlotByLayer = calculateSpacesPlotByLayer(createCompositeRhythm(calculateTotalLCM(rhythmA, rhythmB, rhythmC, rhythmD), [rhythmA, rhythmB, rhythmC, rhythmD]), [rhythmA, rhythmB, rhythmC, rhythmD]);\n const midiNotesByLayer = convertSpacesPlotToMidiNotes(spacesPlotByLayer, 12);\n console.log('MIDI Notes by Layer:', midiNotesByLayer);\n\n // Export individual rhythm layers as separate MIDI files\n if (rhythmA !== 1 && midiNotesByLayer[0].length > 0) exportLayerAsMidi(midiNotesByLayer[0], 'A', ticksPerQuarterNote);\n if (rhythmB !== 1 && midiNotesByLayer[1].length > 0) exportLayerAsMidi(midiNotesByLayer[1], 'B', ticksPerQuarterNote);\n if (rhythmC !== 1 && midiNotesByLayer[2].length > 0) exportLayerAsMidi(midiNotesByLayer[2], 'C', ticksPerQuarterNote);\n if (rhythmD !== 1 && midiNotesByLayer[3].length > 0) exportLayerAsMidi(midiNotesByLayer[3], 'D', ticksPerQuarterNote);\n}\n\n// Synth and Tone Row Playback\n\n// Highlights in scale\nfunction highlightCurrentNoteInScale(ratio, layer) {\n const scaleTable = document.getElementById('ratios').querySelector('table');\n if (!scaleTable) return;\n\n const rows = scaleTable.getElementsByTagName('tr');\n for (let i = 1; i < rows.length; i++) {\n const cell = rows[i].getElementsByTagName('td')[0];\n if (cell.textContent.trim() === ratio) {\n let container = cell.parentElement.querySelector('.highlight-container');\n if (!container) {\n container = document.createElement('div');\n container.className = 'highlight-container';\n cell.parentElement.appendChild(container);\n }\n const layerDiv = document.createElement('div');\n layerDiv.className = `highlight-${layer}`;\n container.appendChild(layerDiv);\n }\n }\n}\n\nfunction removeHighlightFromScale(ratio, layer) {\n const scaleTable = document.getElementById('ratios').querySelector('table');\n if (!scaleTable) return;\n\n const rows = scaleTable.getElementsByTagName('tr');\n for (let i = 1; i < rows.length; i++) {\n const cell = rows[i].getElementsByTagName('td')[0];\n if (cell.textContent.trim() === ratio) {\n const container = cell.parentElement.querySelector('.highlight-container');\n if (container) {\n const layerDiv = container.querySelector(`.highlight-${layer}`);\n if (layerDiv) {\n container.removeChild(layerDiv);\n }\n if (container.children.length === 0) {\n cell.parentElement.removeChild(container);\n }\n }\n }\n }\n}\n\n// Highlights in graph\nfunction highlightCurrentDot(index, layer) {\n if (index >= 0 && index < dotPositions.length) {\n const { x, y, size } = dotPositions[index];\n const highlightSize = size + 10; // Increase size when highlighted\n fill(getHighlightColor(layer));\n ellipse(x, y, highlightSize, highlightSize);\n }\n}\n\nfunction removeHighlightFromDot(index) {\n if (index >= 0 && index < dotPositions.length) {\n const { x, y, size } = dotPositions[index];\n const highlightSize = size + 10; // Size used when highlighted\n fill(255); // White color to \"erase\" the dot\n ellipse(x, y, highlightSize, highlightSize); // Erase the bigger dot\n fill(0); // Black color to redraw the original dot\n ellipse(x, y, size, size); // Redraw the original size dot\n dotPositions[index].highlighted = false; // Ensure the dot is marked as not highlighted\n }\n}\n\nfunction getHighlightColor(layer) {\n switch (layer) {\n case 0:\n return 'lightblue';\n case 1:\n return 'lightgreen';\n case 2:\n return 'yellow';\n case 3:\n return 'red';\n default:\n return 'black';\n }\n}\n\nfunction playLayers() {\n const spacesPlotElement = document.getElementById('spaces-plot');\n\n if (!spacesPlotElement || !spacesPlotElement.textContent) {\n console.error('No valid spaces plot available to play.');\n return;\n }\n\n const spacesPlot = spacesPlotElement.textContent.split(': ')[1]?.split(', ').map(Number);\n\n if (!spacesPlot || spacesPlot.length === 0) {\n console.error('No spaces plot available to play.');\n return;\n }\n\n const fundamentalFrequency = parseFloat(document.getElementById('fundamental-frequency').value);\n const maxFrequency = fundamentalFrequency * 32; // Frequency limit\n const rhythmA = parseInt(document.getElementById('rhythm-a').value);\n const rhythmB = parseInt(document.getElementById('rhythm-b').value);\n const rhythmC = parseInt(document.getElementById('rhythm-c').value);\n const rhythmD = parseInt(document.getElementById('rhythm-d').value);\n\n const playbackTime = parseFloat(document.getElementById('tempo-input').value);\n const layers = ['a', 'b', 'c', 'd'];\n const rhythms = [rhythmA, rhythmB, rhythmC, rhythmD];\n\n Tone.Transport.stop();\n Tone.Transport.cancel();\n\n activeSynths.forEach(synth => synth.dispose());\n activeSynths = [];\n\n const spacesPlotByLayer = calculateSpacesPlotByLayer(\n createCompositeRhythm(calculateTotalLCM(rhythmA, rhythmB, rhythmC, rhythmD), [rhythmA, rhythmB, rhythmC, rhythmD]),\n [rhythmA, rhythmB, rhythmC, rhythmD]\n );\n\n // Redraw the graph to ensure it corresponds with the current layers\n drawSpacesPlotGraph(spacesPlot);\n\n let maxDuration = 0; // Track the maximum duration\n\n layers.forEach((layer, index) => {\n if (rhythms[index] === 1) return; // Skip layers with rhythm 1\n\n const layerValue = rhythms[index];\n const lightDuration = playbackTime / layerValue;\n const adsr = getADSRValues(layer);\n const waveform = document.getElementById(`waveform-${layer}`).value;\n const synth = new Tone.Synth({\n oscillator: {\n type: waveform\n },\n envelope: adsr\n }).connect(limiter); // Connect synth to the limiter\n\n activeSynths.push(synth);\n\n const layerSpacesPlot = spacesPlotByLayer[index];\n const totalNotes = layerSpacesPlot.length;\n const totalLayerDuration = totalNotes * lightDuration; // Calculate total duration for this layer\n\n maxDuration = Math.max(maxDuration, totalLayerDuration); // Update maxDuration\n\n let dotIndexCounter = 0;\n\n layerSpacesPlot.forEach((space, idx) => {\n const ratio = layerSpacesPlot[0] / space;\n const frequency = fundamentalFrequency * ratio;\n\n if (frequency <= maxFrequency) { // Check frequency limit\n Tone.Transport.schedule(time => {\n synth.triggerAttackRelease(frequency, lightDuration, time);\n\n // Turn on the light when the note starts\n Tone.Draw.schedule(() => {\n const dotIndex = dotPositions.findIndex((dot, i) => dot.value === space && i >= dotIndexCounter);\n if (dotIndex !== -1) {\n highlightCurrentDot(dotIndex, index);\n dotIndexCounter = dotIndex + 1;\n }\n }, time);\n\n // Turn off the light when the note ends\n Tone.Draw.schedule(() => {\n const dotIndex = dotPositions.findIndex((dot, i) => dot.value === space && i >= dotIndexCounter - 1);\n if (dotIndex !== -1) {\n removeHighlightFromDot(dotIndex);\n }\n }, time + lightDuration);\n }, idx * lightDuration);\n }\n });\n });\n\n // Ensure continuous playback\n Tone.Transport.loopEnd = maxDuration;\n Tone.Transport.loop = true;\n\n setTimeout(() => {\n console.log('Starting Layers Playback');\n Tone.Transport.start();\n }, 500);\n}\n\nlet limiter;\n\nfunction updateVolume(event) {\n const volumeValue = parseInt(event.target.value);\n limiter.threshold.value = volumeValue === -100 ? -Infinity : volumeValue;\n document.getElementById('volume-value').textContent = volumeValue === -100 ? \"-∞ dB\" : `${volumeValue} dB`;\n}\n\nfunction updateToneRowDuration(event) {\n const durationValue = parseInt(event.target.value);\n document.getElementById('tone-row-duration-value').textContent = durationValue;\n Tone.Transport.bpm.value = 60 / durationValue; // Update BPM in real-time\n}\n\nlet soloLayer = null;\n\nfunction toggleSolo(layer) {\n if (soloLayer === layer) {\n soloLayer = null; // Un-solo the layer\n } else {\n soloLayer = layer; // Solo the selected layer\n }\n updateSynthVolumes();\n}\n\nfunction updateSynthVolumes() {\n ['a', 'b', 'c', 'd'].forEach((layer, index) => {\n if (activeSynths[index]) {\n activeSynths[index].volume.value = (soloLayer && soloLayer !== layer) ? -Infinity : 0; // Mute other layers if solo is active\n }\n });\n}\n\nfunction handleLightSequence(layerSpacesPlot, index, totalLayerDuration, lightDuration, fundamentalFrequency, waveform, adsr) {\n const synth = new Tone.Synth({\n oscillator: {\n type: waveform\n },\n envelope: adsr\n }).toDestination();\n\n activeSynths.push(synth);\n\n // Play lights from left to center\n layerSpacesPlot.forEach((space, idx) => {\n const ratio = layerSpacesPlot[0] / space;\n const frequency = fundamentalFrequency * ratio;\n\n const dotIndex = dotPositions.findIndex(dot => dot.value === space);\n const reverseDotIndex = dotPositions.length - 1 - dotIndex;\n\n Tone.Transport.schedule(time => {\n synth.triggerAttackRelease(frequency, lightDuration, time);\n\n // Turn on the light when the note starts\n Tone.Draw.schedule(() => {\n if (dotIndex !== -1) highlightCurrentDot(dotIndex, index);\n }, time);\n\n // Turn off the light when the note ends\n Tone.Draw.schedule(() => {\n if (dotIndex !== -1) removeHighlightFromDot(dotIndex);\n }, time + lightDuration);\n }, idx * lightDuration);\n\n // Handle mirrored dots from right to center\n Tone.Transport.schedule(time => {\n synth.triggerAttackRelease(frequency, lightDuration, time + (totalLayerDuration / 2));\n\n // Turn on the light when the note starts\n Tone.Draw.schedule(() => {\n if (reverseDotIndex !== -1) highlightCurrentDot(reverseDotIndex, index);\n }, time + (totalLayerDuration / 2));\n\n // Turn off the light when the note ends\n Tone.Draw.schedule(() => {\n if (reverseDotIndex !== -1) removeHighlightFromDot(reverseDotIndex);\n }, time + (totalLayerDuration / 2) + lightDuration);\n }, idx * lightDuration + totalLayerDuration / 2);\n });\n\n // Reverse direction\n layerSpacesPlot.reverse().forEach((space, idx) => {\n const ratio = layerSpacesPlot[0] / space;\n const frequency = fundamentalFrequency * ratio;\n\n const dotIndex = dotPositions.findIndex(dot => dot.value === space);\n const reverseDotIndex = dotPositions.length - 1 - dotIndex;\n\n Tone.Transport.schedule(time => {\n synth.triggerAttackRelease(frequency, lightDuration, time + totalLayerDuration);\n\n // Turn on the light when the note starts\n Tone.Draw.schedule(() => {\n if (dotIndex !== -1) highlightCurrentDot(dotIndex, index);\n }, time + totalLayerDuration);\n\n // Turn off the light when the note ends\n Tone.Draw.schedule(() => {\n if (dotIndex !== -1) removeHighlightFromDot(dotIndex);\n }, time + totalLayerDuration + lightDuration);\n }, idx * lightDuration + totalLayerDuration);\n\n // Handle mirrored dots from center to right\n Tone.Transport.schedule(time => {\n synth.triggerAttackRelease(frequency, lightDuration, time + totalLayerDuration * 1.5);\n\n // Turn on the light when the note starts\n Tone.Draw.schedule(() => {\n if (reverseDotIndex !== -1) highlightCurrentDot(reverseDotIndex, index);\n }, time + totalLayerDuration * 1.5);\n\n // Turn off the light when the note ends\n Tone.Draw.schedule(() => {\n if (reverseDotIndex !== -1) removeHighlightFromDot(reverseDotIndex);\n }, time + totalLayerDuration * 1.5 + lightDuration);\n }, idx * lightDuration + totalLayerDuration * 1.5);\n });\n}\n\nfunction playToneRow() {\n const spacesPlotElement = document.getElementById('spaces-plot');\n\n if (!spacesPlotElement || !spacesPlotElement.textContent) {\n console.error('No valid spaces plot available to play.');\n return;\n }\n\n const spacesPlot = spacesPlotElement.textContent.split(': ')[1]?.split(', ').map(Number);\n\n if (!spacesPlot || spacesPlot.length === 0) {\n console.error('No spaces plot available to play.');\n return;\n }\n\n let tempo = parseFloat(document.getElementById('tempo-input').value);\n const waveform = document.getElementById('waveform-select').value;\n const fundamentalFrequency = parseFloat(document.getElementById('fundamental-frequency').value);\n const maxFrequency = fundamentalFrequency * 32; // Frequency limit\n\n if (tempo < 1) {\n tempo = 1;\n document.getElementById('tempo-input').value = 1;\n } else if (tempo > 300) {\n tempo = 300;\n document.getElementById('tempo-input').value = 300;\n }\n\n const synth = new Tone.Synth({\n oscillator: {\n type: waveform\n }\n }).connect(limiter);\n\n activeSynths.push(synth);\n\n const grid = parseFloat(document.getElementById('result').textContent.split(': ')[1]);\n const rhythmAValue = spacesPlot[0];\n\n Tone.Transport.stop();\n Tone.Transport.cancel();\n\n let currentTime = 0;\n const minNoteDuration = 0.05;\n let dotIndexCounter = 0;\n\n // Schedule the white noise blip at the beginning of each cycle\n console.log('Scheduling white noise blip...');\n Tone.Transport.schedule(time => {\n console.log('Triggering white noise blip at:', time);\n noiseEnvelope.triggerAttackRelease(0.1, time); // Play white noise for 100ms\n }, currentTime);\n\n for (let i = 0; i < spacesPlot.length; i++) {\n const space = spacesPlot[i];\n let spaceDuration = (space / grid) * tempo;\n\n if (spaceDuration < minNoteDuration) {\n spaceDuration = minNoteDuration;\n }\n\n const ratio = `${rhythmAValue}/${space}`;\n const frequency = fundamentalFrequency * (rhythmAValue / space);\n\n if (frequency <= maxFrequency) { // Check frequency limit\n Tone.Transport.schedule(time => {\n synth.triggerAttackRelease(frequency, spaceDuration, time);\n highlightCurrentNoteInScale(ratio, 'A'); // Highlight the note in the scale chart\n\n // Turn on the light when the note starts\n Tone.Draw.schedule(() => {\n const dotIndex = dotPositions.findIndex((dot, i) => dot.value === space && i >= dotIndexCounter);\n if (dotIndex !== -1) {\n highlightCurrentDot(dotIndex, 0);\n dotIndexCounter = dotIndex + 1;\n }\n }, time);\n\n // Turn off the light when the note ends\n Tone.Draw.schedule(() => {\n const dotIndex = dotPositions.findIndex((dot, i) => dot.value === space && i >= dotIndexCounter - 1);\n if (dotIndex !== -1) {\n removeHighlightFromDot(dotIndex);\n }\n removeHighlightFromScale(ratio, 'A'); // Remove the highlight from the scale chart\n }, time + spaceDuration);\n }, currentTime);\n\n currentTime += spaceDuration;\n }\n }\n\n Tone.Transport.loopEnd = currentTime;\n Tone.Transport.loop = true;\n\n setTimeout(() => {\n console.log('Starting Tone Row');\n Tone.Transport.start(); // Start the transport to trigger the scheduled events\n }, 500);\n}\n\nfunction updateSynthEnvelope(layer, param, value) {\n const layerIndex = ['a', 'b', 'c', 'd'].indexOf(layer);\n if (activeSynths[layerIndex]) {\n activeSynths[layerIndex].envelope[param] = value;\n }\n}\n\nfunction updateSynthWaveform(layer, waveform) {\n const layerIndex = ['a', 'b', 'c', 'd'].indexOf(layer);\n if (activeSynths[layerIndex]) {\n activeSynths[layerIndex].oscillator.type = waveform;\n }\n}\n\nfunction togglePlayback() {\n const playButton = document.getElementById('play-tone-row');\n\n if (isPlaying) {\n stopToneRow();\n playButton.textContent = 'Play Tone Row';\n } else {\n // Ensure everything is reset before starting playback\n clear();\n playLayers();\n playButton.textContent = 'Stop Tone Row';\n }\n\n isPlaying = !isPlaying;\n}\n\nfunction stopToneRow() {\n console.log('Stopping Tone Row');\n Tone.Transport.stop();\n Tone.Transport.cancel(); // Clear any scheduled events\n\n // Dispose of all active synths to stop any hanging notes\n activeSynths.forEach(synth => {\n synth.dispose();\n });\n activeSynths = []; // Clear the active synths array\n}\n\n// Allow ADSR envelopes to be manipulated in real time\nfunction initializeADSRControlEvents() {\n ['a', 'b', 'c', 'd'].forEach(layer => {\n // Attach event listeners for attack\n addEnvelopeEventListeners(layer, 'attack', 'ms', 10000);\n\n // Attach event listeners for decay\n addEnvelopeEventListeners(layer, 'decay', 'ms', 10000);\n\n // Attach event listeners for sustain\n addEnvelopeEventListeners(layer, 'sustain', 'dB', 0, -100);\n\n // Attach event listeners for release\n addEnvelopeEventListeners(layer, 'release', 'ms', 10000);\n });\n}\n\nfunction addEnvelopeEventListeners(layer, param, unit, max, min = 0) {\n const slider = document.getElementById(`${param}-${layer}`);\n const input = document.getElementById(`${param}-${layer}-input`);\n const displayValue = document.getElementById(`${param}-${layer}-value`);\n\n slider.addEventListener('input', (e) => {\n const value = parseFloat(e.target.value);\n input.value = value;\n displayValue.textContent = `${value} ${unit}`;\n updateSynthEnvelope(layer, param, convertValue(param, value));\n });\n\n input.addEventListener('input', (e) => {\n let value = parseFloat(e.target.value);\n if (isNaN(value)) {\n value = 0;\n e.target.value = 0;\n } else if (value < min) {\n value = min;\n e.target.value = min;\n } else if (value > max) {\n value = max;\n e.target.value = max;\n }\n slider.value = value;\n displayValue.textContent = `${value} ${unit}`;\n updateSynthEnvelope(layer, param, convertValue(param, value));\n });\n}\n\nfunction convertValue(param, value) {\n if (param !== 'sustain') {\n return value / 1000; // Convert milliseconds to seconds for attack, decay, and release\n } else {\n return value === -100 ? 0 : dbToGain(value); // Handle -Infinity for sustain\n }\n}\n\nfunction dbToGain(db) {\n return db === -100 ? 0 : Math.pow(10, db / 20);\n}\n\nfunction getADSRValues(layer) {\n return {\n attack: parseFloat(document.getElementById(`attack-${layer}`).value) / 1000, // Convert to seconds\n decay: parseFloat(document.getElementById(`decay-${layer}`).value) / 1000, // Convert to seconds\n sustain: dbToGain(parseFloat(document.getElementById(`sustain-${layer}`).value) === -100 ? -Infinity : parseFloat(document.getElementById(`sustain-${layer}`).value)), // Handle -Infinity\n release: parseFloat(document.getElementById(`release-${layer}`).value) / 1000 // Convert to seconds\n };\n}\n\n// Allow for real-time waveform change\nfunction initializeWaveformControlEvents() {\n ['a', 'b', 'c', 'd'].forEach(layer => {\n document.getElementById(`waveform-${layer}`).addEventListener('change', (e) => {\n updateSynthWaveform(layer, e.target.value);\n });\n });\n}\n\n// Extra graphing functions\n\nfunction drawBarGraph(spacesPlot) {\n clear(); // Clear the previous drawing\n background(255); // White background\n\n dotPositions = []; // Clear previous positions\n\n if (!spacesPlot || spacesPlot.length === 0) {\n console.error('No valid spaces plot available to draw.');\n return;\n }\n\n console.log('Drawing Bar Graph for Spaces Plot:', spacesPlot);\n\n stroke(0); // Black borders\n fill(0);\n\n const maxVal = Math.max(...spacesPlot);\n const barWidth = width / spacesPlot.length;\n\n for (let i = 0; i < spacesPlot.length; i++) {\n const barHeight = (spacesPlot[i] / maxVal) * height;\n const x = i * barWidth;\n const y = height - barHeight;\n\n rect(x, y, barWidth, barHeight); // Draw the bar\n dotPositions.push({ x, y, width: barWidth, height: barHeight, value: spacesPlot[i], index: i }); // Store the position, size, value, and index\n }\n}\n\nfunction drawCircularPlot(spacesPlot) {\n clear(); // Clear the previous drawing\n background(255); // White background\n\n dotPositions = []; // Clear previous positions\n\n if (!spacesPlot || spacesPlot.length === 0) {\n console.error('No valid spaces plot available to draw.');\n return;\n }\n\n console.log('Drawing Circular Plot for Spaces Plot:', spacesPlot);\n\n const maxPoints = 200000; // Set a maximum number of points to display\n let sampledPlot = spacesPlot;\n\n if (spacesPlot.length > maxPoints) {\n const step = Math.ceil(spacesPlot.length / maxPoints);\n sampledPlot = spacesPlot.filter((_, index) => index % step === 0);\n }\n\n stroke(0); // Black dots\n fill(0);\n\n const centerX = width / 2;\n const centerY = height / 2;\n const maxRadius = Math.min(centerX, centerY) - 20; // Max radius with padding\n\n const maxVal = Math.max(...sampledPlot);\n const angleStep = TWO_PI / sampledPlot.length;\n\n // Calculate dot size based on the number of dots\n const dotSize = Math.max(2, Math.min(20, 400 / sampledPlot.length));\n\n for (let i = 0; i < sampledPlot.length; i++) {\n const angle = -HALF_PI + (i + 0.5) * angleStep; // Adjust angle to start from 12 o'clock and center the primary line of symmetry\n\n const radius = (sampledPlot[i] / maxVal) * maxRadius;\n\n const x = centerX + radius * cos(angle);\n const y = centerY + radius * sin(angle);\n\n ellipse(x, y, dotSize, dotSize); // Draw a dot with dynamic size\n dotPositions.push({ x, y, size: dotSize, value: sampledPlot[i], index: i }); // Store the position, size, value, and index\n }\n}\n\nfunction exportPlot() {\n const width = parseInt(prompt(\"Enter the width of the exported PNG (in pixels):\", \"800\"));\n const height = parseInt(prompt(\"Enter the height of the exported PNG (in pixels):\", \"400\"));\n\n if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0) {\n alert(\"Invalid dimensions. Please enter positive numbers for width and height.\");\n return;\n }\n\n // Create an offscreen graphics buffer\n let buffer = createGraphics(width, height);\n\n // Redraw the plot on the offscreen buffer, scaling to fit the dimensions\n drawPlotOnBuffer(buffer, width, height);\n\n // Get the rhythm values for the filename\n const rhythmA = parseInt(document.getElementById('rhythm-a').value);\n const rhythmB = parseInt(document.getElementById('rhythm-b').value);\n const rhythmC = parseInt(document.getElementById('rhythm-c').value);\n const rhythmD = parseInt(document.getElementById('rhythm-d').value);\n\n // Use a temporary canvas for exporting\n const exportCanvas = createGraphics(width, height);\n exportCanvas.image(buffer, 0, 0);\n\n // Save the canvas as a PNG file with the appropriate title\n save(exportCanvas, `${rhythmA}-${rhythmB}-${rhythmC}-${rhythmD}.png`);\n\n // Clear the buffer and export canvas\n buffer.remove();\n exportCanvas.remove();\n}\n\nfunction drawPlotOnBuffer(buffer, width, height) {\n const spacesPlotElement = document.getElementById('spaces-plot');\n if (spacesPlotElement && spacesPlotElement.textContent) {\n const spacesPlot = spacesPlotElement.textContent.split(': ')[1]?.split(', ').map(Number);\n if (spacesPlot && spacesPlot.length > 0) {\n console.log('Drawing plot on buffer:', spacesPlot);\n\n buffer.clear();\n buffer.background(255); // White background\n\n if (currentPlotType === 'linear') {\n drawSpacesPlotGraphOnBuffer(buffer, spacesPlot, width, height);\n } else if (currentPlotType === 'circular') {\n drawCircularPlotOnBuffer(buffer, spacesPlot, width, height);\n } else if (currentPlotType === 'butterfly') {\n drawButterflyPlotOnBuffer(buffer, spacesPlot, width, height);\n }\n } else {\n console.error('No valid spaces plot available to draw.');\n }\n }\n}\n\nfunction drawSpacesPlotGraphOnBuffer(buffer, spacesPlot, width, height) {\n const maxVal = Math.max(...spacesPlot);\n const xSpacing = width / spacesPlot.length;\n const yScale = (height - 20) / maxVal;\n\n // Calculate dot size based on the number of dots, scaled to the buffer dimensions\n const dotSize = Math.max(2, Math.min(20, 400 / spacesPlot.length));\n\n buffer.stroke(0); // Black dots\n buffer.fill(0);\n\n for (let i = 0; i < spacesPlot.length; i++) {\n const x = i * xSpacing + xSpacing / 2;\n const y = height - spacesPlot[i] * yScale;\n buffer.ellipse(x, y, dotSize, dotSize); // Draw a dot with dynamic size\n }\n}\n\nfunction drawCircularPlotOnBuffer(buffer, spacesPlot, width, height) {\n const centerX = width / 2;\n const centerY = height / 2;\n const maxRadius = Math.min(centerX, centerY) - 20; // Max radius with padding\n\n const maxPoints = 200000; // Set a maximum number of points to display\n let sampledPlot = spacesPlot;\n\n if (spacesPlot.length > maxPoints) {\n const step = Math.ceil(spacesPlot.length / maxPoints);\n sampledPlot = spacesPlot.filter((_, index) => index % step === 0);\n }\n\n const maxVal = Math.max(...sampledPlot);\n const angleStep = TWO_PI / sampledPlot.length;\n\n // Calculate dot size based on the number of dots, scaled to the buffer dimensions\n const dotSize = Math.max(2, Math.min(20, 400 / sampledPlot.length));\n\n buffer.stroke(0); // Black dots\n buffer.fill(0);\n\n for (let i = 0; i < sampledPlot.length; i++) {\n const angle = -HALF_PI + (i + 0.5) * angleStep; // Adjust angle to start from 12 o'clock and center the primary line of symmetry\n\n const radius = (sampledPlot[i] / maxVal) * maxRadius;\n\n const x = centerX + radius * cos(angle);\n const y = centerY + radius * sin(angle);\n\n buffer.ellipse(x, y, dotSize, dotSize); // Draw a dot with dynamic size\n }\n}\n\nfunction drawSphericalPlot(spacesPlot) {\n clear(); // Clear the previous drawing\n background(255); // White background\n\n dotPositions = []; // Clear previous positions\n\n if (!spacesPlot || spacesPlot.length === 0) {\n console.error('No valid spaces plot available to draw.');\n return;\n }\n\n console.log('Drawing Spherical Plot for Spaces Plot:', spacesPlot);\n\n const maxPoints = 100000; // Set a maximum number of points to display\n let sampledPlot = spacesPlot;\n\n if (spacesPlot.length > maxPoints) {\n const step = Math.ceil(spacesPlot.length / maxPoints);\n sampledPlot = spacesPlot.filter((_, index) => index % step === 0);\n }\n\n stroke(0); // Black dots\n fill(0);\n\n const maxVal = Math.max(...sampledPlot);\n const radius = Math.min(width, height) / 3; // Radius of the sphere\n\n const maxRadius = radius * 0.8; // Max plot radius within the sphere\n\n // Calculate dot size based on the number of dots\n const dotSize = Math.max(2, Math.min(20, 400 / sampledPlot.length));\n\n // Rotate the sphere for better visualization\n rotateY(frameCount * 0.01); // Slow rotation\n rotateX(frameCount * 0.01);\n\n const totalPoints = sampledPlot.length * plotMultiplier; // Total points after duplication\n\n for (let i = 0; i < totalPoints; i++) {\n const originalIndex = i % sampledPlot.length;\n const angleStep = TWO_PI / sampledPlot.length;\n const angle = (i / totalPoints) * TWO_PI;\n const zAngle = (sampledPlot[originalIndex] / maxVal) * PI - PI / 2;\n\n const x = maxRadius * cos(angle) * cos(zAngle);\n const y = maxRadius * sin(zAngle);\n const z = maxRadius * sin(angle) * cos(zAngle);\n\n push();\n translate(x, y, z);\n sphere(dotSize / 2); // Draw a dot as a small sphere\n pop();\n\n dotPositions.push({ x, y, z, size: dotSize, value: sampledPlot[originalIndex], index: originalIndex }); // Store the position, size, value, and index\n }\n}\n\n","style.css":"#special-scale-indicator {\n display: inline-block;\n margin-left: 20px;\n font-size: 3em;\n color: black;\n}\n\n.highlight-container {\n display: flex;\n height: 100%;\n}\n\n.highlight-container div {\n flex: 1;\n height: 100%;\n}\n\n.highlight-A {\n background-color: lightblue;\n}\n\n.highlight-B {\n background-color: lightgreen;\n}\n\n.highlight-C {\n background-color: yellow;\n}\n\n.highlight-D {\n background-color: orange;\n}\n\n.hide-layer-A .highlight-A {\n display: none;\n}\n\n.hide-layer-B .highlight-B {\n display: none;\n}\n\n.hide-layer-C .highlight-C {\n display: none;\n}\n\n.hide-layer-D .highlight-D {\n display: none;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n}\n\nth,\ntd {\n padding: 10px 20px;\n text-align: left;\n border-bottom: 1px solid #ddd;\n}","index.html":"\n\n\n\n \n \n Big Time\n \n \n \n \n \n\n\n\n

\n \n\n

\n \n

\n\n

\n \n \n \n \n \n Plot Multiplier:\n \n 1\n

\n \n

\n \n \n \n \n

\n\n

\n Tempo (seconds per grid):\n \n 10
\n Fundamental Frequency (Hz):\n \n 110
\n Waveform:\n
\n Volume (dB):\n \n -1 dB
\n \n \n \n \n \n

\n\n \n \n\n

\n\n

Layer A Controls

\n Waveform:\n
\n Attack (ms):\n \n \n 100 ms
\n Decay (ms):\n \n \n 100 ms
\n Sustain (dB):\n \n \n -12 dB
\n Release (ms):\n \n \n 100 ms
\n \n

Layer B Controls

\n Waveform:\n
\n Attack (ms):\n \n \n 100 ms
\n Decay (ms):\n \n \n 100 ms
\n Sustain (dB):\n \n \n -12 dB
\n Release (ms):\n \n \n 100 ms
\n \n

Layer C Controls

\n Waveform:\n
\n Attack (ms):\n \n \n 100 ms
\n Decay (ms):\n \n \n 100 ms
\n Sustain (dB):\n \n \n -12 dB
\n Release (ms):\n \n \n 100 ms
\n \n

Layer D Controls

\n Waveform:\n
\n Attack (ms):\n \n \n 100 ms
\n Decay (ms):\n \n \n 100 ms
\n Sustain (dB):\n \n \n -12 dB
\n Release (ms):\n \n \n 100 ms
\n \n

\n\n \n \n \n

\n\n\n

\n\n\n\n\n \n \n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[]}

Layer A Controls

Layer B Controls

Layer C Controls

Layer D Controls

Advanced Search

All scales with...

Results