stroke looper animation

description.md

http://bouboucle.com?gist=056227a2b06b70bc78b0dad661ba14b7

looper.jsonp

load({"width":1366,"height":841.33,"speed":1,"lineData":[{"start":1599592099430,"last":8714,"beat":500,"lifetime":50,"color":"#1A237E","multiPeriod":1,"strokeWidth":200,"times":[0,139,170,203,235,267,300,332,362,394,395,427,429,460,462,494,495,526,529,559,562,591,594,625,658,692,696,728,729,760,762,793,795,826,829,859,863,894,895,927,929,961,962,995,996,1030,1062,1062,1096,1129,1162,1163,1196,1229,1261,1262,1296,1329,1361,1362,1396,1427,1429,1460,1464,1495,1525,1529,1557,1589,1622,1655,1690,1722,1754,1789,1821,1853,1885,1919,1951,1983,2015,2046,2079,2110,2144,2145,2177,2179,2210,2213,2244,2245,2276,2279,2310,2312,2342,2346,2379,2407,2441,2473,2505,2536,2568,2602,2635,2667,2701,2733,2766,2799,2832,2864,2896,2929,2962,2996,3027,3029,3059,3062,3091,3128,3129,3159,3162,3192,3226,3257,3306,3312,3344,3346,3377,3379,3410,3412,3444,3476,3479,3529,3563,3595,3596,3628,3630,3663,3696,3729,3729,3761,3763,3793,3795,3844,3884,3916,3948,3981,3981,4014,4046,4077,4079,4112,4166,4198,4231,4263,4294,4295,4328,4329,4362,4394,4396,4429,4463,4496,4528,4529,4561,4562,4594,4597,4630,4662,4662,4694,4730,4763,4793,4796,4828,4829,4859,4862,4891,4921,4960,4962,4996,5043,5048,5080,5113,5145,5146,5177,5179,5210,5213,5246,5279,5311,5312,5344,5346,5379,5413,5414,5446,5479,5480,5513,5546,5579,5609,5613,5641,5679,5679,5713,5745,5745,5776,5779,5814,5846,5876,5879,5907,5945,5946,5977,5979,6009,6013,6041,6072,6105,6139,6143,6172,6205,6238,6271,6304,6337,6371,6406,6459,6491,6525,6558,6591,6595,6626,6629,6659,6691,6724,6755,6788,6820,6858,6890,6923,6956,6988,7066,7101,7135,7169,7203,7237,7270,7303,7335,7370,7403,7438,7471,7504,7536,7569,7604,7636,7671,7704,7741,7773,7804,7838,7871,7903,7937,7971,8005,8040,8075,8079,8112,8113,8146,8146,8178,8214,8247,8280,8312,8313,8347,8379,8411,8413,8443,8446,8477,8511,8513,8543,8546,8576,8579,8609,8645,8646,8679,8710,8714],"segments":[[105,197],[105,194],[112,190],[122,185],[139,178],[161,169],[187,159],[215,148],[243,137],[255,133],[267,129],[277,126],[285,126],[291,126],[295,129],[297,133],[297,139],[295,148],[292,157],[287,167],[281,179],[275,190],[270,199],[261,214],[251,236],[245,253],[244,260],[246,264],[249,268],[254,270],[262,270],[272,270],[282,268],[294,264],[307,260],[319,256],[333,251],[345,247],[357,244],[369,241],[378,239],[386,238],[392,239],[397,241],[400,244],[401,254],[399,261],[396,269],[387,286],[377,304],[372,312],[368,320],[363,332],[363,340],[366,343],[371,344],[385,341],[404,333],[414,328],[425,323],[446,314],[456,311],[465,308],[472,306],[478,305],[486,305],[489,308],[490,311],[490,316],[485,328],[476,344],[466,359],[455,374],[448,387],[444,397],[443,404],[447,407],[457,407],[471,402],[488,395],[507,387],[527,378],[544,370],[558,366],[568,365],[571,366],[574,371],[574,376],[574,382],[572,388],[571,395],[568,403],[566,410],[563,417],[561,425],[559,431],[558,438],[557,443],[557,448],[558,452],[562,455],[565,455],[575,451],[587,442],[600,429],[615,413],[629,398],[641,387],[650,380],[657,378],[660,381],[662,387],[663,397],[663,409],[662,420],[661,431],[661,441],[662,444],[665,447],[674,444],[679,440],[684,434],[689,427],[695,420],[700,412],[711,395],[716,387],[721,379],[725,372],[728,366],[734,358],[736,355],[739,359],[739,364],[740,369],[740,374],[741,380],[741,387],[741,393],[741,400],[741,412],[742,418],[742,421],[746,425],[751,421],[754,417],[758,411],[762,405],[766,397],[774,381],[783,363],[787,355],[791,346],[794,338],[797,331],[800,325],[802,321],[806,317],[808,321],[809,331],[809,342],[809,349],[809,356],[808,372],[808,388],[808,393],[808,397],[809,400],[813,399],[817,390],[824,374],[832,357],[837,348],[841,338],[845,328],[849,319],[855,302],[858,296],[861,291],[865,287],[869,287],[872,294],[873,299],[874,305],[875,311],[875,317],[876,325],[876,332],[876,346],[876,351],[877,355],[877,358],[879,361],[882,358],[885,353],[888,347],[891,339],[894,330],[897,322],[900,312],[903,303],[909,287],[915,277],[917,274],[920,272],[923,276],[925,281],[928,292],[931,306],[933,312],[934,319],[936,326],[937,332],[939,336],[941,340],[943,343],[946,343],[948,339],[950,334],[953,328],[956,320],[960,302],[962,292],[964,282],[969,264],[971,256],[974,250],[977,244],[981,243],[984,248],[986,252],[989,257],[991,264],[996,277],[999,284],[1003,297],[1005,304],[1007,310],[1009,315],[1012,319],[1016,322],[1019,321],[1021,317],[1023,311],[1026,304],[1029,288],[1031,279],[1033,271],[1035,265],[1038,254],[1041,247],[1043,242],[1048,235],[1053,233],[1059,238],[1061,241],[1065,248],[1070,263],[1073,278],[1075,294],[1078,311],[1079,326],[1080,337],[1081,341],[1082,336],[1085,322],[1089,303],[1092,282],[1096,263],[1099,254],[1101,246],[1104,240],[1106,236],[1111,231],[1115,235],[1120,246],[1124,265],[1126,288],[1127,315],[1127,344],[1127,368],[1126,386],[1126,395],[1123,387],[1124,369],[1125,348],[1126,324],[1129,297],[1133,272],[1137,251],[1142,239],[1147,236],[1152,242],[1158,258],[1164,278],[1169,303],[1173,329],[1175,353],[1176,371],[1176,381],[1176,384],[1175,381],[1176,367],[1178,347],[1182,326],[1187,303],[1193,283],[1200,269],[1206,262],[1212,263],[1218,275],[1221,293],[1223,315],[1225,339],[1225,350],[1225,360],[1225,369],[1225,376],[1225,381],[1225,385],[1226,388],[1227,380],[1231,365],[1233,356],[1235,347],[1240,326],[1245,306],[1248,297],[1251,289],[1254,283],[1256,279],[1259,277],[1264,278],[1266,282],[1269,288],[1271,296],[1273,303],[1275,315],[1277,326],[1279,347],[1279,358],[1280,376],[1280,384],[1279,389]]},{"start":1599592137272,"last":43,"beat":500,"lifetime":50,"color":"#26C6DA","multiPeriod":1,"strokeWidth":20,"times":[0],"segments":[[219,157]]},{"start":1599592147172,"last":11174,"beat":500,"lifetime":50,"color":"#26C6DA","multiPeriod":1,"strokeWidth":50,"times":[0,35,70,105,136,167,199,232,267,299,332,365,398,435,467,500,533,567,599,633,666,698,732,765,799,832,866,905,937,972,1024,1025,1057,1059,1091,1092,1124,1125,1161,1193,1226,1260,1292,1325,1357,1392,1425,1478,1513,1545,1576,1611,1644,1676,1677,1711,1743,1775,1808,1808,1841,1842,1878,1912,1944,1977,2030,2066,2099,2131,2165,2198,2233,2266,2320,2353,2386,2418,2451,2486,2518,2576,2611,2643,2677,2709,2742,2776,2829,2862,2895,2933,2970,3004,3036,3068,3102,3134,3167,3203,3234,3267,3300,3333,3386,3418,3450,3485,3517,3551,3584,3620,3654,3687,3718,3753,3786,3819,3853,3885,3919,3953,3986,4020,4052,4084,4118,4151,4184,4218,4255,4287,4319,4351,4386,4419,4453,4488,4520,4553,4586,4620,4661,4717,4751,4783,4816,4849,4883,4916,4949,4983,5017,5050,5083,5117,5150,5183,5218,5271,5303,5336,5369,5402,5438,5470,5503,5535,5568,5601,5634,5667,5704,5736,5768,5801,5835,5868,5901,5936,5969,6003,6036,6069,6103,6135,6168,6202,6234,6268,6301,6337,6372,6376,6406,6409,6440,6442,6474,6477,6512,6544,6576,6609,6612,6646,6680,6713,6748,6783,6816,6850,6884,6923,6926,6955,6988,7021,7053,7087,7119,7153,7185,7219,7251,7285,7321,7353,7385,7438,7472,7507,7509,7541,7542,7576,7610,7642,7677,7710,7746,7777,7811,7844,7877,7913,7950,7985,8018,8059,8059,8093,8128,8163,8195,8227,8260,8294,8329,8362,8395,8430,8463,8501,8533,8566,8599,8634,8669,8701,8734,8770,8803,8836,8869,8905,8937,8969,9004,9037,9070,9103,9136,9169,9205,9237,9269,9302,9334,9368,9402,9436,9470,9505,9539,9541,9572,9605,9638,9672,9705,9741,9742,9778,9811,9843,9877,9912,9945,9979,10012,10047,10080,10113,10148,10184,10218,10256,10290,10293,10325,10359,10392,10393,10428,10463,10497,10531,10564,10599,10634,10668,10701,10709,10738,10771,10804,10836,10869,10903,10936,10969,11004,11039,11072,11105,11139,11143,11174],"segments":[[129,231],[135,226],[142,219],[147,214],[151,213],[154,220],[155,231],[157,239],[159,246],[163,250],[168,248],[175,241],[184,232],[191,226],[197,224],[202,224],[205,227],[207,236],[208,246],[210,255],[212,262],[214,267],[218,268],[223,268],[230,263],[236,256],[243,248],[249,242],[254,239],[257,239],[260,242],[260,246],[261,249],[261,253],[261,257],[261,261],[260,264],[260,267],[260,272],[261,276],[264,277],[267,277],[271,273],[275,268],[278,266],[284,261],[288,260],[292,260],[293,264],[295,270],[297,278],[297,286],[298,294],[299,297],[299,301],[301,306],[304,308],[308,308],[311,306],[314,304],[317,301],[320,299],[325,294],[331,290],[335,289],[338,289],[340,293],[341,300],[340,310],[338,320],[336,331],[335,339],[335,346],[335,349],[338,351],[342,347],[348,341],[354,334],[359,329],[364,326],[368,325],[371,327],[372,337],[370,347],[367,359],[364,369],[363,377],[362,383],[365,385],[372,381],[380,374],[389,367],[399,360],[407,355],[414,353],[419,353],[422,355],[423,360],[422,368],[419,377],[416,388],[412,398],[410,406],[409,411],[413,412],[420,408],[427,402],[435,396],[443,392],[449,389],[454,388],[457,389],[459,392],[459,399],[456,409],[452,420],[449,432],[446,441],[445,448],[446,451],[450,451],[457,446],[466,440],[474,434],[483,429],[490,425],[495,423],[500,424],[502,427],[502,434],[501,443],[499,454],[498,463],[498,470],[499,475],[503,476],[508,476],[514,471],[523,463],[532,455],[539,447],[547,441],[555,439],[558,444],[558,453],[557,465],[554,478],[551,490],[550,500],[550,506],[553,510],[558,511],[566,507],[576,500],[585,491],[593,482],[600,475],[605,471],[609,470],[610,474],[609,482],[607,493],[605,505],[604,517],[603,527],[605,533],[609,534],[617,527],[627,511],[639,492],[651,469],[663,448],[674,432],[682,425],[686,426],[685,436],[681,453],[675,476],[668,503],[663,525],[660,538],[660,542],[663,539],[670,526],[677,505],[686,481],[696,452],[704,423],[713,404],[719,392],[722,390],[720,404],[715,431],[710,449],[706,468],[701,488],[697,509],[693,529],[690,547],[688,562],[687,579],[689,586],[696,580],[700,572],[706,558],[721,524],[738,483],[755,439],[771,394],[781,366],[786,356],[787,360],[778,389],[765,435],[757,461],[750,487],[736,538],[725,580],[720,606],[719,615],[725,611],[736,584],[753,543],[773,496],[794,442],[814,390],[830,349],[843,315],[851,295],[846,309],[832,352],[810,420],[798,458],[786,502],[773,546],[751,627],[743,667],[743,676],[757,662],[778,611],[805,536],[835,449],[870,353],[899,287],[920,251],[928,239],[925,249],[906,299],[878,376],[846,476],[829,528],[794,624],[775,686],[771,710],[780,703],[800,656],[828,583],[862,497],[903,391],[949,283],[991,203],[1024,150],[1033,136],[1032,152],[1012,213],[979,299],[941,393],[904,490],[871,580],[843,649],[826,692],[825,697],[852,657],[892,577],[936,495],[991,392],[1046,291],[1086,226],[1105,199],[1103,207],[1083,256],[1044,336],[988,437],[934,544],[894,627],[862,687],[855,710],[871,700],[904,648],[947,582],[1003,484],[1063,384],[1122,289],[1176,207],[1210,155],[1213,153],[1209,163],[1186,214],[1133,305],[1054,424],[980,547],[930,644],[913,681],[896,722],[903,727],[941,691],[982,633],[1039,535],[1101,428],[1156,340],[1212,266],[1245,228],[1251,230],[1236,277],[1194,356],[1128,459],[1056,566],[1001,652],[971,706],[965,719],[964,722],[989,698],[1007,675],[1031,643],[1084,572],[1133,502],[1177,438],[1209,390],[1233,351],[1244,338],[1224,376],[1194,436],[1144,510],[1123,541],[1092,588],[1049,658],[1025,712],[1022,733],[1035,726],[1069,693],[1118,639],[1159,594],[1202,545],[1226,521],[1231,523],[1212,557],[1185,603],[1178,623],[1176,633]]},{"start":1599592193315,"last":15078,"beat":1000,"lifetime":250,"color":"#FFF59D","multiPeriod":1,"strokeWidth":7,"times":[0,87,125,158,191,226,260,296,330,363,396,431,464,497,530,564,597,633,666,671,700,733,766,800,833,866,900,933,971,1004,1037,1070,1107,1139,1172,1204,1239,1273,1306,1339,1372,1407,1442,1478,1512,1547,1581,1615,1649,1682,1716,1720,1761,1801,1837,1838,1875,1911,1944,1978,2011,2045,2080,2114,2147,2181,2216,2251,2254,2283,2317,2320,2354,2388,2422,2456,2490,2524,2559,2593,2628,2664,2697,2731,2765,2802,2804,2835,2837,2867,2871,2901,2904,2934,2937,2969,2971,3004,3040,3075,3110,3144,3177,3212,3247,3282,3315,3349,3383,3418,3420,3452,3454,3488,3522,3556,3596,3630,3663,3698,3737,3737,3769,3770,3804,3805,3840,3874,3908,3942,3977,4013,4046,4079,4115,4149,4182,4218,4221,4251,4254,4289,4323,4357,4392,4426,4462,4497,4530,4564,4598,4633,4667,4701,4705,4738,4772,4806,4840,4876,4909,4944,4978,5014,5046,5085,5088,5118,5121,5152,5155,5188,5224,5258,5293,5326,5365,5398,5434,5467,5500,5534,5538,5569,5570,5605,5640,5676,5712,5746,5782,5816,5850,5883,5917,5950,5984,5987,6018,6021,6054,6054,6089,6123,6157,6192,6226,6259,6294,6328,6362,6397,6431,6466,6500,6534,6571,6604,6604,6638,6639,6673,6712,6748,6784,6789,6823,6858,6891,6925,6959,6997,7031,7068,7071,7101,7104,7138,7138,7174,7208,7243,7278,7312,7346,7380,7415,7450,7485,7488,7519,7521,7556,7589,7623,7657,7691,7725,7759,7795,7829,7862,7895,7935,7938,7968,7971,8003,8004,8041,8075,8109,8144,8180,8215,8248,8285,8291,8322,8356,8390,8425,8459,8494,8530,8564,8598,8632,8676,8711,8746,8781,8816,8849,8883,8918,8923,8954,8955,8989,9025,9059,9093,9129,9163,9198,9234,9268,9271,9301,9305,9342,9376,9410,9447,9483,9520,9554,9555,9590,9626,9661,9697,9733,9767,9801,9805,9838,9873,9907,9942,9977,10013,10047,10081,10120,10121,10153,10155,10188,10188,10220,10222,10259,10293,10329,10369,10371,10409,10444,10480,10515,10550,10585,10588,10619,10621,10655,10690,10725,10759,10795,10830,10864,10899,10934,10969,10971,11005,11041,11076,11111,11146,11181,11218,11220,11253,11255,11291,11326,11367,11399,11435,11439,11472,11507,11541,11576,11611,11652,11655,11685,11688,11718,11723,11756,11793,11833,11868,11901,11905,11936,11938,11972,12007,12047,12081,12117,12152,12155,12186,12188,12222,12257,12291,12325,12360,12395,12430,12466,12500,12535,12569,12573,12606,12643,12679,12713,12747,12782,12816,12850,12884,12918,12952,12990,13025,13062,13124,13157,13191,13225,13259,13296,13331,13366,13401,13405,13436,13439,13472,13472,13507,13541,13575,13610,13647,13684,13719,13722,13752,13755,13792,13827,13862,13898,13933,13968,13970,14004,14005,14041,14074,14108,14143,14179,14214,14251,14285,14289,14326,14360,14398,14434,14469,14472,14508,14541,14576,14612,14647,14685,14687,14719,14722,14755,14757,14793,14827,14864,14898,14935,14970,14972,15004,15005,15042,15043,15077],"segments":[[143,702],[148,696],[153,687],[161,673],[170,657],[182,639],[196,622],[212,607],[231,594],[250,586],[271,581],[292,579],[314,579],[334,583],[353,591],[370,604],[384,620],[394,639],[400,661],[401,672],[401,683],[398,702],[391,719],[382,732],[370,739],[360,740],[353,737],[349,728],[351,711],[360,696],[371,684],[385,674],[403,668],[420,664],[438,664],[456,665],[472,669],[487,675],[501,684],[512,695],[521,707],[526,720],[529,732],[530,744],[530,754],[530,762],[530,769],[532,776],[538,782],[548,787],[561,791],[567,793],[587,794],[607,792],[625,786],[634,782],[649,771],[662,760],[671,746],[676,730],[678,716],[675,702],[669,690],[660,680],[649,672],[639,665],[632,656],[631,647],[632,643],[636,638],[647,630],[656,627],[672,624],[687,625],[697,633],[703,647],[707,663],[710,681],[715,696],[724,708],[736,712],[752,712],[770,708],[786,702],[801,696],[816,691],[823,689],[830,688],[836,688],[842,688],[848,690],[854,693],[858,697],[862,702],[865,708],[868,715],[871,722],[876,735],[884,743],[896,747],[911,746],[929,743],[949,737],[970,729],[992,718],[1011,704],[1025,689],[1033,673],[1036,654],[1034,635],[1031,625],[1028,615],[1024,606],[1012,587],[996,573],[974,565],[948,559],[923,553],[902,545],[886,535],[876,521],[874,513],[874,505],[874,496],[876,488],[878,479],[887,465],[899,455],[913,448],[927,445],[942,443],[963,440],[982,436],[1001,432],[1019,427],[1037,422],[1054,416],[1070,411],[1078,409],[1086,407],[1093,405],[1108,405],[1120,407],[1132,410],[1143,415],[1155,419],[1167,421],[1178,418],[1190,411],[1202,400],[1213,384],[1223,366],[1230,345],[1233,323],[1233,312],[1229,293],[1222,277],[1213,263],[1202,254],[1193,250],[1177,253],[1161,262],[1144,272],[1127,281],[1111,284],[1095,283],[1087,280],[1080,277],[1073,273],[1069,267],[1066,261],[1062,245],[1061,228],[1061,211],[1062,194],[1061,177],[1056,161],[1047,148],[1034,134],[1019,120],[1003,106],[985,93],[975,87],[965,83],[954,80],[930,78],[905,81],[883,89],[864,100],[848,115],[836,133],[828,155],[826,178],[828,200],[836,218],[851,229],[868,233],[877,233],[887,233],[897,231],[907,229],[917,228],[935,227],[950,230],[962,239],[968,251],[970,265],[967,281],[961,297],[953,311],[942,324],[930,333],[917,338],[901,339],[885,338],[869,332],[854,313],[852,306],[850,298],[850,290],[851,282],[858,268],[869,258],[880,255],[893,256],[898,260],[907,270],[912,286],[911,302],[903,317],[890,331],[871,344],[849,355],[824,365],[812,368],[798,371],[786,372],[773,373],[760,373],[737,369],[717,358],[701,341],[688,324],[675,301],[665,279],[660,258],[658,238],[658,219],[659,200],[660,190],[660,181],[659,172],[655,155],[647,140],[634,128],[617,120],[597,119],[577,123],[558,134],[542,147],[529,161],[523,174],[522,187],[525,200],[526,208],[526,217],[525,225],[523,234],[521,243],[513,258],[505,269],[494,275],[484,277],[474,275],[465,269],[457,262],[450,253],[448,248],[446,238],[444,228],[443,219],[442,209],[441,201],[440,191],[439,181],[437,170],[436,157],[435,145],[434,123],[429,108],[422,95],[410,86],[391,78],[370,74],[345,75],[320,80],[310,84],[300,90],[291,98],[279,117],[274,143],[272,173],[277,202],[288,230],[306,251],[329,264],[357,269],[386,270],[400,271],[413,271],[425,273],[445,283],[459,299],[470,319],[483,334],[500,344],[530,350],[543,352],[553,354],[570,363],[581,377],[586,398],[586,420],[583,444],[580,466],[577,487],[574,498],[566,519],[552,541],[533,561],[511,576],[488,584],[467,585],[450,579],[439,566],[431,551],[429,544],[428,536],[428,529],[429,522],[431,515],[435,508],[440,503],[450,493],[461,486],[471,480],[480,472],[483,467],[485,456],[485,444],[479,431],[470,419],[458,410],[442,401],[433,398],[424,397],[414,396],[395,396],[376,399],[358,407],[340,417],[321,431],[300,444],[281,454],[261,458],[241,456],[224,446],[217,437],[207,416],[203,393],[204,374],[206,361],[204,356],[197,355],[184,356],[175,357],[167,357],[158,355],[142,346],[125,329],[111,306],[101,277],[96,246],[96,230],[98,202],[106,178],[119,156],[134,140],[152,131],[173,126],[184,126],[195,125],[207,125],[218,127],[230,130],[252,135],[274,143],[292,152],[309,163],[326,172],[336,176],[347,178],[358,179],[381,176],[405,169],[431,157],[456,140],[479,124],[503,108],[514,101],[527,94],[539,88],[563,78],[587,71],[608,66],[628,60],[647,55],[666,49],[683,44],[700,40],[718,36],[736,33],[755,30],[765,29],[784,30],[803,36],[823,46],[844,57],[868,67],[893,77],[920,87],[949,93],[983,93],[1019,84],[1059,78],[1124,80],[1170,94],[1209,121],[1257,207],[1255,258],[1239,307],[1213,352],[1182,394],[1151,433],[1121,472],[1099,506],[1092,533],[1093,545],[1098,556],[1106,567],[1115,577],[1125,588],[1143,613],[1154,642],[1154,673],[1141,703],[1119,728],[1093,746],[1061,758],[1045,762],[1026,764],[1008,765],[971,763],[937,757],[908,743],[885,724],[868,706],[854,688],[847,681],[839,676],[831,673],[811,673],[786,680],[759,690],[732,701],[707,711],[682,720],[657,727],[632,733],[619,736],[594,742],[568,746],[541,749],[518,747],[495,740],[484,735],[463,725],[440,715],[415,709],[389,707],[363,711],[333,721],[318,727],[303,732],[289,736],[274,739],[260,740],[230,736],[203,723],[176,695],[149,655],[135,621],[129,590],[128,578],[129,566],[132,551],[138,531],[144,506],[159,468]]}],"backgroundColor":"rgb(255,255,255)"});