Bezier curves II: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 81: | Line 81: | ||
[[Category:Examples]] | [[Category:Examples]] | ||
[[Category:Curves]] | [[Category:Curves]] | ||
[[Category:Interpolation]] |
Revision as of 11:21, 29 July 2010
The red points are connected by a cubic Bezier curve. The blue points are the control points.
Here, the Bezier curve together with its scaffolds is shown. The black points are always the midpoints of their line segment.
The underlying JavaScript code
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4],keepaspectratio:true,axis:true});
var p = []; l = [], m= [];
brd.suspendUpdate();
col = 'red';
p.push(brd.createElement('point',[2,1],{strokeColor:col,fillColor:col})); // data point
col = 'blue';
p.push(brd.createElement('point',[0.75,2.5],{strokeColor:col,fillColor:col})); // control point
p.push(brd.createElement('point',[-1.5,2.4],{strokeColor:col,fillColor:col})); // control point
col = 'red';
p.push(brd.createElement('point',[-3,1],{strokeColor:col,fillColor:col})); // data point
l.push(brd.createElement('segment',[p[0],p[1]],{strokeOpacity:0.5}));
l.push(brd.createElement('segment',[p[1],p[2]],{strokeOpacity:0.5}));
l.push(brd.createElement('segment',[p[2],p[3]],{strokeOpacity:0.5}));
col = 'black';
m.push(brd.createElement('midpoint',[l[0]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.createElement('midpoint',[l[1]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.createElement('midpoint',[l[2]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
l.push(brd.createElement('segment',[m[0],m[1]],{strokeOpacity:0.5}));
l.push(brd.createElement('segment',[m[1],m[2]],{strokeOpacity:0.5}));
m.push(brd.createElement('midpoint',[l[3]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.createElement('midpoint',[l[4]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
l.push(brd.createElement('segment',[m[3],m[4]],{strokeOpacity:0.5}));
m.push(brd.createElement('midpoint',[l[5]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
var c = brd.createElement('curve', JXG.Math.Numerics.bezier(p), {strokecolor:'blue', strokeOpacity:0.6, strokeWidth:5});
brd.unsuspendUpdate();