index.html

<!DOCTYPE html>
<html>
    <head>
        <title>PolyShapr</title>
        <link rel="stylesheet" href="styles.css"/>
        <script src="lib/p5.min.js"></script>
        <script src="lib/howler.min.js"></script>
        <script src="lib/sweetalert2.min.js"></script>
    </head>
    <body>
        <div id="main" style="display: flex;">
            <div id="appDrawer">
                <div id="patchSettings">
                    <div id="presetBrowser" class="settingsSection">
                        <label for=""></label>
                        <select id="presetDropdown" class="mayDisplayFilename"></select> <!-- <label for="presetDropdown" class="secondaryLabels">Preset</label> <br/> -->
                        <button id="patchSaveButton">Save</button> <button id="patchLoadButton">Load</button>
                    </div>

                    <div class="appDrawerDivider"></div>

                    <details id="rhythmSettingsDetails" class="settingsSection" open>
                        <summary class="settingsSummary">Rhythm</summary>
    
                        <div class="settingsCategory" id="rhythmSettings">
                            <label for="rhythmListInput" class="settingsCategoryLabel">Polyrhythm</label> <br/>
                            <input type="text" id="rhythmListInput" class="patchSettingTextInput"/> <br/>
                            <div>
                                <select id="rhythmModeDropdown"></select>
                                <br/>
                                <input type="number" id="rhythmListCountInput" class="patchSettingNumericalInput"/> <label for="rhythmListCountInput" class="secondaryLabels"># of Rhythms</label>
                                <br/>
                                <input type="number" id="rhythmListOffsetInput" class="patchSettingNumericalInput" /> <label for="rhythmListOffsetInput" class="secondaryLabels">Offset</label>
                                <br/>
                                <input type="checkbox" id="rhythmListIsReversedCheckbox" /> <label for="rhythmListIsReversedCheckbox" class="secondaryLabels">Reversed</label>
                            </div>
                        </div>
    
                        <div class="settingsCategory">
                            <label for="cycleTimeInput" class="settingsCategoryLabel">Cycle Length (seconds)</label> <br/>
                            <input type="number" id="cycleTimeInput" class="patchSettingNumericalInput" />
                        </div>
                    </details>

                    <div class="appDrawerDivider"></div>

                    <details id="audioSettingsDetails" class="settingsSection" open>
                        <summary class="settingsSummary">Audio <input type="checkbox" checked id="doSoundCheckbox" /></summary>
                        <div id="audioSettingsToggleableContainer">
                            <div id="audioSampleSettings" class="settingsCategory">
                                <label for="audioSampleDropdown" class="settingsCategoryLabel">Audio Sample</label>
                                <br/>
                                <select id="audioSampleDropdown"  class="mayDisplayFilename"></select>
                                <button id="audioSampleLoadButton">Load your own</button>
                            </div>
    
                            <div class="settingsCategory" id="pitchSettings">
                                <label for="pitchListInput" class="settingsCategoryLabel">Pitches</label> <br/>
                                <div id="presetPitchListControls">
                                    <input type="text" id="pitchListInput" class="patchSettingTextInput"/> 
                                    <br/>
                                    <select id="tuningModeDropdown"></select> <label for="tuningModeDropdown" class="secondaryLabels">Tuning</label>
                                    <br/>
                                    <select id="pitchModeDropdown"></select> <label for="pitchModeDropdown" class="secondaryLabels">Mode</label>
                                    <br/>
                                    <input type="number" id="pitchOffsetInput" class="patchSettingNumericalInput"/> <label for="pitchListOffsetInput" class="secondaryLabels">Offset</label>
                                    <br/>
                                    <input type="number" step="0.1" min="0" id="pitchMultiplierInput" class="patchSettingNumericalInput"/> <label for="pitchListIsReversedCheckbox" class="secondaryLabels">Multiplier</label>
                                </div>
                            </div>
                        </div>
                        <div class="disabledText" id="audioSettingsPlaceholderForSoundDisabled" hidden>
                            Sound Disabled
                        </div>
                    </details>

                    <div class="appDrawerDivider"></div>

                    <details id="visualSettingsDetails" class="settingsSection" open>
                        <summary class="settingsSummary">Visual</summary>
    
                        <div id="animationModeSettings" class="settingsCategory">
                            <label for="animationModeButtons" class="settingsCategoryLabel">Animation Mode</label>
                            <div id="animationModeButtons" class="secondaryLabels"></div>
                        </div>

                        <div class="settingsCategory" id="colorSettings">
                            <div>
                                <label for="pitchListInput">Color</label> <br/>
                            </div>
                            <div id="colorKeyFrameControls">
                                <div id="colorGradientControl">
                                    <input type="color" id="colorKeyFrameInput0" class="patchSettingNumericalInput"/> <span id="colorGradientUIArrow">➡</span>
                                    <input type="color" id="colorKeyFrameInput1" class="patchSettingNumericalInput"/>
                                </div>
                                <select id="colorInterpolationModeDropdown"></select> <label for="colorInterpolationModeDropdown" class="secondaryLabels">Interpolation Mode</label>
                                <br/>
                                <input type="number" id="colorScaleInput" class="patchSettingNumericalInput" /> <label for="colorScaleInput" class="secondaryLabels">Scale</label>
                                <br/>
                                <div>
                                    <input type="checkbox" id="colorRippleCheckbox"/> <label for="colorRippleCheckbox" class="secondaryLabels">Ripple</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="colorReflectionCheckbox"/> <label for="colorReflectionCheckbox" class="secondaryLabels">Reflect</label>
                                </div>
                            </div>
                        </div>

                        <div id="globalBorderSettings" class="settingsCategory">
                            <div>
                                <label for="pitchListInput">Border</label> <br/>
                            </div>
                            <div>
                                <input type="checkbox" id="globalBorderCheckbox"/> <label for="globalBorderCheckbox" class="secondaryLabels">Show border</label>
                            </div>
                        </div>
    
                        <div class="settingsSlider">
                            <label for="strokeWeightSlider" class="settingsCategoryLabel">Stroke Weight</label>
                            <button id="strokeWeightSliderResetBtn">reset</button> <br/>
                            <input type="range" value="0" min="0" max="1000" id="strokeWeightSlider" class="slider"/>
                        </div>
                    </details>
                </div>
            </div>
            <div id="centralDiv">
                <div id="p5canvas"></div>
                <div id="bottomControlBar">
                    <div>
                        <input type="range" value="0" min="0" max="1000" id="globalProgressSlider" class="slider"/>
                        <label for="globalProgressSlider" id="globalProgressGauge">0</label>
                    </div>
                    <div class="playback-control-bar">
                        <button id="playpausebtn" class="playbar-button">Play</button>
                        <button id="resetbtn" class="playbar-button">Reset</button>
                        <button id="recordVideoBtn" class="playbar-button">Start Recording Now</button>
                        <button id="openRenderModalBtn" class="playbar-button">Render</button>
                        <div id="volumeSliderContainer">
                            <label for="globalVolumeSlider" id="volumeSliderLabel">Volume</label>
                            <input type="range" min="0" max="100" id="globalVolumeSlider" class="slider"/> <br/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="footerContainer">
            <div>
                <a className="footerLink" target="_blank" rel="noreferrer" href="https://github.com/apc518/polyshapr" title="PolyShapr Github">GitHub</a>
            </div>
            <div>
                Copyright &copy; 2025 <a className="footerLink" target="_blank" rel="noreferrer" href="https://chambercode.com/about/andy" title="ChamberCode Portfolio">Andy Chamberlain</a></div>
            </div>
        </div>

        <div id="renderModal" class="modal">
            <div class="modal-content">
                <span id="renderModalCloseBtn">&times;</span>
                <div style="display: flex">
                    <div>
                        <div class="renderUiRow"> <input type="number" id="renderCycleCountInput" class="renderParameterInput" /> <label for="renderCycleCountInput"># Cycles</label> </div>
                        <div class="renderUiRow"> <input type="number" id="renderCanvasSizeInput" class="renderParameterInput" /> <label for="renderCanvasSizeInput">Canvas Size (px)</label> </div>
                        <div class="renderUiRow"> <input type="number" min="1000" step="1000" id="renderVideoBitrateInput" class="renderParameterInput" /> <label for="renderCanvasSizeInput">Video Bitrate (kbps)</label> </div>
                        <div class="renderUiRow"> <input type="number" id="renderAudioBitrateInput" class="renderParameterInput" /> <label for="renderCanvasSizeInput">Audio Bitrate (kbps)</label> </div>
                        <div class="renderUiRow"> <input type="checkbox" checked id="leaveRemainderCheckbox" class="renderParameterInput" /> <label for="leaveRemainderCheckbox">Leave Remainder</label> </div>
                        <div class="renderUiRow"> <input type="checkbox" checked id="exportVideoCheckbox" class="renderParameterInput" /> <label for="exportVideoCheckbox">Export Video</label> </div>
                    </div>
                    <div style="margin-left: auto; margin-right: 10px; margin-top: auto" class="renderUiRow">
                        <span>Export size estimate: </span><span id="exportSizeUpperBoundSpan"></span><span>MiB</span>
                    </div>
                </div>
                <div class="appDrawerDivider"></div>
                <br/>
                <div class="renderUiRow">
                    <button id="renderBtn">Start Render</button>
                    Progress: <span id="renderProgressGauge">0</span>%
                </div>
            </div>
        </div>

        <script src="constants.js" defer></script>
        <script src="utils/logging.js" defer></script>
        <script src="utils/math.js" defer></script>
        <script src="utils/drawing.js" defer></script>
        <script src="utils/environment.js" defer></script>
        <script src="utils/strings.js" defer></script>
        <script src="htmlHandlers.js" defer></script>
        <script src="Helper.js" defer></script>
        <script src="audioSampleOptions.js" defer></script>
        <script src="patchModeOptions/animationOptions.js" defer></script>
        <script src="patchModeOptions/rhythmOptions.js" defer></script>
        <script src="patchModeOptions/pitchOptions.js" defer></script>
        <script src="patchModeOptions/colorOptions.js" defer></script>
        <script src="patchSettingsDisplayers/audioSettingsDisplayer.js" defer></script>
        <script src="patchSettingsDisplayers/audioSampleSettingsDisplayer.js" defer></script>
        <script src="patchSettingsDisplayers/animationSettingsDisplayer.js" defer></script>
        <script src="patchSettingsDisplayers/rhythmSettingsDisplayer.js" defer></script>
        <script src="patchSettingsDisplayers/pitchSettingsDisplayer.js" defer></script>
        <script src="patchSettingsDisplayers/colorSettingsDisplayer.js" defer></script>
        <script src="listPopulators/colorListPopulator.js" defer></script>
        <script src="listPopulators/soundListPopulator.js" defer></script>
        <script src="ColorKeyFrame.js" defer></script>
        <script src="Sound.js" defer></script>
        <script src="Patch.js" defer></script>
        <script src="PolyRhythm.js" defer></script>
        <script src="Renderer.js" defer></script>
        <script src="builders.js" defer></script>
        <script src="presets.js" defer></script>
        <script src="tests.js" defer></script>
        <script src="record.js" defer></script>
        <script src="sketch.js" defer></script>
    </body>
</html>