0

I'm using Raphaeljs and Jquery to draw chord diagrams from a huge array and it takes forever, I'm trying to figure out a way to draw one chord at a time to avoid javascript timeout errors and prevent the user from having to stare at a blank screen.

This is how I'm drawing the SVGs:

   function drawthis() {
   var container = $("#mydiv");

   for (var i = 0; i < myarray.length; ++i) {
   var section_struct = myarray[i];
   var section = createSectionElement(section_struct);

   for (var j = 0; j < section_struct.chords.length; ++j) {
   section.append(createChordElement(section_struct.chords[j])); }

   container.append(section);
   }


   }

   $(function() { drawthis() });

What's the best way to draw one chord diagram at a time instead of doing them all at once?

VividD
  • 10,456
  • 6
  • 64
  • 111
jthomasbailey
  • 410
  • 1
  • 8
  • 19

1 Answers1

0

I created a chord finder which references an object with about 1000 chords. They're built in a split second. I used tables though which is probably quicker. I don't know if this is the fastest way, but it worked well for me. This is all vanilla js.

Basically I created a chords object which contained all the chords. I'll use two in this example.

var chords = [
    {
        chord: ['x', 0, 2, 0, 2, 0],
        name: 'A',
        type: '7',
    },
    {
        chord: ['x', 3, 2, 0, 1, 0],
        name: 'C',
        type: 'maj',
    },
];

I then pushed the movable chords into the chords object rather than having to input each chord 12 times for each fret position.

// we need the notes twice for creating bar chords.  We'll start at a note then move thorough the next 12
var allSharpNotes = ['A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G'];
// using 'x' for natural notes to prevent duplicates and make sure array is iterated over correct number of times 
var allFlatNotes = ['x', 'Bb', 'x', 'x', 'Db', 'x', 'Eb', 'x', 'x', 'Gb', 'x', 'Ab', 'x', 'Bb', 'x', 'x', 'Db', 'x', 'Eb', 'x', 'x', 'Gb', 'x', 'Ab'];

function makeMovableChords(sharpOrFlat){
    for(ch = 1; ch < 13; ch++){
    chords.push({   
            chord: ['x', 0 + ch, 2 + ch, 2 + ch, 2 + ch, 0 + ch],
            name: sharpOrFlat[ch],
            type: 'maj',
    });
    }
}

// Now run the function and have it create # and b versions of each movable chord.
makeMovableChords(allSharpNotes);
makeMovableChords(allFlatNotes);

Then the markup. Basically just creating a x,y grid.

<div class="chord-container">
    <div id="chord-name"></div>
    <table class="chord">
        <tr id="f0"><td id="s0-f0" class="note nut hide"></td><td id="s1-f0" class="note nut"></td><td id="s2-f0" class="note nut"></td><td id="s3-f0" class="note nut"></td><td id="s4-f0" class="note nut"></td><td id="s5-f0" class="note nut"></td></tr>

        <tr id="f1"><td id="s0-f1" class="note hide"></td><td id="s1-f1" class="note"></td><td id="s2-f1" class="note"></td><td id="s3-f1" class="note"></td><td id="s4-f1" class="note"></td><td id="s5-f1" class="note"></td></tr>

        <tr id="f2"><td id="s0-f2" class="note hide"></td><td id="s1-f2" class="note"></td><td id="s2-f2" class="note"></td><td id="s3-f2" class="note"></td><td id="s4-f2" class="note"></td><td id="s5-f2" class="note"></td></tr>

        <tr id="f3"><td id="s0-f3" class="note hide"></td><td id="s1-f3" class="note"></td><td id="s2-f3" class="note"></td><td id="s3-f3" class="note"></td><td id="s4-f3" class="note"></td><td id="s5-f3" class="note"></td></tr>

        <tr id="f4"><td id="s0-f4" class="note hide"></td><td id="s1-f4" class="note"></td><td id="s2-f4" class="note"></td><td id="s3-f4" class="note"></td><td id="s4-f4" class="note"></td><td id="s5-f4" class="note"></td></tr>

        <tr id="f5"><td id="s0-f5" class="note hide"></td><td id="s1-f5"class="note"></td><td id="s2-f5" class="note"></td><td id="s3-f5" class="note"></td><td id="s4-f5" class="note"></td><td id="s5-f5" class="note"></td></tr>
    </table>
    <div id="select-container">
        <select id="chord-select">
            <option>Dmin</option>
            <option>Emin</option>
            <option>A7</option>
            <option>Cmaj</option>
            <option>Dmaj</option>
            <option>Gmaj</option>
        </select>
        <button id="chord-button" onclick="buildChord();">Make Chord</button>
    </div>
</div>

Then finally the function that builds the chord which is run on click. 

function buildChord(){
    var selectedChord = document.getElementById('chord-select').value;
    // reset all the notes before a new chord is built
    var allNotes = document.getElementsByClassName('note');
    for(i=0; i<allNotes.length; i++){
        allNotes[i].innerHTML = '';
    }
    for(c=0; c<chords.length; c++){
        var searchChord = selectedChord.search(chords[c].name + chords[c].type);
        if(searchChord != -1){
            document.getElementById('chord-name').innerHTML = chords[c].name + chords[c].type;
            for(s=0; s<6; s++){
                switch(chords[c].chord[s]){
                    case 0: 
                        var fret = 0;
                    break;
                    case 1: 
                        var fret = 1;
                    break;
                    case 2: 
                        var fret = 2;
                    break;
                    case 3: 
                        var fret = 3;
                    break;
                    case 4: 
                        var fret = 4;
                    break;
                    case 5: 
                        var fret = 5;
                    break;
                    case 'x':
                        var fret = 'x'
                    break;
                }
                if (fret == 'x'){
                    var placement = 's' + s + '-f' + '0';
                    document.getElementById(placement).innerHTML = '<span class="chord-note">x</span>';
                } else{
                    var placement = 's' + s + '-f' + fret;
                    document.getElementById(placement).innerHTML = '<span class="chord-note">' + chords[c].fingering[s] + '</span>'; 
                }
            }
        }
    }
}
buildChord();

Then of course you'd need to do some styling. Check out my jsfiddle here.

I also wrote a more in depth tutorial here.

Hopefully this helps.

user57391
  • 3
  • 3