Difference between revisions of "Bezier curves II"

From JSXGraph Wiki
Jump to navigationJump to search
 
(One intermediate revision by one other user not shown)
Line 3: Line 3:
 
Here, the Bezier curve together with its scaffolds is shown. The black points are always the midpoints of their line segment.
 
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});
  
Line 9: Line 10:
 
brd.suspendUpdate();
 
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',[-1.5,2.4],{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
  
l.push(brd.createElement('segment',[p[0],p[1]],{strokeOpacity:0.5}));
+
l.push(brd.create('segment',[p[0],p[1]],{strokeOpacity:0.5}));
l.push(brd.createElement('segment',[p[1],p[2]],{strokeOpacity:0.5}));
+
l.push(brd.create('segment',[p[1],p[2]],{strokeOpacity:0.5}));
l.push(brd.createElement('segment',[p[2],p[3]],{strokeOpacity:0.5}));
+
l.push(brd.create('segment',[p[2],p[3]],{strokeOpacity:0.5}));
  
 
col = 'black';  
 
col = 'black';  
m.push(brd.createElement('midpoint',[l[0]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
+
m.push(brd.create('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.create('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:''}));
+
m.push(brd.create('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.create('segment',[m[0],m[1]],{strokeOpacity:0.5}));
l.push(brd.createElement('segment',[m[1],m[2]],{strokeOpacity:0.5}));
+
l.push(brd.create('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.create('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:''}));
+
m.push(brd.create('midpoint',[l[4]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
  
l.push(brd.createElement('segment',[m[3],m[4]],{strokeOpacity:0.5}));
+
l.push(brd.create('segment',[m[3],m[4]],{strokeOpacity:0.5}));
m.push(brd.createElement('midpoint',[l[5]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
+
m.push(brd.create('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});  
+
var c = brd.create('curve', JXG.Math.Numerics.bezier(p), {strokecolor:'blue', strokeOpacity:0.6, strokeWidth:5});  
 
brd.unsuspendUpdate();
 
brd.unsuspendUpdate();
 
</jsxgraph>
 
</jsxgraph>
Line 42: Line 43:
 
===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 brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4],keepaspectratio:true,axis:true});
  
Line 48: Line 50:
 
brd.suspendUpdate();
 
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',[-1.5,2.4],{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
  
l.push(brd.createElement('segment',[p[0],p[1]],{strokeOpacity:0.5}));
+
l.push(brd.create('segment',[p[0],p[1]],{strokeOpacity:0.5}));
l.push(brd.createElement('segment',[p[1],p[2]],{strokeOpacity:0.5}));
+
l.push(brd.create('segment',[p[1],p[2]],{strokeOpacity:0.5}));
l.push(brd.createElement('segment',[p[2],p[3]],{strokeOpacity:0.5}));
+
l.push(brd.create('segment',[p[2],p[3]],{strokeOpacity:0.5}));
  
 
col = 'black';  
 
col = 'black';  
m.push(brd.createElement('midpoint',[l[0]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
+
m.push(brd.create('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.create('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:''}));
+
m.push(brd.create('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.create('segment',[m[0],m[1]],{strokeOpacity:0.5}));
l.push(brd.createElement('segment',[m[1],m[2]],{strokeOpacity:0.5}));
+
l.push(brd.create('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.create('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:''}));
+
m.push(brd.create('midpoint',[l[4]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
  
l.push(brd.createElement('segment',[m[3],m[4]],{strokeOpacity:0.5}));
+
l.push(brd.create('segment',[m[3],m[4]],{strokeOpacity:0.5}));
m.push(brd.createElement('midpoint',[l[5]],{face:'o',size:1,strokeColor:col,fillColor:col, name:''}));
+
m.push(brd.create('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});  
+
var c = brd.create('curve', JXG.Math.Numerics.bezier(p), {strokecolor:'blue', strokeOpacity:0.6, strokeWidth:5});  
 
brd.unsuspendUpdate();
 
brd.unsuspendUpdate();
 +
 
</source>
 
</source>
  

Latest revision as of 11: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();