Reflect images

From JSXGraph Wiki
Revision as of 06:01, 16 September 2024 by A WASSERMANN (talk | contribs)

<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>