2b:null 2c:["$","title",null,{"children":"Kompgraf Stdlib | Attila Bagossy | Observable"}] 31:T42a,/** * Az Aitken_interpolacio képletet megvalósító függvény. * @param {Array} points Az aktuális generáció pontjait tartalmazó tömb. * @param {Array} parameters Az interpolációs feltételekhez tartozó paraméterértékek tömbje. * @param {Number} t A futó paraméterérték. * @param {Number} i Az index, hogy mely pontnál szeretnénk interpolációt végezni. * @param {Number} k Az aktuális generáció indexe. * @returns {vec2} A lineáris interpoláció eredménye. */ function f_AitkenInterpolateTwoPoints(points, parameters, t, i, k) { const alpha = (parameters[i + k] - t) / (parameters[i + k] - parameters[i]) const beta = (t - parameters[i]) / (parameters[i + k] - parameters[i]) // sp0 = alpha * p[i] const sp0 = glMatrix.vec2.create() glMatrix.vec2.scale(sp0, points[i], alpha) // sp1 = beta * p[i + 1] const sp1 = glMatrix.vec2.create() glMatrix.vec2.scale(sp1, points[i + 1], beta) // result = sp1 + sp2 const result = glMatrix.vec2.create() glMatrix.vec2.add(result, sp0, sp1) return result }32:T4df,function createArrowDrawer(regl) { const uniforms = { width: regl.context('viewportWidth'), height: regl.context('viewportHeight'), color(context, { color }) { return color; } } const vert = ` attribute vec2 position; uniform float width, height; void main() { vec2 clipSpace = vec2(position.x / width, position.y / height) * 2.0 - 1.0; gl_Position = vec4(clipSpace * vec2(1.0, -1.0), 0.0, 1.0); gl_PointSize = 6.0; } `; const frag = ` precision mediump float; uniform vec4 color; void main() { gl_FragColor = color; } `; const lineDrawingCommand = regl({ frag, vert, uniforms, attributes: { position: regl.prop('position') }, primitive: 'line strip', count: 2 }); const arrowHeadDrawingCommand = regl({ frag, vert, uniforms, attributes: { position: regl.prop('position') }, primitive: 'triangles', count: 3 }) return function drawArrow({ lineBegin, lineEnd, size, color }) { lineDrawingCommand({ position: [lineBegin, lineEnd], color }) arrowHeadDrawingCommand({ position: arrowHead(lineBegin, lineEnd, size), color }) } }33:T65a,/* * Example usage: * const drawEmptyCircle = createEmptyCircleDrawer(localRegl, 100); * * drawEmptyCircle({ * radius: 10, * center: glMatrix.vec2.fromValues(250, 250), * lineWidth: 5, * color: glMatrix.vec4.fromValues(1, 0, 0, 1) * }) */ function createEmptyCircleDrawer(regl, pointCount = 100) { const uniforms = { width: regl.context('viewportWidth'), height: regl.context('viewportHeight'), model(context, { radius, center }) { const scaling = glMatrix.mat3.create(), translation = glMatrix.mat3.create(), result = glMatrix.mat3.create() glMatrix.mat3.fromScaling(scaling, glMatrix.vec2.fromValues(radius, radius)) glMatrix.mat3.fromTranslation(translation, center) glMatrix.mat3.multiply(result, translation, scaling) return result }, color(context, { color }) { return color; } } const vert = ` attribute vec2 position; uniform mat3 model; uniform float width, height; void main() { vec3 p = model * vec3(position, 1.0); vec2 ph = vec2(p.x / p.z, p.y /p.z); vec2 clipSpace = vec2(ph.x / width, ph.y / height) * 2.0 - 1.0; gl_Position = vec4(clipSpace * vec2(1.0, -1.0), 0.0, 1.0); gl_PointSize = 6.0; } `; const frag = ` precision mediump float; uniform vec4 color; void main() { gl_FragColor = color; } `; const attributes = { position: circle(pointCount, false) } return regl({ frag, vert, uniforms, attributes, primitive: 'line loop', count: pointCount, lineWidth: regl.prop('lineWidth') }); }34:T61c,/* * Example usage: * const drawFilledCircle = createFilledCircleDrawer(localRegl, 100); * * drawCircle({ * radius: 10, * center: glMatrix.vec2.fromValues(250, 250), * color: glMatrix.vec4.fromValues(1, 0, 0, 1) * }) */ function createFilledCircleDrawer(regl, pointCount = 100) { const uniforms = { width: regl.context('viewportWidth'), height: regl.context('viewportHeight'), model(context, { radius, center }) { const scaling = glMatrix.mat3.create(), translation = glMatrix.mat3.create(), result = glMatrix.mat3.create() glMatrix.mat3.fromScaling(scaling, glMatrix.vec2.fromValues(radius, radius)) glMatrix.mat3.fromTranslation(translation, center) glMatrix.mat3.multiply(result, translation, scaling) return result }, color(context, { color }) { return color; } } const vert = ` attribute vec2 position; uniform mat3 model; uniform float width, height; void main() { vec3 p = model * vec3(position, 1.0); vec2 ph = vec2(p.x / p.z, p.y /p.z); vec2 clipSpace = vec2(ph.x / width, ph.y / height) * 2.0 - 1.0; gl_Position = vec4(clipSpace * vec2(1.0, -1.0), 0.0, 1.0); gl_PointSize = 6.0; } `; const frag = ` precision mediump float; uniform vec4 color; void main() { gl_FragColor = color; } `; const attributes = { position: circle(pointCount) } return regl({ frag, vert, uniforms, attributes, primitive: 'triangle fan', count: pointCount + 1 }); }35:T732,controlPointBoilerplate = (function controlPointBoilerplateIIFE() { return function controlPointBoilerplate(controlPointLimit, startingPoints = []) { const canvas = DOM.canvas(sizing.canvasWidth, sizing.canvasHeight) const reglInstance = regl({ canvas }) const controlPoints = startingPoints let draggedPoint = null const addPoint = function addPoint(point) { controlPoints.push(point) } const deletePoint = function deletePoint(pointIndex) { controlPoints.splice(pointIndex, 1) } const dragPoint = function dragPoint(pointIndex) { draggedPoint = controlPoints[pointIndex] } const canAddPoint = function() { return controlPointLimit == -1 || controlPoints.length < controlPointLimit } const onMouseDown = function onMouseDown(point, event) { const pointIndex = getClickedPointIndex(controlPoints, point, sizing.clickThreshold) if (event.button == mouse.button.LEFT) { if (pointIndex == -1) { if (canAddPoint()) { addPoint(point) } } else { dragPoint(pointIndex) } } else if (event.button == mouse.button.RIGHT && pointIndex > -1) { deletePoint(pointIndex) } } const onMouseMove = function onMouseMove(point, event) { if (draggedPoint) { draggedPoint[0] = point[0] draggedPoint[1] = point[1] } } const onMouseUp = function onMouseUp(point, event) { draggedPoint = null } canvas.addEventListener('contextmenu', event => event.preventDefault()) return { controlPoints, canvas, getDraggedPoint: () => draggedPoint, onMouseDown, onMouseMove, onMouseUp, reglInstance, } } })()36:[] 2f:{"id":"38ade71b8adb28d4","slug":"kompgraf-stdlib","title":"Kompgraf Stdlib","thumbnail":"222e466b40d0218e3413472b6ef663bc7547826578c0157005f64ffd68df5cbe","access_level":"public","create_time":"$D2018-06-02T19:53:28.734Z","update_time":"$D2019-02-11T11:55:35.661Z","view_time":null,"first_public_time":"$D2018-06-02T21:39:01.217Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ef739838e5a1d607","login":"battila7","name":"Attila Bagossy","avatar_url":"https://avatars-next.observableusercontent.com/90b1460199ec3e040db6a772368bce18487f1a014e7f564bfbc73d51132a4e07","tier":"starter_2024"},"version":736,"publish_version":736,"role":null,"authored":false,"authors":[{"type":"individual","id":"6afecd2e2d5dcc78","login":"battila7","name":"Attila Bagossy","avatar_url":"https://avatars-next.observableusercontent.com/90b1460199ec3e040db6a772368bce18487f1a014e7f564bfbc73d51132a4e07","tier":null}],"members":[{"type":"individual","id":"6afecd2e2d5dcc78","login":"battila7","name":"Attila Bagossy","avatar_url":"https://avatars-next.observableusercontent.com/90b1460199ec3e040db6a772368bce18487f1a014e7f564bfbc73d51132a4e07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Kompgraf Stdlib","cells":[{"id":0,"value":"md`# Kompgraf Stdlib`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"md`## Konvenciók`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`### Nyelv`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"md`\n * A függvények nevei és a kód általában angol nyelvű legyen.\n * A közvetlenül a kódban elhelyezett kommentek azonban magyar nyelvűek legyenek.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`### Prefixek`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"md`\nA kódokhoz használt, névvel ellátott cellák mindig rendelkezzenek egy prefixszel, annak megfelelően, hogy milyen szerepet töltenek be.\n\nA rendelkezésre álló prefixek a következők:\n\n * \\`cp\\` - A kontrollpontokat tartalmazó cella.\n * \\`data\\` - Az adatokat tartalmazó cella.\n * \\`f\\` - A felhasználó által írt függvény.\n * \\`fig\\` - Az ábrát tartalmazó cella.\n * \\`initFig\\` - Az ábrát inicializáló cella.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md`### Cellanevek`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`\nElegendő azokat a cellákat ellátni névvel, melyekre később (vagy épp korábban) hivatkozás történik. Ha a cellára kódban is hivatkozunk, akkor angol neve legyen, egyébként pedig, ha csak folyószövegben történik rá hivatkozás, akkor ékezet nélküli magyar névvel kell ellátni.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"md`## Modulok`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"md`### Maths`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"$$maths = ({\n linspace,\n linspaceDist,\n range\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"function linspace(a, b, count = 100) {\n const d = (b - a) / (count - 1);\n \n return [...Array(count).keys()]\n .map(x => a + x * d);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"function linspaceDist(a, b, count = 100) {\n return (b - a) / (count - 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"function range(a, b) {\n return [...Array(b - a + 1).keys()].map(x => x + a) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"md`### Curves`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"$$curves = ({\n hermite: {\n hermiteAtParameter,\n hermite\n },\n bezier: {\n deCasteljauAtParameter\n },\n lagrange: {\n aitkenInterpolationAtParameter\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"function make2dG(points) {\n return glMatrix.mat4.fromValues(\n points[0][0], points[0][1], 0, 0,\n points[1][0], points[1][1], 0, 0,\n points[2][0], points[2][1], 0, 0,\n points[3][0], points[3][1], 0, 0,\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"md`#### Hermite`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"hermiteM = glMatrix.mat4.fromValues(\n 2, -2, 1, 1,\n -3, 3, -2, -1,\n 0, 0, 1, 0,\n 1, 0, 0, 0\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"function hermiteAtParameter(points, t) {\n const G = make2dG(points)\n const C = glMatrix.mat4.create()\n \n glMatrix.mat4.mul(C, G, hermiteM)\n \n const T = glMatrix.vec4.fromValues(t * t * t, t * t, t, 1)\n const result = glMatrix.vec4.create()\n \n glMatrix.vec4.transformMat4(result, T, C)\n \n return result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"function hermite(points, curvePointCount = 100) {\n const G = make2dG(points)\n const C = glMatrix.mat4.create()\n \n glMatrix.mat4.mul(C, G, hermiteM)\n \n return linspace(0, 1, curvePointCount)\n .map(t => glMatrix.vec4.fromValues(t * t * t, t * t, t, 1))\n .map(T => {\n const result = glMatrix.vec4.create()\n glMatrix.vec4.transformMat4(result, T, C)\n return result\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"md`#### Bézier`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"function deCasteljauAtParameter(points, t) {\n const p = [...points];\n \n while (p.length > 1) {\n for (let i = 0; i < p.length - 1; ++i) {\n const sp1 = glMatrix.vec2.create()\n const sp2 = glMatrix.vec2.create()\n const r = glMatrix.vec2.create()\n \n glMatrix.vec2.scale(sp1, p[i], 1 - t)\n glMatrix.vec2.scale(sp2, p[i + 1], t)\n glMatrix.vec2.add(r, sp1, sp2)\n \n p[i] = r;\n }\n p.pop();\n }\n \n return p[0];\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"md`#### Lagrange`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"/**\n * Az Aitken-algoritmus egy generációját kiszámító függvény.\n * @param {Array} points Az aktuális generáció pontjait tartalmazó tömb.\n * @param {Array} parameters Az interpolációs feltételekhez tartozó paraméterértékek tömbje.\n * @param {Number} t A futó paraméterérték.\n * @param {Number} k Az aktuális generáció indexe.\n * @returns {Array} A következő generáció pontjait tartalmazó tömb.\n */\nfunction f_AitkenCalculateGeneration(points, parameters, t, k) {\n const result = []\n \n for (let i = 0; i < points.length - 1; i++) {\n result.push(f_AitkenInterpolateTwoPoints(points, parameters, t, i, k))\n }\n \n return result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"/**\n * Az Aitken-algoritmus t paraméterértékhez tartozó görbepontját kiszámító függvény.\n * @param {Array} points Az aktuális generáció pontjait tartalmazó tömb.\n * @param {Array} parameters Az interpolációs feltételekhez tartozó paraméterértékek tömbje.\n * @param {Number} t A futó paraméterérték.\n * @returns {Array} A t-hez tartozó görbepont.\n */\nfunction aitkenInterpolationAtParameter(controlPoints, parameters, t) {\n // Lemásoljuk a controlPoints tömböt, hogy ne az eredetin végezzünk módosításokat.\n let points = controlPoints.slice()\n \n // Ha már csak egy pont van, akkor az algoritmus leáll -> az lesz az f(t) görbepont.\n while (points.length > 1) {\n const generation = controlPoints.length - points.length + 1\n \n points = f_AitkenCalculateGeneration(points, parameters, t, generation)\n }\n \n return points[0]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"md`### Drawing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"$$drawing = ({\n consts: {\n colors\n },\n drawers: {\n arrow: createArrowDrawer,\n emptyCircle: createEmptyCircleDrawer,\n filledCircle: createFilledCircleDrawer,\n lineStrip: createLineStripDrawer\n },\n primitives: {\n arrowHead,\n circle\n },\n helper: {\n toVec2\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"function toVec2(v) {\n const res = glMatrix.vec2.fromValues(v[0], v[1])\n return res\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"function arrowHead(lineBegin, lineEnd, size) {\n const unit = glMatrix.vec2.create()\n glMatrix.vec2.sub(unit, lineEnd, lineBegin)\n glMatrix.vec2.normalize(unit, unit)\n \n const normal = glMatrix.vec2.fromValues(unit[1], -unit[0]);\n\n const triangle = [\n glMatrix.vec2.clone(unit),\n glMatrix.vec2.clone(normal),\n glMatrix.vec2.clone(normal) \n ];\n \n glMatrix.vec2.scale(triangle[0], triangle[0], 1.25 * size)\n glMatrix.vec2.scale(triangle[1], triangle[1], size)\n glMatrix.vec2.scale(triangle[2], triangle[2], -size)\n \n glMatrix.vec2.add(triangle[0], triangle[0], lineEnd)\n glMatrix.vec2.add(triangle[1], triangle[1], lineEnd)\n glMatrix.vec2.add(triangle[2], triangle[2], lineEnd)\n \n return triangle;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"function circle(pointCount = 100, withCenter = true) {\n const circlePoints = linspace(0, 2 * Math.PI, pointCount)\n .map(t => glMatrix.vec2.fromValues(Math.cos(t), Math.sin(t)))\n\n const center = glMatrix.vec2.fromValues(0, 0)\n\n // If the center is included, then triangle fan rendering mode can be used.\n if (withCenter) {\n return [center, ...circlePoints]\n } else {\n return circlePoints\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"function createLineStripDrawer(regl) {\n const uniforms = {\n width: regl.context('viewportWidth'),\n height: regl.context('viewportHeight'),\n color(context, { color }) {\n return color;\n }\n }\n\n const vert = `\n attribute vec2 position;\n uniform float width, height;\n\n void main() {\n vec2 clipSpace = vec2(position.x / width, position.y / height) * 2.0 - 1.0;\n gl_Position = vec4(clipSpace * vec2(1.0, -1.0), 0.0, 1.0);\n gl_PointSize = 6.0;\n }\n `;\n\n const frag = `\n precision mediump float;\n uniform vec4 color;\n\n void main() {\n gl_FragColor = color;\n }\n `;\n\n const attributes = {\n position: regl.prop('position')\n }\n\n return regl({\n frag,\n vert,\n uniforms,\n attributes,\n primitive: 'line strip',\n lineWidth: regl.prop('lineWidth'),\n count: regl.prop('count')\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"colors = {\n const toColor = glMatrix.vec4.fromValues.bind(glMatrix.vec4)\n \n const palette = {\n white: toColor(1.0, 1.0, 1.0, 1.0),\n ultraLightGray: toColor(0.9, 0.9, 0.9, 1.0),\n lightGray: toColor(0.8, 0.8, 0.8, 1.0),\n darkGray: toColor(0.75, 0.75, 0.75, 1.0),\n halfwayBlack: toColor(0.5, 0.5, 0.5, 1.0),\n black: toColor(0.0, 0.0, 0.0, 1.0),\n \n observableBlue: toColor(0.149, 0.419, 0.851, 1.0),\n lightObservableBlue: toColor(0.573, 0.706, 0.925, 1.0),\n \n steelBlue: toColor(0.275, 0.51, 0.706, 1.0),\n red: toColor(1.0, 0.0, 0.0, 1.0)\n }\n \n const styled = {\n curve: palette.black,\n semiCurve: palette.halfwayBlack,\n controlPoint: palette.black,\n controlPolygon: palette.lightGray\n }\n \n return Object.assign(Object.create(null), palette, styled)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"md`### Localization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"$$l10n = ({\n hungarianFormatter\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"function hungarianFormatter(format) {\n const hungarianLocale = d3format.formatLocale({\n decimal: ',',\n thousands: ' ',\n grouping: [3],\n currency: ''\n })\n\n return hungarianLocale.format(format)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"md`### Styling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"$$styling = ({\n css: {\n twoColumnContainer: twoColumnContainerStyling, \n figure: figureStyling,\n plot: plotStyling\n },\n emitters: {\n twoColumnContainer: emitTwoColumnContainer,\n figure: emitFigure,\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"figureStyling = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"twoColumnContainerStyling = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"function emitFigure(heading, body) {\n return html`\n

\n ${heading}\n

\n ${body}\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"function emitTwoColumnContainer(heading, body) {\n return html`\n

\n ${heading}\n

\n ${body}\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"plotStyling = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"md`### Figure`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"$$figure = ({\n boilerplate: {\n controlPoint: controlPointBoilerplate\n },\n consts: {\n sizing\n },\n controlPoint: {\n getClickedPointIndex\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"function getClickedPointIndex(points, click, threshold) {\n return points.findIndex(p => glMatrix.vec2.squaredDistance(p, click) < threshold)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"sizing = {\n return Object.assign(Object.create(null), {\n canvasHeight: 500,\n canvasWidth: 500,\n controlPointRadius: 3,\n clickThreshold: 100\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"md`## Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"$$plot = ({\n emitters: {\n twoColumnPlot: emitPlot\n },\n legend: {\n circle: colorCircle\n },\n consts: {\n colors: plotColors\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"// Extracted from function-plot\nplotColors = [\n 'steelblue',\n 'red',\n '#05b378', // green\n 'orange',\n '#4040e8', // purple\n 'yellow',\n 'brown',\n 'magenta',\n 'cyan'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"function colorCircle(color) {\n return html`\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"function emitPlot(heading, legends, plotConfig) {\n let leftColumn = html`\n

\n ${heading}\n
\n ${legends.map(legend => html`${colorCircle(legend.color)}${legend.content}
`)}\n

\n `\n \n let target = DOM.element('div');\n \n functionPlot(Object.assign({}, plotConfig, { target }))\n \n return emitTwoColumnContainer(leftColumn, target)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"md`### Utility`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"$$utility = ({\n mouse,\n generators: {\n delayValues,\n loopValues\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"mouse = ({\n button: {\n LEFT: 0,\n MIDDLE: 1,\n RIGHT: 2\n },\n getCoordinates(event) {\n return glMatrix.vec2.fromValues(event.offsetX, event.offsetY)\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"function *delayValues(values, delay) {\n for (let v of values) {\n yield Promises.delay(delay, v)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"function *loopValues(values, delay) {\n while (true) {\n yield *delayValues(values, delay)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"md`## SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"$$svg = ({\n colorCurve: svgColorCurve,\n filledColorCircle: svgFilledColorCircle,\n emptyColorCirlce: svgEmptyColorCircle\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"function svgColorCurve(color) {\n return ``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"function svgFilledColorCircle(color) {\n return ``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"function svgEmptyColorCircle(color) {\n return ``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"md`${svgEmptyColorCircle('steelblue')}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"md`${svgFilledColorCircle('steelblue')}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`## Könyvtárak`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"glMatrix = require('https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"regl = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"functionPlot = {\n window.d3 = await require('d3@3');\n window.math = await require('https://cdnjs.cloudflare.com/ajax/libs/mathjs/1.5.2/math.min.js');\n return require('https://wzrd.in/standalone/function-plot');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"d3format = require('d3-format')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"