Bezier curves - Revision history

A WASSERMANN at 11:21, 29 July 2010

2010-07-29T11:21:05Z

← Older revision		Revision as of 11:21, 29 July 2010
Line 106:		Line 106:
	[[Category:Examples]]		[[Category:Examples]]
	[[Category:Curves]]		[[Category:Curves]]
			[[Category:Interpolation]]

A WASSERMANN at 13:20, 1 February 2010

2010-02-01T13:20:55Z

← Older revision		Revision as of 13:20, 1 February 2010
Line 10:		Line 10:

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

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

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

Line 30:		Line 30:
	brd.suspendUpdate();		brd.suspendUpdate();
	col = 'blue';		col = 'blue';
	p.push(brd.~~createElement~~('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})); // control point		{strokeColor:col,fillColor:col})); // control point
	p.push(brd.~~createElement~~('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})); // control point		{strokeColor:col,fillColor:col})); // control point
	col = 'red';		col = 'red';
	p.push(brd.~~createElement~~('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})); // data point		{strokeColor:col,fillColor:col})); // data point
	brd.unsuspendUpdate();		brd.unsuspendUpdate();
Line 61:		Line 61:

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

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

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

Line 81:		Line 81:
	brd.suspendUpdate();		brd.suspendUpdate();
	col = 'blue';		col = 'blue';
	p.push(brd.~~createElement~~('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})); // control point		{strokeColor:col,fillColor:col})); // control point
	p.push(brd.~~createElement~~('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})); // control point		{strokeColor:col,fillColor:col})); // control point
	col = 'red';		col = 'red';
	p.push(brd.~~createElement~~('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})); // data point		{strokeColor:col,fillColor:col})); // data point
	brd.unsuspendUpdate();		brd.unsuspendUpdate();

A WASSERMANN at 07:18, 29 September 2009

2009-09-29T07:18:09Z

@@ Line 60: / Line 60: @@
 var p = [];
-col = 'red';
+var col = 'red';
 p.push(brd.createElement('point',[2,1],{strokeColor:col,fillColor:col}));        // data point
 col = 'blue';
@@ Line 75: / Line 75: @@
 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.createElement('curve', JXG.Math.Numerics.bezier(p),
 </source>
 [[Category:Examples]]
 [[Category:Curves]]

A WASSERMANN at 07:16, 29 September 2009

2009-09-29T07:16:03Z

← Older revision		Revision as of 07:16, 29 September 2009
Line 10:		Line 10:

	var col = 'red';		var col = 'red';
	p.push(brd.createElement('point',[2,1],{strokeColor:col,fillColor:col~~,name:(p.length+1)~~})); // data point		p.push(brd.createElement('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~~,name:(p.length+1)~~})); // control point		p.push(brd.createElement('point',[0.75,2.5],{strokeColor:col,fillColor:col})); // control point
	p.push(brd.createElement('point',[-0.3,0.3],{strokeColor:col,fillColor:col~~,name:(p.length+1)~~})); // control point		p.push(brd.createElement('point',[-0.3,0.3],{strokeColor:col,fillColor:col})); // control point

	col = 'red';		col = 'red';
	p.push(brd.createElement('point',[-3,1],{strokeColor:col,fillColor:col~~,name:(p.length+1)~~})); // data point		p.push(brd.createElement('point',[-3,1],{strokeColor:col,fillColor:col})); // data point
	col = 'blue';		col = 'blue';
	p.push(brd.createElement('point',[-0.75,-2.5],{strokeColor:col,fillColor:col~~,name:(p.length+1)~~})); // control point		p.push(brd.createElement('point',[-0.75,-2.5],{strokeColor:col,fillColor:col})); // control point
	p.push(brd.createElement('point',[1.5,-2.8],{strokeColor:col,fillColor:col~~,name:(p.length+1)~~})); // control point		p.push(brd.createElement('point',[1.5,-2.8],{strokeColor:col,fillColor:col})); // control point

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

	var c = brd.createElement('curve', JXG.Math.Numerics.bezier(p),		var c = brd.createElement('curve', JXG.Math.Numerics.bezier(p),
Line 31:		Line 31:
	col = 'blue';		col = 'blue';
	p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],		p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],
	{strokeColor:col,fillColor:col~~,name:(p.length+1)~~})); // control point		{strokeColor:col,fillColor:col})); // control point
	p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],		p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],
	{strokeColor:col,fillColor:col~~,name:(p.length+1)~~})); // control point		{strokeColor:col,fillColor:col})); // control point
	col = 'red';		col = 'red';
	p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],		p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],
	{strokeColor:col,fillColor:col~~,name:(p.length+1)~~})); // data point		{strokeColor:col,fillColor:col})); // data point
	brd.unsuspendUpdate();		brd.unsuspendUpdate();
	};		};

A WASSERMANN at 07:15, 29 September 2009

2009-09-29T07:15:18Z

← Older revision		Revision as of 07:15, 29 September 2009
Line 22:		Line 22:

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

	var c = brd.createElement('curve', JXG.Math.Numerics.bezier(p),		var c = brd.createElement('curve', JXG.Math.Numerics.bezier(p),

A WASSERMANN at 07:15, 29 September 2009

2009-09-29T07:15:01Z

← Older revision		Revision as of 07:15, 29 September 2009
Line 10:		Line 10:

	var col = 'red';		var col = 'red';
	p.push(brd.createElement('point',[2,1],{strokeColor:col,fillColor:col,name:p.length+1})); // data point		p.push(brd.createElement('point',[2,1],{strokeColor:col,fillColor:col,name:(p.length+1)})); // data point
	col = 'blue';		col = 'blue';
	p.push(brd.createElement('point',[0.75,2.5],{strokeColor:col,fillColor:col,name:p.length+1})); // control point		p.push(brd.createElement('point',[0.75,2.5],{strokeColor:col,fillColor:col,name:(p.length+1)})); // control point
	p.push(brd.createElement('point',[-0.3,0.3],{strokeColor:col,fillColor:col,name:p.length+1})); // control point		p.push(brd.createElement('point',[-0.3,0.3],{strokeColor:col,fillColor:col,name:(p.length+1)})); // control point

	col = 'red';		col = 'red';
	p.push(brd.createElement('point',[-3,1],{strokeColor:col,fillColor:col,name:p.length+1})); // data point		p.push(brd.createElement('point',[-3,1],{strokeColor:col,fillColor:col,name:(p.length+1)})); // data point
	col = 'blue';		col = 'blue';
	p.push(brd.createElement('point',[-0.75,-2.5],{strokeColor:col,fillColor:col,name:p.length+1})); // control point		p.push(brd.createElement('point',[-0.75,-2.5],{strokeColor:col,fillColor:col,name:(p.length+1)})); // control point
	p.push(brd.createElement('point',[1.5,-2.8],{strokeColor:col,fillColor:col,name:p.length+1})); // control point		p.push(brd.createElement('point',[1.5,-2.8],{strokeColor:col,fillColor:col,name:(p.length+1)})); // control point

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

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

	var addSegment = function() {		var addSegment = function() {
Line 30:		Line 31:
	col = 'blue';		col = 'blue';
	p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],		p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],
	{strokeColor:col,fillColor:col,name:p.length+1})); // control point		{strokeColor:col,fillColor:col,name:(p.length+1)})); // control point
	p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],		p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],
	{strokeColor:col,fillColor:col,name:p.length+1})); // control point		{strokeColor:col,fillColor:col,name:(p.length+1)})); // control point
	col = 'red';		col = 'red';
	p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],		p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],
	{strokeColor:col,fillColor:col,name:p.length+1})); // data point		{strokeColor:col,fillColor:col,name:(p.length+1)})); // data point
	brd.unsuspendUpdate();		brd.unsuspendUpdate();
	};		};

A WASSERMANN at 07:13, 29 September 2009

2009-09-29T07:13:24Z

← Older revision		Revision as of 07:13, 29 September 2009
Line 10:		Line 10:

	var col = 'red';		var 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,name:p.length+1})); // data point
	col = 'blue';		col = 'blue';
	p.push(brd.createElement('point',[0.75,2.5],{strokeColor:col,fillColor:col})); // control point		p.push(brd.createElement('point',[0.75,2.5],{strokeColor:col,fillColor:col,name:p.length+1})); // control point
	p.push(brd.createElement('point',[-0.3,0.3],{strokeColor:col,fillColor:col})); // control point		p.push(brd.createElement('point',[-0.3,0.3],{strokeColor:col,fillColor:col,name:p.length+1})); // control point

	col = 'red';		col = 'red';
	p.push(brd.createElement('point',[-3,1],{strokeColor:col,fillColor:col})); // data point		p.push(brd.createElement('point',[-3,1],{strokeColor:col,fillColor:col,name:p.length+1})); // data point
	col = 'blue';		col = 'blue';
	p.push(brd.createElement('point',[-0.75,-2.5],{strokeColor:col,fillColor:col})); // control point		p.push(brd.createElement('point',[-0.75,-2.5],{strokeColor:col,fillColor:col,name:p.length+1})); // control point
	p.push(brd.createElement('point',[1.5,-2.8],{strokeColor:col,fillColor:col})); // control point		p.push(brd.createElement('point',[1.5,-2.8],{strokeColor:col,fillColor:col,name:p.length+1})); // control point

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

	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});
Line 30:		Line 30:
	col = 'blue';		col = 'blue';
	p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],		p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],
	{strokeColor:col,fillColor:col})); // control point		{strokeColor:col,fillColor:col,name:p.length+1})); // control point
	p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],		p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],
	{strokeColor:col,fillColor:col})); // control point		{strokeColor:col,fillColor:col,name:p.length+1})); // control point
	col = 'red';		col = 'red';
	p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],		p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],
	{strokeColor:col,fillColor:col})); // data point		{strokeColor:col,fillColor:col,name:p.length+1})); // data point
	brd.unsuspendUpdate();		brd.unsuspendUpdate();
	};		};

A WASSERMANN at 07:10, 29 September 2009

2009-09-29T07:10:38Z

← Older revision		Revision as of 07:10, 29 September 2009
Line 41:		Line 41:
	var removeSegment = function() {		var removeSegment = function() {
	brd.suspendUpdate();		brd.suspendUpdate();

	if (p.length>4) {		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);		p.splice(p.length-3,3);
	}		}

A WASSERMANN at 06:52, 29 September 2009

2009-09-29T06:52:32Z

← Older revision		Revision as of 06:52, 29 September 2009
Line 36:		Line 36:
	p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],		p.push(brd.createElement('point',[Math.random()8-4,Math.random()8-4],
	{strokeColor:col,fillColor:col})); // data point		{strokeColor:col,fillColor:col})); // data point
			brd.unsuspendUpdate();
			};

			var removeSegment = function() {
			brd.suspendUpdate();
			if (p.length>4) {
			p.splice(p.length-3,3);
			}
	brd.unsuspendUpdate();		brd.unsuspendUpdate();
	};		};

A WASSERMANN at 06:48, 29 September 2009

2009-09-29T06:48:29Z

← Older revision		Revision as of 06:48, 29 September 2009
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.
	<html>~~<!--~~<form>		<html><form>
	<input type="button" value="Add segment" onClick="addSegment();">		<input type="button" value="Add segment" onClick="addSegment();">
	<input type="button" value="Remove last segment" onClick="removeSegment();">		<input type="button" value="Remove last segment" onClick="removeSegment();">
	</form~~>--~~></html>		</form></html>
	<jsxgraph width="600" height="600">		<jsxgraph width="600" height="600">
	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 27:		Line 27:

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