2b:null 2c:["$","title",null,{"children":"7. Cardinal Spline | Attila Bagossy | Observable"}] 31:T768,{ const heading = md` ### 1. grafikon #### A ${tex`b_{0}, b_{1}, b_{2}, b_{3}`} súlyfüggvények Az ${tex`x`}-tengely a ${tex`t`} paramétert, az ${tex`y`}-tengely pedig a súlyfüggvény adott ${tex`t`}-hez tartozó értékét ábrázolja. A súlyfüggvények nevei mellett a hozzájuk tartozó geometriai adatot láthatjuk. ` const legends = [{ content: tex`b_{0} \quad | \quad P_{0}`, color: $plot.consts.colors[0] }, { content: tex`b_{1} \quad | \quad P_{1}`, color: $plot.consts.colors[1] }, { content: tex`b_{2} \quad | \quad P_{2}`, color: $plot.consts.colors[2] }, { content: tex`b_{3} \quad | \quad P_{3}`, color: $plot.consts.colors[3] }] const k = 0.5 * (1 - tension_SingleCardinalSegment) const data = [{ fn: `1 - 3x`, color: $plot.consts.colors[0], range: [0, 1/3] }, { fn: `0`, color: $plot.consts.colors[0], range: [1/3, 1] }, { fn: `3x`, color: $plot.consts.colors[1], range: [0, 1/3] }, { fn: `2 - 3x`, color: $plot.consts.colors[1], range: [1/3, 2/3] }, { fn: `0`, color: $plot.consts.colors[1], range: [2/3, 1] }, { fn: `0`, color: $plot.consts.colors[2], range: [0, 1/3] }, { fn: `3x - 1`, color: $plot.consts.colors[2], range: [1/3, 2/3] }, { fn: `3 - 3x`, color: $plot.consts.colors[2], range: [2/3, 1] }, { fn: `0`, color: $plot.consts.colors[3], range: [0, 2/3] }, { fn: `3x - 2`, color: $plot.consts.colors[3], range: [2/3, 1] }].map(o => Object.assign({}, { sample: 'builtIn', graphType: 'polyline' }, o)) const plotConfig = { disableZoom: true, grid: true, xAxis: { domain: [0, 1], label: 't' }, yAxis: { domain: [-0.5, 1.25] }, data } return $plot.emitters.twoColumnPlot(heading, legends, plotConfig) }32:T625,Szegmens_sulyfuggvenyek = { const heading = md` ### 2. grafikon #### Cardinal Spline szegmens súlyfüggvények Az ${tex`x`}-tengely a ${tex`t`} paramétert, az ${tex`y`}-tengely pedig a súlyfüggvény adott ${tex`t`}-hez tartozó értékét ábrázolja. A súlyfüggvények nevei mellett a hozzájuk tartozó geometriai adatot láthatjuk. A súlyfüggvényekben használt feszesség értékét a [tension_PlotSingleCardinalSplineSegment](#tension_PlotSingleCardinalSplineSegment) csúszkával módosíthatjuk. ` const legends = [{ content: tex`b_{0} \quad | \quad P_{0}`, color: $plot.consts.colors[0] }, { content: tex`b_{1} \quad | \quad P_{1}`, color: $plot.consts.colors[1] }, { content: tex`b_{2} \quad | \quad P_{2}`, color: $plot.consts.colors[2] }, { content: tex`b_{3} \quad | \quad P_{3}`, color: $plot.consts.colors[3] }] const k = 0.5 * (1 - tension_PlotSingleCardinalSplineSegment) const data = [{ fn: `(${-k}*x^3) + (${2 * k}*x^2) + (${-k}*x) + 0` }, { fn: `(${2 - k}x^3) + (${k - 3}x^2) + (${0}x) + 1` }, { fn: `(${k - 2}x^3) + (${3 - 2 * k}x^2) + (${k}x) + 0` }, { fn: `(${k}x^3) + (${-k}x^2) + (${0}x) + 0` }].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.5, 1.25] }, data } return $plot.emitters.twoColumnPlot(heading, legends, plotConfig) }33:T423,/** * Visszaadja a megadott kontrollpontokra illesztett Cardinal Spline szegmenst. * @param {Array} points A kontrollpontok tombje. * @param {Number} tension A feszesseget meghatarozo ertek. * @returns {Array} A görbepontokat tartalmazó tömb. */ function f_evaluateCardinalSplineSegment(points, tension) { const G = glMatrix.mat4.fromValues( points[0][0], points[0][1], 0, 0, points[1][0], points[1][1], 0, 0, points[2][0], points[2][1], 0, 0, points[3][0], points[3][1], 0, 0, ) const k = 0.5 * (1 - tension) const M = glMatrix.mat4.fromValues( -k, 2 - k, k - 2, k, 2 * k, k - 3, 3 - 2 * k, -k, -k, 0, k, 0, 0, 1, 0, 0 ) const C = glMatrix.mat4.create() glMatrix.mat4.multiply(C, G, M) const result = [] for (let t = 0; t <= 1.05; t += 0.05) { const T = glMatrix.vec4.fromValues(t * t * t, t * t, t, 1) const p = glMatrix.vec4.create() glMatrix.vec4.transformMat4(p, T, C) result.push(p) } return result }34:T9c7,CardinalSpline_szegmens = { const heading = md` ### 1. ábra #### Cardinal Spline szegmens * A kontrollpontokat a szokásos módon mozgathatjuk. A pontok eltávolítására, új pontok felvételére ezúttal nincs lehetőségünk. A szegmens feszességét a [tension_SingleCardinalSegment](#tension_SingleCardinalSegment) csúszkával módosíthatjuk. ` const controlPointMarkers = cp_SingleCardinalSegment.map(cp => ({ radius: $figure.consts.sizing.controlPointRadius, center: cp, lineWidth: 1, color: $drawing.consts.colors.controlPoint })) initFig_SingleCardinalSegment.reglInstance.poll() initFig_SingleCardinalSegment.reglInstance.clear({ color: $drawing.consts.colors.white, depth: 1 }) const curvePoints = f_evaluateCardinalSplineSegment(cp_SingleCardinalSegment, tension_SingleCardinalSegment) .map(p => $drawing.helper.toVec2(p)) const k = 0.5 * (1 - tension_SingleCardinalSegment) const vEnd = glMatrix.vec2.create() glMatrix.vec2.subtract(vEnd, cp_SingleCardinalSegment[2], cp_SingleCardinalSegment[0]) glMatrix.vec2.scale(vEnd, vEnd, k) glMatrix.vec2.add(vEnd, vEnd, cp_SingleCardinalSegment[1]) const wEnd = glMatrix.vec2.create() glMatrix.vec2.subtract(wEnd, cp_SingleCardinalSegment[3], cp_SingleCardinalSegment[1]) glMatrix.vec2.scale(wEnd, wEnd, k) glMatrix.vec2.add(wEnd, wEnd, cp_SingleCardinalSegment[2]) initFig_SingleCardinalSegment.drawLineStrip({ color: $drawing.consts.colors.curve, position: curvePoints, count: curvePoints.length, lineWidth: 1 }) initFig_SingleCardinalSegment.drawLineStrip({ color: $drawing.consts.colors.controlPolygon, position: [cp_SingleCardinalSegment[0], cp_SingleCardinalSegment[2]], count: 2, lineWidth: 1 }) initFig_SingleCardinalSegment.drawLineStrip({ color: $drawing.consts.colors.controlPolygon, position: [cp_SingleCardinalSegment[1], cp_SingleCardinalSegment[3]], count: 2, lineWidth: 1 }) initFig_SingleCardinalSegment.drawArrow({ lineBegin: cp_SingleCardinalSegment[1], lineEnd: vEnd, size: 5, color: $drawing.consts.colors.semiCurve }) initFig_SingleCardinalSegment.drawArrow({ lineBegin: cp_SingleCardinalSegment[2], lineEnd: wEnd, size: 5, color: $drawing.consts.colors.semiCurve }) initFig_SingleCardinalSegment.drawEmptyCircle(controlPointMarkers) return $styling.emitters.figure(heading, initFig_SingleCardinalSegment.canvas) }35:T586,{ const heading = md` ### 3. grafikon #### A ${tex`cr(t)`} súlyfüggvény Az ${tex`x`}-tengely a ${tex`t`} paramétert, az ${tex`y`}-tengely pedig a súlyfüggvény adott ${tex`t`}-hez tartozó értékét ábrázolja. A feszességet a [tension_PlotCardinalSpline](#tension_PlotCardinalSpline) csúszkával módosíthatjuk. ` const legends = [{ content: tex`b_{3}`, color: $plot.consts.colors[0] }, { content: tex`b_{2}`, color: $plot.consts.colors[1] }, { content: tex`b_{1}`, color: $plot.consts.colors[2] }, { content: tex`b_{0}`, color: $plot.consts.colors[3] }] const k = 0.5 * (1 - tension_PlotCardinalSpline) const data = [{ fn: `(${k}(x + 2)^3) + (${-k}(x + 2)^2) + (${0}(x + 2)) + 0`, range: [-2, -1] }, { fn: `(${k - 2}(x + 1)^3) + (${3 - 2 * k}(x + 1)^2) + (${k}(x + 1)) + 0`, range: [-1, 0] }, { fn: `(${2 - k}(x)^3) + (${k - 3}(x)^2) + (${0}(x)) + 1`, range: [0, 1] }, { fn: `(${-k}*(x - 1)^3) + (${2 * k}*(x - 1)^2) + (${-k}*(x - 1)) + 0`, range: [1, 2] }].map(o => Object.assign({}, { sample: 'builtIn', graphType: 'polyline' }, o)) const plotConfig = { disableZoom: true, grid: true, xAxis: { domain: [-2, 2], label: 't' }, yAxis: { domain: [-0.5, 1.25] }, data } return $plot.emitters.twoColumnPlot(heading, legends, plotConfig) }36:T888,CardinalSpline = { const heading = md` ### 2. ábra #### Cardinal Spline A kontrollpontok kezelése (hozzáadás, módosítás, eltávolítás) a szokásos módon történik. A görbe feszességét a [tension_CardinalSpline](#tension_CardinalSpline) csúszkával állíthatjuk. Az ábrán feketével jelenik meg a Cardinal Spline, halványkékkek pedig az ugyanazon pontokra illesztett Lagrange-interpolációs görbe. ` const controlPointMarkers = cp_CardinalSpline.map(cp => ({ radius: $figure.consts.sizing.controlPointRadius, center: cp, lineWidth: 1, color: $drawing.consts.colors.controlPoint })) initFig_CardinalSpline.reglInstance.poll() initFig_CardinalSpline.reglInstance.clear({ color: $drawing.consts.colors.white, depth: 1 }) const cardinalCurvePoints = f_evaluateCardinalSpline(cp_CardinalSpline, tension_CardinalSpline) .map(p => $drawing.helper.toVec2(p)) initFig_CardinalSpline.drawLineStrip({ color: $drawing.consts.colors.curve, position: cardinalCurvePoints, count: cardinalCurvePoints.length, lineWidth: 1 }) if (input_showCardinalSplineLagrangeInterpolation && cp_CardinalSpline.length > 2) { const parameters = [...Array(cp_CardinalSpline.length).keys()] const curvePoints = $maths.linspace(0, cp_CardinalSpline.length - 1) .map(t => $curves.lagrange.aitkenInterpolationAtParameter(cp_CardinalSpline, parameters, t)) const containsUndefinedOrNull = curvePoints.some(p => p == null) if (curvePoints.length > 1 && !containsUndefinedOrNull) { initFig_CardinalSpline.drawLineStrip({ color: $drawing.consts.colors.lightObservableBlue, position: curvePoints, count: curvePoints.length, lineWidth: 1 }) } } if (input_showCardinalSplineControlPolygon) { initFig_CardinalSpline.drawLineStrip({ color: $drawing.consts.colors.controlPolygon, position: cp_CardinalSpline, count: cp_CardinalSpline.length, lineWidth: 1 }) } initFig_CardinalSpline.drawEmptyCircle(controlPointMarkers) return $styling.emitters.figure(heading, initFig_CardinalSpline.canvas) }37:T600,/** * Visszaadja a megadott kontrollpontokból és érintővektorokból képzett Hermite-ívet alkozó * görbepontokat. * @param {vec2} P A kontrollpont, ahonnan az ív indul. * @param {vec2} Q A kontrollpont, amibe az ív fut. * @param {vec2} v Az ív P-beli érintővektora. * @param {vec2} w Az ív Q-beli érintővektora. * @returns {Array} A görbepontokat tartalmazó tömb. */ function f_evaluateKochanekBartelsSplineSegment(points, tension, bias, continuity) { const G = glMatrix.mat4.fromValues( points[0][0], points[0][1], 0, 0, points[1][0], points[1][1], 0, 0, points[2][0], points[2][1], 0, 0, points[3][0], points[3][1], 0, 0, ) const k = 0.5 * (1 - tension) const q1 = k * (1 + bias) * (1 - continuity) const q2 = k * (1 - bias) * (1 + continuity) const q3 = k * (1 + bias) * (1 + continuity) const q4 = k * (1 - bias) * (1 - continuity); const M = glMatrix.mat4.fromValues( -q1, q1 - q2 - q3 + 2, q2 + q3 - q4 -2, q4, 2 * q1, q3 - 2 * q1 + 2 * q2 -3, q4 - q3 - 2 * q2 + 3, -q4, -q1, q1 - q2, q2, 0, 0, 1, 0, 0 ) const C = glMatrix.mat4.create() glMatrix.mat4.multiply(C, G, M) const result = [] for (let t = 0; t <= 1.05; t += 0.05) { const T = glMatrix.vec4.fromValues(t * t * t, t * t, t, 1) const p = glMatrix.vec4.create() glMatrix.vec4.transformMat4(p, T, C) result.push(p) } return result }38:T1526,KochanekBartelsSpline = { const heading = md` ### 3. ábra #### Kochanek-Bartels Spline A kontrollpontok kezelése (hozzáadás, módosítás, eltávolítás) a szokásos módon történik. Az [input_showKochanekBartelsSplineTangents](#input_showKochanekBartelsSplineTangents) dobozzal kapcsolhatjuk ne az érintővektorok megjelenítését. Kék szín jelöli az úgynvezett kimenő vektorokat, piros pedig a bejövőket. A kimenő vektor egy szegmens végpontjának érintője, a bejövő pedig a kezdőpontjának az érintője. Alapesetben, ha a *continuity* értéke ${tex`0`}, akkor a bejövő és kimenő érintővektorok egybeesnek. ` function calculateTangents(geometry, tension, bias, continuity) { const p = 0.5 * (1 - tension); const q1 = p * (1 + bias) * (1 - continuity); const q2 = p * (1 - bias) * (1 + continuity); const q3 = p * (1 + bias) * (1 + continuity); const q4 = p * (1 - bias) * (1 - continuity); let tangentIn = glMatrix.vec2.create() glMatrix.vec2.subtract(tangentIn, geometry[1], geometry[0]) glMatrix.vec2.scale(tangentIn, tangentIn, q1) let tmp = glMatrix.vec2.create() glMatrix.vec2.subtract(tmp, geometry[2], geometry[1]) glMatrix.vec2.scale(tmp, tmp, q2) glMatrix.vec2.add(tangentIn, tangentIn, tmp) glMatrix.vec2.add(tangentIn, tangentIn, geometry[1]) /*geometry[1] .subtract(geometry[0]) .multiply(q1) .add(geometry[2].subtract(geometry[1]).multiply(q2)) .add(geometry[1]);*/ let tangentOut = glMatrix.vec2.create() glMatrix.vec2.subtract(tangentOut, geometry[2], geometry[1]) glMatrix.vec2.scale(tangentOut, tangentOut, q3) tmp = glMatrix.vec2.create() glMatrix.vec2.subtract(tmp, geometry[3], geometry[2]) glMatrix.vec2.scale(tmp, tmp, q4) glMatrix.vec2.add(tangentOut, tangentOut, tmp) glMatrix.vec2.add(tangentOut, tangentOut, geometry[2]) /*let tangentOut = geometry[2] .subtract(geometry[1]) .multiply(q3) .add(geometry[3].subtract(geometry[2]).multiply(q4)) .add(geometry[2]);*/ return { tangentIn: [geometry[1], tangentIn], tangentOut: [geometry[2], tangentOut] } } function normalTangents(points, tension, bias, continuity) { let result = [] for (let i = 0; i < points.length - 3; i++) { const segmentControlPoints = points.slice(i, i + 4) result.push(calculateTangents(segmentControlPoints, tension, bias, continuity)) } return result } function closedTangents(points, tension, bias, continuity) { let result = [] for (let i = 0; i < points.length; i++) { const segmentControlPoints = [ points[i], points[(i + 1) % points.length], points[(i + 2) % points.length], points[(i + 3) % points.length] ] result.push(calculateTangents(segmentControlPoints, tension, bias, continuity)) } return result } const controlPointMarkers = cp_KochanekBartelsSpline.map(cp => ({ radius: $figure.consts.sizing.controlPointRadius, center: cp, lineWidth: 1, color: $drawing.consts.colors.controlPoint })) initFig_KochanekBartelsSpline.reglInstance.poll() initFig_KochanekBartelsSpline.reglInstance.clear({ color: $drawing.consts.colors.white, depth: 1 }) let kochanekCurvePoints let tangents if (input_closedKochanekBartelsSpline) { kochanekCurvePoints = f_evaluateClosedKochanekBartelsSpline( cp_KochanekBartelsSpline, tension_KochanekBartelsSpline, bias_KochanekBartelsSpline, continuity_KochanekBartelsSpline ) .map(p => $drawing.helper.toVec2(p)) tangents = closedTangents( cp_KochanekBartelsSpline, tension_KochanekBartelsSpline, bias_KochanekBartelsSpline, continuity_KochanekBartelsSpline ) } else { kochanekCurvePoints = f_evaluateKochanekBartelsSpline( cp_KochanekBartelsSpline, tension_KochanekBartelsSpline, bias_KochanekBartelsSpline, continuity_KochanekBartelsSpline ) .map(p => $drawing.helper.toVec2(p)) tangents = normalTangents( cp_KochanekBartelsSpline, tension_KochanekBartelsSpline, bias_KochanekBartelsSpline, continuity_KochanekBartelsSpline ) } if (input_showKochanekBartelsSplineTangents) { tangents.forEach(({ tangentIn, tangentOut }) => { initFig_KochanekBartelsSpline.drawArrow({ lineBegin: tangentIn[0], lineEnd: tangentIn[1], size: 5, color: $drawing.consts.colors.red }) initFig_KochanekBartelsSpline.drawArrow({ lineBegin: tangentOut[0], lineEnd: tangentOut[1], size: 5, color: $drawing.consts.colors.observableBlue }) }) } initFig_KochanekBartelsSpline.drawLineStrip({ color: $drawing.consts.colors.curve, position: kochanekCurvePoints, count: kochanekCurvePoints.length, lineWidth: 1 }) if (input_showKochanekBartelsSplineControlPolygon) { initFig_KochanekBartelsSpline.drawLineStrip({ color: $drawing.consts.colors.controlPolygon, position: cp_KochanekBartelsSpline, count: cp_KochanekBartelsSpline.length, lineWidth: 1 }) } initFig_KochanekBartelsSpline.drawEmptyCircle(controlPointMarkers) return $styling.emitters.figure(heading, initFig_KochanekBartelsSpline.canvas) }39:T619,initFig_SingleCardinalSegment = { // 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(4, mutable cp_SingleCardinalSegment) const update = function recalculate() { mutable cp_SingleCardinalSegment = 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 => { cpbp.onMouseMove($utility.mouse.getCoordinates(event), event) if (cpbp.getDraggedPoint()) { 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 }) }3a:T422,initFig_CardinalSpline = { const cpbp = $figure.boilerplate.controlPoint(-1) const update = function recalculate() { mutable cp_CardinalSpline = cpbp.controlPoints } cpbp.canvas.addEventListener('mousedown', event => { cpbp.onMouseDown($utility.mouse.getCoordinates(event), event) update() }) cpbp.canvas.addEventListener('mousemove', event => { cpbp.onMouseMove($utility.mouse.getCoordinates(event), event) if (cpbp.getDraggedPoint()) { update() } }) cpbp.canvas.addEventListener('mouseup', event => { 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 }) }3b:T430,initFig_KochanekBartelsSpline = { const cpbp = $figure.boilerplate.controlPoint(-1) const update = function recalculate() { mutable cp_KochanekBartelsSpline = cpbp.controlPoints } cpbp.canvas.addEventListener('mousedown', event => { cpbp.onMouseDown($utility.mouse.getCoordinates(event), event) update() }) cpbp.canvas.addEventListener('mousemove', event => { cpbp.onMouseMove($utility.mouse.getCoordinates(event), event) if (cpbp.getDraggedPoint()) { update() } }) cpbp.canvas.addEventListener('mouseup', event => { 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":"e02c287b3b750a9d","slug":"7-cardinal-spline","title":"7. Cardinal Spline","thumbnail":"9ddb4d436f851a857cafc9a9936aa4ca90a87fec1de015e55d02f84035730d3a","access_level":"public","create_time":"$D2018-09-26T15:35:05.412Z","update_time":"$D2019-03-04T15:59:11.132Z","view_time":null,"first_public_time":"$D2018-09-27T22:47:35.083Z","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":709,"publish_version":709,"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":{"id":"292318ad1a566f4a","slug":"komputergrafika","title":"Komputergrafika","owner":{"id":"ef739838e5a1d607","login":"battila7","name":"Attila Bagossy"}},"type":"notebook","body":{"title":"7. Cardinal Spline","cells":[{"id":0,"value":"md`# 7. Cardinal Spline`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`\nA Bézier approximációs görbe után, ebben a fejezetben újra az interpolációs feladatot tekintjük. Habár ez a feladat megoldható Lagrange-interpolációval, az ilyen módon előállított görbe számos előnytelen tulajdonsággal bír: alakja kevéssé követi a kontrollpoligont, alakváltozásaa globális és nehezen megjósolható.\n\nEzen előnytelenségek kiküszöbölését ígérik az úgynevezett spline görbék, melyekről már az Hermite-ív kapcsán is szó volt. Míg abban a fejezetben csak érintőlegesen foglalkoztunk a spline-okkal, most két elterjedten alkalmazott interpolációs spline-görbe kerül terítékre: a Cardinal Spline és a Kochanek-Bartels Spline.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`## A spline megközelítés`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md`\nA Lagrange-interpoláció kedvezőtlen tulajdonságainak hátterében az állt, hogy az összes megadott kontrollpontra egyetlen, magas fokszámú polinomot illesztett. Az egész görbe – hiszen egy polinom írta le – csak globálisan lett változtatható, ráadásul a magas fokszám miatt még az alakja is igen kacskaringós lett, kevéssé követve a kontrollpoligont.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`\nA tervezés során előnyben részesítjük a lokálisan változtatható, simább görbéket, melyek jobban követik a kontrollpoligont. A *spline* módszerek úgy állítanak elő ilyen görbéket, hogy a megadott kontrollpontokra több kisebb görbét, úgynevezett szegmenst illesztenek.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`\nA *spline* görbéket tehát több kisebb, adott fokszámú polinom által leírt szegmens megfelelő folytonosságú csatlakoztatásával nyerjük.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md`### Illesztés szakaszonként definiált függvényekkel`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`\nHasonlóan az egyes szegmensekhez, a *spline* görbéket is felírhatjuk paraméteres alakban. Ehhez össze kell illesztenünk a szegmenseket leíró függvényeket úgynevezett szakaszonként definált függvények formájában.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`\nTegyük fel, hogy egy *spline* görbét két szegmensből szeretnénk összeilleszteni. Legyen az első darabot előállító függvény ${tex`f_0(t_0)`}, ahol ${tex`t_0 \\in [0, 1]`}, a második darabot előállító függvény pedig ${tex`f_1(t_1)`}, ahol ${tex`t_1 \\in [0, 1]`}. A teljes görbét írja le ${tex`f(t)`}, ahol ${tex`t`} a ${tex`[0, 1]`} tartományból vehet fel értékeket! Ekkor ${tex`f(t)`} a következő szakaszonként definiált függvény formájában írható fel:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"tex.block`\nf(t) =\n\\begin{cases}\nf_0(2t) & \\text{ha } t \\in [0;\\, 0{,}5] \\\\\nf_1(2t - 1) & \\text{ha } t \\in (0{,}5;\\, 1]\n\\end{cases}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md`\n> *A továbbiakban a szakaszosan definiált függvények képletében elhagyjuk a ha szót az olvashatóság érdekében.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md`\nAz alkalmazott ötlet lényege, hogy a teljes görbét leíró ${tex`f(t)`} függvény értelmezési tartományát annyi darabra osztjuk, ahány szegmensünk van. Ezt követően kijelöljük ${tex`f`} értelmezési tartományában azokat az értékeket, ahol a szegmensek kezdődnek, illetve végződnek. Ezeket az értékeket *csomóknak* (*knots*) nevezzük. A fenti esetben három csomónk van: ${tex`0; 0{,}5; 1`}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`\nA szakaszonként definiált függvények alkalmazása görbék előállítására óriási jelentőségű, hiszen rendkívüli rugalmasságot biztosítanak. Dönthetünk például úgy, hogy kevesebb darabból illesztünk össze egy görbét, viszont így az egyes darabok bonyolultabbak lesznek. Ha viszont elfogadjuk, hogy több kisebb darabból kell összeállítanunk a görbét, akkor egyszerűbb függvényekkel dolgozhatunk az egyes szakaszokon.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"md`\nTermészetesen az ilyen módon megadott görbék is átírhatók súlyfüggvényes alakba. Ekkor a szakaszonkénti definíció egy szinttel lentebb, a súlyfüggvényekben jelenik meg.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md`#### Töröttvonal szakaszonkénti felírása`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`\nA *spline* megközelítést szemléltetve, írjuk fel szakaszonként definiált függvény segítségével a ${tex`P_{0}, P_{1}, P_{2}, P_{3}`} pontokra illeszkedő töröttvonalat.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md`\nKezdjük az egyes szegmensek felírásával:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"tex.block`\n\\begin{aligned}\ne_{0}(t_{0}) &= (1 - t_{0})P_{0} + t_{0}P_{1} \\qquad t_{0} \\in [0, 1] \\\\\ne_{1}(t_{1}) &= (1 - t_{1})P_{1} + t_{1}P_{2} \\qquad t_{1} \\in [0, 1] \\\\\ne_{2}(t_{2}) &= (1 - t_{2})P_{2} + t_{2}P_{3} \\qquad t_{2} \\in [0, 1] \\\\\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`\nTekintve, hogy ${tex`3`} szegmenssel rendelkezünk, összesen ${tex`4`} csomóra lesz szükségünk. Ezek legyenek a ${tex`0, \\frac{1}{3}, \\frac{2}{3}, 1`} értékek. Ekkor a teljes görbét leíró függvény a következő:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"tex.block`\ne(t) =\n\\begin{cases}\ne_0(3t) & t \\in [0,\\, \\frac{1}{3}] \\\\\ne_1(3t - 1) & t \\in (\\frac{1}{3},\\, \\frac{2}{3}] \\\\\ne_2(3t - 2) & t \\in (\\frac{2}{3}, \\, 1]\n\\end{cases}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"md`\nÍrjuk most át ${tex`e(t)`}-t súlyfüggvényes formába! Ez azt jelenti, hogy keressük azokat a ${tex`b_{0}(t), b_{1}(t), b_{2}(t), b_3(t)`} elsőfokú polinomokat, melyek a fentivel ekvivalens görbét állítanak elő.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`\nEhhez fejtsük ki a ${tex`e(t)`} függvényben szereplő ${tex`e_{i}(t)`} függvényeket, majd vizsgáljuk meg, hogy az egyes kontrollpontok előtt milyen együtthatók állnak:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"tex.block`\ne(t) =\n\\begin{cases}\n(1 - 3t)P_{0} + 3tP_{1}\\quad &t \\in [0,\\, \\frac{1}{3}] \\\\\n(2 - 3t)P_{1} + (3t - 1)P_{2}\\quad &t \\in (\\frac{1}{3},\\, \\frac{2}{3}] \\\\\n(3 - 3t)P_{2} + (3t - 2)P_{3}\\quad &t \\in (\\frac{2}{3}, \\, 1]\n\\end{cases}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`\nE felírásból már könnyedén meghatározhatók az egyes súlyfüggvények:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"tex.block`\n\\begin{aligned}\nb_{0}(t) &=\n \\begin{cases}\n 1 - 3t& t \\in [0,\\, \\frac{1}{3}] \\\\\n 0 & \\text{egyébként}\n \\end{cases} \\\\ \\\\\nb_{1}(t) &=\n \\begin{cases}\n 3t& t \\in [0,\\, \\frac{1}{3}] \\\\\n 2 - 3t& t \\in [\\frac{1}{3},\\, \\frac{2}{3}] \\\\\n 0 & \\text{egyébként}\n \\end{cases} \\\\ \\\\\nb_{2}(t) &=\n \\begin{cases}\n 3t - 1& t \\in [\\frac{1}{3},\\, \\frac{2}{3}] \\\\\n 3 - 3t& t \\in [\\frac{2}{3},\\, 1] \\\\\n 0 & \\text{egyébként}\n \\end{cases} \\\\ \\\\\nb_{3}(t) &=\n \\begin{cases}\n 3t - 2t& t \\in [\\frac{2}{3},\\, 1] \\\\\n 0 & \\text{egyébként}\n \\end{cases}\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md`\nA teljes töröttvonal így már felírható az ismert\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"tex.block`\ne(t) = \\sum\\limits_{i = 0}^{3}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":353,"value":"md`\nalakban.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"md`## Cardinal Spline`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md`\nA Cardinal Spline egy harmadfokú, a csatlakozási pontokban ${tex`C^{1}`} folytonosságot biztosító interpolációs *spline* görbe. A görbe megjelenését a kontrollpontok mellett egy nem-geometriai paraméterrel, az úgynevezett feszességgel (*tension*) befolyásolhatjuk. A következőkben először a Cardinal Spline-t felépítő szegmenseket tekintjük, majd pedig ezekből összeállítjuk a teljes görbét.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"md`### Cardinal Spline szegmensek`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"md`\nA Cardinal Spline szegmenst egy harmadfokú polinom írja le, mely négy kontrollpontra feszít egy görbedarabot. Ekképpen egy ${tex`n + 1`} kontrollpontra feszített Cardinal Spline ${tex`n - 2`} darab szegmensből áll össze.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"md`\nA szegmens az alapjául szolgáló pontok közül csak a másodikat és a harmadikat érinti, az első és az utolsó pont csupán az érintővektorok meghatározásához szükséges.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"md`\nTegyük fel, hogy a ${tex`P_{0}, P_{1}, P_{2}, P_{3}`} kontrollpontokra illesztjük a ${tex`\\gamma(t)`} függvény által leírt szegmenst! Ekkor a következő kritériumoknak eleget tevő súlyfüggvényeket keresünk:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"tex.block`\n\\begin{aligned}\n\\gamma(0) &= P_{1} \\\\\n\\gamma(1) &= P_{2} \\\\\n\\gamma^{\\prime}(0) &= \\frac{1}{2}(1 - s)(P_{1} - P_{0}) \\\\\n\\gamma^{\\prime}(1) &= \\frac{1}{2}(1 - s)(P_{3} - P_{2}) \\\\\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md`\n${tex`s`} a görbe feszességét befolyásoló, a ${tex`(-\\infty, 1]`} tartományból választott valós érték. Ha ${tex`s`} értéke ${tex`1`}, akkor a szegmens rásimul a ${tex`P_{1}`} és ${tex`P_{2}`} pontot összekötő szakaszra. Ezzel szemben, ha az ${tex`s`} paraméterrel a mínusz végtelen felé tartunk, akkor a szegmens egyre jobban eltávolodik ettől a szakasztól, hiszen mind a kezdőpontba, mind a végpontba húzott érintő nagysága arányosan nő. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md`\nA szegmenst leíró súlyfüggvények együtthatóit a feltételekből képzett lineáris egyenletrendszer megoldásával kaphatjuk. E számítás eredménye a következő együtthatómátrix:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"tex.block`\nM =\n\\begin{bmatrix}\n-k & 2k & -k & 0 \\\\\n2 - k & k - 3 & 0 & 1 \\\\\nk - 2 & 3 - 2k & k & 0 \\\\\nk & -k & 0 & 0\n\\end{bmatrix},\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md`\nahol ${tex`k = \\frac{1}{2}(1 - s)`}. Az így nyert súlyfüggvényeket a [Szegmens_sulyfuggvenyek](#Szegmens_sulyfuggvenyek) grafikonon láthatjuk. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"viewof tension_PlotSingleCardinalSplineSegment = slider({ min: -5, max: 1, title: 'Tension' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"md`\nA [CardinalSpline_szegmens](#CardinalSpline_szegmens) ábrán egy szegmens szerepel, a kezdő- és végpontjába húzott érintővektorokkal együtt.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof tension_SingleCardinalSegment = slider({ min: -5, max: 1, title: 'Tension' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"md`### A teljes görbe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"md`\nMiután láttuk, hogyan jön létre egy szegmens, nézzük meg, hogyan írható le az egész görbe! Legyenek a ${tex`P_0, P_1, \\ldots, P_n`} kontrollpontok, valamint a feszesség ${tex`s \\in (-\\infty, 1]`} értéke adott. Legyen továbbá ${tex`t \\in [0, n - 2]`}, valamint minden ${tex`i = 0, 1, \\ldots, n - 2`} érték egy csomó. Ha az egyes szegmensekhez tartozó függvényeket ${tex`\\gamma_{i}(t)`}-vel, míg a teljes görbét leíró függvényt ${tex`CR(t)`}-vel jelöljük, akkor\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"tex.block`\nCR(t) =\n\\begin{cases}\n\\gamma_0(t) & t \\in [0, 1] \\\\\n\\gamma_1(t - 1) & t \\in (1, 2] \\\\\n\\gamma_2(t - 2) & t \\in (2, 3] \\\\\n\\vdots \\\\\n\\gamma_{n - 3}(t - n + 3) & t \\in (n - 3, n - 2]\n\\end{cases}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"md`\nA teljes görbét leíró függvény tehát hasonlóan a fejezet elején található töröttvonalhoz, egymáshoz a csomókban csatlakozó kisebb függvényekből áll össze. Mindegyik függvény csak a teljes paramétertartomány egy meghatározott részén hat, kialakítva ezzel egy szegmenst.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"md`\nÍrjuk fel most is a jól ismert súlyfüggvényes formulát! Ehhez meg kell vizsgálnunk, hogy az egyes kontrollpontok a paramétertartomány különböző részein milyen együtthatóval bírnak. Ha ${tex`b_0(t), b_1(t), b_2(t), b_3(t)`} jelöli az előzőleg, a feltételek alapján felírt Cardinal Spline súlyfüggvényeket, akkor\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"tex.block`\nCR(t) =\n\\begin{cases}\n\\vdots & t \\leq 1 \\\\\nb_0(t - 1)P_1 + b_1(t - 1)P_2 + b_2(t - 1)P_3 + \\color{red}{b_3(t - 1)P_4} & t \\in (1, 2] \\\\\nb_0(t - 2)P_2 + b_1(t - 2)P_3 + \\color{red}{b_2(t - 2)P_4}\\color{black} + b_3(t - 2)P_5 & t \\in (2, 3] \\\\\nb_0(t - 3)P_3 + \\color{red}{b_1(t - 3)P_4}\\color{black} + b_2(t - 3)P_5 + b_3(t - 3)P_6 & t \\in (3, 4] \\\\\n\\color{red}{b_0(t - 4)P_4}\\color{black} + b_1(t - 4)P_5 + b_2(t - 4)P_6 + b_3(t - 4)P_7 & t \\in (4, 5] \\\\\n\\vdots & t > 5\n\\end{cases}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"md`\nLátható, hogy igen szabályos rendben sorakoznak az egyes intervallumokhoz tartozó kifejezések. Piros színnel ki lett emelve egy tetszőleges, általános kontrollpont, ${tex`P_4`}. Ez a pont négy szegmens kialakításában is szerepet játszik, és mind a négy alkalommal másik súlyfüggvénnyel van megszorozva. Vizsgáljuk meg, hogy ${tex`t`} értékétől függően hogyan alakul a ${tex`P_4`}-hez tartozó, most ${tex`cr_{4}(t)`}-vel jelölt együttható:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"tex.block`\ncr_4(t) =\n\\begin{cases}\n0 & t \\leq 1 \\\\\nb_3(t - 1) & t \\in (1, 2] \\\\\nb_2(t - 2) & t \\in (2, 3] \\\\\nb_1(t - 3) & t \\in (3, 4] \\\\\nb_0(t - 4) & t \\in (4, 5] \\\\\n0 & t > 5\n\\end{cases}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"md`\nMivel ${tex`P_4`} négy szegmensben vesz részt, ezért ${tex`cr_4(t)`} is négy szakaszon vesz fel ${tex`0`}-tól különböző értéket. A fenti szakaszosan definiált függvényt felírhatjuk általánosan is, egy tetszőleges ${tex`P_{i}`} kontrollpontra:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"tex.block`\ncr_i(t) =\n\\begin{cases}\n0 & t \\leq i - 3 \\\\\nb_3(t - i + 3) & t \\in (i - 3, i - 2] \\\\\nb_2(t - i + 2) & t \\in (i - 2, i - 1] \\\\\nb_1(t - i + 1) & t \\in (i - 1, i] \\\\\nb_0(t - i) & t \\in (i, i + 1] \\\\\n0 & t > i + 1\n\\end{cases}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"md`\nA ${tex`cr_i(t)`} függvény is csak négy intervallumon vesz fel nullától különböző értéket, és ezeken az intervallumokon a megfelelő Cardinal Spline súlyfüggvények határozzák meg az értékét. Lényegében egymás mellé raktuk, és megfelelően eltoltuk a négy súlyfüggvényt. Ez utóbbi még jobban kitűnik, ha elhagyjuk az alsó ${tex`i`} indexet, függetlenné téve ezzel a függvényt a konkrét kontrollponttól:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"tex.block`\ncr(t) =\n\\begin{cases}\n0 & t \\leq -3 \\\\\nb_3(t + 3) & t \\in (-3, -2] \\\\\nb_2(t + 2) & t \\in (-2, -1] \\\\\nb_1(t + 1) & t \\in (-1, 0] \\\\\nb_0(t) & t \\in (0, 1] \\\\\n0 & t > 1\n\\end{cases}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"viewof tension_PlotCardinalSpline = slider({ min: -5, max: 1, title: 'Tension' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"md`\n${tex`cr(t)`} felhasználásával pedig a teljes görbét leíró ${tex`CR(t)`} a következő alakban írható fel:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"tex.block`\nCR(t) = \\sum\\limits_{i = 0}^{n}cr(t - i)P_i \\qquad t \\in [0, n - 2].\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"md`\n> *Az előző levezetésben feltettük, hogy a csomók egymást követő természetes számok. Ez csupán a felírás egyszerűsítését szolgálta, természetesen tetszőleges, monoton növekvő sorozat elemei alkothatják a csomókat.* \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"md`### Implementáció`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"$$styling.emitters.twoColumnContainer(\nmd`\n### 1. feladat\n#### Cardinal Spline\n`,\nmd`\nKészítsünk egy olyan függvényt, mely egy Cardinal Spline-t illeszt a megadott kontrollpontokra. A egyes csomók a ${tex`0, 1, 2, \\ldots`} értékek legyenek!\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 feszességet befolyásoló ${tex`s`} valós szám.\n\nA függvény visszatérési értéke a kiszámolt görbepontok tömbje legyen.\n\nAz implementációhoz használjuk fel az [f_evaluateCardinalSplineSegment](#f_evaluateCardinalSplineSegment) függvényt, melynek szignatúrája a következő:\n\n~~~~\nf_evaluateCardinalSplineSegment(points: Array, tension: Number): Array\n~~~~\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"/**\n * Visszaadja a megadott kontrollpontokra illesztett Cardinal Spline-t.\n * @param {Array} points A kontrollpontok tombje.\n * @param {Number} tension A feszesseget meghatarozo ertek.\n * @returns {Array} A görbepontokat tartalmazó tömb.\n */\nfunction f_evaluateCardinalSpline(points, tension) {\n let result = []\n \n for (let i = 0; i < points.length - 3; ++i) {\n result = result.concat(f_evaluateCardinalSplineSegment(points.slice(i, i + 4), tension))\n }\n \n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"viewof tension_CardinalSpline = slider({ min: -5, max: 1, title: 'Tension' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof input_showCardinalSplineControlPolygon = 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":129,"value":"viewof input_showCardinalSplineLagrangeInterpolation = checkbox({\n options: [\n { value: 'checked', label: 'Lagrange-polinom illesztése' }\n ],\n value: 'checked'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"md`## Catmull-Rom Spline`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`\nA Catmull-Rom Spline a Cardinal Spline egy speciális esete, ahol ${tex`s = 0`}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`## Kochanek-Bartels Spline`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"md`\nA Kochanek-Bartels Spline a Cardinal Spline egy általánosítása, mely további két nem-geometriai paramétert ad hozzá a görbéhez: *bias* és *continuity*. Ha ezeknek az értéke ${tex`0`}, akkor a Cardinal Spline-t kapjuk vissza.\n\nA ${tex`b`}-vel jelölt *bias* paraméter elsősorban az egyes szegmensek elejére és végére van hatással. Ha ${tex`b > 0`}, akkor inkább a szegmens kezdőpontja felé hajlik a görbe, míg ha ${tex`b < 0`}, akkor inkább a végpontja felé.\n\nA ${tex`c`}-vel jelölt *continuity* segítségével töréseket tudunk előidézni a görbében a szegmensek határainál, elrontva ezzel a görbe ${tex`C^1`} folytonosságát. Ha ${tex`c > 0`}, akkor a görbe úgymond befelé törik, ha viszont ${tex`c < 0`}, akkor pedig kifelé. Minél nagyobb abszolútértékben a *continuity* értéke, annál erőteljesebb törés fog bekövetkezni a görbében.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"md`\nA Kochanek-Bartels Spline által biztosított rugalmasság árát a matematikai leírás bonyolultságában kell megfizetnünk. A ${tex`P_{i}, P_{i + 1}, P_{i + 2}, P_{i + 3}`} pontokra illeszkedő szegmensnek a következő feltételeknek kell eleget tennie:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"tex.block`\n\\begin{aligned}\nkb_i(0) &= P_{i + 1} \\\\\nkb_i(1) &= P_{i + 2} \\\\\nkb_i^{\\prime}(0) &= \\frac{1}{2}(1 - s)\\cdot[\\,(1 + b)(1 - c)(P_{i + 1} - P_{i}) + (1 - b)(1 + c)(P_{i + 2} - P_{i + 1})\\,] \\\\\nkb_i^{\\prime}(1) &= \\frac{1}{2}(1 - s)\\cdot[\\,(1 + b)(1 + c)(P_{i + 2} - P_{i + 1}) + (1 - b)(1 - c)(P_{i + 3} - P_{i + 2})\\,] \\\\\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"md`\nA feltételek levezetése után a következő együtthatómátrix adódik:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"tex.block`\nM =\n\\begin{bmatrix}\n-q_1 & 2q_1 & -q_1 & 0 \\\\\nq_1 - q_2 - q_3 + 2 & q_3 - 2q_1 + 2q_2 - 3 & q_1 - q_2 & 1 \\\\\nq_2 + q_3 - q_4 - 2 & q_4 - q_3 - 2q_2 + 3 & q_2 & 0 \\\\\nq_4 & -q_4 & 0 & 0\n\\end{bmatrix},`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"md`\nahol\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"tex.block`\n\\begin{aligned}\nk &= \\frac{1}{2}(1 - s) \\\\\nq_1 &= k (1 + b) (1 - c) \\\\\nq_2 &= k (1 - b) (1 + c) \\\\\nq_3 &= k (1 + b) (1 + c) \\\\\nq_4 &= k (1 - b) (1 - c) \\\\\n\\end{aligned}\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"md`### Implementáció`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"md`\nA következőkben egy zárt *spline* görbét fogunk megvalósítani. Ha adottak a ${tex`P_0, P_1, \\ldots, P_n`} kontrollpontok, akkor hagyományos esetben ${tex`n - 2`} szegmenst tudunk elkészíteni. Zárt esetben azonban minden egyes kontrollpontból kiindulva képezni fogunk egy szegmenst, azaz a szegmensek száma meg fog egyezni a kontrollpontok számával.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"md`\nPéldául ${tex`4`} kontrollpont esetén ${tex`4`} darab szegmensünk lesz. A második szegmenst ekkor úgy hozzuk létre, hogy az utolsó három és az első kontrollpont fogja meghatározni. Az ezt követő szegmenst az első kettő és az utolsó kettő kontrollpont. Végül az utolsó szegmenst az utolsó és az első három kontrollpont alakítja ki. Összegezve: mindig négy, egymást követő kontrollpontot veszünk, mindaddig, amíg újra a legelső kontrollpontig nem érünk.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"$$styling.emitters.twoColumnContainer(\nmd`\n### 2. feladat\n#### Zárt Kochanek-Bartels Spline\n`,\nmd`\nKészítsünk egy olyan függvényt, mely egy zárt Kochanek-Bartels Spline-t illeszt a megadott kontrollpontokra. A egyes csomók a ${tex`0, 1, 2, \\ldots`} értékek legyenek!\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 feszességet befolyásoló ${tex`s`} valós szám.\n * a *bias* értéke,\n * a *continuity* értéke.\n\nA függvény visszatérési értéke a kiszámolt görbepontok tömbje legyen.\n\nAz implementációhoz használjuk fel az [f_evaluateKochanekBartelsSplineSegment](#f_evaluateKochanekBartelsSplineSegment) függvényt, mely paraméterként négy kontrollpontot, valamint a három ismert nem-geometriai paramétert várja.\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"/**\n * Visszaadja a megadott kontrollpontokra illesztett zart Kochanek-Bartels Spline-t.\n * @param {Array} points A kontrollpontok tombje.\n * @param {Number} tension A feszesseget meghatarozo ertek.\n * @param {Number} bias A bias erteke.\n * @param {Number} continuity A continuity erteke.\n * @returns {Array} A görbepontokat tartalmazó tömb.\n */\nfunction f_evaluateClosedKochanekBartelsSpline(points, tension, bias, continuity) {\n let result = []\n \n for (let i = 0; i < points.length; i++) {\n const segmentPoints = [\n points[i],\n points[(i + 1) % points.length],\n points[(i + 2) % points.length],\n points[(i + 3) % points.length]\n ]\n \n result = result.concat(f_evaluateKochanekBartelsSplineSegment(segmentPoints, tension, bias, continuity))\n }\n \n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"function f_evaluateKochanekBartelsSpline(points, tension, bias, continuity) {\n let result = []\n \n for (let i = 0; i < points.length - 3; i++) {\n const segmentControlPoints = points.slice(i, i + 4)\n \n const segmentCurvePoints = f_evaluateKochanekBartelsSplineSegment(segmentControlPoints, tension, bias, continuity)\n \n result = result.concat(segmentCurvePoints)\n }\n \n return result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"viewof tension_KochanekBartelsSpline = slider({ min: -5, max: 1, title: 'Tension' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"viewof bias_KochanekBartelsSpline = slider({ min: -5, max: 5, title: 'Bias' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewof continuity_KochanekBartelsSpline = slider({ min: -5, max: 5, title: 'Continuity' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof input_closedKochanekBartelsSpline = checkbox({\n options: [\n { value: 'checked', label: 'Zárt görbe' }\n ],\n value: 'checked'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"viewof input_showKochanekBartelsSplineControlPolygon = 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":669,"value":"viewof input_showKochanekBartelsSplineTangents = checkbox({\n options: [\n { value: 'unchecked', label: 'Érintővektorok megjelenítése' }\n ],\n value: 'checked'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`# Függelék`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"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":24,"value":"regl = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"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":28,"value":"import {\n checkbox,\n slider\n} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$$styling.css.twoColumnContainer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$$styling.css.figure","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$$styling.css.plot","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"mutable cp_SingleCardinalSegment = [\n glMatrix.vec2.fromValues(125, 385),\n glMatrix.vec2.fromValues(177, 235),\n glMatrix.vec2.fromValues(294, 235),\n glMatrix.vec2.fromValues(330, 385)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"mutable cp_CardinalSpline = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"mutable cp_KochanekBartelsSpline = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 30:"$2f:body"