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