2b:null 2c:["$","title",null,{"children":"6. Bézier-görbe | Attila Bagossy | Observable"}] 31:T476,masodfoku_bezier_sulyfuggvenyek = { const heading = md` ### 1. grafikon #### Másofokú Bézier-súlyfüggvények Az ${tex`x`}-tengelyen a ${tex`t`} paramétert, az ${tex`y`}-tengelyen pedig a súlyfüggvény adott ${tex`t`}-hez tartozó értékét láthatjuk. A súlyfüggvények nevei mellett a hozzájuk tartozó geometriai adatot láthatjuk. ` const legends = [{ content: tex`b_{0}(t) = (1 - t)^2 \quad \; \, | \quad P_{0}`, color: $plot.consts.colors[0] }, { content: tex`b_{1}(t) = 2(1-t)t \quad | \quad P_{1}`, color: $plot.consts.colors[1] }, { content: tex`b_{2}(t) = t^2 \qquad \quad \quad | \quad P_{2}`, color: $plot.consts.colors[2] }] const data = [{ fn: '(1-x)^2' }, { fn: '2(1-x)x' }, { fn: 'x^2' } ].map(o => Object.assign({}, { range: [0, 1], sample: 'builtIn', graphType: 'polyline' }, o)) const plotConfig = { disableZoom: true, grid: true, xAxis: { domain: [0, 1], label: 't' }, yAxis: { domain: [-0.25, 1.25] }, data } return $plot.emitters.twoColumnPlot(heading, legends, plotConfig) }32:T6f4,Bezier_bernstein = { const heading = md` ### 1. ábra #### Bézier-görbe Bernstein-polinomokkal * Új kontrollpontot a bal egérgomb segítségével helyezhetünk el. * A meglevő kontrollpontok a bal egérgombbal történő vonszolással helyezhetők át. * Kontrollpont törlése a jobb egérgombbal lehetséges. ` function f_bezierBernstein(points, t) { const n = points.length - 1; return points .map((p, i) => { const result = glMatrix.vec2.create(); glMatrix.vec2.scale(result, p, f_bernstein(n, i, t)); return result; }).reduce((acc, curr) => { const result = glMatrix.vec2.create(); glMatrix.vec2.add(result, acc, curr); return result; }, glMatrix.vec2.create()); } const controlPointMarkers = (cp_BernsteinPolynomial).map(cp => ({ radius: $figure.consts.sizing.controlPointRadius, center: cp, lineWidth: 1, color: $drawing.consts.colors.controlPoint })) initFig_BernsteinPolynomial.reglInstance.poll() initFig_BernsteinPolynomial.reglInstance.clear({ color: $drawing.consts.colors.white, depth: 1 }) if (cp_BernsteinPolynomial.length > 1) { const curvePoints = $maths.linspace(0, 1) .map(t => f_bezierBernstein(cp_BernsteinPolynomial, t)) const containsUndefinedOrNull = curvePoints.some(p => p == null) if (curvePoints.length > 1 && !containsUndefinedOrNull) { initFig_BernsteinPolynomial.drawLineStrip({ color: $drawing.consts.colors.curve, position: curvePoints, count: curvePoints.length, lineWidth: 1 }) } } initFig_BernsteinPolynomial.drawEmptyCircle(controlPointMarkers) return $styling.emitters.figure(heading, initFig_BernsteinPolynomial.canvas) }33:T48b,$styling.emitters.twoColumnContainer( md` ### 4. feladat #### Hatékony előállítás Bernstein-polinomokkal 1 `, md` Készítsünk egy, az előzőleg leírt ötleten alapuló, faktoriálist számító függvényt! Ennek egyetlen paramétere ${tex`n`}, visszatérési értéke pedig ${tex`n!`} legyen. Ahhoz, hogy a táblázatunkban tárolt értékek a függvény egymást követő hívásai között is megmaradjanak, úgynevezett *closure*-t fogunk használni. Kicsit pongyolán körülírva, a *closure* lényege, hogy egy függvény hozzáfér a környezetének változóihoz. Bővebb és pontosabb ismertetőt írt erről Eric Elliott ([Master the JavaScript Interview: What is a Closure?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36)) és Olivier De Meulder ([I never understood JavaScript closures](https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8)). A lenti mezőben megtalálható a megoldás váza. A \`cache\` változó tartalmazza a táblázatot, míg a visszaadott \`factorial\` függvényben kell elkészítenünk a számítást végző tényleges logikát. ` )34:T4b2,/** * Kiszamolja a points kontrollpontokkal adott Bezier-gorbe K gorbepontjat. * @param {Array} points A kontrollpontok tombje. * @param {Number} K A kiertekelesi helyek szama. * @returns {Array} Egy vec2 objektumokbol allo tomb, mely a gorbepontokat tartalmazza. */ function f_efficientBezier(points, K) { const pow = f_efficientPow(K) const n = points.length - 1; const result = [] // Vegigmegyunk a [0, 1] tartomany beosztasainak megfelelo indexeken. // Ez felel meg a t: 0 -> 1 ciklusnak. for (let t = 0; t < K; ++t) { const point = glMatrix.vec2.create() // Adott t-nel kiertekeljuk a sulyfuggvenyeket, es kepezzuk // a kontrollpontok sulyozott osszegeget. for (let i = 0; i < points.length; ++i) { // Vegyuk eszre, hogy K - 1-et hasznalunk. Erre azert van szukseg, hogy // elkeruljuk a tulindexelest, hiszen, bar K erteket tarolunk, a legutolso // index K - 1. const b = f_efficientBinomial(n, i) * pow(t, i) * pow(K - 1 - t, n - i) const p = glMatrix.vec2.create() glMatrix.vec2.scale(p, points[i], b) glMatrix.vec2.add(point, point, p) } result.push(point) } return result }35:T57d,HatekonyBezier_bernstein = { const heading = md` ### 2. ábra #### Hatékony Bézier-görbe Bernstein-polinomokkal * Új kontrollpontot a bal egérgomb segítségével helyezhetünk el. * A meglevő kontrollpontok a bal egérgombbal történő vonszolással helyezhetők át. * Kontrollpont törlése a jobb egérgombbal lehetséges. ` const controlPointMarkers = (cp_EfficientBernsteinPolynomial).map(cp => ({ radius: $figure.consts.sizing.controlPointRadius, center: cp, lineWidth: 1, color: $drawing.consts.colors.controlPoint })) initFig_EfficientBernsteinPolynomial.reglInstance.poll() initFig_EfficientBernsteinPolynomial.reglInstance.clear({ color: $drawing.consts.colors.white, depth: 1 }) if (cp_EfficientBernsteinPolynomial.length > 1) { const curvePoints = f_efficientBezier(cp_EfficientBernsteinPolynomial, 100) const containsUndefinedOrNull = curvePoints.some(p => p == null) if (curvePoints.length > 1 && !containsUndefinedOrNull) { initFig_EfficientBernsteinPolynomial.drawLineStrip({ color: $drawing.consts.colors.curve, position: curvePoints, count: curvePoints.length, lineWidth: 1 }) } } initFig_EfficientBernsteinPolynomial.drawEmptyCircle(controlPointMarkers) return $styling.emitters.figure(heading, initFig_EfficientBernsteinPolynomial.canvas) }36:T839,deCasteljau = { const heading = md` ### 3. ábra #### Bézier-görbe de Casteljau-algoritmussal * Új kontrollpontot a bal egérgomb segítségével helyezhetünk el. * A meglevő kontrollpontok a bal egérgombbal történő vonszolással helyezhetők át. * Kontrollpont törlése a jobb egérgombbal lehetséges. A kék pont mozgatása az ábra alatt található [t_deCasteljau](#t_deCasteljau) csúszkával lehetséges. ` const controlPointMarkers = (cp_deCasteljau).map(cp => ({ radius: $figure.consts.sizing.controlPointRadius, center: cp, lineWidth: 1, color: $drawing.consts.colors.controlPoint })) initFig_deCasteljau.reglInstance.poll() initFig_deCasteljau.reglInstance.clear({ color: $drawing.consts.colors.white, depth: 1 }) if (cp_deCasteljau.length > 1) { const curvePoints = $maths.linspace(0, 1).map(t => $curves.bezier.deCasteljauAtParameter(cp_deCasteljau, t)); const containsUndefinedOrNull = curvePoints.some(p => p == null) const ps = f_deCasteljau(cp_deCasteljau, t_deCasteljau) if (curvePoints.length > 1 && !containsUndefinedOrNull) { initFig_deCasteljau.drawFilledCircle({ radius: $figure.consts.sizing.controlPointRadius * 1.25, center: ps[ps.length - 1][0], lineWidth: 1, color: $drawing.consts.colors.observableBlue }) initFig_deCasteljau.drawLineStrip({ color: $drawing.consts.colors.semiCurve, position: curvePoints, count: curvePoints.length, lineWidth: 1 }) for (let i = 0; i < ps.length - 1; ++i) { const genCount = ps.length; const gen = ps[i]; const cl = (1 - (i / genCount)) * 0.8 + (i / genCount) * 0.33; initFig_deCasteljau.drawLineStrip({ color: [cl, cl, cl, 1.0], position: ps[i], count: ps[i].length, lineWidth: 1 }) } } } initFig_deCasteljau.drawEmptyCircle(controlPointMarkers) return $styling.emitters.figure(heading, initFig_deCasteljau.canvas) }37:T47f,md` Az affin transzformációk (például eltolás vagy skálázás) alatti invariancia a következőt jelenti. Tegyük fel hogy egy Bézier-görbén ki szeretnénk számolni egy adott ${tex`t`}-hez tartozó pontot, miközben alkalmazunk egy affin transzformációt. Ekkor az alábbi két lépéssorozat eredménye azonos: 1. Először számoljuk ki a görbepontot, majd alkalmazzuk rá a transzformációt. 1. Alkalmazzuk a transzformációt a kontrollpontokra, majd számoljuk ki a görbepontot. Ha egy görbét ${tex`100`} helyen értékelünk ki, akkor affin invariancia hiányában mind a ${tex`100`} pontra alkalmaznunk kell a transzformációt. Ha azonban a görbe invariáns az affin transzformációkra vonatkozóan, akkor elég csak a kontrollpontokra végrehajtanunk a műveletet ahhoz, hogy transzformált görbét kapjunk. Az affin invariancia a Bézier-görbe de Casteljau-féle előállításából következik, mely lineáris interpolációk sorozatát jelenti. A lineáris interpoláció affin invariáns, ami maga után vonja, hogy a véges sokszori alkalmazásából álló de Casteljau-algoritmus is affin invariáns lesz. `38:T6c7,BezierGorbekCsatlakoztatasa = { const heading = md` ### 4. ábra #### Harmadfokú Bézier-görbék csatlakoztatása Kontrollpontok hozzáadására és eltávolítására ezúttal nincs lehetőségünk. ` const controlPointMarkers = (cp_ConnectingBezier).map(cp => ({ radius: $figure.consts.sizing.controlPointRadius, center: cp, lineWidth: 1, color: $drawing.consts.colors.controlPoint })) initFig_ConnectingBezier.reglInstance.poll() initFig_ConnectingBezier.reglInstance.clear({ color: $drawing.consts.colors.white, depth: 1 }) const curvePoints1 = $maths.linspace(0, 1) .map(t => $curves.bezier.deCasteljauAtParameter(cp_ConnectingBezier.slice(0, 4), t)); const curvePoints2 = $maths.linspace(0, 1) .map(t => $curves.bezier.deCasteljauAtParameter(cp_ConnectingBezier.slice(3), t)); initFig_ConnectingBezier.drawLineStrip({ color: $drawing.consts.colors.semiCurve, position: curvePoints1, count: curvePoints1.length, lineWidth: 1 }) initFig_ConnectingBezier.drawLineStrip({ color: $drawing.consts.colors.semiCurve, position: curvePoints2, count: curvePoints2.length, lineWidth: 1 }) if (input_showControlPolygon) { initFig_ConnectingBezier.drawLineStrip({ color: $drawing.consts.colors.steelBlue, position: cp_ConnectingBezier.slice(0, 4), count: 4, lineWidth: 1 }) initFig_ConnectingBezier.drawLineStrip({ color: $drawing.consts.colors.red, position: cp_ConnectingBezier.slice(3), count: 4, lineWidth: 1 }) } initFig_ConnectingBezier.drawEmptyCircle(controlPointMarkers) return $styling.emitters.figure(heading, initFig_ConnectingBezier.canvas) }39:T472,CurveSplitting_pszeudokod = $styling.emitters.twoColumnContainer( md` ### Pszeudokód #### *Curve splitting* `, md` Tegyük fel, hogy adottak az eredeti görbét leíró ${tex`P_{0}, P_{1}, \ldots, P_{n}`} kontrollpontok, valamint a kettéosztás helyét jelölő ${tex`t \in [0, \, 1]`} érték! 1. Vizsgáljuk meg a pontok számát: * ha már csak ${tex`1`} pont maradt, akkor az algoritmus befejeződik, a hátramaradó egyetlen pont lesz mind ${tex`l`}, mind ${tex`r`} utolsó pontja, * egyébként folytatás a 2. lépéssel. 1. Jelölje ${tex`k`} az aktuális generációt és legyen ${tex`m + 1`} a generáció pontjainak száma. Ekkor ${tex.block` \begin{aligned} L_{k} &= P_{0}^{k} \\ R_{k} &= P_{m}^{k} \end{aligned} `} 1. Végezzünk ${tex`t`} szerinti lineáris interpolációt az aktuális generáció egymást követő pontjai között, az alábbi képletnek megfelelően: ${tex.block`P_{i}^{k + 1}=(1 - t)P_{i}^{k} + tP_{i + 1}^{k},`} ahol ${tex`k`} jelöli az aktuális generációt. 1. Folytassuk az algoritmust a 2. lépéssel. ` )3a:Ta1f,BezierKetteosztas = { const heading = md` ### 5. ábra #### Bézier-görbe kettéosztása * Új kontrollpontot a bal egérgomb segítségével helyezhetünk el. * A meglevő kontrollpontok a bal egérgombbal történő vonszolással helyezhetők át. * Kontrollpont törlése a jobb egérgombbal lehetséges. A kettéosztás helyét megadó fekete pont mozgatása a [t_splitBezier](#t_splitBezier) csúszkával lehetséges. ` const controlPointMarkers = (cp_SplitBezier).map(cp => ({ radius: $figure.consts.sizing.controlPointRadius, center: cp, lineWidth: 1, color: $drawing.consts.colors.controlPoint })) initFig_SplitBezier.reglInstance.poll() initFig_SplitBezier.reglInstance.clear({ color: $drawing.consts.colors.white, depth: 1 }) if (cp_SplitBezier.length > 1) { const curvePoints = $maths.linspace(0, 1).map(t => $curves.bezier.deCasteljauAtParameter(cp_SplitBezier, t)); const ps = $curves.bezier.deCasteljauAtParameter(cp_SplitBezier, t_splitBezier) const containsUndefinedOrNull = curvePoints.some(p => p == null) const { left, right } = f_splitBezier(cp_SplitBezier, t_splitBezier) if (curvePoints.length > 1 && !containsUndefinedOrNull) { initFig_SplitBezier.drawFilledCircle({ radius: $figure.consts.sizing.controlPointRadius * 1.25, center: ps, lineWidth: 1, color: $drawing.consts.colors.curve }) initFig_SplitBezier.drawLineStrip({ color: $drawing.consts.colors.curve, position: curvePoints, count: curvePoints.length, lineWidth: 1 }) initFig_SplitBezier.drawLineStrip({ color: $drawing.consts.colors.steelBlue, position: left, count: left.length, lineWidth: 1 }) initFig_SplitBezier.drawFilledCircle(left.map(p => ({ radius: $figure.consts.sizing.controlPointRadius, center: p, lineWidth: 1, color: $drawing.consts.colors.steelBlue }))) initFig_SplitBezier.drawLineStrip({ color: $drawing.consts.colors.red, position: right, count: right.length, lineWidth: 1 }) initFig_SplitBezier.drawFilledCircle(right.map(p => ({ radius: $figure.consts.sizing.controlPointRadius, center: p, lineWidth: 1, color: $drawing.consts.colors.red }))) } } initFig_SplitBezier.drawEmptyCircle(controlPointMarkers) return $styling.emitters.figure(heading, initFig_SplitBezier.canvas) }3b:T9eb,initFig_ConnectingBezier = { // Mind the mutable! // If there were no mutable here, no control points would be movable, because Observable // would re-run this cell every time, there is interaction with the cp_HermiteWithMatrices array. // This way, we can read its value without reactivity. const cpbp = $figure.boilerplate.controlPoint(7, mutable cp_ConnectingBezier) const update = function recalculate() { mutable cp_ConnectingBezier = cpbp.controlPoints } cpbp.canvas.addEventListener('mousedown', event => { // Disable deletion. if (event.button == $utility.mouse.button.RIGHT) { return } cpbp.onMouseDown($utility.mouse.getCoordinates(event), event) update() }) cpbp.canvas.addEventListener('mousemove', event => { const draggedPoint = cpbp.getDraggedPoint() if (draggedPoint) { const p = $utility.mouse.getCoordinates(event) const delta = glMatrix.vec2.create(); glMatrix.vec2.subtract(delta, p, draggedPoint); draggedPoint[0] += delta[0]; draggedPoint[1] += delta[1]; if (draggedPoint == cpbp.controlPoints[3]) { cpbp.controlPoints[2][0] += delta[0]; cpbp.controlPoints[2][1] += delta[1]; cpbp.controlPoints[4][0] += delta[0]; cpbp.controlPoints[4][1] += delta[1]; } if (draggedPoint == cpbp.controlPoints[2]) { const twoP3 = glMatrix.vec2.create(); glMatrix.vec2.scale(twoP3, cpbp.controlPoints[3], 2); glMatrix.vec2.subtract(cpbp.controlPoints[4], twoP3, cpbp.controlPoints[2]); } if (draggedPoint == cpbp.controlPoints[4]) { const twoP3 = glMatrix.vec2.create(); glMatrix.vec2.scale(twoP3, cpbp.controlPoints[3], 2); glMatrix.vec2.subtract(cpbp.controlPoints[2], twoP3, cpbp.controlPoints[4]); } update() } }) cpbp.canvas.addEventListener('mouseup', event => { if (event.button == $utility.mouse.button.RIGHT) { return } cpbp.onMouseUp($utility.mouse.getCoordinates(event), event) update() }) const drawEmptyCircle = $drawing.drawers.emptyCircle(cpbp.reglInstance) const drawFilledCircle = $drawing.drawers.filledCircle(cpbp.reglInstance) const drawLineStrip = $drawing.drawers.lineStrip(cpbp.reglInstance) const drawArrow = $drawing.drawers.arrow(cpbp.reglInstance) return Object.assign({}, cpbp, { drawEmptyCircle, drawFilledCircle, drawLineStrip, drawArrow }) }3c:[] 2f:{"id":"eda8449993c8636e","slug":"6-bezier-gorbe","title":"6. Bézier-görbe","thumbnail":"462e71051e00291dc5ae161a3c105f73cf5a6205361a17eb1f2a2eb03d8fcbe7","access_level":"public","create_time":"$D2018-09-12T14:25:48.891Z","update_time":"$D2019-02-18T15:38:15.548Z","view_time":null,"first_public_time":"$D2018-09-24T10:55:40.039Z","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":1235,"publish_version":1235,"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":3,"collection":{"id":"292318ad1a566f4a","slug":"komputergrafika","title":"Komputergrafika","owner":{"id":"ef739838e5a1d607","login":"battila7","name":"Attila Bagossy"}},"type":"notebook","body":{"title":"6. Bézier-görbe","cells":[{"id":0,"value":"md`# 6. Bézier-görbe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`\nAz Hermite-ívet követően egy másik alapvető görbetípussal, a Bézier-görbével fogunk megismerkedni. A Bézier-görbe rendkívül széles körben használt, megjelenik számtalan specifikációban (karakterkészletek leírására alkalmas formátumok, SVG, CSS), valamint a legfontosabb vektorgrafikus és raszteres szerkesztőprogramok (Adobe Illustrator, Adobe Photoshop, GIMP, InkScape) is mind tartalmazzák.\n\nNépszerűségének hátterében számos előnyös tulajdonsága áll, melyek megkönnyítik a vele folytatott munkát, mind implementációs, mind tervezői szemszögből.\n\nBézier-görbe előállítható súlyfüggvények segítségével, valamint ismert generatív algoritmus is. E notebookban mindkét lehetőséget megvizsgáljuk és implementáljuk.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`## Bevezetés`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`\nA Bézier-görbe a következő feladatra egy lehetséges válasz:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`\n> Keresünk egy olyan görbét, amely az elsőként és utolsóként megadott kontrollpontokon áthalad, a többit pedig sorrendben közelíti (azaz approximálja).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`\nA köztes, azaz a két végponttól különböző kontrollpontok száma tetszőleges lehet, érintővektorok megadására pedig egyáltalán nincs szükség. A görbe alakváltozását a kontrollpontok mozgatásával tudjuk előidézni, melyek maguk felé húzzák a görbét, így módosítva annak megjelenését. Az egyes kontrollpontok húzó hatása fokozatosan erősödik, majd csökken, ahogy haladunk a paramétertartományon. Általában kijelenthető, hogy a görbe jól követi a kontrollpoligon alakját. Összességében tehát egy olyan görbét kapunk, mely rendkívül intuitív tervezési élményt nyújt.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Előállítás Bernstein-polinomokkal`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`### Másodfokú Bézier-görbe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`\nMielőtt rátérnénk az általános esetre, próbáljunk meg az előzőekben leírtaknak megfelelő másodfokú görbét leírni. Tegyük fel, hogy a súlyfüggvényes felírást szeretnénk használni, ahol a paraméter a ${tex`[0, \\, 1]`} tartományon fut végig:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"tex.block`\nQ(t) = \\sum\\limits_{i=0}^{2}b_{i}(t)P_{i} \\qquad t \\in [0, \\, 1].\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`\nMilyenek legyenek a ${tex`b_{i}(t)`} súlyfüggvényeink, ha azt szeretnénk, hogy a kapott görbe az előzőekben leírtaknak megfelelően viselkedjen?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`\n * A kezdőponthoz (${tex`P_{0}`}) rendelt ${tex`b_{0}(t)`} függvénytől azt várjuk, hogy\n * ${tex`t=0`}-ban ${tex`1`}-et vegyen fel,\n * ${tex`t=1`}-ben ${tex`0`}-t vegyen fel,\n * értéke fokozatosan csökkenjen ${tex`1`}-ről ${`0`}-ra.\n * A végponthoz (${tex`P_{2}`}) rendelt ${tex`b_{2}(t)`} függvénytől azt várjuk, hogy\n * ${tex`t=0`}-ban ${tex`0`}-t vegyen fel,\n * ${tex`t=1`}-ben ${tex`1`}-et vegyen fel,\n * értéke fokozatosan nőjön ${tex`0`}-ról ${`1`}-re.\n * A köztes ponthoz (${tex`P_{1}`}) rendelt ${tex`b_{1}(t)`} függvény a legérdekesebb. Azt szeretnénk, ha\n * mind a tartomány elején, mind a tartomány végén ${tex`0`}-t venne fel,\n * sehol sem venne fel ${tex`1`}-et,\n * ${tex`t=\\frac{1}{2}`}-nél venné fel a maximumát, amelyet fokozatosan érne el, majd erről az értékről fokozatosan csökkenne le.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`\nÁltalános elvárásaink továbbá a következők:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`\n * minden súlyfüggvény a ${tex`[0, \\, 1]`} intervallumból vesz fel értéket, ha ${tex`t \\in [0, \\, 1]`},\n * a súlyfüggvények értékeinek összege adott ${tex`t \\in [0, \\, 1]`} esetén mindig ${tex`1`}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`\nÖsszeolvasva a kontrollpontokra vonatkozó feltételeket, valamint az általános elvárásokat, azt kapjuk, hogy amennyiben egy súlyfüggvény értéke ${tex`1`}, akkor a görbe érinti a hozzá tartozó kontrollpontot (hiszen az összes többi súlyfüggvény értéke ${tex`0`}), míg ha egy súlyfüggvény ${tex`0`} értéket vesz fel, akkor a hozzárendelt kontrollpont egyáltalán nem szól bele a görbe alakjába.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`\nIsmerve ezeket a feltételeket, milyenek legyenek a pontos súlyfüggvények? Pierre Bézier az úgynevezett Bernstein-polinomokat használta fel a súlyfüggvényekben. Ezek a függvények a [masodfoku_bezier_sulyfuggvenyek](#masodfoku_bezier_sulyfuggvenyek) grafikonon kerültek ábrázolásra.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`\nVegyük észre, hogy az egyes súlyfüggvények pontosan úgy viselkednek, ahogyan azt előírtuk! Kiemelt figyelmet érdemel a köztes kontrollponthoz rendelt ${tex`b_1(t)`} súlyfüggvény, mely a maximumát a ${tex`t=\\frac{1}{2}`} értéknél veszi fel. Ekkor a görbe alakjára a legnagyobb befolyással a ${tex`P_{1}`} pont bír, a legnagyobb húzó hatást kifejtve. Kisebb és nagyobb ${tex`t`} értékek esetén rendre kisebb befolyást fejt ki a görbére.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md`### Általános eset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"md`\nA Bernstein-polinomok nemcsak másodfokú, hanem tetszőleges fokszámú Bézier-görbék felírását is lehetővé teszik. Ha ${tex`n`}-edfokú görbét szeretnénk, akkor mindegyik súlyfüggvényhez a megfelelő ${tex`n`}-edfokú Bernstein-polinomot kell felhasználnunk:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"tex.block`\nb_{n, i}(t) = B_{n, i}(t) = \\binom{n}{i}t^{i}(1 - t)^{n - i}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`\n${tex`\\binom{n}{i}`} az úgynevezett binomiális együttható, melynek definíciója a következő:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"tex.block`\n\\binom{n}{i} = \\frac{n!}{i!(n - i)!}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"md`\nA tetszőleges, azaz ${tex`n`}-edfokú Bézier-görbe paraméteres alakja ekkor az alábbi módon írható fel:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"tex.block`\nQ_{n}(t) = \\sum\\limits_{i = 0}^{n} b_{n, i}(t) P_{i} \\qquad t \\in \\; [0, \\, 1].\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`### Implementáció`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`\nImplementáljuk a Bézier-görbe előző, Bernstein-polinomokra épülő előállítását! Az előző notebookokhoz hasonlóan, lépésről lépésre, alulról fölfelé fogjuk összeállítani az implementációt.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"$$styling.emitters.twoColumnContainer(\nmd`\n### 1. feladat\n#### Előállítás Bernstein-polinomokkal 1\n`,\nmd`\nKészítsünk egy függvényt, mely kiszámolja ${tex`n!`} értékét! A függvény egyetlen paramétere ${tex`n`}, visszatérési értéke pedig ${tex`n!`} legyen.\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"/**\n * Kiszamitja az n! (n faktorialis) erteket.\n * @param {Number} n A szam, melynek a faktorialisat ki szeretnenk szamolni.\n * @returns {Number} n! erteke.\n */\nfunction f_factorial(n) {\n let result = 1\n \n for (let i = 1; i <= n; i++) {\n result *= i\n }\n \n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"$$styling.emitters.twoColumnContainer(\nmd`\n### 2. feladat\n#### Előállítás Bernstein-polinomokkal 2\n`,\nmd`\nKészítsünk egy függvényt, mely kiszámolja ${tex`\\binom{n}{i}`} értékét! Az implementációhoz használjuk fel az előzőleg megírt [f_factorial](#f_factorial) függvényt.\n\nA függvény paraméterei az ${tex`n`} és ${tex`i`} értékek, visszatérési értéke pedig ${tex`\\binom{n}{i}`} legyen.\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"/**\n * Az n alatt az i binomialis egyutthato erteket szamitja ki.\n * @param {Number} n n\n * @param {Number} i i \n * @returns {Number} A binomialis egyutthato erteke.\n */\nfunction f_binomial(n, i) {\n const szamlalo = f_factorial(n)\n const nevezo = f_factorial(i) * f_factorial(n - i)\n \n return szamlalo / nevezo\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"$$styling.emitters.twoColumnContainer(\nmd`\n### 3. feladat\n#### Előállítás Bernstein-polinomokkal 3\n`,\nmd`\nFelhasználva az [f_binomial](#f_binomial) függvényt, készítsünk egy olyan kódrészletet, mely kiszámolja a ${tex`B_{n, i}(t)`} Bernstein-polinom adott ${tex`t`} paraméterhez tartozó értékét. \n\nA függvény paraméterei a következők legyenek: \n * a polinomot megadó ${tex`n`} és ${tex`i`} értékek, \n * a ${tex`t \\in \\; [0, \\, 1]`} futó paraméter.\n\nA visszatérési érték a ${tex`B_{n, i}(t)`} érték legyen.\n\n\nA hatványozáshoz használjuk a [Math.pow(base, exponent)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow) függvényt!\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"/**\n * Kiszamitja az i-edik n-edfoku Bernstein-polinom (B_i,n) erteket adott t helyen.\n * @param {Number} n n.\n * @param {Number} i i.\n * @param {Number} t A futo parameter, ahol 0 <= t <= 1.\n * @returns {Number} A polinom erteke.\n */\nfunction f_bernstein(n, i, t) {\n return f_binomial(n, i) * Math.pow(t, i) * Math.pow(1 - t, n - i)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`\nHa az előző három feladat mindegyikét helyesen implementáltuk, akkor a [Bezier_bernstein](#Bezier_bernstein) ábrán megelevenedik a tetszőleges fokszámú Bézier-görbe. Töltsünk el egy kis időt különböző fokszámú görbék létrehozásával, valamint a kontrollpontok mozgatásával! Különösen figyeljünk arra, hogy egy kontrollpont mozgatása milyen hatással van a görbe alakjára.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"md`\nÉrdemes megjegyezni, hogy rögzített fokszám (azaz például 4 kontrollpont) esetén használhatjuk az implementációhoz a ${tex`GMT(t)`} formulát is, hasonlóan az Hermite-ívhez.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"md`### Hatékony implementáció`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"md`\nAz előző implementáció bár rendkívül egyszerű, sajnos nem különösebben gyors. Ha azonban jobban megfigyeljük a számítás menetét, akkor számos olyan pontot vehetünk észre, ahol jelentős sebességnövekedés érhető el! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md`#### Faktoriális`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`\nEgy binomiális együttható kiszámításához három faktoriálist is számolnunk kell. Ennek következtében a faktoriális meghatározásának sebessége az egész számítás teljesítményét nagymértékben befolyásolja.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`\nA faktoriális felgyorsításához használt gondolatmenet igazán egyszerű:\n * tároljuk el a már kiszámolt értékeket egy táblázatban,\n * ha a táblázat egy értéket még nem tartalmaz, akkor számoljuk ki azt a lehető legkevesebb lépésben, majd helyezzük el a táblázatban.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"f_efficientFactorial = (function factory() {\n const cache = [1]\n \n return function factorial(n) {\n if (cache.length <= n) {\n for (let i = cache.length - 1; i <= n; i++) {\n cache.push((i + 1) * cache[cache.length - 1])\n }\n }\n \n return cache[n]\n }\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"md`#### Binomiális együttható`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"md`\nTáblázatok segítségével a binomiális együtthatók számítását is hatékonyabbá tehetjük. Ebben az esetben azonban a módszer annyival egyszerűsödik, hogy csupán eltároljuk a már kiszámolt értékeket. Új értékek számításánál nem támaszkodunk a már ismertekre.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"$$styling.emitters.twoColumnContainer(\nmd`\n### 5. feladat\n#### Hatékony előállítás Bernstein-polinomokkal 2\n`,\nmd`\nValósítsuk meg a binomiális együtthatók kiszámítását egy olyan függvény segítségével, mely egyfelől felhasználja az [f_efficientFactorial](#f_efficientFactorial) rutint, másfelől eltárolja a már kiszámolt értékeket!\n\nA már kiszámolt értékek megjegyzéséhez ezúttal is egy *closure*-re lesz szükségünk, azonban a tároláshoz tömb helyett \\`Map\\`-et érdemes használnunk. A \\`Map\\`-ről részletesen az [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)-en tájékozódhatunk.\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"f_efficientBinomial = (function factory() {\n const cache = new Map()\n \n return function binomial(n, i) {\n if (!cache.has(n)) {\n cache.set(n, new Map())\n }\n \n const iCache = cache.get(n)\n \n if (!iCache.has(i)) {\n const value = f_efficientFactorial(n) / (f_efficientFactorial(i) * f_efficientFactorial(n - i))\n \n iCache.set(i, value)\n }\n \n return iCache.get(i);\n }\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"md`#### Hatványozás`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"md`\nA hatványozáshoz is a már jól ismert táblázatos módszert fogjuk alkalmazni. Egy kétdimenziós táblázatra lesz szükségünk, ahol az egyik dimenziót a hatványalapot jelentő ${tex`t`}, a másik dimenziót pedig a kitevőt jelentő ${tex`i`} szerint indexeljük. Itt azonban egy problémába ütközünk, hiszen indexelni csak egészekkel tudunk, ${tex`t`} ezzel szemben egy valós szám.\n\nAhhoz, hogy ${tex`t`} szerint is indexelni tudjunk, rögzítenünk kell a kiértékelési helyek számát, melyet jelöljünk el ${tex`K`}-val! Ezután az egyes ${tex`t`} értékek helyett mindig azt fogjuk felhasználni indexelésre, hogy az adott ${tex`t`} hanyadik beosztás a ${tex`[0, \\, 1]`} intervallumon belül.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"f_efficientPow = function factory(K) {\n // Veszunk K pontot a [0, 1] intervallumbol, majd\n // kepzunk egy ketdimenzios tombot, melyben a pontok\n // 0., es 1. hatvanyai szerepelnek.\n const cache = $maths.linspace(0, 1, K)\n .map(i => [1, i])\n\n // j az egyik dimenzio (alap), i a masik dimenzio (kitevo) szerinti index.\n return function pow(j, i) {\n // Lekerjuk a j indexnek megfelelo ertek eddig tarolt hatvanyait.\n const powArray = cache[j];\n \n // Ha az i kitevonek megfelelo ertek meg nincs kiszamolva.\n if (i >= powArray.length) {\n // A legnagyobb mar kiszamolt kitevotol elindulva, sorozatos\n // szorzasok segitsegevel kiszamoljuk a szukseges erteket.\n for (let k = powArray.length; k <= i; ++k) {\n powArray.push(powArray[powArray.length - 1] * powArray[1])\n }\n }\n \n return powArray[i]\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"md`#### A teljes görbe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`\nFelhasználva az előző rutinokat, a Bézier-görbe pontjainak meghatározása szignifikánsan felgyorsítható, hiszen az előszámítások elvégzése után csak táblázatokban kell megkeresni a megfelelő értékeket. Rögzített ${tex`n`} esetén ezen műveletek teljesítménye tovább fokozható.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"md`\nA alább olvasható [f_efficientBezier](#f_efficientBezier) függvény egy kontrollpontjaival adott Bézier-görbe ${tex`K`} görbepontját adja vissza.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"md`## A de Casteljau-algoritmus`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"md`\nA Bézier-görbe másik lehetséges előállítási módja a de Casteljau-algoritmus. Ez egy generatív eljárás, mely a görbét leíró polinomok együtthatóit nem, csupán a görbe pontjait képes meghatározni.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"md`\nEz az eljárás módfelett hasonló a Lagrange-interpolációhoz használt Aitken-algoritmushoz, hiszen szintén háromszög-sémát, valamint lineáris interpolációkat használ. A különbség az interpolációhoz használt együtthatókban jelentkezik.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"deCasteljau_pszeudokod = $styling.emitters.twoColumnContainer(\nmd`\n### Pszeudokód\n#### de Casteljau-algoritmus\n`,\nmd`\nA ${tex`t \\in [0, \\, 1]`} értékhez tartozó görbepont kiszámítása a következő módon történik:\n\n 1. Tegyük fel, hogy adottak a ${tex`P_{0}, P_{1}, \\ldots, P_{n}`} kontrollpontok. Ezek a pontok alkotják a ${tex`0.`} generációt.\n 1. Vizsgáljuk meg a pontok számát:\n * ha már csak ${tex`1`} pont maradt, akkor az algoritmus befejeződik, a hátramaradó egyetlen pont a görbepont,\n * egyébként folytatás a 3. lépéssel.\n 1. Végezzünk ${tex`t`} szerinti lineáris interpolációt az aktuális generáció egymást követő pontjai között, az alábbi képletnek megfelelően:\n ${tex.block`P_{i}^{k + 1}=(1 - t)P_{i}^{k} + tP_{i + 1}^{k},`}\n ahol ${tex`k`} jelöli az aktuális generációt.\n 1. Folytassuk az algoritmust a 2. lépéssel.\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"md`### Implementáció`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"md`\nA következőkben a de Casteljau-algoritmus egy olyan vizualizációját szeretnénk elkészíteni, ahol nemcsak egy adott ${tex`t`}-hez tartozó görbepont, hanem az annak meghatározásához felhasznált összes megelőző generációs pont is megjelenik.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"$$styling.emitters.twoColumnContainer(\nmd`\n### 6. feladat\n#### Előállítás de Casteljau-algoritmussal\n`,\nmd`\nKészítsünk egy függvényt, mely visszaadja a de Casteljau-algoritmus által egy adott ${tex`t`} értékhez számolt összes pontot.\n\nA függvény paraméterei a következők legyenek:\n\n * a ${tex`P_{0}, P_{1}, \\ldots, P_{n}`} kontrollpontok,\n * a ${tex`t \\in [0, \\, 1]`} futó paraméter értéke.\n\nA visszatérési érték egy kétdimenziós tömb legyen, melynek nulladik eleme az eredeti kontrollpontokat tartalmazó nulladik generációt, első eleme az első generációt, utolsó eleme pedig a legutolsó, egy pontból álló generációt tartalmazza.\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"/**\n * Visszaadja a de Casteljau algoritmus altal egy adott t-hez kiszamolt osszes pontot.\n * @param {Array} points A kontrollpontok tombje.\n * @param {Number} t A 0 <= t <= 1 futo parameter.\n * @returns {Array} A generaciok ketdimentios tombje.\n */\nfunction f_deCasteljau(points, t) {\n const result = [points]\n \n while (result[result.length - 1].length > 1) {\n const gen = []\n \n for (let i = 0; i < result[result.length - 1].length - 1; i++) {\n const sp1 = glMatrix.vec2.create()\n glMatrix.vec2.scale(sp1, result[result.length - 1][i], 1 - t)\n \n const sp2 = glMatrix.vec2.create()\n glMatrix.vec2.scale(sp2, result[result.length - 1][i + 1], t)\n \n const p = glMatrix.vec2.create()\n glMatrix.vec2.add(p, sp1, sp2)\n \n gen.push(p)\n }\n \n result.push(gen)\n }\n \n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"md`\nA lenti [deCasteljau](#deCasteljau) ábrán – feltéve, hogy az előző feladatot helyesen oldottuk meg – a de Casteljau-algoritmust láthatjuk működés közben. A kék pont egy adott ${tex`t`}-hez tartozó görbepontot jelöl, melyhez megjelennek a számítás eredményeként előálló köztes generációk is.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"viewof t_deCasteljau = DOM.range(0, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"md`## A Bézier-görbe tulajdonságai`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"md`\nIsmerve a Bézier-görbe geometriai (azaz procedurális) és analitikai (azaz súlyfüggvényes) előállítását, immár megvizsgálhatjuk, hogy melyek is azok az előnyös tulajdonságok, melyek a népszerűségének hátterében állnak.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"md`### Affin invariancia`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"md`### Konvex burok tulajdonság`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"md`\nA Bézier-görbe bármely ${tex`t \\in [0, \\, 1]`} értékre a kontrollpontjainak konvex burkán belül halad. A de Casteljau-algoritmus minden lépésében a konvex burkon belül található pontot állítunk elő, mely annak köszönhető, hogy a számítás minden lépése már eleve a burkon belüli pontok konvex baricentrikus kombinációjából áll. Így a végeredményt jelentő utolsó pont sem lehet a konvex burkon kívül. \n\nE tulajdonságnak metszések ellenőrzésekor vehetjük hasznát. Ha például szeretnénk két Bézier-görbe metszését ellőrizni, először megvizsgálhatjuk, hogy a konvex burkaik átfedők-e. Amennyiben már ez sem teljesül, akkor biztos, hogy nem lesz metsző a két görbe, nincs szükség további ellenőrzésekre. A metszés tényleges, jóval drágább ellenőrzését tehát elegendő csak akkor megtenni, ha a konvex burkok között van átfedés.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"md`### Végpont interpoláció`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"md`\nA Bézier-görbe mindig érinti a legelső és a legutolsó kontrollpontot. Ez jól látható mind a de Casteljau-féle, mind a Bernstein-polinomos előállítást tekintve.\n\nA végpont interpoláció különösen a tervezőknek jelent segítséget, hiszen így egyértelműen befolyásolhatók a görbe végpontjai.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"md`### Szimmetria`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"md`\nA ${tex`P_{0}, P_{1}, \\ldots P_{n}`} és a ${tex`P_{n}, P_{n - 1}, \\ldots, P_{0}`} kontrollpontok ugyanazt a görbét határozzák meg. Ez a Bernstein-polinomok szimmetriájának következménye:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"tex.block`\nB_{j}^{n}(t) = B_{n - j}^{n}(1 - t).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"md`### Fokszám`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"md`\n${tex`n+1`} darab kontrollpont ${tex`n`}-edfokú görbét állít elő.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"md`### Pszeudolokális változtathatóság`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"md`\nA görbe egy kontrollpontjának elmozdítása hatással van a teljes görbe alakjára. Azonban egy adott kontrollpont mozgatása a görbe különböző részeire eltérő hatást gyakorol. Elmondható, hogy a ${tex`P_{i}`} kontrollpontnak a ${tex`t = \\frac{i}{n}`} értéknél van a legnagyobb befolyása a görbe megjelenésére. Ennél kisebb és nagyobb értékeket tekintve a jelentősége folyamatosan csökken.\n\nEmiatt azt mondjuk, hogy a görbe pszeudolokálisan változtatható. Ennek pozitív következménye, hogy a görbe alakváltozása általában jól prognosztizálható, kellemetlen mellékhatása viszont az, hogy egy kontrollpont elmozdítása a görbe távoli részein is alakváltozást okoz.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"md`## Bézier-görbék csatlakoztatása`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"md`\nA Bézier-görbe előnyének tűnhet, hogy tetszőlegesen sok kontrollpontra tudunk görbét feszíteni. Első gondolatunk így az lehet, hogy a megtervezendő objektumokat egyetlen óriási görbével próbáljuk meg létrehozni.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"md`\nHabár ez az út járható, mégsem ajánlott. A kontrollpontok számának növelése ugyanis a görbe fokszámának növekedését vonja maga után. Ez a számítások instabillá válását, lelassulását is okozhatja. Nem szabad megfeledkeznünk a pszeudolokalitásról sem! Ha át szeretnénk tervezni a görbe egyik végét, elmozdul a másik vége is.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"md`\nAnnak érdekében, hogy ezeket a negatív tulajdonságokat mérsékeljük, inkább 3-6 kontrollpontos, egymáshoz megfelelő folytonossággal csatlakoztatott görbéket érdemes használni. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"md`### ${tex`C^1`} matematikai folytonosság`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"md`\nHa két görbét ${tex`C^1`} folytonossággal szeretnénk csatlakoztatni, akkor biztosítanunk kell, hogy\n\n * az előbbi görbe végpontja megegyezik az utóbbi görbe kezdőpontjával,\n * az előbbi görbe végpontbeli érintővektora mind nagyságát, mind irányát tekintve megegyezik az utóbbi görbe kezdőpontbeli érintővektorával.\n\nA második feltétel biztosításához ismernünk kell a kezdő- és végpontbeli érintővektorok kiszámításának módját. Tegyük fel, hogy egy görbét a ${tex`P_{0}, P_{1}, \\ldots, P_{n}`} kontrollpontok segítségével hoztunk létre és ${tex`g_{1}(t)`} jelöli a görbét leíró függvényt. Ekkor a megfelelő pontba húzott érintők:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"tex.block`\n\\begin{aligned}\n g_{1}^{\\prime}(0) &= n(P_{1} - P_{0}) \\\\\n g_{1}^{\\prime}(1) &= n(P_{n} - P_{n - 1})\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"md`\nAzaz, ha adott az ${tex`n + 1`} kontrollpontra feszített ${tex`g_{1}`} görbe és a ${tex`Q_{0}, Q_{1}, \\ldots, Q_{m}`} kontrollpontra feszített ${tex`g_{2}`} görbe, akkor a ${tex`C^1`} folytonos csatlakozáshoz a következőknek kell teljesülnie:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"tex.block`\n\\begin{aligned}\n g_{1}(1) &= g_{2}(0) \\\\\n n(P_{n} - P_{n - 1}) &= m(Q_{1} - Q_{0})\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"md`\nA [BezierGorbekCsatlakoztatasa](#BezierGorbekCsatlakoztatasa) ábrán két harmadfokú, ${tex`C^1`} folytonosan csatlakozó Bézier-görbét láthatunk.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"viewof input_showControlPolygon = checkbox({\n options: [\n { value: 'checked', label: 'Kontrollpoligon megjelenítése' }\n ],\n value: 'checked'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"md`\nAz ábrán látható két görbe mindig megfelelő folytonossággal csatlakozik, köszönhetően a kontrollpontok közti függőségi viszonyoknak. Ha elmozdítjuk a harmadik pontot, a fenti képlet szerint átszámításra kerül az ötödik pont helyzete is, és fordítva. A negyedik kontrollpont (azaz a közös kezdőpont és végpont) módosítása pedig mind a harmadik, mind az ötödik pont újraszámolásával jár.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"md`\nBár így elveszítjük a kontrollpontok mozgatása feletti teljes szabadságunkat, egyúttal megszabadulunk a pszeudolokális változtathatóságból fakadó kellemetlenségektől.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"md`## Bézier-görbe kettéosztása`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"md`\nTegyük fel, hogy egy ${tex`n`}-edfokú görbével próbálunk megtervezni valamilyen alakzatot. Előfordulhat, hogy hiába igyekezünk, nem tudjuk létrehozni a kívánt formát, úgy tűnik, hogy nem bírunk elég befolyással a görbe alakjára. A helyzet megoldására két lehetőség kínálkozik.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"md`\nAz egyik az úgynevezett *degree elevation*. Ekkor létrehozunk egy, az eredeti görbével ekvivalens ${tex`n + 1`}-edfokú görbét, mely – köszönhetően a magasabb fokszámnak – nagyobb tervezői szabadságot biztosít.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"md`\nA másik lehetőség a *curve splitting*. Ennek lényege, hogy az eredeti görbét egy adott ${tex`t`} értéknél két ${tex`n`}-edfokú görbére osztjuk, melyek együttesen az eredeti görbével ekvivalens görbét alkotnak. Válasszuk most ezt a módszert!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"md`\n A *curve splitting* lényegében egy módosított de Casteljau-algoritmus. Az eljárás eredményeként két görbét kapunk, melyek közül a baloldalit jelölje ${tex`l`} (melynek kontrollpontjai az ${tex`L_{i}`} pontok), a jobboldalit pedig ${tex`r`} (melynek kontrollpontjai az ${tex`R_{i}`} pontok).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"$$styling.emitters.twoColumnContainer(\nmd`\n### 7. feladat\n#### Bézier-görbe kettéosztása\n`,\nmd`\nKészítsünk egy függvényt, mely megvalósítja a [CurveSplitting_pszeudokod](#CurveSplitting_pszeudokod) által leírt algoritmust!\n\nA függvény paraméterei a következők legyenek:\n\n * a ${tex`P_{0}, P_{1}, \\ldots, P_{n}`} kontrollpontok,\n * a kettéosztás helyét megadó ${tex`t \\in [0, \\, 1]`} érték.\n\nA visszatérési érték egy olyan objektum legyen, mely két mezővel rendelkezik:\n\n * \\`left\\` – az ${tex`l`} görbét alkotó kontrollpontok tömbje, \n * \\`right\\` – az ${tex`r`} görbét alkotó kontrollpontok tömbje.\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"/**\n * Adott helyen ketteoszt egy Bezier-gorbet.\n * @param {Array} points A kontrollpontok tombje.\n * @param {Number} t A ketteosztas helyet megado 0 <= t <= 1 ertek.\n * @returns {object} A bal- es jobboldali gorbek kontrollpontjait tartalmazo tombok objektuma.\n */\nfunction f_splitBezier(points, t) { \n const left = [points[0]]\n const right = [points[points.length - 1]]\n \n const temp = [...points]\n \n while (temp.length > 1) { \n for (let i = 0; i < temp.length - 1; i++) {\n const sp1 = glMatrix.vec2.create()\n glMatrix.vec2.scale(sp1, temp[i], 1 - t)\n \n const sp2 = glMatrix.vec2.create()\n glMatrix.vec2.scale(sp2, temp[i + 1], t)\n \n const p = glMatrix.vec2.create()\n glMatrix.vec2.add(p, sp1, sp2)\n \n temp[i] = p\n }\n \n temp.pop()\n \n left.push(temp[0])\n right.push(temp[temp.length - 1])\n }\n \n return {\n left,\n right\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"viewof t_splitBezier = DOM.range(0, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"md`## Kapcsolat a Bézier-görbe és az Hermite-ív között`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"md`\nUgyanazt a formát le tudjuk írni harmadfokú Bézier-görbével és két pont-két érintős Hermite-ívvel is.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"md`### Bézier-görbéből Hermite-ív`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"md`\nHa egy harmadfokú Bézier-görbe négy kontrollpontja ${tex`P_{0},P_{1},P_{2},P_{3}`}, akkor a vele ekvivalens Hermite-ív geometriai adatai a következők:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"tex.block`\n\\begin{aligned}\nP &= P_{0} \\\\\nQ &= P_{3} \\\\\n\\mathbf{v} &= 3(P_{1} - P_{0}) \\\\\n\\mathbf{w} &= 3(P_{3} - P_{2})\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"md`\nahol ${tex`P`} és ${tex`Q`} az Hermite-ív két végpontja, ${tex`\\mathbf{v}`} és ${tex`\\mathbf{w}`} pedig a két megfelelő érintővektor.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"md`### Hermite-ívből Bézier-görbe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"md`\nLegyenek az Hermite-ívet definiáló geometriai adatok ${tex`P,Q,\\mathbf{v},\\mathbf{w}`}! Keressük azokat a ${tex`P_{0},P_{1},P_{2},P_{3}`} kontrollpontokat, melyek az előző adatok által képzett Hermite-ívvel ekvivalens Bézier-görbét állítanak elő.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"md`\nAz Hermite-ív áthalad a ${tex`P`} és ${tex`Q`} pontokon, és így kell tennie a Bézier-görbének is:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"tex.block`\n\\begin{aligned}\nP_{0} &= P \\\\\nP_{3} &= Q\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"md`\nAz Hermite-ív esetén ismerjük ezen pontokban az érintővektorokat, míg a Bézier-görbe esetén tudjuk, hogyan kell kiszámítani őket a kontrollpontokból. Írjuk fel tehát a következő egyenleteket:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"tex.block`\n\\begin{aligned}\n \\mathbf{v} &= 3(P_{1} - P_{0}) \\\\\n \\mathbf{w} &= 3(P_{3} - P_{2})\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"md`\nEddig ugyanott tartunk, mint a fordított irányban. Azonban most az érintővektorok ismertek, és a köztes ${tex`P_{1}, P_{2}`} kontrollpontokat keressük. Az egyenletek átrendezése után ezek a következő formában adódnak:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"tex.block`\n\\begin{aligned}\n P_{1} &= P_{0} + \\frac{\\mathbf{v}}{3} \\\\\n P_{2} &= P_{3} - \\frac{\\mathbf{w}}{3}\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"md`\nEzzel készen vagyunk, ismerjük mind a négy kontrollpontot.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`# Függelék`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"md`https://gist.github.com/hellerbarde/2843375`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"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":150,"value":"regl = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"import {\n $drawing,\n $curves,\n $figure,\n $maths,\n $styling,\n $plot,\n $utility\n} from '@battila7/kompgraf-stdlib'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"import {\n checkbox\n} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$$styling.css.twoColumnContainer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$$styling.css.figure","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"$$styling.css.plot","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"initFig_BernsteinPolynomial = {\n const cpbp = $figure.boilerplate.controlPoint(-1)\n \n const update = function recalculate() {\n mutable cp_BernsteinPolynomial = cpbp.controlPoints\n }\n \n cpbp.canvas.addEventListener('mousedown', event => {\n cpbp.onMouseDown($utility.mouse.getCoordinates(event), event)\n \n update()\n })\n cpbp.canvas.addEventListener('mousemove', event => {\n cpbp.onMouseMove($utility.mouse.getCoordinates(event), event)\n \n if (cpbp.getDraggedPoint()) {\n update()\n }\n })\n cpbp.canvas.addEventListener('mouseup', event => {\n cpbp.onMouseUp($utility.mouse.getCoordinates(event), event)\n \n update()\n })\n \n const drawEmptyCircle = $drawing.drawers.emptyCircle(cpbp.reglInstance)\n const drawFilledCircle = $drawing.drawers.filledCircle(cpbp.reglInstance)\n const drawLineStrip = $drawing.drawers.lineStrip(cpbp.reglInstance)\n \n return Object.assign({}, cpbp, {\n drawEmptyCircle, \n drawFilledCircle,\n drawLineStrip,\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"initFig_EfficientBernsteinPolynomial = {\n const cpbp = $figure.boilerplate.controlPoint(-1)\n \n const update = function recalculate() {\n mutable cp_EfficientBernsteinPolynomial = cpbp.controlPoints\n }\n \n cpbp.canvas.addEventListener('mousedown', event => {\n cpbp.onMouseDown($utility.mouse.getCoordinates(event), event)\n \n update()\n })\n cpbp.canvas.addEventListener('mousemove', event => {\n cpbp.onMouseMove($utility.mouse.getCoordinates(event), event)\n \n if (cpbp.getDraggedPoint()) {\n update()\n }\n })\n cpbp.canvas.addEventListener('mouseup', event => {\n cpbp.onMouseUp($utility.mouse.getCoordinates(event), event)\n \n update()\n })\n \n const drawEmptyCircle = $drawing.drawers.emptyCircle(cpbp.reglInstance)\n const drawFilledCircle = $drawing.drawers.filledCircle(cpbp.reglInstance)\n const drawLineStrip = $drawing.drawers.lineStrip(cpbp.reglInstance)\n \n return Object.assign({}, cpbp, {\n drawEmptyCircle, \n drawFilledCircle,\n drawLineStrip,\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"initFig_deCasteljau = {\n const cpbp = $figure.boilerplate.controlPoint(-1)\n \n const update = function recalculate() {\n mutable cp_deCasteljau = cpbp.controlPoints\n }\n \n cpbp.canvas.addEventListener('mousedown', event => {\n cpbp.onMouseDown($utility.mouse.getCoordinates(event), event)\n \n update()\n })\n cpbp.canvas.addEventListener('mousemove', event => {\n cpbp.onMouseMove($utility.mouse.getCoordinates(event), event)\n \n if (cpbp.getDraggedPoint()) {\n update()\n }\n })\n cpbp.canvas.addEventListener('mouseup', event => {\n cpbp.onMouseUp($utility.mouse.getCoordinates(event), event)\n \n update()\n })\n \n const drawEmptyCircle = $drawing.drawers.emptyCircle(cpbp.reglInstance)\n const drawFilledCircle = $drawing.drawers.filledCircle(cpbp.reglInstance)\n const drawLineStrip = $drawing.drawers.lineStrip(cpbp.reglInstance)\n \n return Object.assign({}, cpbp, {\n drawEmptyCircle, \n drawFilledCircle,\n drawLineStrip,\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"initFig_SplitBezier = {\n const cpbp = $figure.boilerplate.controlPoint(-1)\n \n const update = function recalculate() {\n mutable cp_SplitBezier = cpbp.controlPoints\n }\n \n cpbp.canvas.addEventListener('mousedown', event => {\n cpbp.onMouseDown($utility.mouse.getCoordinates(event), event)\n \n update()\n })\n cpbp.canvas.addEventListener('mousemove', event => {\n cpbp.onMouseMove($utility.mouse.getCoordinates(event), event)\n \n if (cpbp.getDraggedPoint()) {\n update()\n }\n })\n cpbp.canvas.addEventListener('mouseup', event => {\n cpbp.onMouseUp($utility.mouse.getCoordinates(event), event)\n \n update()\n })\n \n const drawEmptyCircle = $drawing.drawers.emptyCircle(cpbp.reglInstance)\n const drawFilledCircle = $drawing.drawers.filledCircle(cpbp.reglInstance)\n const drawLineStrip = $drawing.drawers.lineStrip(cpbp.reglInstance)\n \n return Object.assign({}, cpbp, {\n drawEmptyCircle, \n drawFilledCircle,\n drawLineStrip,\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"mutable cp_BernsteinPolynomial = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"mutable cp_EfficientBernsteinPolynomial = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"mutable cp_deCasteljau = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"mutable cp_ConnectingBezier = [\n glMatrix.vec2.fromValues(57, 303),\n glMatrix.vec2.fromValues(86, 111),\n glMatrix.vec2.fromValues(226, 107),\n glMatrix.vec2.fromValues(250, 246),\n glMatrix.vec2.fromValues(274, 385),\n glMatrix.vec2.fromValues(422, 370),\n glMatrix.vec2.fromValues(440, 183)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"mutable cp_SplitBezier = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 30:"$2f:body"