Bezier curves

From JSXGraph Wiki
Revision as of 11:21, 29 July 2010 by A WASSERMANN (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

The red points are connected by a cubic Bezier curve. The blue points are the control points.

The underlying JavaScript code

var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4],keepaspectratio:true,axis:true});

var p = [];

var 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',[-0.3,0.3],{strokeColor:col,fillColor:col}));   // control point

col = 'red'; 
p.push(brd.create('point',[-3,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.8],{strokeColor:col,fillColor:col}));   // control point

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

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

var addSegment = function() {
   brd.suspendUpdate();
   col = 'blue'; 
   p.push(brd.create('point',[Math.random()*8-4,Math.random()*8-4],
           {strokeColor:col,fillColor:col})); // control point
   p.push(brd.create('point',[Math.random()*8-4,Math.random()*8-4],
           {strokeColor:col,fillColor:col}));   // control point
   col = 'red'; 
   p.push(brd.create('point',[Math.random()*8-4,Math.random()*8-4],
           {strokeColor:col,fillColor:col}));     // data point
   brd.unsuspendUpdate();
};

var removeSegment = function() {
   brd.suspendUpdate();

   if (p.length>4) {
       brd.removeObject(p[p.length-1]);
       brd.removeObject(p[p.length-2]);
       brd.removeObject(p[p.length-3]);
       p.splice(p.length-3,3);
   }
   brd.unsuspendUpdate();
};