Difference between revisions of "Bezier curves II"

From JSXGraph Wiki
Jump to navigationJump to search
Line 7: Line 7:
 
var p = []; l = [], m= [];
 
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.createElement('point',[2,1],{strokeColor:col,fillColor:col}));        // data point
Line 36: Line 37:
  
 
var c = brd.createElement('curve', JXG.Math.Numerics.bezier(p), {strokecolor:'blue', strokeOpacity:0.6, strokeWidth:5});  
 
var c = brd.createElement('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">
 +
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();
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Curves]]
 
[[Category:Curves]]

Revision as of 12:35, 28 September 2009

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();