edo.js

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="scripts/raphael.min.js"></script> <script src="scripts/edo.js"></script> <title>Scale Explorer</title> </head> <body> <h1>Scale Explorer</h1> <div id="top"> <label>Number of Equal Divisions of the Octave (EDO)</label><input id="edo_input" type="text" value="12" size="1"><br> <label>Pitch Classes (separated by spaces)</label><input id="scale_input" type="text" value="0 2 4 5 7 9 11"><br> <input id="explore_button" type="button" value="Explore Scale"> </div> <div id="main"> <div>Scale <span class="scale_name"></span></span></div> <div id="necklace"> <h2>Necklaces:</h2> <div id="scale_necklace"> <h3>Scale</h3> <div id="necklace_container"></div> </div> <div id="transpositions"> <h3>Common-tone Transpositions</h3> <div id="transposition_container"></div> </div> <div id="trichords_necklaces"> <h3>Trichords</h3> <div id="trichord_container"></div> </div> <div id="stack_necklaces"> <h3>Stacks of 3rds</h3> <div id="3rd_stacks_container"></div> <h3>Stacks of 4ths</h3> <div id="4th_stacks_container"></div> </div> </div> <div id="info_table"> <table> <tr><td>Number of Transpositions:</td><td class="transposition_count"></td></tr> <tr><td>Number of Imperfections:</td><td class="count_imperfections"></td></tr> <tr><td>Number of (sounding) Major 3rds:</td><td class="count_M3s"></td></tr> <tr><td>Number of (sounding) Minor 3rds:</td><td class="count_m3s"></td></tr> <tr><td>Number of (sounding) Perfect 5ths:</td><td class="count_P5s"></td></tr> <tr><td>Number of pitches:</td><td class="count_pitches"></td></tr> <tr><td>Number of rotational symmetries:</td><td class="count_rotational_symmetries"></td></tr> <tr><td>Number of modes:</td><td class="count_modes"></td></tr> <tr><td>Number of major/minor triads (sounding):</td><td class="count_major_minor_triads"></td></tr> <tr><td>Number of unique trichords:</td><td class="count_trichords"></td></tr> <tr><td>Number of unique tetrachords:</td><td class="count_tetrachords"></td></tr> <tr><td>Number of consecutive IC1:</td><td class="count_consecutive_steps1"></td></tr> <tr><td>Number of consecutive IC2:</td><td class="count_consecutive_steps2"></td></tr> <tr><td>Modes:</td><td class="get_modes"></td></tr> <tr><td>Interval vector:</td><td class="get_interval_vector"></td></tr> <tr><td>Common-tone transpositions:</td><td class="get_common_tone_transpositions"></td></tr> <tr><td>Types of steps in scale:</td><td class="get_step_sizes"></td></tr> <tr><td>Rothenberg Propriety:</td><td class="get_rothenberg_propriety"></td></tr> <tr><td>Inversion:</td><td class="get_inversion"></td></tr> <tr><td>Prime form:</td><td class="get_prime_form"></td></tr> <tr><td>Normal order:</td><td class="get_normal_order"></td></tr> <tr><td>Complementary:</td><td class="get_complement"></td></tr> <tr><td>As steps:</td><td class="to_steps"></td></tr> <tr><td>As cents:</td><td class="to_cents"></td></tr> <tr><td>Already in normal order:</td><td class="is_normal_order"></td></tr> <tr><td>Already in prime form:</td><td class="is_prime_form"></td></tr> <tr><td>Can be inverted:</td><td class="is_invertible"></td></tr> <tr><td>Exists in lower-order EDOs:</td><td class="is_in_lower_edos"></td></tr> </table> </div> </div> <script> let update_page = function () { let edo = new EDO(parseInt($('#edo_input').val())) let scale = edo.scale($('#scale_input').val().split(' ').map((el)=>parseInt(el))) $(".scale_name").html(scale.get.name()) scale.show.necklace("necklace_container",true,300) $("#necklace_container").click(() => { scale.parent.export.graphic('necklace_container') }) let trichords = scale.get.n_chords(3) edo.show.necklace('trichord_container',trichords,true,150) let stacks3 = scale.get.stacks(4,1) edo.show.necklace('3rd_stacks_container',stacks3,true,150) let stacks4 = scale.get.stacks(4,2) edo.show.necklace('4th_stacks_container',stacks4,true,150) let common_tones = scale.get.common_tone_transpositions().map((trans)=>trans[0]) edo.show.nested_necklaces("transposition_container",common_tones,true,600) $(".transposition_count").html(scale.count.transpositions()) $('.count_imperfections').html(scale.count.imperfections()) $('.count_P5s').html(scale.count.P5s()) $('.count_M3s').html(scale.count.M3s()) $('.count_m3s').html(scale.count.m3s()) $('.count_pitches').html(scale.count.pitches()) $('.count_rotational_symmetries').html(scale.count.rotational_symmetries()) $('.count_modes').html(scale.count.modes()) $('.count_major_minor_triads').html(scale.count.major_minor_triads()) $('.count_trichords').html(scale.count.trichords()) $('.count_tetrachords').html(scale.count.tetrachords()) $('.count_consecutive_steps1').html(scale.count.consecutive_steps(1)) $('.count_consecutive_steps2').html(scale.count.consecutive_steps(2)) $('.get_modes').html(scale.get.modes().join('<br>')) $('.get_interval_vector').html(scale.get.interval_vector().join(', ')) $('.get_common_tone_transpositions').html(scale.get.common_tone_transpositions() .map((el)=>el[0]) .join('<br>')) $('.get_step_sizes').html(scale.get.step_sizes().join(', ')) $('.get_rothenberg_propriety').html(scale.get.rothenberg_propriety()) $('.get_complement').html(scale.get.complement().join(', ')) $('.get_inversion').html(scale.get.inversion()) $('.get_prime_form').html(scale.get.prime_form()) $('.get_normal_order').html(scale.get.normal_order()) $('.to_steps').html(scale.to.steps().join(', ')) $('.to_cents').html(scale.to.cents().join(', ')) $('.is_normal_order').html(String(scale.is.normal_order())) $('.is_prime_form').html(String(scale.is.prime_form())) $('.is_invertible').html(String(scale.is.invertible())) $('.is_in_lower_edos').html((scale.is.in_lower_edos().length>0)?scale.is.in_lower_edos():"false") } document.getElementById("explore_button").onclick = function () { update_page() } </script> </body> </html>