CODEWITHSUNDEEP
javascriptgeometryalgebrajsxgraph
nnyby
nnyby

Reputation: 4668

How do I find the Y-intercept of a Functiongraph/Curve in jsxgraph?

I have a Functiongraph line defined like this:

const f1 = function(x) {
    const slope = me.options.gLine1Slope;
    return (x - 2.5) * slope + 2.5;
};

this.l1 = this.board.create('functiongraph', [f1, -30, 30], {
    recursionDepthLow: 8,
    recursionDepthHigh: 15
});

this.l1.setPosition(window.JXG.COORDS_BY_USER, [
    forceFloat(this.options.gLine1OffsetX),
    forceFloat(this.options.gLine1OffsetY)
]);

I'm aware that Functiongraph is just a wrapper for Curve, so I've been reading through both API docs.

I'm manually positioning this line based on these offset values because it can be dragged around the plane by the user.

I can get a value close to the Y-intercept, like this:

f1(0) + (this.options.gLine1OffsetY - this.options.gLine1OffsetX)

But it's not quite right, after this line is dragged around a bit. Can anyone give some guidance on how to get the Y-intercept for this curve? I suppose I can just iterate through the data array of points along this curve, and pick the one where Y is closest to 0. I was just hoping there is a more straightforward way as well, though.

Upvotes: 0

Views: 185

Answers (1)

Alfred Wassermann
Alfred Wassermann

Reputation: 2323

You are right. Getting the y-intercept of the function graph after dragging it around freely is not easy. The reason is that dragging objects is mostly implemented using projective transformations. This makes it complicated to get the y-intercept of the curve which is visible at the moment. The easiest approach I can think of for the moment is to intersect the curve with the vertical axis and get the position of that point. Here is a slighlty modified version of your example:

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});

var me = {
    gLine1Slope:2,
    gLine1OffsetX: 1,
    gLine1OffsetY: -1
};

const f1 = function(x) {
    const slope = me.gLine1Slope;
    return x * slope;
};

var l1 = board.create('functiongraph', [f1, -30, 30], {fixed: false});
var p = board.create('intersection', [l1, board.defaultAxes.y], {
            withLabel: false, visible: false});

// Now, we can move the curve and get the y-intercept 
// in p.Y()

l1.setPosition(window.JXG.COORDS_BY_USER, [
    me.gLine1OffsetX,
    me.gLine1OffsetY
]);
board.update();

board.on('up', function(evt) {
    document.getElementById('jxg_debug').value = p.Y();
});
document.getElementById('jxg_debug').value = p.Y();

See it live at https://jsfiddle.net/3s90qx57/2/

Upvotes: 3

Related Questions