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

</script>

 <div class="selector">
   <div id=SelectorText>   
   Ratios: 
   </div>
   <button class="ActiveButton" id="RatioButton">Ratios</button>
      <button class="OtherButton" id="NoteNameButton">Note Names</button>
    </div>

<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" height="100%" viewBox="0 0 11000 11000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>09 Tone diamond</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="11000" height="11000"></rect>
        <g id="Background" transform="translate(758.106781, 758.106781)" stroke-linejoin="round" stroke-width="100">
            <rect id="025/24" stroke="#F3722C" fill="#F3722C" x="2828" y="1414" width="1000" height="1000" rx="50"></rect>
            <rect id="024/25" stroke="#F3722C" fill="#F3722C" x="5656" y="7070" width="1000" height="1000" rx="50"></rect>
            <rect id="010/9" stroke="#F3722C" fill="#F3722C" x="1414" y="2828" width="1000" height="1000" rx="50"></rect>
            <rect id="09/10" stroke="#F3722C" fill="#F3722C" x="7070" y="5656" width="1000" height="1000" rx="50"></rect>
            <rect id="06/5" stroke="#F3722C" fill="#F3722C" x="5656" y="5656" width="1000" height="1000" rx="50"></rect>
            <rect id="05/6" stroke="#F3722C" fill="#F3722C" x="2828" y="2828" width="1000" height="1000" rx="50"></rect>
            <rect id="0128/125" stroke="#F94144" fill="#F94144" x="4242" y="8484" width="1000" height="1000" rx="50"></rect>
            <rect id="0125/128" stroke="#F94144" fill="#F94144" x="4242" y="0" width="1000" height="1000" rx="50"></rect>
            <rect id="032/75" stroke="#F3722C" fill="#F3722C" x="2828" y="7070" width="1000" height="1000" rx="50"></rect>
            <rect id="075/32" stroke="#F3722C" fill="#F3722C" x="5656" y="1414" width="1000" height="1000" rx="50"></rect>
            <rect id="032/45" stroke="#F3722C" fill="#F3722C" x="1414" y="5656" width="1000" height="1000" rx="50"></rect>
            <rect id="045/32" stroke="#F3722C" fill="#F3722C" x="7070" y="2828" width="1000" height="1000" rx="50"></rect>
            <rect id="016/27" stroke="#F8961E" fill="#F8961E" x="0" y="4242" width="1000" height="1000" rx="50"></rect>
            <rect id="027/16" stroke="#F8961E" fill="#F8961E" x="8484" y="4242" width="1000" height="1000" rx="50"></rect>
            <rect id="08/15" stroke="#F3722C" fill="#F3722C" x="2828" y="5656" width="1000" height="1000" rx="50"></rect>
            <rect id="015/8" stroke="#F3722C" fill="#F3722C" x="5656" y="2828" width="1000" height="1000" rx="50"></rect>
            <rect id="016/25" stroke="#F94144" fill="#F94144" x="4242" y="7070" width="1000" height="1000" rx="50"></rect>
            <rect id="025/16" stroke="#F94144" fill="#F94144" x="4242" y="1414" width="1000" height="1000" rx="50"></rect>
            <rect id="08/9" stroke="#F8961E" fill="#F8961E" x="1414" y="4242" width="1000" height="1000" rx="50"></rect>
            <rect id="09/8" stroke="#F8961E" fill="#F8961E" x="7070" y="4242" width="1000" height="1000" rx="50"></rect>
            <rect id="04/5" stroke="#F94144" fill="#F94144" x="4242" y="5656" width="1000" height="1000" rx="50"></rect>
            <rect id="05/4" stroke="#F94144" fill="#F94144" x="4242" y="2828" width="1000" height="1000" rx="50"></rect>
            <rect id="02/3" stroke="#F8961E" fill="#F8961E" x="2828" y="4242" width="1000" height="1000" rx="50"></rect>
            <rect id="03/2" stroke="#F8961E" fill="#F8961E" x="5656" y="4242" width="1000" height="1000" rx="50"></rect>
            <rect id="01/1" stroke="#F9C74F" fill="#F9C74F" x="4242" y="4242" width="1000" height="1000" rx="50"></rect>
        </g>
        <g id="Ratios" transform="translate(758.500000, 1005.000000)" fill="#FFFFFF" font-family="AvenirNext-Regular, Avenir Next" font-size="350" font-weight="normal">
            <text id="1/1t">
                <tspan x="4475.75" y="4598">1/1</tspan>
            </text>
            <text id="5/1t">
                <tspan x="4475.75" y="3186">5/1</tspan>
            </text>
            <text id="25/1t">
                <tspan x="4374.75" y="1768">25/1</tspan>
            </text>
            <text id="125/1t">
                <tspan x="4272.75" y="350">125/1</tspan>
            </text>
            <text id="15/1t">
                <tspan x="5784.75" y="3186">15/1</tspan>
            </text>
            <text id="45/1t">
                <tspan x="7195.75" y="3186">45/1</tspan>
            </text>
            <text id="75/1t">
                <tspan x="5785.75" y="1768">75/1</tspan>
            </text>
            <text id="25/3t">
                <tspan x="2963.75" y="1768">25/3</tspan>
            </text>
            <text id="5/3t">
                <tspan x="3064.75" y="3186">5/3</tspan>
            </text>
            <text id="5/9t">
                <tspan x="1643.75" y="3186">5/9</tspan>
            </text>
            <text id="1/45t">
                <tspan x="1541.75" y="6016">1/45</tspan>
            </text>
            <text id="1/15t">
                <tspan x="2962.75" y="6016">1/15</tspan>
            </text>
            <text id="1/5t">
                <tspan x="4475.75" y="6016">1/5</tspan>
            </text>
            <text id="3/5t">
                <tspan x="5886.75" y="6016">3/5</tspan>
            </text>
            <text id="9/5t">
                <tspan x="7304.75" y="6016">9/5</tspan>
            </text>
            <text id="3/25t">
                <tspan x="5794.75" y="7428">3/25</tspan>
            </text>
            <text id="1/25t">
                <tspan x="4373.75" y="7428">1/25</tspan>
            </text>
            <text id="1/75t">
                <tspan x="2962.75" y="7428">1/75</tspan>
            </text>
            <text id="1/125t">
                <tspan x="4272.75" y="8840">1/125</tspan>
            </text>
            <text id="1/3t">
                <tspan x="3064.75" y="4604">1/3</tspan>
            </text>
            <text id="1/9t">
                <tspan x="1643.75" y="4598">1/9</tspan>
            </text>
            <text id="1/27t">
                <tspan x="130.75" y="4598">1/27</tspan>
            </text>
            <text id="3/1t">
                <tspan x="5886.75" y="4598">3/1</tspan>
            </text>
            <text id="9/1t">
                <tspan x="7304.75" y="4598">9/1</tspan>
            </text>
            <text id="27/1t">
                <tspan x="8613.75" y="4598">27/1</tspan>
            </text>
        </g>
        <g id="NoteNames" transform="translate(755.500000, 767.000000)" fill="#FFFFFF" font-family="AvenirNext-Regular, Avenir Next" font-size="500" font-weight="normal">
            <text id="D">
                <tspan x="4558.75" y="4934">D</tspan>
            </text>
            <text id="F♯">
                <tspan x="4497.75879" y="3516">F</tspan>
                <tspan x="4778.75879" y="3516" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
            </text>
            <text id="A♯">
                <tspan x="4463.75879" y="2108">A</tspan>
                <tspan x="4813.75879" y="2108" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
            </text>
            <text id="C♯♯">
                <tspan x="4349.51758" y="700">C</tspan>
                <tspan x="4709.51758" y="700" font-family="ArialUnicodeMS, Arial Unicode MS">♯♯</tspan>
            </text>
            <text id="C♯">
                <tspan x="5873.75879" y="3516">C</tspan>
                <tspan x="6233.75879" y="3516" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
            </text>
            <text id="G♯">
                <tspan x="7274.50879" y="3516">G</tspan>
                <tspan x="7664.00879" y="3516" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
            </text>
            <text id="E♯">
                <tspan x="5905.75879" y="2108">E</tspan>
                <tspan x="6201.75879" y="2108" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
            </text>
            <text id="D♯">
                <tspan x="3032.50879" y="2108">D</tspan>
                <tspan x="3411.00879" y="2108" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
            </text>
            <text id="B">
                <tspan x="3173.5" y="3516">B</tspan>
            </text>
            <text id="E">
                <tspan x="1768.5" y="3516">E</tspan>
            </text>
            <text id="A♭">
                <tspan x="1632.25879" y="6352">A</tspan>
                <tspan x="1982.25879" y="6352" font-family="ArialUnicodeMS, Arial Unicode MS">♭</tspan>
            </text>
            <text id="E♭">
                <tspan x="3076.25879" y="6352">E</tspan>
                <tspan x="3372.25879" y="6352" font-family="ArialUnicodeMS, Arial Unicode MS">♭</tspan>
            </text>
            <text id="B♭">
                <tspan x="4479.25879" y="6352">B</tspan>
                <tspan x="4797.25879" y="6352" font-family="ArialUnicodeMS, Arial Unicode MS">♭</tspan>
            </text>
            <text id="F">
                <tspan x="6022.5" y="6352">F</tspan>
            </text>
            <text id="C">
                <tspan x="7399.5" y="6352">C</tspan>
            </text>
            <text id="D♭">
                <tspan x="5864.50879" y="7770">D</tspan>
                <tspan x="6243.00879" y="7770" font-family="ArialUnicodeMS, Arial Unicode MS">♭</tspan>
            </text>
            <text id="G♭">
                <tspan x="4442.50879" y="7770">G</tspan>
                <tspan x="4832.00879" y="7770" font-family="ArialUnicodeMS, Arial Unicode MS">♭</tspan>
            </text>
            <text id="C♭">
                <tspan x="3041.25879" y="7770">C</tspan>
                <tspan x="3401.25879" y="7770" font-family="ArialUnicodeMS, Arial Unicode MS">♭</tspan>
            </text>
            <text id="E♭♭">
                <tspan x="4381.01758" y="9188">E</tspan>
                <tspan x="4677.01758" y="9188" font-family="ArialUnicodeMS, Arial Unicode MS">♭♭</tspan>
            </text>
            <text id="G">
                <tspan x="3138.75" y="4934">G</tspan>
            </text>
            <text id="C">
                <tspan x="1736.5" y="4934">C</tspan>
            </text>
            <text id="F">
                <tspan x="359.5" y="4934">F</tspan>
            </text>
            <text id="A">
                <tspan x="5988.5" y="4934">A</tspan>
            </text>
            <text id="E">
                <tspan x="7429.5" y="4924">E</tspan>
            </text>
            <text id="B">
                <tspan x="8832.5" y="4934">B</tspan>
            </text>
        </g>
        <g id="Keys" transform="translate(758.106781, 758.106781)" fill-opacity="0" stroke-linejoin="round" stroke-width="0">

          <rect class=key id="25/24" stroke="#000000" fill="#000000" x="2753" y="1339" width="1150" height="1150" rx="50"></rect>
<rect class=key id="24/25" stroke="#000000" fill="#000000" x="5581" y="6995" width="1150" height="1150" rx="50"></rect>
<rect class=key id="10/9" stroke="#000000" fill="#000000" x="1339" y="2753" width="1150" height="1150" rx="50"></rect>
<rect class=key id="9/10" stroke="#000000" fill="#000000" x="6995" y="5581" width="1150" height="1150" rx="50"></rect>
<rect class=key id="6/5" stroke="#000000" fill="#000000" x="5581" y="5581" width="1150" height="1150" rx="50"></rect>
<rect class=key id="5/6" stroke="#000000" fill="#000000" x="2753" y="2753" width="1150" height="1150" rx="50"></rect>
<rect class=key id="128/125" stroke="#000000" fill="#000000" x="4167" y="8409" width="1150" height="1150" rx="50"></rect>
<rect class=key id="125/128" stroke="#000000" fill="#000000" x="4167" y="-75" width="1150" height="1150" rx="50"></rect>
<rect class=key id="32/75" stroke="#000000" fill="#000000" x="2753" y="6995" width="1150" height="1150" rx="50"></rect>
<rect class=key id="75/32" stroke="#000000" fill="#000000" x="5581" y="1339" width="1150" height="1150" rx="50"></rect>
<rect class=key id="32/45" stroke="#000000" fill="#000000" x="1339" y="5581" width="1150" height="1150" rx="50"></rect>
<rect class=key id="45/32" stroke="#000000" fill="#000000" x="6995" y="2753" width="1150" height="1150" rx="50"></rect>
<rect class=key id="16/27" stroke="#000000" fill="#000000" x="-75" y="4167" width="1150" height="1150" rx="50"></rect>
<rect class=key id="27/16" stroke="#000000" fill="#000000" x="8409" y="4167" width="1150" height="1150" rx="50"></rect>
<rect class=key id="8/15" stroke="#000000" fill="#000000" x="2753" y="5581" width="1150" height="1150" rx="50"></rect>
<rect class=key id="15/8" stroke="#000000" fill="#000000" x="5581" y="2753" width="1150" height="1150" rx="50"></rect>
<rect class=key id="16/25" stroke="#000000" fill="#000000" x="4167" y="6995" width="1150" height="1150" rx="50"></rect>
<rect class=key id="25/16" stroke="#000000" fill="#000000" x="4167" y="1339" width="1150" height="1150" rx="50"></rect>
<rect class=key id="8/9" stroke="#000000" fill="#000000" x="1339" y="4167" width="1150" height="1150" rx="50"></rect>
<rect class=key id="9/8" stroke="#000000" fill="#000000" x="6995" y="4167" width="1150" height="1150" rx="50"></rect>
<rect class=key id="4/5" stroke="#000000" fill="#000000" x="4167" y="5581" width="1150" height="1150" rx="50"></rect>
<rect class=key id="5/4" stroke="#000000" fill="#000000" x="4167" y="2753" width="1150" height="1150" rx="50"></rect>
<rect class=key id="2/3" stroke="#000000" fill="#000000" x="2753" y="4167" width="1150" height="1150" rx="50"></rect>
<rect class=key id="3/2" stroke="#000000" fill="#000000" x="5581" y="4167" width="1150" height="1150" rx="50"></rect>

          <rect class=key id="1/1" stroke="#000000" fill="#000000" x="4167" y="4167" width="1150" height="1150" rx="50"></rect>
        </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;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  touch-action: none;
  background-color: #000000;
}

#Ratios{
  display: block
}

#NoteNames{
  display: none
}

/* 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: 5%;
  width: 20%;
  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;
}

#RatioButton {
  top: 5%;
  left: 5%
}

#NoteNameButton{
  top: 15%;
  left: 5%
}

#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)
  }



document.getElementById("RatioButton").addEventListener('click', function() {
  document.getElementById("NoteNames").style.display="none"
  document.getElementById("Ratios").style.display="block"
  document.getElementById("RatioButton").className = "ActiveButton";
  document.getElementById("NoteNameButton").className = "OtherButton";
})

document.getElementById("NoteNameButton").addEventListener('click', function() {
  document.getElementById("Ratios").style.display="none"
  document.getElementById("NoteNames").style.display="block"
  document.getElementById("NoteNameButton").className = "ActiveButton";
  document.getElementById("RatioButton").className = "OtherButton";
})