<jsxgraph width="600" height="500">
(function(){
var board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 13, -2.5],
grid: true
});
var p0, p1, p2, p3, p4, p5,
l1, l2,
im1, im2, im3,
t1, t2,
imurl = "./uccellino.jpg",
X, Y, W, H; // Functions defining the position, width and height of the original image.

// Define two line through four points
p0 = board.create('point', [2, -2]);
p1 = board.create('point', [2, 1]);
p2 = board.create('point', [10, -1]);

l1 = board.create('line', [p0, p1]);
l2 = board.create('line', [p1, p2]);

p4 = board.create('point', [-2, -2]);
p5 = board.create('point', [1, 0]);

X = function () { return Math.min(p4.X(), p5.X()); };
Y = function () { return Math.min(p4.Y(), p5.Y()); };
W = function () { return Math.abs(p5.X() - p4.X()); };
H = function () { return Math.abs(p5.Y() - p4.Y()); };

im1 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });
im2 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });
im3 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });

t1 = board.create('transform', [l1], { type: 'reflect' });
t2 = board.create('transform', [l2], { type: 'reflect' });

// Reflect im2 on l1
t1.bindTo(im2);

// Reflect im3 on l1 and on l2
t1.bindTo(im3);
t2.bindTo(im3);

board.update();
})();
</jsxgraph>

===The JavaScript code===
Here is the complete code to accomplish this behaviour.
<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 13, -2.5],
grid: true
});
var p0, p1, p2, p3, p4, p5,
l1, l2,
im1, im2, im3,
t1, t2,
imurl = "./uccellino.jpg",
X, Y, W, H; // Functions defining the position, width and height of the original image.

// Define two line through four points
p0 = board.create('point', [2, -2]);
p1 = board.create('point', [2, 1]);
p2 = board.create('point', [10, -1]);

l1 = board.create('line', [p0, p1]);
l2 = board.create('line', [p1, p2]);

p4 = board.create('point', [-2, -2]);
p5 = board.create('point', [1, 0]);

X = function () { return Math.min(p4.X(), p5.X()); };
Y = function () { return Math.min(p4.Y(), p5.Y()); };
W = function () { return Math.abs(p5.X() - p4.X()); };
H = function () { return Math.abs(p5.Y() - p4.Y()); };

im1 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });
im2 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });
im3 = board.create('image', [imurl, [X, Y], [W, H]], { opacity: 0.7 });

t1 = board.create('transform', [l1], { type: 'reflect' });
t2 = board.create('transform', [l2], { type: 'reflect' });

// Reflect im2 on l1
t1.bindTo(im2);

// Reflect im3 on l1 and on l2
t1.bindTo(im3);
t2.bindTo(im3);

board.update();
</source>

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

Reflect images

2024-09-16T06:02:02Z

A WASSERMANN: Undo revision 7671 by A WASSERMANN (talk)

<jsxgraph width="600" height="500">
(function(){
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,13,-2.5], grid:true});
var p0, p1, p2, p3, p5,
l1, l2,
im1, im2, im3,
t1, t2,
imurl = "/distrib/images/uccellino.jpg",
X, Y, W, H; // Functions defining the position, width and height of the original image.

// Define two line through four points
p0 = brd.create('point', [2,-2]);
p1 = brd.create('point', [2,1]);
p2 = brd.create('point', [10,-1]);

l1 = brd.create('line', [p0, p1]);
l2 = brd.create('line', [p1, p2]);

p4 = brd.create('point', [-2,-2]);
p5 = brd.create('point', [1,0]);

X = function(){ return Math.min(p4.X(), p5.X()); };
Y = function(){ return Math.min(p4.Y(), p5.Y()); };
W = function(){ return Math.abs(p5.X() -p4.X()); };
H = function(){ return Math.abs(p5.Y() -p4.Y()); };

im1 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});
im2 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});
im3 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});

t1 = brd.create('transform', [l1], {type:'reflect'});
t2 = brd.create('transform', [l2], {type:'reflect'});

// Reflect im2 on l1
t1.bindTo(im2);

// Reflect im3 on l1 and on l2
t1.bindTo(im3);
t2.bindTo(im3);

brd.update();

})();
</jsxgraph>

===The JavaScript code===
Here is the complete code to accomplish this behaviour.
<source lang="javascript">
(function(){
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,13,-2.5], grid:true});
var p0, p1, p2, p3, p5,
l1, l2,
im1, im2, im3,
t1, t2,
imurl = "/distrib/images/uccellino.jpg",
X, Y, W, H; // Functions defining the position, width and height of the original image.

// Define two line through four points
p0 = brd.create('point', [2,-2]);
p1 = brd.create('point', [2,1]);
p2 = brd.create('point', [10,-1]);

l1 = brd.create('line', [p0, p1]);
l2 = brd.create('line', [p1, p2]);

p4 = brd.create('point', [-2,-2]);
p5 = brd.create('point', [1,0]);

X = function(){ return Math.min(p4.X(), p5.X()); };
Y = function(){ return Math.min(p4.Y(), p5.Y()); };
W = function(){ return Math.abs(p5.X() -p4.X()); };
H = function(){ return Math.abs(p5.Y() -p4.Y()); };

im1 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});
im2 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});
im3 = brd.create('image',[imurl, [X, Y], [W, H]], {opacity:0.7});

t1 = brd.create('transform', [l1], {type:'reflect'});
t2 = brd.create('transform', [l2], {type:'reflect'});

// Reflect im2 on l1
t1.bindTo(im2);

// Reflect im3 on l1 and on l2
t1.bindTo(im3);
t2.bindTo(im3);

brd.update();

})();
</source>

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

2023-11-29T07:56:54Z

A WASSERMANN:

<html>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
</html>
This example uses MathJax to render mathematical text.

$\int x^2$.

\[\int x^2 \]

''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''

The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work.

Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.
<jsxgraph>
var brd, k;
JXG.Options.text.useMathJax = true;
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});
brd.create('text',[-4,7,
function() {
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
}], {fontSize:24});
</jsxgraph>

===The underlying JavaScript code===
The first step is to include the freely available MathJax JavaScript library (in addition to the JSXGraph library):
<source lang="xml">
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
</source>

The second step is to enable MathJax rendering in the JSXGraph options:
<source lang="javascript">
JXG.Options.text.useMathJax = true;
</source>

To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.
<source lang="javascript">
brd.create('text',[-4,15,
function() {
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
}], {fontSize:24});
</source>

The complete program code looks like this:
<source lang="javascript">
var brd, k;
JXG.Options.text.useMathJax = true;
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});
brd.create('text',[-4,15,
function() {
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';
}]);
</source>

[[Category:Examples]]
[[Category:Text]]