[{"data":1,"prerenderedAt":1295},["ShallowReactive",2],{"posts:\u002Fposts\u002F2023-07-15-sine-anim":3},{"id":4,"title":5,"body":6,"categories":1278,"date":1280,"description":1281,"extension":1282,"image":1283,"lang":1281,"meta":1284,"navigation":223,"path":1285,"seo":1286,"stem":1287,"tags":1288,"titleInPicture":1293,"__hash__":1294},"posts\u002Fposts\u002F2023-07-15-sine-anim.md","Round sine anim",{"type":7,"value":8,"toc":1276},"minimark",[9,13,1272],[10,11,12],"p",{},"I made this to have some nice animation on the web index page.",[14,15,16],"code-runner",{},[17,18,23],"pre",{"className":19,"code":20,"language":21,"meta":22,"style":22},"language-javascript shiki shiki-themes github-dark","    const target = document.getElementById(\"code-target\");\n    const svg = document.createElementNS(\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\", \"svg\");\n    target.appendChild(svg);\n    svg.style.width = \"100%\";\n    svg.style.height = svg.clientWidth + \"px\";\n    svg.style.stroke = \"white\";\n    let rds = [\n      Math.random(),\n      Math.random(),\n      Math.random(),\n    ];\n    const gPos = document.getElementById(\"g-position\");\n\n    if (svg) {\n      let viewWidth = 100;\n      let viewHeight = 100;\n      svg.setAttribute(\n        \"viewBox\",\n        `${-viewWidth \u002F 2} ${-viewHeight \u002F 2} ${viewWidth} ${viewHeight}`\n      );\n      const svgNameSpace = svg.namespaceURI;\n      const oscilloscopeLine = document.createElementNS(svgNameSpace, \"path\");\n      oscilloscopeLine.setAttribute(\"fill\", \"none\");\n      oscilloscopeLine.setAttribute(\"stroke-width\", \"0.23\");\n\n      setInterval(()=>{\n        rds = [\n          Math.random(),\n          Math.random(),\n          Math.random(),\n        ];\n      }, 10000);\n\n      svg.appendChild(oscilloscopeLine);\n      let pastValues = [];\n      let index = 0;\n      const animationFrame = (time) => {\n        requestAnimationFrame(animationFrame);\n\n        const maxVals = 600;\n        for (let i = 0; i \u003C maxVals; i += 1) {\n          const vnow = (\n            Math.sin(i * time \u002F 140000 * rds[0]) * 1\n            + Math.cos(i * time \u002F 10000 * rds[1]) * .25\n            + Math.cos(i * time \u002F 5000 * rds[2]) * rds[2]\n            \u002F\u002F Math.cos(i * time \u002F 134412.1249812) * 7\n          )\n          if (undefined === pastValues[i]) pastValues[i] = 0;\n\n          pastValues[i] = vnow * 0.01 + pastValues[i] * 0.99;\n        }\n        let min = 0;\n        let max = 0;\n        pastValues.forEach((value) => {\n          if (value > max) max = value;\n          if (value \u003C min) min = value;\n        });\n\n        const mult = 1;\n\n        const mm1 = viewWidth * mult;\n        const path = pastValues\n          .map((value, index) => {\n            if (!value) return;\n            const window =\n              Math.cos((index \u002F pastValues.length - 0.5) * 2 * Math.PI) * 0.5 +\n              0.5;\n            const mm2 = mm1 * value;\n            const x = Math.cos(index * 2 * Math.PI \u002F maxVals) * mm2;\n            const y = Math.sin(index * 2 * Math.PI \u002F maxVals) * mm2;\n\n            return `${x * window},${y * window}`;\n          })\n          .join(\" \");\n        oscilloscopeLine.setAttribute(\"d\", `M ${path}`);\n      };\n\n      requestAnimationFrame(animationFrame);\n    }\n","javascript","",[24,25,26,60,88,100,115,134,147,161,173,182,191,197,218,225,234,250,264,276,285,326,332,346,368,388,407,412,427,437,447,456,465,471,482,487,497,510,525,550,559,564,580,616,630,671,708,746,753,759,782,787,816,822,837,851,872,891,907,913,918,932,937,954,967,991,1010,1022,1069,1077,1094,1131,1165,1170,1201,1207,1222,1247,1253,1258,1266],"code",{"__ignoreMap":22},[27,28,31,35,39,42,46,50,53,57],"span",{"class":29,"line":30},"line",1,[27,32,34],{"class":33},"snl16","    const",[27,36,38],{"class":37},"sDLfK"," target",[27,40,41],{"class":33}," =",[27,43,45],{"class":44},"s95oV"," document.",[27,47,49],{"class":48},"svObZ","getElementById",[27,51,52],{"class":44},"(",[27,54,56],{"class":55},"sU2Wk","\"code-target\"",[27,58,59],{"class":44},");\n",[27,61,63,65,68,70,72,75,77,80,83,86],{"class":29,"line":62},2,[27,64,34],{"class":33},[27,66,67],{"class":37}," svg",[27,69,41],{"class":33},[27,71,45],{"class":44},[27,73,74],{"class":48},"createElementNS",[27,76,52],{"class":44},[27,78,79],{"class":55},"\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"",[27,81,82],{"class":44},", ",[27,84,85],{"class":55},"\"svg\"",[27,87,59],{"class":44},[27,89,91,94,97],{"class":29,"line":90},3,[27,92,93],{"class":44},"    target.",[27,95,96],{"class":48},"appendChild",[27,98,99],{"class":44},"(svg);\n",[27,101,103,106,109,112],{"class":29,"line":102},4,[27,104,105],{"class":44},"    svg.style.width ",[27,107,108],{"class":33},"=",[27,110,111],{"class":55}," \"100%\"",[27,113,114],{"class":44},";\n",[27,116,118,121,123,126,129,132],{"class":29,"line":117},5,[27,119,120],{"class":44},"    svg.style.height ",[27,122,108],{"class":33},[27,124,125],{"class":44}," svg.clientWidth ",[27,127,128],{"class":33},"+",[27,130,131],{"class":55}," \"px\"",[27,133,114],{"class":44},[27,135,137,140,142,145],{"class":29,"line":136},6,[27,138,139],{"class":44},"    svg.style.stroke ",[27,141,108],{"class":33},[27,143,144],{"class":55}," \"white\"",[27,146,114],{"class":44},[27,148,150,153,156,158],{"class":29,"line":149},7,[27,151,152],{"class":33},"    let",[27,154,155],{"class":44}," rds ",[27,157,108],{"class":33},[27,159,160],{"class":44}," [\n",[27,162,164,167,170],{"class":29,"line":163},8,[27,165,166],{"class":44},"      Math.",[27,168,169],{"class":48},"random",[27,171,172],{"class":44},"(),\n",[27,174,176,178,180],{"class":29,"line":175},9,[27,177,166],{"class":44},[27,179,169],{"class":48},[27,181,172],{"class":44},[27,183,185,187,189],{"class":29,"line":184},10,[27,186,166],{"class":44},[27,188,169],{"class":48},[27,190,172],{"class":44},[27,192,194],{"class":29,"line":193},11,[27,195,196],{"class":44},"    ];\n",[27,198,200,202,205,207,209,211,213,216],{"class":29,"line":199},12,[27,201,34],{"class":33},[27,203,204],{"class":37}," gPos",[27,206,41],{"class":33},[27,208,45],{"class":44},[27,210,49],{"class":48},[27,212,52],{"class":44},[27,214,215],{"class":55},"\"g-position\"",[27,217,59],{"class":44},[27,219,221],{"class":29,"line":220},13,[27,222,224],{"emptyLinePlaceholder":223},true,"\n",[27,226,228,231],{"class":29,"line":227},14,[27,229,230],{"class":33},"    if",[27,232,233],{"class":44}," (svg) {\n",[27,235,237,240,243,245,248],{"class":29,"line":236},15,[27,238,239],{"class":33},"      let",[27,241,242],{"class":44}," viewWidth ",[27,244,108],{"class":33},[27,246,247],{"class":37}," 100",[27,249,114],{"class":44},[27,251,253,255,258,260,262],{"class":29,"line":252},16,[27,254,239],{"class":33},[27,256,257],{"class":44}," viewHeight ",[27,259,108],{"class":33},[27,261,247],{"class":37},[27,263,114],{"class":44},[27,265,267,270,273],{"class":29,"line":266},17,[27,268,269],{"class":44},"      svg.",[27,271,272],{"class":48},"setAttribute",[27,274,275],{"class":44},"(\n",[27,277,279,282],{"class":29,"line":278},18,[27,280,281],{"class":55},"        \"viewBox\"",[27,283,284],{"class":44},",\n",[27,286,288,291,294,297,300,303,306,308,311,313,315,317,319,321,323],{"class":29,"line":287},19,[27,289,290],{"class":55},"        `${",[27,292,293],{"class":33},"-",[27,295,296],{"class":44},"viewWidth",[27,298,299],{"class":33}," \u002F",[27,301,302],{"class":37}," 2",[27,304,305],{"class":55},"} ${",[27,307,293],{"class":33},[27,309,310],{"class":44},"viewHeight",[27,312,299],{"class":33},[27,314,302],{"class":37},[27,316,305],{"class":55},[27,318,296],{"class":44},[27,320,305],{"class":55},[27,322,310],{"class":44},[27,324,325],{"class":55},"}`\n",[27,327,329],{"class":29,"line":328},20,[27,330,331],{"class":44},"      );\n",[27,333,335,338,341,343],{"class":29,"line":334},21,[27,336,337],{"class":33},"      const",[27,339,340],{"class":37}," svgNameSpace",[27,342,41],{"class":33},[27,344,345],{"class":44}," svg.namespaceURI;\n",[27,347,349,351,354,356,358,360,363,366],{"class":29,"line":348},22,[27,350,337],{"class":33},[27,352,353],{"class":37}," oscilloscopeLine",[27,355,41],{"class":33},[27,357,45],{"class":44},[27,359,74],{"class":48},[27,361,362],{"class":44},"(svgNameSpace, ",[27,364,365],{"class":55},"\"path\"",[27,367,59],{"class":44},[27,369,371,374,376,378,381,383,386],{"class":29,"line":370},23,[27,372,373],{"class":44},"      oscilloscopeLine.",[27,375,272],{"class":48},[27,377,52],{"class":44},[27,379,380],{"class":55},"\"fill\"",[27,382,82],{"class":44},[27,384,385],{"class":55},"\"none\"",[27,387,59],{"class":44},[27,389,391,393,395,397,400,402,405],{"class":29,"line":390},24,[27,392,373],{"class":44},[27,394,272],{"class":48},[27,396,52],{"class":44},[27,398,399],{"class":55},"\"stroke-width\"",[27,401,82],{"class":44},[27,403,404],{"class":55},"\"0.23\"",[27,406,59],{"class":44},[27,408,410],{"class":29,"line":409},25,[27,411,224],{"emptyLinePlaceholder":223},[27,413,415,418,421,424],{"class":29,"line":414},26,[27,416,417],{"class":48},"      setInterval",[27,419,420],{"class":44},"(()",[27,422,423],{"class":33},"=>",[27,425,426],{"class":44},"{\n",[27,428,430,433,435],{"class":29,"line":429},27,[27,431,432],{"class":44},"        rds ",[27,434,108],{"class":33},[27,436,160],{"class":44},[27,438,440,443,445],{"class":29,"line":439},28,[27,441,442],{"class":44},"          Math.",[27,444,169],{"class":48},[27,446,172],{"class":44},[27,448,450,452,454],{"class":29,"line":449},29,[27,451,442],{"class":44},[27,453,169],{"class":48},[27,455,172],{"class":44},[27,457,459,461,463],{"class":29,"line":458},30,[27,460,442],{"class":44},[27,462,169],{"class":48},[27,464,172],{"class":44},[27,466,468],{"class":29,"line":467},31,[27,469,470],{"class":44},"        ];\n",[27,472,474,477,480],{"class":29,"line":473},32,[27,475,476],{"class":44},"      }, ",[27,478,479],{"class":37},"10000",[27,481,59],{"class":44},[27,483,485],{"class":29,"line":484},33,[27,486,224],{"emptyLinePlaceholder":223},[27,488,490,492,494],{"class":29,"line":489},34,[27,491,269],{"class":44},[27,493,96],{"class":48},[27,495,496],{"class":44},"(oscilloscopeLine);\n",[27,498,500,502,505,507],{"class":29,"line":499},35,[27,501,239],{"class":33},[27,503,504],{"class":44}," pastValues ",[27,506,108],{"class":33},[27,508,509],{"class":44}," [];\n",[27,511,513,515,518,520,523],{"class":29,"line":512},36,[27,514,239],{"class":33},[27,516,517],{"class":44}," index ",[27,519,108],{"class":33},[27,521,522],{"class":37}," 0",[27,524,114],{"class":44},[27,526,528,530,533,535,538,542,545,547],{"class":29,"line":527},37,[27,529,337],{"class":33},[27,531,532],{"class":48}," animationFrame",[27,534,41],{"class":33},[27,536,537],{"class":44}," (",[27,539,541],{"class":540},"s9osk","time",[27,543,544],{"class":44},") ",[27,546,423],{"class":33},[27,548,549],{"class":44}," {\n",[27,551,553,556],{"class":29,"line":552},38,[27,554,555],{"class":48},"        requestAnimationFrame",[27,557,558],{"class":44},"(animationFrame);\n",[27,560,562],{"class":29,"line":561},39,[27,563,224],{"emptyLinePlaceholder":223},[27,565,567,570,573,575,578],{"class":29,"line":566},40,[27,568,569],{"class":33},"        const",[27,571,572],{"class":37}," maxVals",[27,574,41],{"class":33},[27,576,577],{"class":37}," 600",[27,579,114],{"class":44},[27,581,583,586,588,591,594,596,598,601,604,607,610,613],{"class":29,"line":582},41,[27,584,585],{"class":33},"        for",[27,587,537],{"class":44},[27,589,590],{"class":33},"let",[27,592,593],{"class":44}," i ",[27,595,108],{"class":33},[27,597,522],{"class":37},[27,599,600],{"class":44},"; i ",[27,602,603],{"class":33},"\u003C",[27,605,606],{"class":44}," maxVals; i ",[27,608,609],{"class":33},"+=",[27,611,612],{"class":37}," 1",[27,614,615],{"class":44},") {\n",[27,617,619,622,625,627],{"class":29,"line":618},42,[27,620,621],{"class":33},"          const",[27,623,624],{"class":48}," vnow",[27,626,41],{"class":33},[27,628,629],{"class":44}," (\n",[27,631,633,636,639,642,645,648,651,654,657,660,663,666,668],{"class":29,"line":632},43,[27,634,635],{"class":44},"            Math.",[27,637,638],{"class":48},"sin",[27,640,641],{"class":44},"(i ",[27,643,644],{"class":33},"*",[27,646,647],{"class":44}," time ",[27,649,650],{"class":33},"\u002F",[27,652,653],{"class":37}," 140000",[27,655,656],{"class":33}," *",[27,658,659],{"class":44}," rds[",[27,661,662],{"class":37},"0",[27,664,665],{"class":44},"]) ",[27,667,644],{"class":33},[27,669,670],{"class":37}," 1\n",[27,672,674,677,680,683,685,687,689,691,694,696,698,701,703,705],{"class":29,"line":673},44,[27,675,676],{"class":33},"            +",[27,678,679],{"class":44}," Math.",[27,681,682],{"class":48},"cos",[27,684,641],{"class":44},[27,686,644],{"class":33},[27,688,647],{"class":44},[27,690,650],{"class":33},[27,692,693],{"class":37}," 10000",[27,695,656],{"class":33},[27,697,659],{"class":44},[27,699,700],{"class":37},"1",[27,702,665],{"class":44},[27,704,644],{"class":33},[27,706,707],{"class":37}," .25\n",[27,709,711,713,715,717,719,721,723,725,728,730,732,735,737,739,741,743],{"class":29,"line":710},45,[27,712,676],{"class":33},[27,714,679],{"class":44},[27,716,682],{"class":48},[27,718,641],{"class":44},[27,720,644],{"class":33},[27,722,647],{"class":44},[27,724,650],{"class":33},[27,726,727],{"class":37}," 5000",[27,729,656],{"class":33},[27,731,659],{"class":44},[27,733,734],{"class":37},"2",[27,736,665],{"class":44},[27,738,644],{"class":33},[27,740,659],{"class":44},[27,742,734],{"class":37},[27,744,745],{"class":44},"]\n",[27,747,749],{"class":29,"line":748},46,[27,750,752],{"class":751},"sAwPA","            \u002F\u002F Math.cos(i * time \u002F 134412.1249812) * 7\n",[27,754,756],{"class":29,"line":755},47,[27,757,758],{"class":44},"          )\n",[27,760,762,765,767,770,773,776,778,780],{"class":29,"line":761},48,[27,763,764],{"class":33},"          if",[27,766,537],{"class":44},[27,768,769],{"class":37},"undefined",[27,771,772],{"class":33}," ===",[27,774,775],{"class":44}," pastValues[i]) pastValues[i] ",[27,777,108],{"class":33},[27,779,522],{"class":37},[27,781,114],{"class":44},[27,783,785],{"class":29,"line":784},49,[27,786,224],{"emptyLinePlaceholder":223},[27,788,790,793,795,798,800,803,806,809,811,814],{"class":29,"line":789},50,[27,791,792],{"class":44},"          pastValues[i] ",[27,794,108],{"class":33},[27,796,797],{"class":44}," vnow ",[27,799,644],{"class":33},[27,801,802],{"class":37}," 0.01",[27,804,805],{"class":33}," +",[27,807,808],{"class":44}," pastValues[i] ",[27,810,644],{"class":33},[27,812,813],{"class":37}," 0.99",[27,815,114],{"class":44},[27,817,819],{"class":29,"line":818},51,[27,820,821],{"class":44},"        }\n",[27,823,825,828,831,833,835],{"class":29,"line":824},52,[27,826,827],{"class":33},"        let",[27,829,830],{"class":44}," min ",[27,832,108],{"class":33},[27,834,522],{"class":37},[27,836,114],{"class":44},[27,838,840,842,845,847,849],{"class":29,"line":839},53,[27,841,827],{"class":33},[27,843,844],{"class":44}," max ",[27,846,108],{"class":33},[27,848,522],{"class":37},[27,850,114],{"class":44},[27,852,854,857,860,863,866,868,870],{"class":29,"line":853},54,[27,855,856],{"class":44},"        pastValues.",[27,858,859],{"class":48},"forEach",[27,861,862],{"class":44},"((",[27,864,865],{"class":540},"value",[27,867,544],{"class":44},[27,869,423],{"class":33},[27,871,549],{"class":44},[27,873,875,877,880,883,886,888],{"class":29,"line":874},55,[27,876,764],{"class":33},[27,878,879],{"class":44}," (value ",[27,881,882],{"class":33},">",[27,884,885],{"class":44}," max) max ",[27,887,108],{"class":33},[27,889,890],{"class":44}," value;\n",[27,892,894,896,898,900,903,905],{"class":29,"line":893},56,[27,895,764],{"class":33},[27,897,879],{"class":44},[27,899,603],{"class":33},[27,901,902],{"class":44}," min) min ",[27,904,108],{"class":33},[27,906,890],{"class":44},[27,908,910],{"class":29,"line":909},57,[27,911,912],{"class":44},"        });\n",[27,914,916],{"class":29,"line":915},58,[27,917,224],{"emptyLinePlaceholder":223},[27,919,921,923,926,928,930],{"class":29,"line":920},59,[27,922,569],{"class":33},[27,924,925],{"class":37}," mult",[27,927,41],{"class":33},[27,929,612],{"class":37},[27,931,114],{"class":44},[27,933,935],{"class":29,"line":934},60,[27,936,224],{"emptyLinePlaceholder":223},[27,938,940,942,945,947,949,951],{"class":29,"line":939},61,[27,941,569],{"class":33},[27,943,944],{"class":37}," mm1",[27,946,41],{"class":33},[27,948,242],{"class":44},[27,950,644],{"class":33},[27,952,953],{"class":44}," mult;\n",[27,955,957,959,962,964],{"class":29,"line":956},62,[27,958,569],{"class":33},[27,960,961],{"class":37}," path",[27,963,41],{"class":33},[27,965,966],{"class":44}," pastValues\n",[27,968,970,973,976,978,980,982,985,987,989],{"class":29,"line":969},63,[27,971,972],{"class":44},"          .",[27,974,975],{"class":48},"map",[27,977,862],{"class":44},[27,979,865],{"class":540},[27,981,82],{"class":44},[27,983,984],{"class":540},"index",[27,986,544],{"class":44},[27,988,423],{"class":33},[27,990,549],{"class":44},[27,992,994,997,999,1002,1005,1008],{"class":29,"line":993},64,[27,995,996],{"class":33},"            if",[27,998,537],{"class":44},[27,1000,1001],{"class":33},"!",[27,1003,1004],{"class":44},"value) ",[27,1006,1007],{"class":33},"return",[27,1009,114],{"class":44},[27,1011,1013,1016,1019],{"class":29,"line":1012},65,[27,1014,1015],{"class":33},"            const",[27,1017,1018],{"class":37}," window",[27,1020,1021],{"class":33}," =\n",[27,1023,1025,1028,1030,1033,1035,1038,1041,1044,1047,1049,1051,1053,1055,1057,1060,1062,1064,1066],{"class":29,"line":1024},66,[27,1026,1027],{"class":44},"              Math.",[27,1029,682],{"class":48},[27,1031,1032],{"class":44},"((index ",[27,1034,650],{"class":33},[27,1036,1037],{"class":44}," pastValues.",[27,1039,1040],{"class":37},"length",[27,1042,1043],{"class":33}," -",[27,1045,1046],{"class":37}," 0.5",[27,1048,544],{"class":44},[27,1050,644],{"class":33},[27,1052,302],{"class":37},[27,1054,656],{"class":33},[27,1056,679],{"class":44},[27,1058,1059],{"class":37},"PI",[27,1061,544],{"class":44},[27,1063,644],{"class":33},[27,1065,1046],{"class":37},[27,1067,1068],{"class":33}," +\n",[27,1070,1072,1075],{"class":29,"line":1071},67,[27,1073,1074],{"class":37},"              0.5",[27,1076,114],{"class":44},[27,1078,1080,1082,1085,1087,1090,1092],{"class":29,"line":1079},68,[27,1081,1015],{"class":33},[27,1083,1084],{"class":37}," mm2",[27,1086,41],{"class":33},[27,1088,1089],{"class":44}," mm1 ",[27,1091,644],{"class":33},[27,1093,890],{"class":44},[27,1095,1097,1099,1102,1104,1106,1108,1111,1113,1115,1117,1119,1121,1123,1126,1128],{"class":29,"line":1096},69,[27,1098,1015],{"class":33},[27,1100,1101],{"class":37}," x",[27,1103,41],{"class":33},[27,1105,679],{"class":44},[27,1107,682],{"class":48},[27,1109,1110],{"class":44},"(index ",[27,1112,644],{"class":33},[27,1114,302],{"class":37},[27,1116,656],{"class":33},[27,1118,679],{"class":44},[27,1120,1059],{"class":37},[27,1122,299],{"class":33},[27,1124,1125],{"class":44}," maxVals) ",[27,1127,644],{"class":33},[27,1129,1130],{"class":44}," mm2;\n",[27,1132,1134,1136,1139,1141,1143,1145,1147,1149,1151,1153,1155,1157,1159,1161,1163],{"class":29,"line":1133},70,[27,1135,1015],{"class":33},[27,1137,1138],{"class":37}," y",[27,1140,41],{"class":33},[27,1142,679],{"class":44},[27,1144,638],{"class":48},[27,1146,1110],{"class":44},[27,1148,644],{"class":33},[27,1150,302],{"class":37},[27,1152,656],{"class":33},[27,1154,679],{"class":44},[27,1156,1059],{"class":37},[27,1158,299],{"class":33},[27,1160,1125],{"class":44},[27,1162,644],{"class":33},[27,1164,1130],{"class":44},[27,1166,1168],{"class":29,"line":1167},71,[27,1169,224],{"emptyLinePlaceholder":223},[27,1171,1173,1176,1179,1182,1184,1186,1189,1192,1194,1196,1199],{"class":29,"line":1172},72,[27,1174,1175],{"class":33},"            return",[27,1177,1178],{"class":55}," `${",[27,1180,1181],{"class":44},"x",[27,1183,656],{"class":33},[27,1185,1018],{"class":44},[27,1187,1188],{"class":55},"},${",[27,1190,1191],{"class":44},"y",[27,1193,656],{"class":33},[27,1195,1018],{"class":44},[27,1197,1198],{"class":55},"}`",[27,1200,114],{"class":44},[27,1202,1204],{"class":29,"line":1203},73,[27,1205,1206],{"class":44},"          })\n",[27,1208,1210,1212,1215,1217,1220],{"class":29,"line":1209},74,[27,1211,972],{"class":44},[27,1213,1214],{"class":48},"join",[27,1216,52],{"class":44},[27,1218,1219],{"class":55},"\" \"",[27,1221,59],{"class":44},[27,1223,1225,1228,1230,1232,1235,1237,1240,1243,1245],{"class":29,"line":1224},75,[27,1226,1227],{"class":44},"        oscilloscopeLine.",[27,1229,272],{"class":48},[27,1231,52],{"class":44},[27,1233,1234],{"class":55},"\"d\"",[27,1236,82],{"class":44},[27,1238,1239],{"class":55},"`M ${",[27,1241,1242],{"class":44},"path",[27,1244,1198],{"class":55},[27,1246,59],{"class":44},[27,1248,1250],{"class":29,"line":1249},76,[27,1251,1252],{"class":44},"      };\n",[27,1254,1256],{"class":29,"line":1255},77,[27,1257,224],{"emptyLinePlaceholder":223},[27,1259,1261,1264],{"class":29,"line":1260},78,[27,1262,1263],{"class":48},"      requestAnimationFrame",[27,1265,558],{"class":44},[27,1267,1269],{"class":29,"line":1268},79,[27,1270,1271],{"class":44},"    }\n",[1273,1274,1275],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":22,"searchDepth":62,"depth":62,"links":1277},[],[1279],"blog","2023-07-15",null,"md","\u002Fimages\u002F2024\u002F02\u002Fsine-rose.png",{},"\u002Fposts\u002F2023-07-15-sine-anim",{"title":5,"description":12},"posts\u002F2023-07-15-sine-anim",[1289,1290,1291,1292],"generative","visuals","gist","tool_javascript",false,"dhj8nNLI2fZJvA6HPlbGv8g4OHR2zglZE0jEqEHufE4",1791671312956]