JSXGraph Wiki - User contributions [en]

Talk:Fill the intersection area of two circles

2024-07-18T19:05:17Z

TomBerend: Created page with "I think this page should be deleted. A 3-line version of this construction is found at https://jsxgraph.org/wiki/index.php?title=Intersection_of_circles"

I think this page should be deleted. A 3-line version of this construction is found at
https://jsxgraph.org/wiki/index.php?title=Intersection_of_circles

Intersection of curves II

2024-07-18T19:00:12Z

TomBerend: simplified JSX.Math.Clip to use curveintersection

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

var curve1 = board.create('curve', [
[-3, 3, 0, -3],
[3, 3, 0, 3]
],
{strokeColor: 'black', fillColor: 'none', fillOpacity: 0.8});

var curve2 = board.create('polygon', [[3, 4], [-4, 0], [-4, 4]],
{strokeColor: 'blue', fillColor: 'red', fillOpacity: 0.3});

var clip = board.create('curveintersection', [curve1, curve2],
{strokeWidth: 3, fillColor: 'yellow', fillOpacity: 0.6 });

board.update();
</jsxgraph>

==The underlying JavaScript code==

<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {
axis:true,
boundingbox:[-5, 5, 5, -5]
});

var curve1 = board.create('curve', [
[-3, 3, 0, -3],
[3, 3, 0, 3]
],
{strokeColor: 'black', fillColor: 'none', fillOpacity: 0.8});

var curve2 = board.create('polygon', [[3, 4], [-4, 0], [-4, 4]],
{strokeColor: 'blue', fillColor: 'red', fillOpacity: 0.3});

var clip = board.create('curveintersection', [curve1, curve2],
{strokeWidth: 3, fillColor: 'yellow', fillOpacity: 0.6 });
</source>

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

Intersection of functiongraphs

2024-07-18T18:54:05Z

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

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

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>

==The underlying JavaScript code==

<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {
axis:true,
boundingbox:[-5, 10, 10, -5]
});

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

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

Intersection of circles

2024-07-18T18:46:54Z

TomBerend:

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

var c1 = board.create('circle', [[-1, 1.5], 3]);
var c2 = board.create('circle', [[1, -1.5], 3]);
var clip = board.create('curveintersection', [c1, c2],
{ strokeWidth: 2, fillColor: 'yellow', fillOpacity: 0.3 });

</jsxgraph>

==The underlying JavaScript code==

<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {
axis:true,
boundingbox:[-5, 5, 5, -5]
});

var c1 = board.create('circle', [[-1, 1.5], 3]);
var c2 = board.create('circle', [[1, -1.5], 3]);
var clip = board.create('curveintersection', [c1, c2],
{ strokeWidth: 2, fillColor: 'yellow', fillOpacity: 0.3 });
</source>

[[Category:Examples]]
[[Category:Geometry]]

Intersection of curves I

2024-07-18T18:42:38Z

TomBerend: replaced complicated call to JSX.Math.Clip with simple call to 'curveintersection'

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

var p = [];
p.push(board.create('point', [0, -5]));
p.push(board.create('point', [-5, 0]));
p.push(board.create('point', [-3, 3]));

var curve1 = board.create('ellipse', p, {strokeColor: 'black'});

var curve2 = board.create('curve', [function(phi){return 4 * Math.cos(2*phi);},
[0, 0],
0, 2 * Math.PI],
{curveType:'polar', strokeColor: 'blue', strokewidth:1});

var clip = board.create('curveintersection', [curve1, curve2],
{ strokeWidth: 3, fillColor: 'yellow', fillOpacity: 0.3 });
</jsxgraph>

==The underlying JavaScript code==

<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {
axis:true,
boundingbox:[-15, 10, 10, -10]
});

var p = [];
p.push(board.create('point', [0, -5]));
p.push(board.create('point', [-5, 0]));
p.push(board.create('point', [-3, 3]));

var curve1 = board.create('ellipse', p, {strokeColor: 'black'});

var curve2 = board.create('curve', [function(phi){return 4 * Math.cos(2*phi); },
[0, 0],
0, 2 * Math.PI],
{curveType:'polar', strokeColor: 'blue', strokewidth:1});

var clip = board.create('curveintersection', [curve1, curve2],
{ strokeWidth: 3, fillColor: 'yellow', fillOpacity: 0.3 });

</source>

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