Develop Reference

why is MIDI scripter dropping events after 20x loops in MainStage 3

my drum riff script seems to work up until the riff is repeated (i think around) 20 times. then some notes like snare... start to dissappear. if i hit the global stop and play again it works. also if i reload the script it doesn't help which makes me think... but come up with the road to nowhere. any ideas?
The problem starts at beat position 640 (20x 32 beats per loop).
const riffs = [
['11th Hour',[[1,49,114,1,0],[0,49,0,1.25,0],[1,46,89,1.501,20],[1,36,101,1.748,0],[0,46,0,1.751,20],[0,36,0,1.998,0],[1,46,92,2.001,30],[0,46,0,2.251,30],[1,36,114,2.495,0],[1,46,84,2.498,30],[0,36,0,2.745,0],[0,46,0,2.748,30],[1,38,120,2.999,0],[1,46,113,3.003,30],[0,38,64,3.249,0],[0,46,0,3.253,30],[1,46,85,3.499,20],[0,46,0,3.749,20],[1,46,88,4.002,30],[0,46,0,4.252,30],[1,46,87,4.504,30],[1,36,77,4.743,0],[0,46,0,4.754,30],[0,36,0,4.993,0],[1,36,114,4.999,0],[1,46,107,5.002,30],[0,36,0,5.249,0],[0,46,0,5.252,30],[1,46,82,5.506,30],[1,36,106,5.744,0],[0,46,0,5.756,30],[0,36,0,5.994,0],[1,46,92,5.999,30],[0,46,0,6.249,30],[1,36,114,6.489,0],[1,46,84,6.504,20],[0,36,0,6.739,0],[0,46,0,6.754,20],[1,46,113,6.992,30],[1,38,120,7,0],[0,46,0,7.242,30],[0,38,64,7.25,0],[1,46,81,7.505,20],[0,46,0,7.755,20],[1,46,90,7.999,30],[1,36,102,8.243,0],[0,46,0,8.248,30],[0,36,0,8.493,0],[1,38,120,8.495,0],[1,46,113,8.498,30],[0,38,64,8.745,0],[0,46,0,8.748,30],[1,36,114,8.995,0],[1,46,107,9.002,30],[0,36,0,9.245,0],[0,46,0,9.252,30],[1,46,85,9.502,20],[1,36,101,9.745,0],[0,46,0,9.752,20],[0,36,0,9.995,0],[1,46,93,9.998,30],[0,46,0,10.248,30],[1,36,114,10.49,0],[1,46,84,10.498,20],[0,36,0,10.74,0],[0,46,0,10.748,20],[1,38,120,10.995,0],[1,46,113,10.998,30],[0,38,64,11.245,0],[0,46,0,11.248,30],[1,46,81,11.495,30],[0,46,0,11.745,30],[1,46,90,12,30],[0,46,0,12.25,30],[1,46,84,12.498,20],[1,36,77,12.737,0],[0,46,0,12.748,20],[0,36,0,12.988,0],[1,36,114,12.994,0],[1,46,107,13,30],[0,36,0,13.244,0],[0,46,0,13.25,30],[1,46,88,13.498,30],[1,36,104,13.734,0],[0,46,0,13.748,30],[0,36,0,13.984,0],[1,46,86,13.995,30],[0,46,0,14.245,30],[1,36,114,14.494,0],[1,46,89,14.501,20],[0,36,0,14.744,0],[0,46,0,14.751,20],[1,46,113,14.99,30],[1,38,120,14.994,0],[0,46,0,15.24,30],[1,36,99,15.242,0],[0,38,64,15.244,0],[0,36,0,15.492,0],[1,46,88,15.501,20],[1,36,106,15.735,0],[0,46,0,15.751,20],[0,36,0,15.985,0],[1,46,89,15.997,30],[0,46,0,16.247,30],[1,38,83,16.49,0],[0,38,64,16.74,0],[1,40,105,16.743,0],[1,57,114,16.991,0],[0,40,64,16.993,0],[1,36,114,16.993,0],[0,57,0,17.241,0],[0,36,0,17.243,0],[1,46,86,17.499,30],[1,36,101,17.744,0],[0,46,0,17.749,30],[0,36,0,17.994,0],[1,46,88,18,30],[0,46,0,18.25,30],[1,36,114,18.494,0],[1,46,84,18.499,30],[0,36,0,18.744,0],[0,46,0,18.749,30],[1,46,113,19,30],[1,38,120,19.003,0],[0,46,0,19.25,30],[0,38,64,19.253,0],[1,46,81,19.503,20],[0,46,0,19.753,20],[1,46,91,19.999,30],[0,46,0,20.249,30],[1,46,84,20.5,30],[0,46,0,20.75,30],[1,36,114,20.998,0],[1,46,107,20.999,30],[0,36,0,21.248,0],[0,46,0,21.249,30],[1,46,85,21.502,20],[1,36,98,21.74,0],[0,46,0,21.752,20],[0,36,0,21.99,0],[1,46,85,22.003,30],[0,46,0,22.253,30],[1,36,114,22.497,0],[1,46,86,22.5,20],[0,36,0,22.747,0],[0,46,0,22.75,20],[1,46,113,22.992,30],[1,38,120,23,0],[0,46,0,23.242,30],[0,38,64,23.25,0],[1,46,85,23.502,30],[0,46,0,23.752,30],[1,46,91,24.002,30],[1,36,99,24.241,0],[0,46,0,24.252,30],[0,36,0,24.491,0],[1,38,120,24.496,0],[1,46,113,24.502,30],[0,38,64,24.746,0],[0,46,0,24.752,30],[1,36,114,24.996,0],[1,46,107,24.996,30],[0,46,0,25.246,30],[0,36,0,25.246,0],[1,46,89,25.498,20],[1,36,102,25.743,0],[0,46,0,25.748,20],[0,36,0,25.993,0],[1,46,91,25.999,30],[0,46,0,26.249,30],[1,36,114,26.49,0],[1,46,88,26.503,20],[0,36,0,26.74,0],[0,46,0,26.753,20],[1,46,113,26.994,30],[1,38,120,27.001,0],[0,46,0,27.244,30],[0,38,64,27.251,0],[1,46,89,27.5,30],[0,46,0,27.75,30],[1,46,93,28,30],[0,46,0,28.25,30],[1,46,81,28.499,20],[0,46,0,28.749,20],[1,36,114,28.997,0],[1,46,107,29,30],[0,36,0,29.247,0],[0,46,0,29.25,30],[1,46,86,29.505,30],[1,36,105,29.741,0],[0,46,0,29.755,30],[0,36,0,29.991,0],[1,46,94,30,30],[0,46,0,30.25,30],[1,36,114,30.498,0],[1,46,86,30.501,30],[0,36,0,30.748,0],[0,46,0,30.751,30],[1,46,113,30.997,30],[1,38,120,30.998,0],[0,46,0,31.247,30],[0,38,64,31.248,0],[1,36,102,31.492,0],[1,46,86,31.503,30],[0,36,64,31.742,0],[0,46,0,31.753,30],[1,47,99,31.992,0],[1,33,110,31.994,0],[1,40,110,32.008,0],[0,47,64,32.241,0],[0,33,64,32.244,0],[0,40,64,32.258,0],[1,36,86,32.494,0],[0,36,64,32.744,0]]],
['Black Veil',[[1,36,118,0.994,0],[1,33,39,0.998,0],[1,57,118,1.002,0],[0,36,0,1.244,0],[0,33,64,1.248,0],[0,57,0,1.252,0],[1,45,72,1.497,0],[1,33,13,1.501,0],[1,36,87,1.738,0],[0,45,0,1.747,0],[0,33,64,1.751,0],[0,36,0,1.987,0],[1,45,86,1.999,0],[1,33,39,2.001,0],[1,38,123,2.003,0],[0,45,0,2.249,0],[0,33,64,2.252,0],[0,38,0,2.253,0],[1,45,72,2.501,0],[1,33,7,2.502,0],[1,36,62,2.748,0],[0,45,0,2.751,0],[0,33,64,2.752,0],[1,33,41,2.993,0],[1,36,118,2.995,0],[0,36,0,2.995,0],[1,45,88,2.996,0],[0,33,64,3.243,0],[0,36,0,3.245,0],[0,45,0,3.246,0],[1,45,73,3.498,0],[1,33,13,3.503,0],[0,45,0,3.748,0],[0,33,64,3.753,0],[1,45,85,3.999,0],[1,33,36,4.002,0],[1,38,123,4.003,0],[0,45,0,4.249,0],[0,33,64,4.252,0],[0,38,0,4.253,0],[1,45,72,4.502,0],[1,33,7,4.504,0],[0,45,0,4.752,0],[0,33,64,4.754,0],[1,36,118,4.997,0],[1,33,40,5.003,0],[1,45,80,5.003,0],[0,36,0,5.247,0],[0,45,0,5.253,0],[0,33,64,5.253,0],[1,45,74,5.502,0],[1,33,11,5.504,0],[1,36,92,5.738,0],[0,45,0,5.752,0],[0,33,64,5.754,0],[0,36,0,5.988,0],[1,45,84,6,0],[1,33,35,6.001,0],[1,38,123,6.002,0],[1,36,88,6.242,0],[0,45,0,6.25,0],[0,33,64,6.251,0],[0,38,0,6.252,0],[0,36,0,6.492,0],[1,33,8,6.498,0],[1,45,72,6.501,0],[1,36,61,6.741,0],[0,33,64,6.748,0],[0,45,0,6.751,0],[0,36,0,6.991,0],[1,45,87,6.992,0],[1,33,41,6.996,0],[1,36,118,6.996,0],[0,45,0,7.242,0],[0,36,0,7.246,0],[0,33,64,7.246,0],[1,36,93,7.49,0],[1,45,81,7.499,0],[1,33,16,7.503,0],[0,36,0,7.74,0],[0,45,0,7.749,0],[0,33,64,7.753,0],[1,45,81,7.997,0],[1,33,34,8,0],[1,38,123,8,0],[0,45,0,8.247,0],[0,33,64,8.25,0],[0,38,0,8.251,0],[1,45,69,8.497,0],[1,33,16,8.503,0],[0,45,0,8.747,0],[0,33,64,8.753,0],[1,36,118,8.997,0],[1,33,40,9,0],[1,45,84,9.002,0],[0,36,0,9.247,0],[0,33,64,9.25,0],[0,45,0,9.252,0],[1,45,76,9.495,0],[1,33,5,9.497,0],[0,45,0,9.745,0],[0,33,64,9.747,0],[1,38,123,9.998,0],[1,45,84,10,0],[1,33,33,10.001,0],[0,38,0,10.248,0],[0,45,0,10.25,0],[0,33,64,10.251,0],[1,45,73,10.495,0],[1,33,12,10.504,0],[1,36,62,10.742,0],[0,45,0,10.745,0],[0,33,64,10.754,0],[1,45,86,10.991,0],[0,36,0,10.992,0],[1,36,118,10.993,0],[1,33,35,10.998,0],[0,45,0,11.241,0],[0,36,0,11.243,0],[0,33,64,11.248,0],[1,45,77,11.497,0],[1,33,15,11.503,0],[0,45,0,11.747,0],[0,33,64,11.753,0],[1,45,82,11.997,0],[1,38,123,11.998,0],[1,33,36,12,0],[1,36,91,12.238,0],[0,45,0,12.247,0],[0,38,0,12.248,0],[0,33,64,12.25,0],[0,36,0,12.488,0],[1,45,71,12.494,0],[1,33,10,12.495,0],[0,45,0,12.744,0],[0,33,64,12.745,0],[1,36,118,12.995,0],[1,33,37,12.997,0],[1,45,82,13,0],[0,36,0,13.245,0],[0,33,64,13.247,0],[0,45,0,13.25,0],[1,33,12,13.495,0],[1,45,69,13.498,0],[1,36,85,13.738,0],[0,33,64,13.745,0],[0,45,0,13.748,0],[0,36,0,13.988,0],[1,45,86,13.995,0],[1,33,42,13.995,0],[1,38,123,14,0],[1,36,92,14.234,0],[0,45,0,14.245,0],[0,33,64,14.245,0],[0,38,0,14.25,0],[0,36,0,14.484,0],[1,45,70,14.493,0],[1,33,7,14.501,0],[0,45,0,14.743,0],[1,36,63,14.743,0],[0,33,64,14.751,0],[1,45,82,14.99,0],[0,36,0,14.993,0],[1,33,43,14.995,0],[1,36,118,14.995,0],[0,45,0,15.24,0],[0,36,0,15.245,0],[0,33,64,15.245,0],[1,36,93,15.491,0],[1,33,15,15.498,0],[1,45,89,15.498,0],[0,36,0,15.741,0],[0,33,64,15.748,0],[0,45,0,15.748,0],[1,47,116,15.993,0],[1,45,86,15.995,0],[1,33,41,15.997,0],[1,36,85,16.241,0],[0,47,64,16.243,0],[0,45,0,16.245,0],[0,33,64,16.247,0],[0,36,64,16.361,0],[1,36,99,16.363,0],[1,47,116,16.496,0],[1,45,77,16.497,0],[1,33,6,16.503,0],[0,36,64,16.612,0],[1,36,107,16.736,0],[0,47,64,16.746,0],[0,45,0,16.747,0],[0,33,64,16.753,0],[0,36,64,16.986,0],[1,36,118,16.995,0],[1,33,32,16.996,0],[1,57,118,16.999,0],[0,36,0,17.245,0],[0,33,64,17.246,0],[0,57,0,17.249,0],[1,45,74,17.494,0],[1,33,7,17.502,0],[0,45,0,17.744,0],[1,36,84,17.745,0],[0,33,64,17.752,0],[0,36,0,17.995,0],[1,45,86,17.996,0],[1,38,123,18,0],[1,33,38,18.001,0],[0,45,0,18.246,0],[0,38,0,18.25,0],[0,33,64,18.251,0],[1,33,10,18.499,0],[1,45,78,18.5,0],[1,36,57,18.741,0],[0,33,64,18.749,0],[0,45,0,18.75,0],[0,36,0,18.991,0],[1,36,118,18.994,0],[1,33,43,18.995,0],[1,45,85,19,0],[0,36,0,19.244,0],[0,33,64,19.245,0],[0,45,0,19.25,0],[1,45,75,19.499,0],[1,33,5,19.503,0],[0,45,0,19.749,0],[0,33,64,19.753,0],[1,33,42,19.999,0],[1,45,86,19.999,0],[1,38,123,20.003,0],[0,45,0,20.249,0],[0,33,64,20.249,0],[0,38,0,20.253,0],[1,45,77,20.501,0],[1,33,12,20.505,0],[0,45,0,20.751,0],[0,33,64,20.755,0],[1,33,32,20.994,0],[1,45,81,20.994,0],[1,36,118,20.998,0],[0,45,0,21.244,0],[0,33,64,21.244,0],[0,36,0,21.248,0],[1,45,70,21.499,0],[1,33,8,21.502,0],[1,36,88,21.748,0],[0,45,0,21.749,0],[0,33,64,21.752,0],[0,36,0,21.998,0],[1,33,43,21.999,0],[1,45,88,21.999,0],[1,38,123,22.003,0],[0,45,0,22.249,0],[0,33,64,22.249,0],[0,38,0,22.253,0],[1,33,14,22.498,0],[1,45,72,22.501,0],[1,36,59,22.747,0],[0,33,64,22.748,0],[0,45,0,22.751,0],[1,45,89,22.992,0],[0,36,0,22.994,0],[1,36,118,22.994,0],[1,33,36,23.001,0],[0,45,0,23.242,0],[0,36,0,23.244,0],[0,33,64,23.251,0],[1,36,93,23.493,0],[1,45,79,23.496,0],[1,33,15,23.505,0],[0,36,0,23.743,0],[0,45,0,23.746,0],[0,33,64,23.755,0],[1,33,33,23.999,0],[1,45,89,23.999,0],[1,38,123,24.003,0],[1,36,91,24.24,0],[0,45,0,24.249,0],[0,33,64,24.249,0],[0,38,0,24.253,0],[0,36,0,24.49,0],[1,45,77,24.494,0],[1,33,11,24.503,0],[0,45,0,24.744,0],[0,33,64,24.753,0],[1,33,41,24.996,0],[1,45,80,24.996,0],[1,36,118,24.998,0],[0,45,0,25.246,0],[0,33,64,25.246,0],[0,36,0,25.248,0],[1,33,11,25.498,0],[1,45,74,25.499,0],[1,36,86,25.745,0],[0,33,64,25.748,0],[0,45,0,25.749,0],[0,36,0,25.995,0],[1,38,123,26,0],[1,45,88,26.001,0],[1,33,41,26.002,0],[0,38,0,26.25,0],[0,45,0,26.251,0],[0,33,64,26.252,0],[1,33,8,26.498,0],[1,45,71,26.499,0],[1,36,56,26.737,0],[0,33,64,26.748,0],[0,45,0,26.749,0],[0,36,0,26.988,0],[1,33,35,26.994,0],[1,36,118,26.994,0],[1,45,89,27.001,0],[0,36,0,27.244,0],[0,33,64,27.244,0],[0,45,0,27.251,0],[1,45,71,27.495,0],[1,33,13,27.505,0],[0,45,0,27.745,0],[0,33,64,27.755,0],[1,45,87,28.001,0],[1,33,41,28.002,0],[1,38,123,28.003,0],[0,45,0,28.251,0],[0,33,64,28.252,0],[0,38,0,28.253,0],[1,45,77,28.499,0],[1,33,8,28.501,0],[0,45,0,28.749,0],[0,33,64,28.751,0],[1,36,118,28.994,0],[1,45,84,28.999,0],[1,33,43,29.002,0],[1,36,80,29.243,0],[0,36,0,29.243,0],[0,45,0,29.249,0],[0,33,64,29.252,0],[0,36,0,29.493,0],[1,45,70,29.495,0],[1,33,13,29.501,0],[1,36,86,29.742,0],[0,45,0,29.745,0],[0,33,64,29.751,0],[0,36,0,29.992,0],[1,45,87,30,0],[1,38,123,30.001,0],[1,33,35,30.002,0],[0,45,0,30.25,0],[0,38,0,30.251,0],[0,33,64,30.252,0],[1,45,77,30.497,0],[1,33,14,30.498,0],[1,36,58,30.745,0],[0,45,0,30.747,0],[0,33,64,30.748,0],[0,36,0,30.995,0],[1,40,116,31.015,0],[1,40,116,31.232,0],[0,40,64,31.233,0],[0,40,64,31.482,0],[1,38,104,31.498,0],[1,38,48,31.744,0],[0,38,64,31.744,0],[0,38,64,31.994,0],[1,40,116,31.999,0],[1,38,104,32.244,0],[0,40,64,32.248,0],[0,38,64,32.494,0],[1,38,114,32.498,0],[1,38,104,32.741,0],[0,38,64,32.741,0],[0,38,64,32.992,0]]],
['Crimson',[[1,49,117,0.999,0],[1,36,116,1,0],[0,49,0,1.249,0],[0,36,0,1.25,0],[1,57,76,1.507,0],[0,57,0,1.757,0],[1,57,93,2.005,0],[1,38,122,2.008,0],[0,57,0,2.255,0],[0,38,0,2.258,0],[1,57,83,2.51,0],[1,36,94,2.745,0],[0,57,0,2.76,0],[0,36,0,2.995,0],[1,57,78,3.006,0],[1,36,74,3.251,0],[0,57,0,3.256,0],[0,36,0,3.499,0],[1,36,116,3.499,0],[1,57,89,3.507,0],[0,36,0,3.749,0],[0,57,0,3.757,0],[1,57,99,4.006,0],[1,38,122,4.011,0],[0,57,0,4.257,0],[0,38,0,4.261,0],[1,57,74,4.511,0],[0,57,0,4.761,0],[1,36,116,5.001,0],[1,57,94,5.006,0],[0,36,0,5.251,0],[0,57,0,5.256,0],[1,57,65,5.513,0],[1,36,99,5.744,0],[0,57,0,5.763,0],[0,36,0,5.994,0],[1,57,91,6.006,0],[1,38,122,6.008,0],[0,57,0,6.256,0],[0,38,0,6.258,0],[1,57,76,6.505,0],[1,36,95,6.752,0],[0,57,0,6.755,0],[0,36,0,7.002,0],[1,57,79,7.004,0],[0,57,0,7.254,0],[1,36,116,7.499,0],[1,57,78,7.511,0],[0,36,0,7.749,0],[0,57,0,7.761,0],[1,38,122,8.007,0],[1,57,88,8.007,0],[1,36,96,8.245,0],[0,57,0,8.257,0],[0,38,0,8.257,0],[0,36,0,8.495,0],[1,36,115,8.498,0],[1,57,80,8.506,0],[0,36,0,8.748,0],[0,57,0,8.756,0],[1,57,93,8.997,0],[1,36,116,9.001,0],[0,57,0,9.247,0],[0,36,0,9.251,0],[1,57,75,9.505,0],[0,57,0,9.755,0],[1,38,122,10.005,0],[1,57,105,10.008,0],[0,38,0,10.255,0],[0,57,0,10.258,0],[1,57,76,10.505,0],[1,36,97,10.748,0],[0,57,0,10.755,0],[0,36,0,10.998,0],[1,57,80,11,0],[0,57,0,11.25,0],[1,36,116,11.495,0],[1,57,82,11.506,0],[0,36,0,11.745,0],[0,57,0,11.756,0],[1,57,98,12.005,0],[1,38,122,12.008,0],[1,36,98,12.243,0],[0,57,0,12.255,0],[0,38,0,12.258,0],[0,36,0,12.493,0],[1,57,80,12.507,0],[0,57,0,12.757,0],[1,36,116,12.998,0],[1,57,93,13.006,0],[0,36,0,13.248,0],[0,57,0,13.256,0],[1,57,74,13.507,0],[1,36,92,13.743,0],[0,57,0,13.757,0],[0,36,0,13.993,0],[1,38,122,14.003,0],[1,57,90,14.004,0],[0,38,0,14.253,0],[0,57,0,14.254,0],[1,57,75,14.505,0],[1,36,99,14.748,0],[0,57,0,14.755,0],[0,36,0,14.998,0],[1,57,84,15.003,0],[1,36,75,15.248,0],[0,57,0,15.253,0],[0,36,0,15.498,0],[1,36,116,15.498,0],[1,57,81,15.507,0],[0,36,0,15.748,0],[0,57,0,15.757,0],[1,57,89,16.007,0],[1,38,122,16.008,0],[1,36,94,16.243,0],[0,57,0,16.257,0],[0,38,0,16.258,0],[1,48,111,16.478,0],[0,36,0,16.493,0],[1,45,118,16.51,0],[0,48,64,16.728,0],[0,45,64,16.751,0],[1,45,112,16.751,0],[1,49,117,17,0],[0,45,64,17.001,0],[1,36,116,17.002,0],[0,49,0,17.25,0],[0,36,0,17.252,0],[1,57,86,17.505,0],[0,57,0,17.755,0],[1,57,104,18.004,0],[1,38,122,18.009,0],[0,57,0,18.254,0],[0,38,0,18.259,0],[1,57,76,18.507,0],[1,36,91,18.754,0],[0,57,0,18.757,0],[1,57,81,19.003,0],[0,36,0,19.004,0],[0,57,0,19.253,0],[1,36,116,19.499,0],[1,57,96,19.504,0],[0,36,0,19.749,0],[0,57,0,19.754,0],[1,57,102,20.007,0],[1,38,122,20.008,0],[1,36,92,20.251,0],[0,57,0,20.257,0],[0,38,0,20.258,0],[0,36,0,20.501,0],[1,57,68,20.511,0],[0,57,0,20.761,0],[1,36,116,21.002,0],[1,57,99,21.007,0],[0,36,0,21.252,0],[0,57,0,21.257,0],[1,57,84,21.513,0],[1,36,95,21.747,0],[0,57,0,21.763,0],[0,36,0,21.997,0],[1,38,122,22.006,0],[1,57,100,22.009,0],[0,38,0,22.256,0],[0,57,0,22.259,0],[1,57,83,22.511,0],[1,36,94,22.752,0],[0,57,0,22.761,0],[0,36,0,23.002,0],[1,57,66,23.005,0],[1,36,75,23.245,0],[0,57,0,23.255,0],[0,36,0,23.495,0],[1,36,116,23.501,0],[1,57,85,23.508,0],[0,36,0,23.751,0],[0,57,0,23.758,0],[1,57,105,24.007,0],[1,38,122,24.01,0],[0,57,0,24.257,0],[0,38,0,24.26,0],[1,57,72,24.511,0],[0,57,0,24.761,0],[1,57,99,24.998,0],[1,36,116,25.004,0],[0,57,0,25.248,0],[0,36,0,25.254,0],[1,57,69,25.504,0],[1,36,93,25.751,0],[0,57,0,25.754,0],[0,36,0,26.001,0],[1,57,91,26.005,0],[1,38,122,26.006,0],[0,57,0,26.255,0],[0,38,0,26.256,0],[1,57,79,26.509,0],[1,36,91,26.75,0],[0,57,0,26.759,0],[0,36,0,27,0],[1,57,81,27.005,0],[0,57,0,27.255,0],[1,36,116,27.499,0],[1,57,97,27.504,0],[0,36,0,27.749,0],[0,57,0,27.754,0],[1,57,88,28.007,0],[1,38,122,28.009,0],[0,57,0,28.257,0],[0,38,0,28.259,0],[1,57,78,28.507,0],[0,57,0,28.757,0],[1,36,116,29.003,0],[1,57,101,29.007,0],[0,36,0,29.253,0],[0,57,0,29.257,0],[1,57,78,29.511,0],[1,36,96,29.75,0],[0,57,0,29.761,0],[0,36,0,30,0],[1,38,122,30.006,0],[1,57,89,30.008,0],[0,38,0,30.256,0],[0,57,0,30.258,0],[1,57,73,30.506,0],[1,36,93,30.755,0],[0,57,0,30.756,0],[1,57,83,30.998,0],[0,36,0,31.005,0],[1,36,70,31.246,0],[0,57,0,31.248,0],[1,48,104,31.484,0],[0,36,0,31.496,0],[1,47,102,31.521,0],[0,48,64,31.734,0],[1,36,112,31.748,0],[0,47,64,31.771,0],[0,36,64,31.998,0],[1,36,112,32.252,0],[1,47,98,32.461,0],[0,36,64,32.502,0],[1,43,107,32.518,0],[0,47,64,32.711,0],[0,43,64,32.768,0]]]
];
var riffData = riffs[0][1];
var NeedsTimingInfo = true;
var ResetParameterDefaults = true;
function ParameterChanged(index, value)
{
var name = PluginParameters[index].name;
Trace("parameterChanged($index:"+index+" ["+name+"], $value:"+value+")");
if (name == 'Riff')
{
setRiff(value);
}
}
function setRiff(riff)
{
Trace("Riff Changed To: "+riff+": "+riffs[riff][0]);
riffData = riffs[riff][1];
MIDI.allNotesOff();
}
function ProcessMIDI()
{
var musicInfo = GetTimingInfo();
if (musicInfo.playing)
{
var blockStartBeat = musicInfo.blockStartBeat;
var blockEndBeat = musicInfo.blockEndBeat;
var riffStart = blockStartBeat - (blockStartBeat % 32);
var length = riffData.length;
var i = 0;
for (i; i < length; i++)
{
var data = riffData[i];
var pos = data[3] + riffStart;
// its before the process block
if (pos < blockStartBeat)
{
continue;
}
// its after the process block
if (pos > blockEndBeat)
{
break;
}
//Trace("["+data[0]+","+data[1]+","+data[2]+","+data[3]+","+data[4]+"] ");
if (data[0] == 1)
{
note = new NoteOn();
}
else
{
note = new NoteOff();
}
note.pitch = data[1];
note.velocity = data[2];
note.articulationID = data[4];
note.sendAtBeat(pos);
// no more riff events but might still be processing so begin next riff
if (i + 1 >= length)
{
riffStart+= 32;
i = 0;
}
}
}
}
//define the UI -----------------------------------------------------------------
var PluginParameters = [];
// add select riff control
PluginParameters.push(
{
name: "Riff",
type: "menu",
valueStrings: [
riffs[0][0],
riffs[1][0]
],
defaultValue: 0
});
The scripter plugin was loaded on a drum kit software instrument channel and works great for the most part.
I've traced each beat with another scripter plugin and all the notes have been logged, so i assume they've all been sent properly. All the notes should be there but they just can't be heard.
I've tried all kinds of things, i'm stuck!

Black images from canvas.toDataURL()

I have created a web application where users can upload images from their filesystem but in few cases I only get black image data on the server side. I have never got this issue in my development environment on lan even with the original images causing the error. This failure occurs overall only sporadic but especially one user is affected. All users should work with the latest firefox. I have read most of the question about this topic and I dont think this is related to a security issue, the jpg/png setting or preserveDrawingBuffer. Because I have never got this problem on lan with a fast PC and the fact that often the last selected images are affected it seems to be a synchronization problem.
To avoid this I work with $.Deferred and Callbacks but may be I missed something. First I load and convert the selected images directly into a list of canvas. The upload is disabled until this is finished. During the upload I just loop through the canvas list and read the data (canvas.toDataURL()) with a $.Deferred and transfer it to the server via ajax.
Get the images to the page:
var file = document.getElementById('fileSelect');
if (file != undefined) {
file.onchange = function (e) {
btnUpload.SetEnabled(false);
loadImgs(e, function () {
btnUpload.SetEnabled(true);
});
};
}
function loadImgs(e, callback) {
for (var t = 0; t < e.target.files.length; t++) {
if ($('.CanvasClass').length <= 20) {
var myTmpImg = new Image();
var myName = e.target.files[t].name;
myTmpImg.src = URL.createObjectURL(e.target.files[t]);
myTmpImg.onload = function () {
var GrenzeX = 1024;
var GrenzeY = 768;
var myFactor = 1;
if (myTmpImg.naturalWidth > GrenzeX || myTmpImg.naturalHeight > GrenzeY) {
if ((GrenzeX / myTmpImg.naturalWidth) < (GrenzeY / myTmpImg.naturalHeight)) {
myFactor = GrenzeX / myTmpImg.naturalWidth;
} else {
myFactor = GrenzeY / myTmpImg.naturalHeight;
}
}
var myCanvas = document.createElement('canvas');
myCanvas.className = "CanvasClass";
myCanvas.height = this.naturalHeight * myFactor;
myCanvas.width = this.naturalWidth * myFactor;
var ctx = myCanvas.getContext("2d");
ctx.drawImage(this, 0, 0, myCanvas.width, myCanvas.height);
$("#myImages").append(myCanvas);
myMetaData.push(new newImgData('', '', myName));
}
}
}
if (callback && typeof callback == "function") {
callback();
}
}
Read and transfer the Data:
$('.CanvasClass').each(function () {
var fd = new FormData();
var base64Data = getBase64Image(this, false);
base64Data.then(function (result) {
//Create Ajax Request
});
});
function getBase64Image(myCanvas, modus) {
var deferred = $.Deferred();
var dataURL = myCanvas.toDataURL("image/jpeg", 0.9);
if (modus === true) {
deferred.resolve(dataURL);
} else {
deferred.resolve(dataURL.replace(/^data:image\/(png|jpeg);base64,/, ""));
}
return deferred.promise();
}
I can also exclude issues during the data transfer because I logged the size of the images on clientside before uploading and compared this to the data at serverside and it was the same.

HTML5 - Socket.IO & Canvas

I am attempting to make a little application where multiple people can move a square around with their arrow keys with the help of Socket.IO.
For my backend I am using Sails.JS and on frontend mostly Angular.
Backend:
var remotePlayers = [];
var findPlayerById = {};
var Player;
function LocalPlayer(x, y, id) {
this.x = x;
this.y = y;
this.id = id;
}
socket.on('new player', function(data) {
// data = user.id;
socket.id = data;
LocalPlayer = new LocalPlayer(defaultX,defaultY, socket.id);
remotePlayers.push(LocalPlayer);
for (var i = 0; i < remotePlayers.length; i++) {
findPlayerById[remotePlayers[i].id] = remotePlayers[i];
};
Player = findPlayerById[socket.id];
console.log(Player);
// Emit to all clients
sails.sockets.blast('player joined', remotePlayers);
})
What I am trying to do here is when the 'new player' emit is triggered, I want to save that player to my a Array(remotePlayers). Then I want to emit that Array back to the client, so the client can draw all the players.
On the client side I have a switch case where I check what key was pressed, I emit this keyValue and a userId to the Server.
Server then make sure the move is valid, does some calculations and returns the updated position of the Player.
socket.on('move player', function updatePlayerPosition(data) {
// data = Key and userId
switch(data.key) {
case 37:
// Some checks here then set new value
Player.x = Player.x - 10;
sails.sockets.blast('player moved', remotePlayers);
break;
case 38:
Then after I have emitted 'player moved', I want my client to draw and display the updated position of the Player.
Client:
SocketService.on('player joined', function(data) {
// data = {x: 50, y:50, id: 'random string'}
draw(data);
})
function draw(data) {
ctx.clearRect(0, 0, HEIGHT, WIDTH);
for (var i = 0; i < data.length; i++) {
// data[i].x = 30
ctx.fillStyle = 'black';
ctx.fillRect(data[i].x, data[i].y, 20, 20);
};
}
Problem: When I open two browsers and try to move my Player(rectangle) it always selects the same rectangle to move. If i use one browser it works, then i open up another one(2 browsers) and both browsers will then move the 2nd browsers rectangle. Does that make any sense?
Player is always the last client to join. What am I missing here? I am pretty new to this so it could be plenty I'm afraid :) Need more code? Just ask and I'll add.
Any suggestions, ideas or links are much appreciated!

Creating an javascript graph with marker that is synchronize with a movie

I'm trying to create an online web tool for eeg signal analysis. The tool suppose to display a graph of an eeg signal synchronize with a movie that was display to a subject.
I've already implemented it successfully on csharp but I can't find a way to do it easily with any of the know javascript chart that I saw.
A link of a good tool that do something similar can be found here:
http://www.mesta-automation.com/real-time-line-charts-with-wpf-and-dynamic-data-display/
I've tried using dygraph, and google chart. I know that it should be relatively easy to create an background thread on the server that examine the movie state every ~50ms. What I was not able to do is to create a marker of the movie position on the chart itself dynamically. I was able to draw on the dygraph but was not able to change the marker location.
just for clarification, I need to draw a vertical line as a marker.
I'm in great suffering. Please help :)

Thanks to Danvk I figure out how to do it.
Below is a jsfiddler links that demonstrate such a solution.
http://jsfiddle.net/ng9vy8mb/10/embedded/result/
below is the javascript code that do the task. It changes the location of the marker in synchronizing with the video.
There are still several improvement that can be done.
Currently, if the user had zoomed in the graph and then click on it, the zoom will be reset.
there is no support for you tube movies
I hope that soon I can post a more complete solution that will also enable user to upload the graph data and video from their computer
;
var dc;
var g;
var v;
var my_graph;
var my_area;
var current_time = 0;
//when the document is done loading, intialie the video events listeners
$(document).ready(function () {
v = document.getElementsByTagName('video')[0];
v.onseeking = function () {
current_time = v.currentTime * 1000;
draw_marker();
};
v.oncanplay = function () {
CreateGraph();
};
v.addEventListener('timeupdate', function (event) {
var t = document.getElementById('time');
t.innerHTML = v.currentTime;
g.updateOptions({
isZoomedIgnoreProgrammaticZoom: true
});
current_time = v.currentTime * 1000;
}, false);
});
function change_movie_position(e, x, points) {
v.currentTime = x / 1000;
}
function draw_marker() {
dc.fillStyle = "rgba(255, 0, 0, 0.5)";
var left = my_graph.toDomCoords(current_time, 0)[0] - 2;
var right = my_graph.toDomCoords(current_time + 2, 0)[0] + 2;
dc.fillRect(left, my_area.y, right - left, my_area.h);
};
//data creation
function CreateGraph() {
number_of_samples = v.duration * 1000;
// A basic sinusoidal data series.
var data = [];
for (var i = 0; i < number_of_samples; i++) {
var base = 10 * Math.sin(i / 90.0);
data.push([i, base, base + Math.sin(i / 2.0)]);
}
// Shift one portion out of line.
var highlight_start = 450;
var highlight_end = 500;
for (var i = highlight_start; i <= highlight_end; i++) {
data[i][2] += 5.0;
}
g = new Dygraph(
document.getElementById("div_g"),
data, {
labels: ['X', 'Est.', 'Actual'],
animatedZooms: true,
underlayCallback: function (canvas, area, g) {
dc = canvas;
my_area = area;
my_graph = g;
bottom_left = g.toDomCoords(0, 0);
top_right = g.toDomCoords(highlight_end, +20);
draw_marker();
}
});
g.updateOptions({
clickCallback: change_movie_position
}, true);
}

how to make 52-week participation bar graphs like Github has done?

I'm trying to make bar graphs similar to how Github does it for showing how many commits or how many people are watching repositories, e.g, https://github.com/popular/watched.
Does anyone know what library they used to make it?
UPDATE I wanted to re-open this question if possible. Re-investigating this, the solutions below while awesome in their own right, seem a little too involved for what I'm looking for.
I've switched to using this nice Nettuts tutorial which draws a single bar graph but I'm having trouble adapting it to draw multiple bar graphs. http://net.tutsplus.com/tutorials/javascript-ajax/fun-with-canvas-create-a-jquery-graph-plugin/
I've made a fiddle where I've manually added code to deal with a 2nd graph but I believe I need some for loops to make this work for a variable number of graphs. Here's that fiddle: http://jsfiddle.net/trpeters1/zHH76/
might someone be able to edit this fiddle to tackle this question?

Look into d3.js. There are several examples of how you can take an array in JavaScript and turn it into a graph like that.
Here is one (more advance) example: http://mbostock.github.com/d3/ex/population.html
And here is another example that is closer to what you want: http://mbostock.github.com/d3/tutorial/bar-2.html
EDIT
The actual code that Git Hub uses to create the graphs looks something like this:
GitHub.ParticipationGraph = (function(){
function b(target){
this.el = target;
this.onSuccess = $.proxy(this.onSuccess, this);
this.canvas = this.el.getContext("2d");
this.refresh();
}
b.prototype.barWidth = 7;
b.prototype.barMaxHeight = 20;
b.prototype.getUrl = function(){
return $(this.el).data("source");
};
b.prototype.setData = function(data){
this.data = data;
if (data == null || data.all == null || data.owner == null) {
this.data = null;
}
this.scale = this.getScale(this.data);
};
b.prototype.getScale = function(data){
var mx, i;
if (data == null) return;
mx = data.all[0];
for(i = 0; i < data.all.length; i++) {
if (data.all[i] > mx) {
mx = data.all[i];
}
}
return mx >= this.barMaxHeight ? (this.barMaxHeight-.1)/mx : 1;
};
b.prototype.refresh = function(){
$.ajax({
url: this.getUrl(),
dataType: "json",
success: this.onSuccess
});
};
b.prototype.onSuccess = function(data){
this.setData(data);
this.draw();
};
b.prototype.draw = function(){
if (this.data == null) return;
this.drawCommits(this.data.all, "#cacaca");
this.drawCommits(this.data.owner, "#336699");
};
b.prototype.drawCommits = function(data, color){
var i, width, height, x, y;
for (i = 0; i < data.length; i++) {
width = this.barWidth;
height = data[i] * this.scale;
x = i * (this.barWidth + 1);
y = this.barMaxHeight - height;
this.canvas.fillStyle = color;
this.canvas.fillRect(x, y, width, height);
}
};
return b;
})();
Basically, they are calling the data-source tag located on the canvas, which returns some JSON that represents the amount of work/participation/watches (or whatever metric they are calculating) and then they go through each returned value and call this.canvas.fillRect with the predefined width ((Screensize.width/52) - (paddingLeft + paddingRight)) and the height from the JSON returned

Try morris for displaying time series data.
Also Timeplot.