Bezier curves II: Difference between revisions

From JSXGraph Wiki
(New page: The red points are connected by a cubic Bezier curve. The blue points are the control points. <jsxgraph width="600" height="600"> var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4...)
 
No edit summary
 
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
The red points are connected by a cubic Bezier curve. The blue points are the control points.
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.
<jsxgraph width="600" height="600">
<jsxgraph width="600" height="600">
JXG.Options.renderer = "canvas";
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4],keepaspectratio:true,axis:true});
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4],keepaspectratio:true,axis:true});


var p = [];
var p = []; l = [], m= [];


brd.suspendUpdate();
col = 'red';  
col = 'red';  
p.push(brd.createElement('point',[2,1],{strokeColor:col,fillColor:col}));        // data point
p.push(brd.create('point',[2,1],{strokeColor:col,fillColor:col}));        // data point
col = 'blue';  
col = 'blue';  
p.push(brd.createElement('point',[0.75,2.5],{strokeColor:col,fillColor:col}));  // control point
p.push(brd.create('point',[0.75,2.5],{strokeColor:col,fillColor:col}));  // control point
p.push(brd.createElement('point',[-0.3,0.3],{strokeColor:col,fillColor:col}));  // control point
p.push(brd.create('point',[-1.5,2.4],{strokeColor:col,fillColor:col}));  // control point


col = 'red';  
col = 'red';  
p.push(brd.createElement('point',[-3,1],{strokeColor:col,fillColor:col}));      // data point
p.push(brd.create('point',[-3,1],{strokeColor:col,fillColor:col}));      // data point
col = 'blue';  
 
p.push(brd.createElement('point',[-0.75,-2.5],{strokeColor:col,fillColor:col})); // control point
l.push(brd.create('segment',[p[0],p[1]],{strokeOpacity:0.5}));
p.push(brd.createElement('point',[1.5,-2.8],{strokeColor:col,fillColor:col}));   // control point
l.push(brd.create('segment',[p[1],p[2]],{strokeOpacity:0.5}));
l.push(brd.create('segment',[p[2],p[3]],{strokeOpacity:0.5}));
 
col = 'black';
m.push(brd.create('midpoint',[l[0]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.create('midpoint',[l[1]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.create('midpoint',[l[2]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
 
l.push(brd.create('segment',[m[0],m[1]],{strokeOpacity:0.5}));
l.push(brd.create('segment',[m[1],m[2]],{strokeOpacity:0.5}));
 
m.push(brd.create('midpoint',[l[3]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.create('midpoint',[l[4]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
 
l.push(brd.create('segment',[m[3],m[4]],{strokeOpacity:0.5}));
m.push(brd.create('midpoint',[l[5]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));


col = 'red';
p.push(brd.createElement('point',[2,-0.5],{strokeColor:col,fillColor:col}));    // data point


var c = brd.createElement('curve', JXG.Math.Numerics.bezier(p), {strokecolor:'blue', strokeOpacity:0.6, strokeWidth:5});  
var c = brd.create('curve', JXG.Math.Numerics.bezier(p), {strokecolor:'blue', strokeOpacity:0.6, strokeWidth:5});
brd.unsuspendUpdate();
</jsxgraph>
</jsxgraph>


===The underlying JavaScript code===
===The underlying JavaScript code===
<source lang="javascript">
<source lang="javascript">
JXG.Options.renderer = "canvas";
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.create('point',[2,1],{strokeColor:col,fillColor:col}));        // data point
col = 'blue';
p.push(brd.create('point',[0.75,2.5],{strokeColor:col,fillColor:col}));  // control point
p.push(brd.create('point',[-1.5,2.4],{strokeColor:col,fillColor:col}));  // control point
col = 'red';
p.push(brd.create('point',[-3,1],{strokeColor:col,fillColor:col}));      // data point
l.push(brd.create('segment',[p[0],p[1]],{strokeOpacity:0.5}));
l.push(brd.create('segment',[p[1],p[2]],{strokeOpacity:0.5}));
l.push(brd.create('segment',[p[2],p[3]],{strokeOpacity:0.5}));
col = 'black';
m.push(brd.create('midpoint',[l[0]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.create('midpoint',[l[1]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.create('midpoint',[l[2]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
l.push(brd.create('segment',[m[0],m[1]],{strokeOpacity:0.5}));
l.push(brd.create('segment',[m[1],m[2]],{strokeOpacity:0.5}));
m.push(brd.create('midpoint',[l[3]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.create('midpoint',[l[4]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
l.push(brd.create('segment',[m[3],m[4]],{strokeOpacity:0.5}));
m.push(brd.create('midpoint',[l[5]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
var c = brd.create('curve', JXG.Math.Numerics.bezier(p), {strokecolor:'blue', strokeOpacity:0.6, strokeWidth:5});
brd.unsuspendUpdate();
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Curves]]
[[Category:Curves]]
[[Category:Interpolation]]

Latest revision as of 09:18, 18 January 2021

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

JXG.Options.renderer = "canvas";
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.create('point',[2,1],{strokeColor:col,fillColor:col}));        // data point
col = 'blue'; 
p.push(brd.create('point',[0.75,2.5],{strokeColor:col,fillColor:col}));   // control point
p.push(brd.create('point',[-1.5,2.4],{strokeColor:col,fillColor:col}));   // control point

col = 'red'; 
p.push(brd.create('point',[-3,1],{strokeColor:col,fillColor:col}));       // data point

l.push(brd.create('segment',[p[0],p[1]],{strokeOpacity:0.5}));
l.push(brd.create('segment',[p[1],p[2]],{strokeOpacity:0.5}));
l.push(brd.create('segment',[p[2],p[3]],{strokeOpacity:0.5}));

col = 'black'; 
m.push(brd.create('midpoint',[l[0]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.create('midpoint',[l[1]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.create('midpoint',[l[2]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));

l.push(brd.create('segment',[m[0],m[1]],{strokeOpacity:0.5}));
l.push(brd.create('segment',[m[1],m[2]],{strokeOpacity:0.5}));

m.push(brd.create('midpoint',[l[3]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
m.push(brd.create('midpoint',[l[4]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));

l.push(brd.create('segment',[m[3],m[4]],{strokeOpacity:0.5}));
m.push(brd.create('midpoint',[l[5]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));


var c = brd.create('curve', JXG.Math.Numerics.bezier(p), {strokecolor:'blue', strokeOpacity:0.6, strokeWidth:5}); 
brd.unsuspendUpdate();