What I learned about the code
A quick runthrough of what I have done this week for Rhythm Ruler widget as part of Google Summer of Code ->
So as I said in my previous blog post, I did playback for each rhythm ruler instance, simultaneous playback for all the rhythm ruler instance and save feature for Rhythm Ruler widget.
Playback for each Rhythm Ruler instance ->
For this I added a column to the widget and can be seen in the figure below ->
The respective play button in front of the rulers play the specified rhythm for the ruler with the respective drum.
For example the first ruler play ( divided in 4 parts having ) when we press the play in front of it, it plays like this -> click here
Simultaneous playback ->
Below is the figure showing the widget status after generating from the rhythm ruler block and dividing the rulers into 2, 4, 8 respectively.
So when we click on the button marked in the figure above, we get the sound like this -> click here
For the first ruler sound is coming “tom tom” drum, for the second and third it is coming from “kick” drum.
Save feature for the widget ->
Previously I did the save feature, but it was not complete. Now, as I said in the previous blog, Now save exports rhythm blocks stacks for each of the rhythm ruler in the widget.
For example -> When the rhythm ruler block in the above figure generates the Rhythm Ruler and when we divide the rulers like this ->
1st ruler -> divide it into 2 parts.
2nd ruler -> 1. First divide the ruler in 3 parts.
- Then divide the 2nd cell in two parts.
3rd ruler -> 1. First divide the ruler in 4 parts.
- Then divide the 2nd cell in two parts.
And we now export the widget then it creates three rhythm block stack like in the figure below->
Now I come to What I learned about the code !!
1.The Most interesting part about the code I think was, code for the playback. Previously( when I started contributing to Music Blocks and during contribution ) I didn’t have any idea about how the Music Blocks was able to make sound and I was excited to learn it and I had fun implementing the Playback for Rhythm Ruler widget.
I learned to use synth.trigger() function and how we decide the time interval after which the sound should play, note value of the cell plays a role here ( the argument in the function “defaultBPMFactor / noteValue”).
2. Although I used html tables before ( during my courses at my college ) but after implementing for the widget I learned more about the tables, how they behave, the html and css properties of tables, specially the width of cells as we can’t assign the width to all the cells according to our choice and in this widget we required this many times.
We wanted the ruler to have functionality of recursive dissection hence we needed variable width cells but the problem here was that the cell width of one row affects the other row’s cell’s width ( also a problem in pitch time matrix in current musicblocks) so idea of implementing the widget in a single table( all buttons and all ruler instance in the same table ) didn’t workout so I changed the implementation and used two tables, one for the button and one for the Rhythm Ruler instances, then after this I realized that the Rhythm Ruler instances were also affecting the width of one another’s cells so then I used variable number of table one for each Rhythm Ruler instance. Then when I wanted to add one more column ( for buttons for playback for each ruler instance ), I knew I have to use more tables but it was difficult to add more tables along with each ruler instance in the same “div”, so I added a new “div” for the playback buttons, even in this also I used variable number of tables one for each Rhythm Ruler instance.
Then the problem I faced was connecting these two divs and be able to drag them simultaneously. So I used jQuery for this as in the code below -> rulerbody is one div( contains rulers and top buttons ) and drumDiv ( contains play button for each of the rhythm ruler instance) is another div->
$(function() {
$(‘#rulerbody’).draggable({
drag: function() {
jQuery(‘#drumDiv’).css(‘top’,jQuery(this).position().top);
jQuery(‘#drumDiv’).css(‘left’,jQuery(this).position().left – 30 + ‘px’);
},
stop: function(){
jQuery(‘#drumDiv’).css(‘top’,jQuery(this).position().top);
jQuery(‘#drumDiv’).css(‘left’,jQuery(this).position().left – 30 + ‘px’);
}
});
});
After All this I was able to do the Multiple Rhythm Rulers successfully.In this process I faced many small problems ( not possible to dictate all of them ) and learned a lot while solving them.
3. I also learned about the race conditions. As Browser execute javascript on a single thread, so when i was calling save function ( export in the rhythm ruler ) for each of the rhythm ruler instance in a for loop then race conditions occurred so I used “setTimeout( “save function”, delay );”, this delayed the function calls and hence avoided the race conditions.
