Intersection of functiongraphs - Revision history

TomBerend: Simplify from JSX.Math.Clip to curveintersection, but also the old code shaded the WRONG area.

2024-07-18T18:54:05Z

Simplify from JSX.Math.Clip to curveintersection, but also the old code shaded the WRONG area.

@@ Line 7: / Line 7: @@
 var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false});
 var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false});
+var clip = board.create('curveintersection', [curve1, curve2], { strokeWidth: 2, fillColor: 'yellow', fillOpacity: 0.3 });
 </jsxgraph>
@@ Line 43: / Line 21: @@
 var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false});
-var clip_path = board.create('curve', [[], []], {strokeWidth: 0, fillColor: 'yellow', fillOpacity: 0.6});
+var clip = board.create('curveintersection', [curve1, curve2],
-clip_path.updateDataArray = function() {
+         {strokeWidth: 2, fillColor: 'yellow', fillOpacity: 0.3 });
 </source>
 [[Category:Examples]]
 [[Category:Curves]]

A WASSERMANN at 09:34, 28 March 2020

2020-03-28T09:34:44Z

← Older revision		Revision as of 09:34, 28 March 2020
Line 5:		Line 5:
	});		});

	var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false~~, fillColor: 'blue', fillOpacity: 0.0~~});		var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false});
	var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false~~, fillColor: 'red', fillOpacity: 0.0~~});		var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false});

	var clip_path = board.create('curve', [[], []], {strokeWidth: 0, fillColor: 'yellow', fillOpacity: 0.6});		var clip_path = board.create('curve', [[], []], {strokeWidth: 0, fillColor: 'yellow', fillOpacity: 0.6});
Line 40:		Line 40:
	});		});

	var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false~~, fillColor: 'blue', fillOpacity: 0.0~~});		var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false});
	var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false~~, fillColor: 'red', fillOpacity: 0.0~~});		var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false});

	var clip_path = board.create('curve', [[], []], {strokeWidth: 0, fillColor: 'yellow', fillOpacity: 0.6});		var clip_path = board.create('curve', [[], []], {strokeWidth: 0, fillColor: 'yellow', fillOpacity: 0.6});

A WASSERMANN at 09:33, 28 March 2020

2020-03-28T09:33:58Z

@@ Line 23: / Line 23: @@
      curve2.numberPoints += 2;
-     var a = JXG.Math.Clip.greinerHormann(curve1, curve2, 'intersection', this.board);
+     var a = JXG.Math.Clip.intersection(curve1, curve2, this.board);
      this.dataX = a[0];
      this.dataY = a[1];
@@ Line 34: / Line 34: @@
 ==The underlying JavaScript code==
-<source lang="javascript"></source>
+<source lang="javascript">
 [[Category:Examples]]
 [[Category:Curves]]

A WASSERMANN at 09:33, 28 March 2020

2020-03-28T09:33:27Z

← Older revision		Revision as of 09:33, 28 March 2020
Line 23:		Line 23:
	curve2.numberPoints += 2;		curve2.numberPoints += 2;

	var a = JXG.Math.Clip.~~intersection~~(curve1, curve2, this.board);		var a = JXG.Math.Clip.greinerHormann(curve1, curve2, 'intersection', this.board);
	this.dataX = a[0];		this.dataX = a[0];
	this.dataY = a[1];		this.dataY = a[1];

A WASSERMANN at 09:32, 28 March 2020

2020-03-28T09:32:44Z

← Older revision		Revision as of 09:32, 28 March 2020
Line 7:		Line 7:
	var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false, fillColor: 'blue', fillOpacity: 0.0});		var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false, fillColor: 'blue', fillOpacity: 0.0});
	var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false, fillColor: 'red', fillOpacity: 0.0});		var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false, fillColor: 'red', fillOpacity: 0.0});
	~~//var curve2 = board.create('functiongraph', ['-x^2+4'], {strokeColor: 'black', fixed: false, fillColor: 'red', fillOpacity: 0.0});~~
	~~//var curve2 = board.create('functiongraph', ['sin(x)'], {strokeColor: 'black', fixed: false, fillColor: 'red', fillOpacity: 0.0});~~
	~~var c = board.create('circle', [[0,0], 4]);~~

	var clip_path = board.create('curve', [[], []], {strokeWidth: 0, fillColor: 'yellow', fillOpacity: 0.6});		var clip_path = board.create('curve', [[], []], {strokeWidth: 0, fillColor: 'yellow', fillOpacity: 0.6});
Line 26:		Line 23:
	curve2.numberPoints += 2;		curve2.numberPoints += 2;

	var a = JXG.Math.Clip.~~greinerHormann~~(curve1, curve2~~, 'intersection'~~, this.board);		var a = JXG.Math.Clip.intersection(curve1, curve2, this.board);
	this.dataX = a[0];		this.dataX = a[0];
	this.dataY = a[1];		this.dataY = a[1];

A WASSERMANN at 09:31, 28 March 2020

2020-03-28T09:31:58Z

← Older revision		Revision as of 09:31, 28 March 2020
Line 2:		Line 2:
	var board = JXG.JSXGraph.initBoard('jxgbox', {		var board = JXG.JSXGraph.initBoard('jxgbox', {
	axis:true,		axis:true,
	boundingbox:[-5, 10, 15, -5]		boundingbox:[-5, 10, 10, -5]
	});		});

A WASSERMANN at 09:31, 28 March 2020

2020-03-28T09:31:23Z

← Older revision		Revision as of 09:31, 28 March 2020
Line 1:		Line 1:
	<jsxgraph box="jxgbox" width="600" height="600">		<jsxgraph box="jxgbox" width="600" height="600">
	var board = JXG.JSXGraph.initBoard('~~jxgbox1~~', {		var board = JXG.JSXGraph.initBoard('jxgbox', {
	axis:true,		axis:true,
	boundingbox:[-5, 10, 15, -5]		boundingbox:[-5, 10, 15, -5]

A WASSERMANN: Created page with " var board = JXG.JSXGraph.initBoard('jxgbox1', { axis:true, boundingbox:[-5, 10, 15, -5] }); var curve1 = board.create..."

2020-03-28T09:31:10Z

Created page with "<jsxgraph box="jxgbox" width="600" height="600"> var board = JXG.JSXGraph.initBoard('jxgbox1', { axis:true, boundingbox:[-5, 10, 15, -5] }); var curve1 = board.create..."

New page

<jsxgraph box="jxgbox" width="600" height="600">
var board = JXG.JSXGraph.initBoard('jxgbox1', {
axis:true,
boundingbox:[-5, 10, 15, -5]
});

var curve1 = board.create('functiongraph', ['x^2-2'], {strokeColor: 'blue', fixed: false, fillColor: 'blue', fillOpacity: 0.0});
var curve2 = board.create('functiongraph', ['4/x', 0.001, 20], {strokeColor: 'black', fixed: false, fillColor: 'red', fillOpacity: 0.0});
//var curve2 = board.create('functiongraph', ['-x^2+4'], {strokeColor: 'black', fixed: false, fillColor: 'red', fillOpacity: 0.0});
//var curve2 = board.create('functiongraph', ['sin(x)'], {strokeColor: 'black', fixed: false, fillColor: 'red', fillOpacity: 0.0});
var c = board.create('circle', [[0,0], 4]);

var clip_path = board.create('curve', [[], []], {strokeWidth: 0, fillColor: 'yellow', fillOpacity: 0.6});
clip_path.updateDataArray = function() {
// var a = JXG.Math.Clip.intersection(curve1, curve2, this.board);

var N = 10000000;
var infty1 = new JXG.Coords(JXG.COORDS_BY_USER, [1, 0, N], this.board);
curve1.points.push(infty1);
curve1.points.push(new JXG.Coords(JXG.COORDS_BY_USER, curve1.points[0].usrCoords, this.board));
curve1.numberPoints += 2;

var infty2 = new JXG.Coords(JXG.COORDS_BY_USER, [1, 0, -N], this.board);
curve2.points.push(infty2);
curve2.points.push(new JXG.Coords(JXG.COORDS_BY_USER, curve2.points[0].usrCoords, this.board));
curve2.numberPoints += 2;

var a = JXG.Math.Clip.greinerHormann(curve1, curve2, 'intersection', this.board);
this.dataX = a[0];
this.dataY = a[1];

};

board.update();
</jsxgraph>

==The underlying JavaScript code==

<source lang="javascript"></source>

[[Category:Examples]]
[[Category:Curves]]