[{"data":1,"prerenderedAt":2425},["ShallowReactive",2],{"posts:\u002Fposts\u002F2024-04-08-spirograph":3},{"id":4,"title":5,"body":6,"categories":2408,"date":2410,"description":2411,"extension":2412,"image":2413,"lang":2411,"meta":2414,"navigation":36,"path":2415,"seo":2416,"stem":2417,"tags":2418,"titleInPicture":2423,"__hash__":2424},"posts\u002Fposts\u002F2024-04-08-spirograph.md","Spirograph experiment",{"type":7,"value":8,"toc":2406},"minimark",[9,13,16,2402],[10,11,12],"p",{},"I took inspiration in the action of drawing on a rotating wheel, and observing how the lines seemingly moved. The result was a bit boring, so I modified it a bit, so that the line segments would rotate at unequal speeds, resulting in an ever-deforming line.",[10,14,15],{},"Try clicking in the drawing area and dragging it around.",[17,18,19],"code-runner",{},[20,21,26],"pre",{"className":22,"code":23,"language":24,"meta":25,"style":25},"language-javascript shiki shiki-themes github-dark","\n\n    \u002F\u002F @ts-check\n    \u002F**\n     * @typedef { [number, number]} Vector2\n     *\u002F\n\n    const canvas = document.createElement('canvas');\n    const container = document.getElementById('code-target')\n    const restartButton = document.createElement('button');\n    if (!container) {\n        throw new Error('Container not found');\n    }\n    container.appendChild(canvas);\n    \u002F\u002F container.appendChild(restartButton);\n    restartButton.style.position = 'fixed';\n    restartButton.style.bottom = '0';\n    restartButton.style.right = '0';\n    restartButton.style.zIndex = '1';\n    restartButton.innerText = 'Restart';\n    restartButton.onclick = () => {\n        window.location.reload();\n    }\n\n    const context = canvas.getContext('2d');\n    if (!context) {\n        throw new Error('Canvas context not found');\n    }\n\n    \u002F**\n     * @typedef {Object} DrawScope\n     * @property {CanvasRenderingContext2D} context - canvas context\n     * @property {number} width - \n     * @property {number} height - \n     * @property {Vector2} middle -\n     *\u002F\n\n\n    \u002F** \n     * @type {DrawScope}\n     *\u002F\n    const drawScope = {\n        context,\n        width: 0,\n        height: 0,\n        middle: [0, 0],\n    }\n    drawScope.width = canvas.width;\n    drawScope.height = canvas.height;\n    drawScope.middle = [drawScope.width \u002F 2, drawScope.height \u002F 2];\n\n\n    let lastTime = new Date().getTime();\n    \u002F** @type {Vector2[]} *\u002F\n    let currentTrace = [];\n    \u002F** @type {Vector2[][]} *\u002F\n    const traces = [currentTrace];\n    const tracesLength = 512;\n    let traceCount = 0;\n\n    \u002F**\n     * @param {Vector2} point\n     *\u002F\n    const addtracePoint = (point) => {\n        currentTrace.push([...point]);\n        traceCount += 1;\n        while (traceCount > tracesLength) {\n            if (traces[0].length === 0) {\n                traces.shift();\n                continue;\n            }\n            traces[0].shift();\n            traceCount -= 1;\n        }\n    }\n    const startNewTrace = () => {\n        currentTrace = [];\n        traces.push(currentTrace);\n    }\n\n    \u002F**\n     * @param {Vector2} coords\n     * @param {number} angle\n     * @returns {Vector2}\n     *\u002F\n    const rotateCoords = (coords, angle) => {\n        const [x, y] = coords;\n        const sin = Math.sin(angle);\n        const cos = Math.cos(angle);\n        return [\n            x * cos - y * sin,\n            x * sin + y * cos\n        ];\n    }\n    const translateCoords = (coords, offset) => {\n        const [x, y] = coords;\n        const [dx, dy] = offset;\n        return [x + dx, y + dy];\n    }\n\n    \u002F**\n     * @param {Vector2} coords\n     * @param  {...Function} callbacks\n     * @returns {Vector2}\n     *\u002F\n    const processCoords = (coords, ...callbacks) => {\n        let res = coords;\n        callbacks.forEach(callback => {\n            res = callback(res);\n        });\n        return res;\n    }\n\n    \u002F**\n     * @param {number} time\n     * @param {DrawScope} drawScope\n     *\u002F\n    let draw = (time, {\n        context,\n        width,\n        height\n    }) => {\n        context.strokeStyle = 'white';\n        context.fillStyle = 'white';\n        context.lineWidth = 4;\n        context.lineCap = 'round';\n        const deltaTime = time - lastTime;\n        lastTime = time;\n        context.clearRect(0, 0, width, height);\n        if (mouse.down) {\n            addtracePoint(mouse.pos);\n        }\n        const rotationCenter = drawScope.middle;\n        const negativeRotationCenter = rotationCenter.map((value) => -value);\n        traces.forEach(trace => {\n            trace.forEach((point, index) => {\n                const [x, y] = processCoords(point, (point) => {\n                    return translateCoords(point, negativeRotationCenter);\n                }, (point) => {\n                    return rotateCoords(point, (0.0001 + index \u002F 200000) * deltaTime);\n                }, (point) => {\n                    return translateCoords(point, rotationCenter);\n                });\n                {\n                    point[0] = x;\n                    point[1] = y;\n                }\n\n                if (index === 0) {\n                    context.beginPath();\n                    context.moveTo(x, y);\n                } else {\n                    context.lineTo(x, y);\n                }\n            });\n            context.stroke();\n        });\n\n    }\n    \n    const windowResizedListener = () => {\n        const containerRect = container.getBoundingClientRect();\n        canvas.width = containerRect.width;\n        canvas.height = containerRect.width;\n        drawScope.width = canvas.width;\n        drawScope.height = canvas.width;\n        drawScope.middle = [drawScope.width \u002F 2, drawScope.height \u002F 2];\n    }\n\n    window.addEventListener('resize', windowResizedListener);\n\n    const frame = () => {\n        const time = new Date().getTime();\n        draw(time, drawScope);\n        requestAnimationFrame(frame);\n    }\n    \u002F**\n     * @typedef {Object} Mouse\n     * @property {Vector2} pos\n     * @property {boolean} down\n     *\u002F\n    \u002F** @type {Mouse} *\u002F\n    const mouse = {\n        pos: [0, 0],\n        down: false,\n\n    };\n    canvas.addEventListener('mousemove', (event) => {\n        mouse.pos = [event.offsetX, event.offsetY];\n    });\n    canvas.addEventListener('mousedown', () => {\n        mouse.down = true;\n        startNewTrace();\n    });\n    window.addEventListener('mouseup', () => {\n        mouse.down = false;\n    });\n\n    window.addEventListener('load', () => {\n        windowResizedListener();\n    });\n\n    frame();\n\n\n\n","javascript","",[27,28,29,38,43,50,56,73,79,84,114,137,158,173,192,198,210,216,231,244,256,269,282,302,314,319,324,347,359,375,380,385,390,403,419,435,449,465,470,475,480,486,497,502,514,520,532,542,558,563,574,585,612,617,622,646,660,673,685,698,713,728,733,738,751,756,779,797,811,826,851,862,870,876,890,903,909,914,930,940,951,956,961,966,978,990,1001,1006,1032,1057,1076,1093,1102,1125,1145,1151,1156,1181,1200,1222,1240,1245,1250,1255,1266,1279,1288,1293,1320,1333,1352,1366,1372,1380,1385,1390,1395,1407,1420,1425,1438,1443,1449,1455,1465,1478,1490,1503,1516,1534,1545,1565,1574,1583,1588,1601,1633,1649,1672,1703,1714,1728,1758,1771,1781,1787,1793,1808,1823,1829,1834,1850,1861,1872,1883,1893,1898,1904,1915,1920,1925,1930,1936,1952,1970,1981,1991,2001,2011,2033,2038,2043,2060,2065,2081,2101,2110,2119,2124,2129,2141,2153,2166,2171,2183,2195,2209,2220,2225,2231,2256,2267,2273,2292,2305,2313,2318,2336,2348,2353,2358,2376,2384,2389,2394],"code",{"__ignoreMap":25},[30,31,34],"span",{"class":32,"line":33},"line",1,[30,35,37],{"emptyLinePlaceholder":36},true,"\n",[30,39,41],{"class":32,"line":40},2,[30,42,37],{"emptyLinePlaceholder":36},[30,44,46],{"class":32,"line":45},3,[30,47,49],{"class":48},"sAwPA","    \u002F\u002F @ts-check\n",[30,51,53],{"class":32,"line":52},4,[30,54,55],{"class":48},"    \u002F**\n",[30,57,59,62,66,70],{"class":32,"line":58},5,[30,60,61],{"class":48},"     * ",[30,63,65],{"class":64},"snl16","@typedef",[30,67,69],{"class":68},"svObZ"," { [number, number]}",[30,71,72],{"class":68}," Vector2\n",[30,74,76],{"class":32,"line":75},6,[30,77,78],{"class":48},"     *\u002F\n",[30,80,82],{"class":32,"line":81},7,[30,83,37],{"emptyLinePlaceholder":36},[30,85,87,90,94,97,101,104,107,111],{"class":32,"line":86},8,[30,88,89],{"class":64},"    const",[30,91,93],{"class":92},"sDLfK"," canvas",[30,95,96],{"class":64}," =",[30,98,100],{"class":99},"s95oV"," document.",[30,102,103],{"class":68},"createElement",[30,105,106],{"class":99},"(",[30,108,110],{"class":109},"sU2Wk","'canvas'",[30,112,113],{"class":99},");\n",[30,115,117,119,122,124,126,129,131,134],{"class":32,"line":116},9,[30,118,89],{"class":64},[30,120,121],{"class":92}," container",[30,123,96],{"class":64},[30,125,100],{"class":99},[30,127,128],{"class":68},"getElementById",[30,130,106],{"class":99},[30,132,133],{"class":109},"'code-target'",[30,135,136],{"class":99},")\n",[30,138,140,142,145,147,149,151,153,156],{"class":32,"line":139},10,[30,141,89],{"class":64},[30,143,144],{"class":92}," restartButton",[30,146,96],{"class":64},[30,148,100],{"class":99},[30,150,103],{"class":68},[30,152,106],{"class":99},[30,154,155],{"class":109},"'button'",[30,157,113],{"class":99},[30,159,161,164,167,170],{"class":32,"line":160},11,[30,162,163],{"class":64},"    if",[30,165,166],{"class":99}," (",[30,168,169],{"class":64},"!",[30,171,172],{"class":99},"container) {\n",[30,174,176,179,182,185,187,190],{"class":32,"line":175},12,[30,177,178],{"class":64},"        throw",[30,180,181],{"class":64}," new",[30,183,184],{"class":68}," Error",[30,186,106],{"class":99},[30,188,189],{"class":109},"'Container not found'",[30,191,113],{"class":99},[30,193,195],{"class":32,"line":194},13,[30,196,197],{"class":99},"    }\n",[30,199,201,204,207],{"class":32,"line":200},14,[30,202,203],{"class":99},"    container.",[30,205,206],{"class":68},"appendChild",[30,208,209],{"class":99},"(canvas);\n",[30,211,213],{"class":32,"line":212},15,[30,214,215],{"class":48},"    \u002F\u002F container.appendChild(restartButton);\n",[30,217,219,222,225,228],{"class":32,"line":218},16,[30,220,221],{"class":99},"    restartButton.style.position ",[30,223,224],{"class":64},"=",[30,226,227],{"class":109}," 'fixed'",[30,229,230],{"class":99},";\n",[30,232,234,237,239,242],{"class":32,"line":233},17,[30,235,236],{"class":99},"    restartButton.style.bottom ",[30,238,224],{"class":64},[30,240,241],{"class":109}," '0'",[30,243,230],{"class":99},[30,245,247,250,252,254],{"class":32,"line":246},18,[30,248,249],{"class":99},"    restartButton.style.right ",[30,251,224],{"class":64},[30,253,241],{"class":109},[30,255,230],{"class":99},[30,257,259,262,264,267],{"class":32,"line":258},19,[30,260,261],{"class":99},"    restartButton.style.zIndex ",[30,263,224],{"class":64},[30,265,266],{"class":109}," '1'",[30,268,230],{"class":99},[30,270,272,275,277,280],{"class":32,"line":271},20,[30,273,274],{"class":99},"    restartButton.innerText ",[30,276,224],{"class":64},[30,278,279],{"class":109}," 'Restart'",[30,281,230],{"class":99},[30,283,285,288,291,293,296,299],{"class":32,"line":284},21,[30,286,287],{"class":99},"    restartButton.",[30,289,290],{"class":68},"onclick",[30,292,96],{"class":64},[30,294,295],{"class":99}," () ",[30,297,298],{"class":64},"=>",[30,300,301],{"class":99}," {\n",[30,303,305,308,311],{"class":32,"line":304},22,[30,306,307],{"class":99},"        window.location.",[30,309,310],{"class":68},"reload",[30,312,313],{"class":99},"();\n",[30,315,317],{"class":32,"line":316},23,[30,318,197],{"class":99},[30,320,322],{"class":32,"line":321},24,[30,323,37],{"emptyLinePlaceholder":36},[30,325,327,329,332,334,337,340,342,345],{"class":32,"line":326},25,[30,328,89],{"class":64},[30,330,331],{"class":92}," context",[30,333,96],{"class":64},[30,335,336],{"class":99}," canvas.",[30,338,339],{"class":68},"getContext",[30,341,106],{"class":99},[30,343,344],{"class":109},"'2d'",[30,346,113],{"class":99},[30,348,350,352,354,356],{"class":32,"line":349},26,[30,351,163],{"class":64},[30,353,166],{"class":99},[30,355,169],{"class":64},[30,357,358],{"class":99},"context) {\n",[30,360,362,364,366,368,370,373],{"class":32,"line":361},27,[30,363,178],{"class":64},[30,365,181],{"class":64},[30,367,184],{"class":68},[30,369,106],{"class":99},[30,371,372],{"class":109},"'Canvas context not found'",[30,374,113],{"class":99},[30,376,378],{"class":32,"line":377},28,[30,379,197],{"class":99},[30,381,383],{"class":32,"line":382},29,[30,384,37],{"emptyLinePlaceholder":36},[30,386,388],{"class":32,"line":387},30,[30,389,55],{"class":48},[30,391,393,395,397,400],{"class":32,"line":392},31,[30,394,61],{"class":48},[30,396,65],{"class":64},[30,398,399],{"class":68}," {Object}",[30,401,402],{"class":68}," DrawScope\n",[30,404,406,408,411,414,416],{"class":32,"line":405},32,[30,407,61],{"class":48},[30,409,410],{"class":64},"@property",[30,412,413],{"class":68}," {CanvasRenderingContext2D}",[30,415,331],{"class":99},[30,417,418],{"class":48}," - canvas context\n",[30,420,422,424,426,429,432],{"class":32,"line":421},33,[30,423,61],{"class":48},[30,425,410],{"class":64},[30,427,428],{"class":68}," {number}",[30,430,431],{"class":99}," width",[30,433,434],{"class":48}," - \n",[30,436,438,440,442,444,447],{"class":32,"line":437},34,[30,439,61],{"class":48},[30,441,410],{"class":64},[30,443,428],{"class":68},[30,445,446],{"class":99}," height",[30,448,434],{"class":48},[30,450,452,454,456,459,462],{"class":32,"line":451},35,[30,453,61],{"class":48},[30,455,410],{"class":64},[30,457,458],{"class":68}," {Vector2}",[30,460,461],{"class":99}," middle",[30,463,464],{"class":48}," -\n",[30,466,468],{"class":32,"line":467},36,[30,469,78],{"class":48},[30,471,473],{"class":32,"line":472},37,[30,474,37],{"emptyLinePlaceholder":36},[30,476,478],{"class":32,"line":477},38,[30,479,37],{"emptyLinePlaceholder":36},[30,481,483],{"class":32,"line":482},39,[30,484,485],{"class":48},"    \u002F** \n",[30,487,489,491,494],{"class":32,"line":488},40,[30,490,61],{"class":48},[30,492,493],{"class":64},"@type",[30,495,496],{"class":68}," {DrawScope}\n",[30,498,500],{"class":32,"line":499},41,[30,501,78],{"class":48},[30,503,505,507,510,512],{"class":32,"line":504},42,[30,506,89],{"class":64},[30,508,509],{"class":92}," drawScope",[30,511,96],{"class":64},[30,513,301],{"class":99},[30,515,517],{"class":32,"line":516},43,[30,518,519],{"class":99},"        context,\n",[30,521,523,526,529],{"class":32,"line":522},44,[30,524,525],{"class":99},"        width: ",[30,527,528],{"class":92},"0",[30,530,531],{"class":99},",\n",[30,533,535,538,540],{"class":32,"line":534},45,[30,536,537],{"class":99},"        height: ",[30,539,528],{"class":92},[30,541,531],{"class":99},[30,543,545,548,550,553,555],{"class":32,"line":544},46,[30,546,547],{"class":99},"        middle: [",[30,549,528],{"class":92},[30,551,552],{"class":99},", ",[30,554,528],{"class":92},[30,556,557],{"class":99},"],\n",[30,559,561],{"class":32,"line":560},47,[30,562,197],{"class":99},[30,564,566,569,571],{"class":32,"line":565},48,[30,567,568],{"class":99},"    drawScope.width ",[30,570,224],{"class":64},[30,572,573],{"class":99}," canvas.width;\n",[30,575,577,580,582],{"class":32,"line":576},49,[30,578,579],{"class":99},"    drawScope.height ",[30,581,224],{"class":64},[30,583,584],{"class":99}," canvas.height;\n",[30,586,588,591,593,596,599,602,605,607,609],{"class":32,"line":587},50,[30,589,590],{"class":99},"    drawScope.middle ",[30,592,224],{"class":64},[30,594,595],{"class":99}," [drawScope.width ",[30,597,598],{"class":64},"\u002F",[30,600,601],{"class":92}," 2",[30,603,604],{"class":99},", drawScope.height ",[30,606,598],{"class":64},[30,608,601],{"class":92},[30,610,611],{"class":99},"];\n",[30,613,615],{"class":32,"line":614},51,[30,616,37],{"emptyLinePlaceholder":36},[30,618,620],{"class":32,"line":619},52,[30,621,37],{"emptyLinePlaceholder":36},[30,623,625,628,631,633,635,638,641,644],{"class":32,"line":624},53,[30,626,627],{"class":64},"    let",[30,629,630],{"class":99}," lastTime ",[30,632,224],{"class":64},[30,634,181],{"class":64},[30,636,637],{"class":68}," Date",[30,639,640],{"class":99},"().",[30,642,643],{"class":68},"getTime",[30,645,313],{"class":99},[30,647,649,652,654,657],{"class":32,"line":648},54,[30,650,651],{"class":48},"    \u002F** ",[30,653,493],{"class":64},[30,655,656],{"class":68}," {Vector2[]}",[30,658,659],{"class":48}," *\u002F\n",[30,661,663,665,668,670],{"class":32,"line":662},55,[30,664,627],{"class":64},[30,666,667],{"class":99}," currentTrace ",[30,669,224],{"class":64},[30,671,672],{"class":99}," [];\n",[30,674,676,678,680,683],{"class":32,"line":675},56,[30,677,651],{"class":48},[30,679,493],{"class":64},[30,681,682],{"class":68}," {Vector2[][]}",[30,684,659],{"class":48},[30,686,688,690,693,695],{"class":32,"line":687},57,[30,689,89],{"class":64},[30,691,692],{"class":92}," traces",[30,694,96],{"class":64},[30,696,697],{"class":99}," [currentTrace];\n",[30,699,701,703,706,708,711],{"class":32,"line":700},58,[30,702,89],{"class":64},[30,704,705],{"class":92}," tracesLength",[30,707,96],{"class":64},[30,709,710],{"class":92}," 512",[30,712,230],{"class":99},[30,714,716,718,721,723,726],{"class":32,"line":715},59,[30,717,627],{"class":64},[30,719,720],{"class":99}," traceCount ",[30,722,224],{"class":64},[30,724,725],{"class":92}," 0",[30,727,230],{"class":99},[30,729,731],{"class":32,"line":730},60,[30,732,37],{"emptyLinePlaceholder":36},[30,734,736],{"class":32,"line":735},61,[30,737,55],{"class":48},[30,739,741,743,746,748],{"class":32,"line":740},62,[30,742,61],{"class":48},[30,744,745],{"class":64},"@param",[30,747,458],{"class":68},[30,749,750],{"class":99}," point\n",[30,752,754],{"class":32,"line":753},63,[30,755,78],{"class":48},[30,757,759,761,764,766,768,772,775,777],{"class":32,"line":758},64,[30,760,89],{"class":64},[30,762,763],{"class":68}," addtracePoint",[30,765,96],{"class":64},[30,767,166],{"class":99},[30,769,771],{"class":770},"s9osk","point",[30,773,774],{"class":99},") ",[30,776,298],{"class":64},[30,778,301],{"class":99},[30,780,782,785,788,791,794],{"class":32,"line":781},65,[30,783,784],{"class":99},"        currentTrace.",[30,786,787],{"class":68},"push",[30,789,790],{"class":99},"([",[30,792,793],{"class":64},"...",[30,795,796],{"class":99},"point]);\n",[30,798,800,803,806,809],{"class":32,"line":799},66,[30,801,802],{"class":99},"        traceCount ",[30,804,805],{"class":64},"+=",[30,807,808],{"class":92}," 1",[30,810,230],{"class":99},[30,812,814,817,820,823],{"class":32,"line":813},67,[30,815,816],{"class":64},"        while",[30,818,819],{"class":99}," (traceCount ",[30,821,822],{"class":64},">",[30,824,825],{"class":99}," tracesLength) {\n",[30,827,829,832,835,837,840,843,846,848],{"class":32,"line":828},68,[30,830,831],{"class":64},"            if",[30,833,834],{"class":99}," (traces[",[30,836,528],{"class":92},[30,838,839],{"class":99},"].",[30,841,842],{"class":92},"length",[30,844,845],{"class":64}," ===",[30,847,725],{"class":92},[30,849,850],{"class":99},") {\n",[30,852,854,857,860],{"class":32,"line":853},69,[30,855,856],{"class":99},"                traces.",[30,858,859],{"class":68},"shift",[30,861,313],{"class":99},[30,863,865,868],{"class":32,"line":864},70,[30,866,867],{"class":64},"                continue",[30,869,230],{"class":99},[30,871,873],{"class":32,"line":872},71,[30,874,875],{"class":99},"            }\n",[30,877,879,882,884,886,888],{"class":32,"line":878},72,[30,880,881],{"class":99},"            traces[",[30,883,528],{"class":92},[30,885,839],{"class":99},[30,887,859],{"class":68},[30,889,313],{"class":99},[30,891,893,896,899,901],{"class":32,"line":892},73,[30,894,895],{"class":99},"            traceCount ",[30,897,898],{"class":64},"-=",[30,900,808],{"class":92},[30,902,230],{"class":99},[30,904,906],{"class":32,"line":905},74,[30,907,908],{"class":99},"        }\n",[30,910,912],{"class":32,"line":911},75,[30,913,197],{"class":99},[30,915,917,919,922,924,926,928],{"class":32,"line":916},76,[30,918,89],{"class":64},[30,920,921],{"class":68}," startNewTrace",[30,923,96],{"class":64},[30,925,295],{"class":99},[30,927,298],{"class":64},[30,929,301],{"class":99},[30,931,933,936,938],{"class":32,"line":932},77,[30,934,935],{"class":99},"        currentTrace ",[30,937,224],{"class":64},[30,939,672],{"class":99},[30,941,943,946,948],{"class":32,"line":942},78,[30,944,945],{"class":99},"        traces.",[30,947,787],{"class":68},[30,949,950],{"class":99},"(currentTrace);\n",[30,952,954],{"class":32,"line":953},79,[30,955,197],{"class":99},[30,957,959],{"class":32,"line":958},80,[30,960,37],{"emptyLinePlaceholder":36},[30,962,964],{"class":32,"line":963},81,[30,965,55],{"class":48},[30,967,969,971,973,975],{"class":32,"line":968},82,[30,970,61],{"class":48},[30,972,745],{"class":64},[30,974,458],{"class":68},[30,976,977],{"class":99}," coords\n",[30,979,981,983,985,987],{"class":32,"line":980},83,[30,982,61],{"class":48},[30,984,745],{"class":64},[30,986,428],{"class":68},[30,988,989],{"class":99}," angle\n",[30,991,993,995,998],{"class":32,"line":992},84,[30,994,61],{"class":48},[30,996,997],{"class":64},"@returns",[30,999,1000],{"class":68}," {Vector2}\n",[30,1002,1004],{"class":32,"line":1003},85,[30,1005,78],{"class":48},[30,1007,1009,1011,1014,1016,1018,1021,1023,1026,1028,1030],{"class":32,"line":1008},86,[30,1010,89],{"class":64},[30,1012,1013],{"class":68}," rotateCoords",[30,1015,96],{"class":64},[30,1017,166],{"class":99},[30,1019,1020],{"class":770},"coords",[30,1022,552],{"class":99},[30,1024,1025],{"class":770},"angle",[30,1027,774],{"class":99},[30,1029,298],{"class":64},[30,1031,301],{"class":99},[30,1033,1035,1038,1041,1044,1046,1049,1052,1054],{"class":32,"line":1034},87,[30,1036,1037],{"class":64},"        const",[30,1039,1040],{"class":99}," [",[30,1042,1043],{"class":92},"x",[30,1045,552],{"class":99},[30,1047,1048],{"class":92},"y",[30,1050,1051],{"class":99},"] ",[30,1053,224],{"class":64},[30,1055,1056],{"class":99}," coords;\n",[30,1058,1060,1062,1065,1067,1070,1073],{"class":32,"line":1059},88,[30,1061,1037],{"class":64},[30,1063,1064],{"class":92}," sin",[30,1066,96],{"class":64},[30,1068,1069],{"class":99}," Math.",[30,1071,1072],{"class":68},"sin",[30,1074,1075],{"class":99},"(angle);\n",[30,1077,1079,1081,1084,1086,1088,1091],{"class":32,"line":1078},89,[30,1080,1037],{"class":64},[30,1082,1083],{"class":92}," cos",[30,1085,96],{"class":64},[30,1087,1069],{"class":99},[30,1089,1090],{"class":68},"cos",[30,1092,1075],{"class":99},[30,1094,1096,1099],{"class":32,"line":1095},90,[30,1097,1098],{"class":64},"        return",[30,1100,1101],{"class":99}," [\n",[30,1103,1105,1108,1111,1114,1117,1120,1122],{"class":32,"line":1104},91,[30,1106,1107],{"class":99},"            x ",[30,1109,1110],{"class":64},"*",[30,1112,1113],{"class":99}," cos ",[30,1115,1116],{"class":64},"-",[30,1118,1119],{"class":99}," y ",[30,1121,1110],{"class":64},[30,1123,1124],{"class":99}," sin,\n",[30,1126,1128,1130,1132,1135,1138,1140,1142],{"class":32,"line":1127},92,[30,1129,1107],{"class":99},[30,1131,1110],{"class":64},[30,1133,1134],{"class":99}," sin ",[30,1136,1137],{"class":64},"+",[30,1139,1119],{"class":99},[30,1141,1110],{"class":64},[30,1143,1144],{"class":99}," cos\n",[30,1146,1148],{"class":32,"line":1147},93,[30,1149,1150],{"class":99},"        ];\n",[30,1152,1154],{"class":32,"line":1153},94,[30,1155,197],{"class":99},[30,1157,1159,1161,1164,1166,1168,1170,1172,1175,1177,1179],{"class":32,"line":1158},95,[30,1160,89],{"class":64},[30,1162,1163],{"class":68}," translateCoords",[30,1165,96],{"class":64},[30,1167,166],{"class":99},[30,1169,1020],{"class":770},[30,1171,552],{"class":99},[30,1173,1174],{"class":770},"offset",[30,1176,774],{"class":99},[30,1178,298],{"class":64},[30,1180,301],{"class":99},[30,1182,1184,1186,1188,1190,1192,1194,1196,1198],{"class":32,"line":1183},96,[30,1185,1037],{"class":64},[30,1187,1040],{"class":99},[30,1189,1043],{"class":92},[30,1191,552],{"class":99},[30,1193,1048],{"class":92},[30,1195,1051],{"class":99},[30,1197,224],{"class":64},[30,1199,1056],{"class":99},[30,1201,1203,1205,1207,1210,1212,1215,1217,1219],{"class":32,"line":1202},97,[30,1204,1037],{"class":64},[30,1206,1040],{"class":99},[30,1208,1209],{"class":92},"dx",[30,1211,552],{"class":99},[30,1213,1214],{"class":92},"dy",[30,1216,1051],{"class":99},[30,1218,224],{"class":64},[30,1220,1221],{"class":99}," offset;\n",[30,1223,1225,1227,1230,1232,1235,1237],{"class":32,"line":1224},98,[30,1226,1098],{"class":64},[30,1228,1229],{"class":99}," [x ",[30,1231,1137],{"class":64},[30,1233,1234],{"class":99}," dx, y ",[30,1236,1137],{"class":64},[30,1238,1239],{"class":99}," dy];\n",[30,1241,1243],{"class":32,"line":1242},99,[30,1244,197],{"class":99},[30,1246,1248],{"class":32,"line":1247},100,[30,1249,37],{"emptyLinePlaceholder":36},[30,1251,1253],{"class":32,"line":1252},101,[30,1254,55],{"class":48},[30,1256,1258,1260,1262,1264],{"class":32,"line":1257},102,[30,1259,61],{"class":48},[30,1261,745],{"class":64},[30,1263,458],{"class":68},[30,1265,977],{"class":99},[30,1267,1269,1271,1273,1276],{"class":32,"line":1268},103,[30,1270,61],{"class":48},[30,1272,745],{"class":64},[30,1274,1275],{"class":68},"  {...Function}",[30,1277,1278],{"class":99}," callbacks\n",[30,1280,1282,1284,1286],{"class":32,"line":1281},104,[30,1283,61],{"class":48},[30,1285,997],{"class":64},[30,1287,1000],{"class":68},[30,1289,1291],{"class":32,"line":1290},105,[30,1292,78],{"class":48},[30,1294,1296,1298,1301,1303,1305,1307,1309,1311,1314,1316,1318],{"class":32,"line":1295},106,[30,1297,89],{"class":64},[30,1299,1300],{"class":68}," processCoords",[30,1302,96],{"class":64},[30,1304,166],{"class":99},[30,1306,1020],{"class":770},[30,1308,552],{"class":99},[30,1310,793],{"class":64},[30,1312,1313],{"class":770},"callbacks",[30,1315,774],{"class":99},[30,1317,298],{"class":64},[30,1319,301],{"class":99},[30,1321,1323,1326,1329,1331],{"class":32,"line":1322},107,[30,1324,1325],{"class":64},"        let",[30,1327,1328],{"class":99}," res ",[30,1330,224],{"class":64},[30,1332,1056],{"class":99},[30,1334,1336,1339,1342,1344,1347,1350],{"class":32,"line":1335},108,[30,1337,1338],{"class":99},"        callbacks.",[30,1340,1341],{"class":68},"forEach",[30,1343,106],{"class":99},[30,1345,1346],{"class":770},"callback",[30,1348,1349],{"class":64}," =>",[30,1351,301],{"class":99},[30,1353,1355,1358,1360,1363],{"class":32,"line":1354},109,[30,1356,1357],{"class":99},"            res ",[30,1359,224],{"class":64},[30,1361,1362],{"class":68}," callback",[30,1364,1365],{"class":99},"(res);\n",[30,1367,1369],{"class":32,"line":1368},110,[30,1370,1371],{"class":99},"        });\n",[30,1373,1375,1377],{"class":32,"line":1374},111,[30,1376,1098],{"class":64},[30,1378,1379],{"class":99}," res;\n",[30,1381,1383],{"class":32,"line":1382},112,[30,1384,197],{"class":99},[30,1386,1388],{"class":32,"line":1387},113,[30,1389,37],{"emptyLinePlaceholder":36},[30,1391,1393],{"class":32,"line":1392},114,[30,1394,55],{"class":48},[30,1396,1398,1400,1402,1404],{"class":32,"line":1397},115,[30,1399,61],{"class":48},[30,1401,745],{"class":64},[30,1403,428],{"class":68},[30,1405,1406],{"class":99}," time\n",[30,1408,1410,1412,1414,1417],{"class":32,"line":1409},116,[30,1411,61],{"class":48},[30,1413,745],{"class":64},[30,1415,1416],{"class":68}," {DrawScope}",[30,1418,1419],{"class":99}," drawScope\n",[30,1421,1423],{"class":32,"line":1422},117,[30,1424,78],{"class":48},[30,1426,1428,1430,1433,1435],{"class":32,"line":1427},118,[30,1429,627],{"class":64},[30,1431,1432],{"class":99}," draw ",[30,1434,224],{"class":64},[30,1436,1437],{"class":99}," (time, {\n",[30,1439,1441],{"class":32,"line":1440},119,[30,1442,519],{"class":99},[30,1444,1446],{"class":32,"line":1445},120,[30,1447,1448],{"class":99},"        width,\n",[30,1450,1452],{"class":32,"line":1451},121,[30,1453,1454],{"class":99},"        height\n",[30,1456,1458,1461,1463],{"class":32,"line":1457},122,[30,1459,1460],{"class":99},"    }) ",[30,1462,298],{"class":64},[30,1464,301],{"class":99},[30,1466,1468,1471,1473,1476],{"class":32,"line":1467},123,[30,1469,1470],{"class":99},"        context.strokeStyle ",[30,1472,224],{"class":64},[30,1474,1475],{"class":109}," 'white'",[30,1477,230],{"class":99},[30,1479,1481,1484,1486,1488],{"class":32,"line":1480},124,[30,1482,1483],{"class":99},"        context.fillStyle ",[30,1485,224],{"class":64},[30,1487,1475],{"class":109},[30,1489,230],{"class":99},[30,1491,1493,1496,1498,1501],{"class":32,"line":1492},125,[30,1494,1495],{"class":99},"        context.lineWidth ",[30,1497,224],{"class":64},[30,1499,1500],{"class":92}," 4",[30,1502,230],{"class":99},[30,1504,1506,1509,1511,1514],{"class":32,"line":1505},126,[30,1507,1508],{"class":99},"        context.lineCap ",[30,1510,224],{"class":64},[30,1512,1513],{"class":109}," 'round'",[30,1515,230],{"class":99},[30,1517,1519,1521,1524,1526,1529,1531],{"class":32,"line":1518},127,[30,1520,1037],{"class":64},[30,1522,1523],{"class":92}," deltaTime",[30,1525,96],{"class":64},[30,1527,1528],{"class":99}," time ",[30,1530,1116],{"class":64},[30,1532,1533],{"class":99}," lastTime;\n",[30,1535,1537,1540,1542],{"class":32,"line":1536},128,[30,1538,1539],{"class":99},"        lastTime ",[30,1541,224],{"class":64},[30,1543,1544],{"class":99}," time;\n",[30,1546,1548,1551,1554,1556,1558,1560,1562],{"class":32,"line":1547},129,[30,1549,1550],{"class":99},"        context.",[30,1552,1553],{"class":68},"clearRect",[30,1555,106],{"class":99},[30,1557,528],{"class":92},[30,1559,552],{"class":99},[30,1561,528],{"class":92},[30,1563,1564],{"class":99},", width, height);\n",[30,1566,1568,1571],{"class":32,"line":1567},130,[30,1569,1570],{"class":64},"        if",[30,1572,1573],{"class":99}," (mouse.down) {\n",[30,1575,1577,1580],{"class":32,"line":1576},131,[30,1578,1579],{"class":68},"            addtracePoint",[30,1581,1582],{"class":99},"(mouse.pos);\n",[30,1584,1586],{"class":32,"line":1585},132,[30,1587,908],{"class":99},[30,1589,1591,1593,1596,1598],{"class":32,"line":1590},133,[30,1592,1037],{"class":64},[30,1594,1595],{"class":92}," rotationCenter",[30,1597,96],{"class":64},[30,1599,1600],{"class":99}," drawScope.middle;\n",[30,1602,1604,1606,1609,1611,1614,1617,1620,1623,1625,1627,1630],{"class":32,"line":1603},134,[30,1605,1037],{"class":64},[30,1607,1608],{"class":92}," negativeRotationCenter",[30,1610,96],{"class":64},[30,1612,1613],{"class":99}," rotationCenter.",[30,1615,1616],{"class":68},"map",[30,1618,1619],{"class":99},"((",[30,1621,1622],{"class":770},"value",[30,1624,774],{"class":99},[30,1626,298],{"class":64},[30,1628,1629],{"class":64}," -",[30,1631,1632],{"class":99},"value);\n",[30,1634,1636,1638,1640,1642,1645,1647],{"class":32,"line":1635},135,[30,1637,945],{"class":99},[30,1639,1341],{"class":68},[30,1641,106],{"class":99},[30,1643,1644],{"class":770},"trace",[30,1646,1349],{"class":64},[30,1648,301],{"class":99},[30,1650,1652,1655,1657,1659,1661,1663,1666,1668,1670],{"class":32,"line":1651},136,[30,1653,1654],{"class":99},"            trace.",[30,1656,1341],{"class":68},[30,1658,1619],{"class":99},[30,1660,771],{"class":770},[30,1662,552],{"class":99},[30,1664,1665],{"class":770},"index",[30,1667,774],{"class":99},[30,1669,298],{"class":64},[30,1671,301],{"class":99},[30,1673,1675,1678,1680,1682,1684,1686,1688,1690,1692,1695,1697,1699,1701],{"class":32,"line":1674},137,[30,1676,1677],{"class":64},"                const",[30,1679,1040],{"class":99},[30,1681,1043],{"class":92},[30,1683,552],{"class":99},[30,1685,1048],{"class":92},[30,1687,1051],{"class":99},[30,1689,224],{"class":64},[30,1691,1300],{"class":68},[30,1693,1694],{"class":99},"(point, (",[30,1696,771],{"class":770},[30,1698,774],{"class":99},[30,1700,298],{"class":64},[30,1702,301],{"class":99},[30,1704,1706,1709,1711],{"class":32,"line":1705},138,[30,1707,1708],{"class":64},"                    return",[30,1710,1163],{"class":68},[30,1712,1713],{"class":99},"(point, negativeRotationCenter);\n",[30,1715,1717,1720,1722,1724,1726],{"class":32,"line":1716},139,[30,1718,1719],{"class":99},"                }, (",[30,1721,771],{"class":770},[30,1723,774],{"class":99},[30,1725,298],{"class":64},[30,1727,301],{"class":99},[30,1729,1731,1733,1735,1737,1740,1743,1746,1748,1751,1753,1755],{"class":32,"line":1730},140,[30,1732,1708],{"class":64},[30,1734,1013],{"class":68},[30,1736,1694],{"class":99},[30,1738,1739],{"class":92},"0.0001",[30,1741,1742],{"class":64}," +",[30,1744,1745],{"class":99}," index ",[30,1747,598],{"class":64},[30,1749,1750],{"class":92}," 200000",[30,1752,774],{"class":99},[30,1754,1110],{"class":64},[30,1756,1757],{"class":99}," deltaTime);\n",[30,1759,1761,1763,1765,1767,1769],{"class":32,"line":1760},141,[30,1762,1719],{"class":99},[30,1764,771],{"class":770},[30,1766,774],{"class":99},[30,1768,298],{"class":64},[30,1770,301],{"class":99},[30,1772,1774,1776,1778],{"class":32,"line":1773},142,[30,1775,1708],{"class":64},[30,1777,1163],{"class":68},[30,1779,1780],{"class":99},"(point, rotationCenter);\n",[30,1782,1784],{"class":32,"line":1783},143,[30,1785,1786],{"class":99},"                });\n",[30,1788,1790],{"class":32,"line":1789},144,[30,1791,1792],{"class":99},"                {\n",[30,1794,1796,1799,1801,1803,1805],{"class":32,"line":1795},145,[30,1797,1798],{"class":99},"                    point[",[30,1800,528],{"class":92},[30,1802,1051],{"class":99},[30,1804,224],{"class":64},[30,1806,1807],{"class":99}," x;\n",[30,1809,1811,1813,1816,1818,1820],{"class":32,"line":1810},146,[30,1812,1798],{"class":99},[30,1814,1815],{"class":92},"1",[30,1817,1051],{"class":99},[30,1819,224],{"class":64},[30,1821,1822],{"class":99}," y;\n",[30,1824,1826],{"class":32,"line":1825},147,[30,1827,1828],{"class":99},"                }\n",[30,1830,1832],{"class":32,"line":1831},148,[30,1833,37],{"emptyLinePlaceholder":36},[30,1835,1837,1840,1843,1846,1848],{"class":32,"line":1836},149,[30,1838,1839],{"class":64},"                if",[30,1841,1842],{"class":99}," (index ",[30,1844,1845],{"class":64},"===",[30,1847,725],{"class":92},[30,1849,850],{"class":99},[30,1851,1853,1856,1859],{"class":32,"line":1852},150,[30,1854,1855],{"class":99},"                    context.",[30,1857,1858],{"class":68},"beginPath",[30,1860,313],{"class":99},[30,1862,1864,1866,1869],{"class":32,"line":1863},151,[30,1865,1855],{"class":99},[30,1867,1868],{"class":68},"moveTo",[30,1870,1871],{"class":99},"(x, y);\n",[30,1873,1875,1878,1881],{"class":32,"line":1874},152,[30,1876,1877],{"class":99},"                } ",[30,1879,1880],{"class":64},"else",[30,1882,301],{"class":99},[30,1884,1886,1888,1891],{"class":32,"line":1885},153,[30,1887,1855],{"class":99},[30,1889,1890],{"class":68},"lineTo",[30,1892,1871],{"class":99},[30,1894,1896],{"class":32,"line":1895},154,[30,1897,1828],{"class":99},[30,1899,1901],{"class":32,"line":1900},155,[30,1902,1903],{"class":99},"            });\n",[30,1905,1907,1910,1913],{"class":32,"line":1906},156,[30,1908,1909],{"class":99},"            context.",[30,1911,1912],{"class":68},"stroke",[30,1914,313],{"class":99},[30,1916,1918],{"class":32,"line":1917},157,[30,1919,1371],{"class":99},[30,1921,1923],{"class":32,"line":1922},158,[30,1924,37],{"emptyLinePlaceholder":36},[30,1926,1928],{"class":32,"line":1927},159,[30,1929,197],{"class":99},[30,1931,1933],{"class":32,"line":1932},160,[30,1934,1935],{"class":99},"    \n",[30,1937,1939,1941,1944,1946,1948,1950],{"class":32,"line":1938},161,[30,1940,89],{"class":64},[30,1942,1943],{"class":68}," windowResizedListener",[30,1945,96],{"class":64},[30,1947,295],{"class":99},[30,1949,298],{"class":64},[30,1951,301],{"class":99},[30,1953,1955,1957,1960,1962,1965,1968],{"class":32,"line":1954},162,[30,1956,1037],{"class":64},[30,1958,1959],{"class":92}," containerRect",[30,1961,96],{"class":64},[30,1963,1964],{"class":99}," container.",[30,1966,1967],{"class":68},"getBoundingClientRect",[30,1969,313],{"class":99},[30,1971,1973,1976,1978],{"class":32,"line":1972},163,[30,1974,1975],{"class":99},"        canvas.width ",[30,1977,224],{"class":64},[30,1979,1980],{"class":99}," containerRect.width;\n",[30,1982,1984,1987,1989],{"class":32,"line":1983},164,[30,1985,1986],{"class":99},"        canvas.height ",[30,1988,224],{"class":64},[30,1990,1980],{"class":99},[30,1992,1994,1997,1999],{"class":32,"line":1993},165,[30,1995,1996],{"class":99},"        drawScope.width ",[30,1998,224],{"class":64},[30,2000,573],{"class":99},[30,2002,2004,2007,2009],{"class":32,"line":2003},166,[30,2005,2006],{"class":99},"        drawScope.height ",[30,2008,224],{"class":64},[30,2010,573],{"class":99},[30,2012,2014,2017,2019,2021,2023,2025,2027,2029,2031],{"class":32,"line":2013},167,[30,2015,2016],{"class":99},"        drawScope.middle ",[30,2018,224],{"class":64},[30,2020,595],{"class":99},[30,2022,598],{"class":64},[30,2024,601],{"class":92},[30,2026,604],{"class":99},[30,2028,598],{"class":64},[30,2030,601],{"class":92},[30,2032,611],{"class":99},[30,2034,2036],{"class":32,"line":2035},168,[30,2037,197],{"class":99},[30,2039,2041],{"class":32,"line":2040},169,[30,2042,37],{"emptyLinePlaceholder":36},[30,2044,2046,2049,2052,2054,2057],{"class":32,"line":2045},170,[30,2047,2048],{"class":99},"    window.",[30,2050,2051],{"class":68},"addEventListener",[30,2053,106],{"class":99},[30,2055,2056],{"class":109},"'resize'",[30,2058,2059],{"class":99},", windowResizedListener);\n",[30,2061,2063],{"class":32,"line":2062},171,[30,2064,37],{"emptyLinePlaceholder":36},[30,2066,2068,2070,2073,2075,2077,2079],{"class":32,"line":2067},172,[30,2069,89],{"class":64},[30,2071,2072],{"class":68}," frame",[30,2074,96],{"class":64},[30,2076,295],{"class":99},[30,2078,298],{"class":64},[30,2080,301],{"class":99},[30,2082,2084,2086,2089,2091,2093,2095,2097,2099],{"class":32,"line":2083},173,[30,2085,1037],{"class":64},[30,2087,2088],{"class":92}," time",[30,2090,96],{"class":64},[30,2092,181],{"class":64},[30,2094,637],{"class":68},[30,2096,640],{"class":99},[30,2098,643],{"class":68},[30,2100,313],{"class":99},[30,2102,2104,2107],{"class":32,"line":2103},174,[30,2105,2106],{"class":68},"        draw",[30,2108,2109],{"class":99},"(time, drawScope);\n",[30,2111,2113,2116],{"class":32,"line":2112},175,[30,2114,2115],{"class":68},"        requestAnimationFrame",[30,2117,2118],{"class":99},"(frame);\n",[30,2120,2122],{"class":32,"line":2121},176,[30,2123,197],{"class":99},[30,2125,2127],{"class":32,"line":2126},177,[30,2128,55],{"class":48},[30,2130,2132,2134,2136,2138],{"class":32,"line":2131},178,[30,2133,61],{"class":48},[30,2135,65],{"class":64},[30,2137,399],{"class":68},[30,2139,2140],{"class":68}," Mouse\n",[30,2142,2144,2146,2148,2150],{"class":32,"line":2143},179,[30,2145,61],{"class":48},[30,2147,410],{"class":64},[30,2149,458],{"class":68},[30,2151,2152],{"class":99}," pos\n",[30,2154,2156,2158,2160,2163],{"class":32,"line":2155},180,[30,2157,61],{"class":48},[30,2159,410],{"class":64},[30,2161,2162],{"class":68}," {boolean}",[30,2164,2165],{"class":99}," down\n",[30,2167,2169],{"class":32,"line":2168},181,[30,2170,78],{"class":48},[30,2172,2174,2176,2178,2181],{"class":32,"line":2173},182,[30,2175,651],{"class":48},[30,2177,493],{"class":64},[30,2179,2180],{"class":68}," {Mouse}",[30,2182,659],{"class":48},[30,2184,2186,2188,2191,2193],{"class":32,"line":2185},183,[30,2187,89],{"class":64},[30,2189,2190],{"class":92}," mouse",[30,2192,96],{"class":64},[30,2194,301],{"class":99},[30,2196,2198,2201,2203,2205,2207],{"class":32,"line":2197},184,[30,2199,2200],{"class":99},"        pos: [",[30,2202,528],{"class":92},[30,2204,552],{"class":99},[30,2206,528],{"class":92},[30,2208,557],{"class":99},[30,2210,2212,2215,2218],{"class":32,"line":2211},185,[30,2213,2214],{"class":99},"        down: ",[30,2216,2217],{"class":92},"false",[30,2219,531],{"class":99},[30,2221,2223],{"class":32,"line":2222},186,[30,2224,37],{"emptyLinePlaceholder":36},[30,2226,2228],{"class":32,"line":2227},187,[30,2229,2230],{"class":99},"    };\n",[30,2232,2234,2237,2239,2241,2244,2247,2250,2252,2254],{"class":32,"line":2233},188,[30,2235,2236],{"class":99},"    canvas.",[30,2238,2051],{"class":68},[30,2240,106],{"class":99},[30,2242,2243],{"class":109},"'mousemove'",[30,2245,2246],{"class":99},", (",[30,2248,2249],{"class":770},"event",[30,2251,774],{"class":99},[30,2253,298],{"class":64},[30,2255,301],{"class":99},[30,2257,2259,2262,2264],{"class":32,"line":2258},189,[30,2260,2261],{"class":99},"        mouse.pos ",[30,2263,224],{"class":64},[30,2265,2266],{"class":99}," [event.offsetX, event.offsetY];\n",[30,2268,2270],{"class":32,"line":2269},190,[30,2271,2272],{"class":99},"    });\n",[30,2274,2276,2278,2280,2282,2285,2288,2290],{"class":32,"line":2275},191,[30,2277,2236],{"class":99},[30,2279,2051],{"class":68},[30,2281,106],{"class":99},[30,2283,2284],{"class":109},"'mousedown'",[30,2286,2287],{"class":99},", () ",[30,2289,298],{"class":64},[30,2291,301],{"class":99},[30,2293,2295,2298,2300,2303],{"class":32,"line":2294},192,[30,2296,2297],{"class":99},"        mouse.down ",[30,2299,224],{"class":64},[30,2301,2302],{"class":92}," true",[30,2304,230],{"class":99},[30,2306,2308,2311],{"class":32,"line":2307},193,[30,2309,2310],{"class":68},"        startNewTrace",[30,2312,313],{"class":99},[30,2314,2316],{"class":32,"line":2315},194,[30,2317,2272],{"class":99},[30,2319,2321,2323,2325,2327,2330,2332,2334],{"class":32,"line":2320},195,[30,2322,2048],{"class":99},[30,2324,2051],{"class":68},[30,2326,106],{"class":99},[30,2328,2329],{"class":109},"'mouseup'",[30,2331,2287],{"class":99},[30,2333,298],{"class":64},[30,2335,301],{"class":99},[30,2337,2339,2341,2343,2346],{"class":32,"line":2338},196,[30,2340,2297],{"class":99},[30,2342,224],{"class":64},[30,2344,2345],{"class":92}," false",[30,2347,230],{"class":99},[30,2349,2351],{"class":32,"line":2350},197,[30,2352,2272],{"class":99},[30,2354,2356],{"class":32,"line":2355},198,[30,2357,37],{"emptyLinePlaceholder":36},[30,2359,2361,2363,2365,2367,2370,2372,2374],{"class":32,"line":2360},199,[30,2362,2048],{"class":99},[30,2364,2051],{"class":68},[30,2366,106],{"class":99},[30,2368,2369],{"class":109},"'load'",[30,2371,2287],{"class":99},[30,2373,298],{"class":64},[30,2375,301],{"class":99},[30,2377,2379,2382],{"class":32,"line":2378},200,[30,2380,2381],{"class":68},"        windowResizedListener",[30,2383,313],{"class":99},[30,2385,2387],{"class":32,"line":2386},201,[30,2388,2272],{"class":99},[30,2390,2392],{"class":32,"line":2391},202,[30,2393,37],{"emptyLinePlaceholder":36},[30,2395,2397,2400],{"class":32,"line":2396},203,[30,2398,2399],{"class":68},"    frame",[30,2401,313],{"class":99},[2403,2404,2405],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}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 .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}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":25,"searchDepth":40,"depth":40,"links":2407},[],[2409],"blog","2024-04-08",null,"md","\u002Finstagram\u002Fautotel\u002F2024-04-09_00-02-38_UTC.jpg",{},"\u002Fposts\u002F2024-04-08-spirograph",{"title":5,"description":12},"posts\u002F2024-04-08-spirograph",[2419,2420,2421,2422],"generative","visuals","gist","tool_javascript",false,"iyWoUJgSaSlqhEPjpQ-mYXrPN2TFYWjiEEDfRrFCJaA",1791671313072]