B-splines: Difference between revisions
From JSXGraph Wiki
| A WASSERMANN (talk | contribs)  New page: The points are connected by a cubic B-spline curve (i.e. order=4).  <html><form> <input type="button" value="Add segment" onClick="addSegment();"> <input type="button" value="Remove last s... | A WASSERMANN (talk | contribs) No edit summary | ||
| (8 intermediate revisions by the same user not shown) | |||
| Line 7: | Line 7: | ||
| 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 = [], col = 'red';   | ||
| p.push(brd.create('point',[2,1],{strokeColor:col,fillColor:col}));   | p.push(brd.create('point',[2,1],{strokeColor:col,fillColor:col}));   | ||
| p.push(brd.create('point',[0.75,2.5],{strokeColor:col,fillColor:col}));   | p.push(brd.create('point',[0.75,2.5],{strokeColor:col,fillColor:col}));   | ||
| Line 32: | Line 30: | ||
|     if (p.length>2) { |     if (p.length>2) { | ||
|         brd.removeObject(p[p.length-1]); |         brd.removeObject(p[p.length-1]);  // remove the last point from the list of objects | ||
|         p.splice(p.length-1,1); |         p.splice(p.length-1,1);           // remove the last point from the point array. | ||
|     } |     } | ||
|     brd.unsuspendUpdate(); |     brd.unsuspendUpdate(); | ||
| }; | }; | ||
| </jsxgraph> | </jsxgraph> | ||
| Line 44: | Line 41: | ||
| 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 = [], col = 'red';  | ||
| p.push(brd.create('point',[2,1],{strokeColor:col,fillColor:col}));  | |||
| p.push(brd.create('point',[0.75,2.5],{strokeColor:col,fillColor:col}));  | |||
| p.push(brd.create('point',[-0.3,0.3],{strokeColor:col,fillColor:col}));  | |||
| p.push(brd.create('point',[-3,1],{strokeColor:col,fillColor:col}));       | |||
| p.push(brd.create('point',[-0.75,-2.5],{strokeColor:col,fillColor:col})); | |||
| p.push(brd.create('point',[1.5,-2.8],{strokeColor:col,fillColor:col}));   | |||
| p.push(brd.create('point',[2,-0.5],{strokeColor:col,fillColor:col}));   | |||
| var c = brd.create('curve', JXG.Math.Numerics.bspline(p,4),   | |||
| var c = brd.create('curve', JXG.Math.Numerics. | |||
|                 {strokecolor:'blue', strokeOpacity:0.6, strokeWidth:5});   |                 {strokecolor:'blue', strokeOpacity:0.6, strokeWidth:5});   | ||
| var addSegment = function() { | var addSegment = function() { | ||
|     brd.suspendUpdate(); |     brd.suspendUpdate(); | ||
|     p.push(brd.create('point',[Math.random()*8-4,Math.random()*8-4], |     p.push(brd.create('point',[Math.random()*8-4,Math.random()*8-4], | ||
|             {strokeColor:col,fillColor:col}));  |             {strokeColor:col,fillColor:col}));   | ||
|     brd.unsuspendUpdate(); |     brd.unsuspendUpdate(); | ||
| }; | }; | ||
| Line 80: | Line 63: | ||
|     brd.suspendUpdate(); |     brd.suspendUpdate(); | ||
|     if (p.length> |     if (p.length>2) { | ||
|         brd.removeObject(p[p.length-1]); |         brd.removeObject(p[p.length-1]);  // remove the last point from the list of objects | ||
|         p.splice(p.length-1,1);           // remove the last point from the point array. | |||
|         p.splice(p.length- | |||
|     } |     } | ||
|     brd.unsuspendUpdate(); |     brd.unsuspendUpdate(); | ||
Latest revision as of 12:11, 12 January 2011
The points are connected by a cubic B-spline curve (i.e. order=4).
The underlying JavaScript code
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-4,4,4,-4],keepaspectratio:true,axis:true});
var p = [], col = 'red'; 
p.push(brd.create('point',[2,1],{strokeColor:col,fillColor:col})); 
p.push(brd.create('point',[0.75,2.5],{strokeColor:col,fillColor:col})); 
p.push(brd.create('point',[-0.3,0.3],{strokeColor:col,fillColor:col})); 
p.push(brd.create('point',[-3,1],{strokeColor:col,fillColor:col}));      
p.push(brd.create('point',[-0.75,-2.5],{strokeColor:col,fillColor:col}));
p.push(brd.create('point',[1.5,-2.8],{strokeColor:col,fillColor:col}));  
p.push(brd.create('point',[2,-0.5],{strokeColor:col,fillColor:col})); 
var c = brd.create('curve', JXG.Math.Numerics.bspline(p,4), 
               {strokecolor:'blue', strokeOpacity:0.6, strokeWidth:5}); 
var addSegment = function() {
   brd.suspendUpdate();
   p.push(brd.create('point',[Math.random()*8-4,Math.random()*8-4],
           {strokeColor:col,fillColor:col})); 
   brd.unsuspendUpdate();
};
var removeSegment = function() {
   brd.suspendUpdate();
   if (p.length>2) {
       brd.removeObject(p[p.length-1]);  // remove the last point from the list of objects
       p.splice(p.length-1,1);           // remove the last point from the point array.
   }
   brd.unsuspendUpdate();
};
