<script>
  $(document).ready(function() {
    $("body").on("contextmenu", function(e) {
      return false;
    });
  });

</script>

<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" height="100%" viewBox="0 0 20000 20000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>10 Spiral of fifths</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle" fill="#000000" x="0" y="0" width="20000" height="20000"></rect>
        <g id="Wheel" transform="translate(2500.500000, 2434.500000)" stroke="#FFFFFF" stroke-width="35">
            <line x1="7500" y1="-4.06575815e-16" x2="7500" y2="15000" id="Spoke-1" stroke-linecap="square"></line>
            <line x1="7500" y1="-4.06575815e-16" x2="7500" y2="15000" id="Spoke-2" stroke-linecap="square" transform="translate(7500.000000, 7500.000000) rotate(-30.000000) translate(-7500.000000, -7500.000000) "></line>
            <line x1="7500" y1="-4.06575815e-16" x2="7500" y2="15000" id="Spoke-3" stroke-linecap="square" transform="translate(7500.000000, 7500.000000) rotate(-60.000000) translate(-7500.000000, -7500.000000) "></line>
            <line x1="7500" y1="-4.06575815e-16" x2="7500" y2="15000" id="Spoke-4" stroke-linecap="square" transform="translate(7500.000000, 7500.000000) rotate(-90.000000) translate(-7500.000000, -7500.000000) "></line>
            <line x1="7500" y1="-4.06575815e-16" x2="7500" y2="15000" id="Spoke-5" stroke-linecap="square" transform="translate(7500.000000, 7500.000000) rotate(-120.000000) translate(-7500.000000, -7500.000000) "></line>
            <line x1="7500" y1="-4.06575815e-16" x2="7500" y2="15000" id="Spoke-6" stroke-linecap="square" transform="translate(7500.000000, 7500.000000) rotate(-150.000000) translate(-7500.000000, -7500.000000) "></line>
            <circle id="outer-circle" cx="7500" cy="7500" r="7482.5"></circle>
            <circle id="inner-circle" cx="7513" cy="7467" r="4282.5"></circle>
        </g>
        <g id="ET" transform="translate(1737.022457, 1684.106781)">
            <g id="Background-ET" transform="translate(13.084324, 0.000000)" fill="#90BE6D">
                <rect id="0.749153538438-copy" x="11408.375" y="933.625" width="1375" height="1375" rx="50"></rect>
                <rect id="1.12246204831-copy" x="14165.25" y="3683.625" width="1375" height="1375" rx="50"></rect>
                <rect id="0.840896415254-copy" x="15125" y="7562.5" width="1375" height="1375" rx="50"></rect>
                <rect id="1.25992104989-copy" x="14165.25" y="11441.375" width="1375" height="1375" rx="50"></rect>
                <rect id="0.943874312682--copy" x="11408.375" y="14191.375" width="1375" height="1375" rx="50"></rect>
                <rect id="1.41421356237-copy" x="7562.5" y="15125" width="1375" height="1375" rx="50"></rect>
                <rect id="1.05946309436-copy" x="3716.625" y="14191.375" width="1375" height="1375" rx="50"></rect>
                <rect id="0.793700525984-copy" x="959.75" y="11441.375" width="1375" height="1375" rx="50"></rect>
                <rect id="1.189207115-copy" x="0" y="7562.5" width="1375" height="1375" rx="50"></rect>
                <rect id="0.89089871814--copy" x="959.75" y="3683.625" width="1375" height="1375" rx="50"></rect>
                <rect id="1.33483985417-copy" x="3716.625" y="933.625" width="1375" height="1375" rx="50"></rect>
                <rect id="1.000000000-copy" x="7562.5" y="0" width="1375" height="1375" rx="50"></rect>
            </g>
            <g id="Note-names-D-ET" transform="translate(300, 500)" fill="#FFFFFF" font-family="AvenirNext-Regular, Avenir Next" font-size="700" font-weight="normal">
                <text id="F#/Gb-ET" line-spacing="650">
                    <tspan x="7392" y="15302">A</tspan>
                    <tspan x="7870" y="15200" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                    <tspan x="7736.5" y="15852">  G</tspan>
                    <tspan x="8260" y="15732" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                </text>
                <text id="B-ET" line-spacing="700">
                    <tspan x="11432.4998" y="14641.7241">C</tspan>
                    <tspan x="12004.4385" y="14521.4375" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                </text>
                <text id="E-ET" line-spacing="700">
                    <tspan x="14244.2998" y="11889.3491">F</tspan>
                    <tspan x="14705.6385" y="11769.0625" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                </text>
                <text id="A-ET" line-spacing="700">
                    <tspan x="15317.85" y="8004.47406">B</tspan>
                </text>
                <text id="D-ET" line-spacing="700">
                    <tspan x="14372.625" y="4102.47406">E</tspan>
                </text>
                <text id="G-ET" line-spacing="700">
                    <tspan x="11591.075" y="1372.84906">A</tspan>
                </text>
                <text id="C-ET" line-spacing="700">
                    <tspan x="7714.25" y="437.59906">D</tspan>
                </text>
                <text id="F-ET" line-spacing="700">
                    <tspan x="3849.3" y="1372.84906">G</tspan>
                </text>
                <text id="Bb-ET" line-spacing="700">
                    <tspan x="1132.45" y="4096.47406">C</tspan>
                </text>
                <text id="Eb-ET" line-spacing="700">
                    <tspan x="215" y="8001.47406">F</tspan>
                </text>
                <text id="Ab-ET" line-spacing="700">
                    <tspan x="1005.4375" y="11871.3491">B</tspan>
                    <tspan x="1437.9375" y="11742.05" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="Db-ET" line-spacing="700">
                    <tspan x="3758.9" y="14646.7241">E</tspan>
                    <tspan x="4210.6" y="14517.425" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
            </g>
            <g id="Keys-ET" transform="translate(13.084324, 0.000000)" fill="#000000" fill-opacity="0" stroke="#979797" stroke-width="0">
                <rect class=key id="1.49830707688" x="11385.875" y="911.125" width="1420" height="1420"></rect>
                <rect class=key id="1.12246204831" x="14142.75" y="3661.125" width="1420" height="1420"></rect>
                <rect class=key id="1.68179283051" x="15102.5" y="7540" width="1420" height="1420"></rect>
                <rect class=key id="1.25992104989" x="14142.75" y="11418.875" width="1420" height="1420"></rect>
                <rect class=key id="1.88774862536" x="11385.875" y="14168.875" width="1420" height="1420"></rect>
                <rect class=key id="1.41421356237" x="7540" y="15102.5" width="1420" height="1420"></rect>
                <rect class=key id="1.05946309436" x="3694.125" y="14168.875" width="1420" height="1420"></rect>
                <rect class=key id="1.58740105197" x="937.25" y="11418.875" width="1420" height="1420"></rect>
                <rect class=key id="1.189207115" x="-22.5" y="7540" width="1420" height="1420"></rect>
                <rect class=key id="1.78179743628" x="937.25" y="3661.125" width="1420" height="1420"></rect>
                <rect class=key id="1.33483985417" x="3694.125" y="911.125" width="1420" height="1420"></rect>
                <rect class=key id="1.000000000" x="7540" y="-22.5" width="1420" height="1420"></rect>
            </g>
        </g>
        <g id="JI" transform="translate(3916.106781, 3627.106781)">
            <g id="Background-JI" fill="#F3722C">
                <rect id="524288/531441x" x="5584" y="2887" width="1000" height="1000" rx="50"></rect>
                <rect id="531441/524288x" x="5584" y="0" width="1000" height="1000" rx="50"></rect>
                <rect id="262144/177147x" x="6934" y="3306" width="1000" height="1000" rx="50"></rect>
                <rect id="177147/131072x" x="2802" y="790" width="1000" height="1000" rx="50"></rect>
                <rect id="65536/59049x" x="8151" y="4423" width="1000" height="1000" rx="50"></rect>
                <rect id="59049/32768x" x="600" y="2806" width="1000" height="1000" rx="50"></rect>
                <rect id="32768/19683x" x="8651" y="5807" width="1000" height="1000" rx="50"></rect>
                <rect id="19683/16384x" x="0" y="5807" width="1000" height="1000" rx="50"></rect>
                <rect id="8192/6561x" x="8301" y="7366" width="1000" height="1000" rx="50"></rect>
                <rect id="6561/4096x" x="999" y="8518" width="1000" height="1000" rx="50"></rect>
                <rect id="4096/2187x" x="7184" y="8729" width="1000" height="1000" rx="50"></rect>
                <rect id="2187/2048x" x="3016" y="10097" width="1000" height="1000" rx="50"></rect>
                <rect id="1024/729x" x="5584" y="9325" width="1000" height="1000" rx="50"></rect>
                <rect id="729/512x" x="5584" y="10747" width="1000" height="1000" rx="50"></rect>
                <rect id="256/243x" x="3984" y="8728" width="1000" height="1000" rx="50"></rect>
                <rect id="243/128x" x="8051" y="10063" width="1000" height="1000" rx="50"></rect>
                <rect id="128/81x" x="2501" y="7639" width="1000" height="1000" rx="50"></rect>
                <rect id="81/64x" x="9651" y="8139" width="1000" height="1000" rx="50"></rect>
                <rect id="32/27x" x="1499" y="5807" width="1000" height="1000" rx="50"></rect>
                <rect id="27/16x" x="10150" y="5807" width="1000" height="1000" rx="50"></rect>
                <rect id="16/9x" x="1999" y="3678" width="1000" height="1000" rx="50"></rect>
                <rect id="9/8x" x="9550" y="3584" width="1000" height="1000" rx="50"></rect>
                <rect id="4/3x" x="3484" y="2212" width="1000" height="1000" rx="50"></rect>
                <rect id="3/2x" x="7801" y="1965" width="1000" height="1000" rx="50"></rect>
                <rect id="1/1x" x="5584" y="1465" width="1000" height="1000" rx="50"></rect>
            </g>
            <g id="Note-names-D-JI" transform="translate(241.893219, 182.893219)" fill="#FFFFFF" font-family="AvenirNext-Regular, Avenir Next" font-size="500" font-weight="normal">
                <text id="Dbbx">
                    <tspan x="5451" y="3421">E</tspan>
                    <tspan x="5747" y="3421" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭♭</tspan>
                </text>
                <text id="B#x">
                    <tspan x="5442.51758" y="500">C</tspan>
                    <tspan x="5802.51758" y="500" font-family="ArialUnicodeMS, Arial Unicode MS">♯♯</tspan>
                    <tspan x="6241.48242" y="500"></tspan>
                </text>
                <text id="Abbx">
                    <tspan x="6790" y="3840">B</tspan>
                    <tspan x="7108" y="3840" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭♭</tspan>
                </text>
                <text id="E#x">
                    <tspan x="2700.01758" y="1290">F</tspan>
                    <tspan x="2981.01758" y="1290" font-family="ArialUnicodeMS, Arial Unicode MS">♯♯</tspan>
                </text>
                <text id="Ebbx">
                    <tspan x="8147" y="4957">F</tspan>
                    <tspan x="8428" y="4957" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="A#x">
                    <tspan x="589.258789" y="3306">B</tspan>
                    <tspan x="907.258789" y="3306" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                </text>
                <text id="Bbbx">
                    <tspan x="8607.5" y="6341">C</tspan>
                    <tspan x="8967.5" y="6341" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="D#x">
                    <tspan x="0.258789062" y="6307">E</tspan>
                    <tspan x="296.258789" y="6307" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                </text>
                <text id="Fbx">
                    <tspan x="8242.75" y="7900">G</tspan>
                    <tspan x="8632.25" y="7900" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="G#x">
                    <tspan x="972.258789" y="9018">A</tspan>
                    <tspan x="1322.25879" y="9018" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                </text>
                <text id="Cbx">
                    <tspan x="7131.25" y="9263">D</tspan>
                    <tspan x="7509.75" y="9263" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="C#x">
                    <tspan x="2975.00879" y="10597">D</tspan>
                    <tspan x="3353.50879" y="10597" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                </text>
                <text id="Gbx">
                    <tspan x="5545.5" y="9859">A</tspan>
                    <tspan x="5895.5" y="9859" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="F#x">
                    <tspan x="5537.50879" y="11247">G</tspan>
                    <tspan x="5927.00879" y="11247" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                </text>
                <text id="Dbx">
                    <tspan x="3972.5" y="9262">E</tspan>
                    <tspan x="4268.5" y="9262" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="Bx">
                    <tspan x="8019.25879" y="10563">C</tspan>
                    <tspan x="8379.25879" y="10563" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                </text>
                <text id="Abx">
                    <tspan x="2478.5" y="8173">B</tspan>
                    <tspan x="2796.5" y="8173" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="Ex">
                    <tspan x="9658.75879" y="8639">F</tspan>
                    <tspan x="9939.75879" y="8639" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                </text>
                <text id="Ebx">
                    <tspan x="1616.5" y="6341">F</tspan>
                </text>
                <text id="Ax">
                    <tspan x="10249" y="6341">B</tspan>
                </text>
                <text id="Bbx">
                    <tspan x="2077" y="4212">C</tspan>
                </text>
                <text id="Dx">
                    <tspan x="9660" y="4118">E</tspan>
                </text>
                <text id="Fx">
                    <tspan x="3547.25" y="2746">G</tspan>
                </text>
                <text id="Gx">
                    <tspan x="7884" y="2499">A</tspan>
                </text>
                <text id="Cx">
                    <tspan x="5652.75" y="1999">D</tspan>
                </text>
            </g>
            <g id="Keys-JI" fill="#000000" fill-opacity="0" stroke="#979797" stroke-width="0">
                <rect class=key id="524288/531441" x="5561.5" y="2864.5" width="1045" height="1045"></rect>
                <rect class=key id="531441/524288" x="5561.5" y="-22.5" width="1045" height="1045"></rect>
                <rect class=key id="262144/177147" x="6911.5" y="3283.5" width="1045" height="1045"></rect>
                <rect class=key id="177147/131072" x="2779.5" y="767.5" width="1045" height="1045"></rect>
                <rect class=key id="65536/59049" x="8128.5" y="4400.5" width="1045" height="1045"></rect>
                <rect class=key id="59049/32768" x="577.5" y="2783.5" width="1045" height="1045"></rect>
                <rect class=key id="32768/19683" x="8628.5" y="5784.5" width="1045" height="1045"></rect>
                <rect class=key id="19683/16384" x="-22.5" y="5784.5" width="1045" height="1045"></rect>
                <rect class=key id="8192/6561" x="8278.5" y="7343.5" width="1045" height="1045"></rect>
                <rect class=key id="6561/4096" x="976.5" y="8495.5" width="1045" height="1045"></rect>
                <rect class=key id="4096/2187" x="7161.5" y="8706.5" width="1045" height="1045"></rect>
                <rect class=key id="2187/2048" x="2993.5" y="10074.5" width="1045" height="1045"></rect>
                <rect class=key id="1024/729" x="5561.5" y="9302.5" width="1045" height="1045"></rect>
                <rect class=key id="729/512" x="5561.5" y="10724.5" width="1045" height="1045"></rect>
                <rect class=key id="256/243" x="3961.5" y="8705.5" width="1045" height="1045"></rect>
                <rect class=key id="243/128" x="8028.5" y="10040.5" width="1045" height="1045"></rect>
                <rect class=key id="128/81" x="2478.5" y="7616.5" width="1045" height="1045"></rect>
                <rect class=key id="81/64" x="9628.5" y="8116.5" width="1045" height="1045"></rect>
                <rect class=key id="32/27" x="1476.5" y="5784.5" width="1045" height="1045"></rect>
                <rect class=key id="27/16" x="10127.5" y="5784.5" width="1045" height="1045"></rect>
                <rect class=key id="16/9" x="1976.5" y="3655.5" width="1045" height="1045"></rect>
                <rect class=key id="9/8" x="9527.5" y="3561.5" width="1045" height="1045"></rect>
                <rect class=key id="4/3" x="3461.5" y="2189.5" width="1045" height="1045"></rect>
                <rect class=key id="3/2" x="7778.5" y="1942.5" width="1045" height="1045"></rect>
                <rect class=key id="1" x="5561.5" y="1442.5" width="1045" height="1045"></rect>
            </g>
        </g>
    </g>
</svg>

body {
  background-color: #000000;
  font-family: Avenir next;
  font-size: 100%;
  user-select: none;
  touch-action: none;
}

svg{
  display:block;
  position: absolute;
  z-index:0;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  touch-action: none;
  background-color: #000000;
}


/* Portrait orientation */
/*
@media screen and (orientation: portrait) {
button{
  display: block;
  position: absolute;
  background-color:#000000;
  font-family: avenir next;
  border-radius: 2px;
  border-width: 2px;
  border-style: solid;
  user-select: none;
  height: 7%;
  width: 17%;
  right: 2%;
  z-index: 3;
  font-size: 2vw
}
}
*/
/* Landscape orientation */
/*@media screen and (orientation: landscape) {*/
button{
  display: block;
  position: absolute;
  background-color:#000000;
  font-family: avenir next;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
  user-select: none;
  height: 10%;
  width: 15%;
  right: 2%;
  z-index: 3;
  font-size: 2.5vw
}
/*}*/

.ActiveButton {
  color: #000000;
  background-color: #577590;
  border-color: #577590;
}

.OtherButton {
  color: #577590;
  background-color: #000000;
  border-color: #577590;
}

#PureButton {
  top: 35%;
  left: 10%
}

#ReducedButton{
  top: 55%;
  left: 10%
}

#SelectorText{
  display: none;
  position: absolute;
  left: 5%;
  top: 8%;
  color: #ffffff;
  z-index: 5
}

// General

console.clear(); 

var elem = document.documentElement;


const baseFreq = 293.66
var root = baseFreq
var transpose=0
var voice = 0
var maxVoices = 4
var KeyArray = []
let index

//*** initialize tone.js synth ***

     // core synthesizer
const voice1 = new Tone.Synth({oscillator: {type:"triangle"},
  envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5}, 
  volume: -6});

const voice2 = new Tone.Synth({oscillator: {type:"triangle"},
  envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5}, 
  volume: -6});

const voice3 = new Tone.Synth({oscillator: {type:"triangle"},
  envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5}, 
  volume: -6});

const voice4 = new Tone.Synth({oscillator: {type:"triangle"},
  envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5}, 
  volume: -6});

const synth = [voice1, voice2, voice3, voice4]



const reverb = new Tone.Reverb({wet:0.5}).toDestination();

Tone.connect(voice1, reverb);
Tone.connect(voice2, reverb);
Tone.connect(voice3, reverb);
Tone.connect(voice4, reverb);


      
// Interaction mode

let isTouchDevice
var interaction = 'click'

if ((navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)){isTouchDevice = true}
else {isTouchDevice = false}
    
if (isTouchDevice) {interaction = 'touchstart'}



// Make array of key elements by id

for(var i=0, n=document.getElementsByClassName("key"); i<n.length; i++) {
   KeyArray.push(n[i].id);
   };



// Trigger notes

//Tone.Transport.start()

function triggerNoteOnOff() {
  
  var index = math.eval(this.id)
 
synth[voice].triggerAttackRelease(root*index, "32n");
  
if (voice >= (maxVoices-1)){voice = 0}
else {voice ++}
 
  this.style.fillOpacity=0.5

  const key = this.id;

 function resetOpacity(key){
document.getElementById(key).style.fillOpacity=0}

  setTimeout(function(){resetOpacity(key)}, 200)
  
}
  
  for (const KeyValue of KeyArray) {
    document.getElementById(KeyValue).addEventListener(interaction, triggerNoteOnOff)
  }