Reflect images
From JSXGraph Wiki
<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();
})(); </source>