Search code examples
javascriptjsxgraph

jsxgraph: intersection between functiongraph and line disappears


I've defined an intersection between a functiongraph and a straight line in JSXGraph. When I move the straight line, the intersection updates its position as expected. But when I move the functiongraph, the intersection disappears. Do I need to do some special configuration here? Is this a bug with jsxgraph? Here's a live illustration of the problem:

http://maldive.ccnmtl.columbia.edu/js/functiongraph-intersection.html

And here's the code:

var l1 = board.create('line', [                                                                                                     
    [2.5, 2.5],                                                                                                                     
    [3.5, 3.5]                                                                                                                      
], {                                                                                                                                
    name: 'line 1',                                                                                                                 
    withLabel: true,                                                                                                                
    label: { position: 'rt', offset: [10, -20] },                                                                                   
    strokeColor: 'blue',                                                                                                            
    strokeWidth: 2,                                                                                                                 
    fixed: false                                                                                                                    
});                                                                                                                                 

var f = function(x) {                                                                                                               
    var alpha = 0.3;                                                                                                                
    return (1 - alpha) *                                                                                                            
        (1.4 *                                                                                                                      
         1.6 ** alpha) *                                                                                                            
        (x ** -alpha);                                                                                                              
};                                                                                                                                  

var l2 = board.create('functiongraph', [f], {                                                                                       
    name: 'line 2',                                                                                                                 
    withLabel: true,                                                                                                                
    strokeWidth: 2,                                                                                                                 
    strokeColor: 'orange',                                                                                                          
    fixed: false                                                                                                                    
});                                                                                                                                 

var i = board.create('intersection', [l1, l2, 0], {                                                                                 
    name: 'intersection',                                                                                                           
    fixed: true,                                                                                                                    
    showInfobox: false                                                                                                              
}); 

Solution

  • Yes, indeed this is a bug in JSXGraph. In version 0.99.6 and before, the intersection between a line and a continuous curve is determined by a root finding algorithm. Now, the problem is that dragging a curve is realized by applying a transformation on the curve points (which are the output of the plotting algorithm). This transformation is not taken into account in the root finding algorithm, because the function term is used instead.

    In contrast, the intersection between two curves is determined using the points that are the output of the curve plotting algorithm. Here, the transformation has already been applied. This is why intersections work for the curve y = x.

    The sources now contain a bug fix which will be available in today's nightly build. From now, on the intersection between lines and curves is done as for curves / curves intersections. There will be a small loss in precision, but this will not be visible.

    Thank you for pointing this out!