Bezier curves II - Revision history

A WASSERMANN at 09:18, 18 January 2021

2021-01-18T09:18:00Z

Michael at 12:35, 7 July 2011

2011-07-07T12:35:25Z

← Older revision		Revision as of 12:35, 7 July 2011
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});

A WASSERMANN at 11:21, 29 July 2010

2010-07-29T11:21:30Z

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

A WASSERMANN at 11:35, 28 September 2009

2009-09-28T11:35:54Z

@@ Line 7: / Line 7: @@
 var p = []; l = [], m= [];
 col = 'red';
 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});
 </jsxgraph>
 ===The underlying JavaScript code===
 <source lang="javascript">
 </source>
 [[Category:Examples]]
 [[Category:Curves]]

A WASSERMANN at 11:21, 28 September 2009

2009-09-28T11:21:03Z

← Older revision		Revision as of 11:21, 28 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.

	Here, the Bezier curve together with its scaffolds is shown.		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">
	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});

A WASSERMANN at 11:20, 28 September 2009

2009-09-28T11:20:21Z

← Older revision		Revision as of 11:20, 28 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.

			Here, the Bezier curve together with its scaffolds is shown.
	<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});

A WASSERMANN at 11:18, 28 September 2009

2009-09-28T11:18:41Z

@@ Line 19: / Line 19: @@
 col = 'black';
-m.push(brd.createElement('midpoint',[l[0]],{face:'o',size:2,strokeColor:col,fillColor:col}));
+m.push(brd.createElement('midpoint',[l[0]],{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});

A WASSERMANN at 11:16, 28 September 2009

2009-09-28T11:16:57Z

← Older revision		Revision as of 11:16, 28 September 2009
Line 3:		Line 3:
	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 = []; l = [];		var p = []; l = [], m= [];

	col = 'red';		col = 'red';
Line 9:		Line 9:
	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})); // control point
	p.push(brd.createElement('point',[-0.3,1.3],{strokeColor:col,fillColor:col})); // control point		p.push(brd.createElement('point',[-1.5,2.4],{strokeColor:col,fillColor:col})); // control point

	col = 'red';		col = 'red';
Line 17:		Line 17:
	l.push(brd.createElement('segment',[p[1],p[2]],{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}));		l.push(brd.createElement('segment',[p[2],p[3]],{strokeOpacity:0.5}));

			col = 'black';
			m.push(brd.createElement('midpoint',[l[0]],{face:'o',size:2,strokeColor:col,fillColor:col}));

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

A WASSERMANN at 11:15, 28 September 2009

2009-09-28T11:15:04Z

← Older revision		Revision as of 11:15, 28 September 2009
Line 9:		Line 9:
	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})); // control point
	p.push(brd.createElement('point',[-0.3,0.3],{strokeColor:col,fillColor:col})); // control point		p.push(brd.createElement('point',[-0.3,1.3],{strokeColor:col,fillColor:col})); // control point

	col = 'red';		col = 'red';
Line 15:		Line 15:

	l.push(brd.createElement('segment',[p[0],p[1]],{strokeOpacity:0.5}));		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}));

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

A WASSERMANN at 11:14, 28 September 2009

2009-09-28T11:14:12Z

← Older revision		Revision as of 11:14, 28 September 2009
Line 14:		Line 14:
	p.push(brd.createElement('point',[-3,1],{strokeColor:col,fillColor:col})); // data point		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[0],p[1]],{strokeOpacity:0.5}));

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

← Older revision		Revision as of 09:18, 18 January 2021
Line 10:		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 43:		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 49:		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>