Reflect images: Difference between revisions

From JSXGraph Wiki
No edit summary
Tag: Reverted
(Undo revision 7671 by A WASSERMANN (talk))
Tag: Undo
Line 1: Line 1:
<jsxgraph width="600" height="500">
<jsxgraph width="600" height="500">
(function(){
(function(){
        var board = JXG.JSXGraph.initBoard('jxgbox', {
  var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,13,-2.5], grid:true});
            boundingbox: [-5, 5, 13, -2.5],
  var p0, p1, p2, p3, p5,
            grid: true
      l1, l2,
        });
      im1, im2, im3,  
        var p0, p1, p2, p3, p4, p5,
      t1, t2,
            l1, l2,
      imurl = "/distrib/images/uccellino.jpg",
            im1, im2, im3,
      X, Y, W, H;          // Functions defining the position, width and height of the original image.
            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
  // Define two line through four points
        p0 = board.create('point', [2, -2]);
  p0 = brd.create('point', [2,-2]);  
        p1 = board.create('point', [2, 1]);
  p1 = brd.create('point', [2,1]);  
        p2 = board.create('point', [10, -1]);
  p2 = brd.create('point', [10,-1]);  


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


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


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


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


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


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


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


        board.update();
  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();


})();
})();

Revision as of 06:02, 16 September 2024

The JavaScript code

Here is the complete code to accomplish this behaviour.

(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();

})();