The state of implicit graphing in JSXGraph.

335 views
Skip to first unread message

sai...@gmail.com

unread,
Oct 27, 2018, 1:57:41 PM10/27/18
to JSXGraph
Hi folks, I was looking for a functionality that will allow me to plot implicit equations but I was unable to find anything.

I came across this old thread that states that implicit plotting functionality is being worked on but the thread is kinda old and I was wondering if anything came from it.

https://groups.google.com/forum/#!topic/jsxgraph/pvRgjLS6Du0

Also, if the functionality has not been implemented yet, does anyone have any advice as to what approach can I take to start implementing such a feature?

Thank you.

Alfred Wassermann

unread,
Oct 31, 2018, 9:26:06 AM10/31/18
to JSXGraph
Unfortunately, that project you mentioned was abandoned.
So, we - and the whole JSXGraph community - would be very grateful if you would start that project - maybe just for a very limited set of equations.

Problem is that the default JSXGraph renderer is SVG. That means the result of an implicit plot has to be a path.
In JSXGraph it would be a an element of type "curve" defined by a set of coordinates:
[x_1, x_2, ..., x_n], [y_1, y_2, ..., y_n].
The "easy" approach to test each pixel of the canvas if it lies approximately on the curve and paint it accordingly, will not work here.
The usual approach in this situation is to find one point on the curve and then walk through the curve from this starting point using the gradient.

If you start working on this problem, I would recommend to implement a non-interactive prototypal version without touching the JSXGraph source code.
If it works we can add this prototype to the JSXGraph source later-on easily.

Best wishes,
Alfred

ken.w...@gmail.com

unread,
Feb 15, 2019, 7:54:45 PM2/15/19
to JSXGraph
I think this is worth considering.

I found it very easy (i.e. less than an hour of work) to take implicit.js (http://shamshad-npti.github.io/scripts/implicit.js) from this fellow's quad tree marching squares example http://shamshad-npti.github.io/implicit/curve/2015/10/08/Implicit-curve/ and adapt it to use the data curve like so (replacing his CanvasPlotter with ImplicitPlotter):

var ImplicitPlotter = function(board, func)
{
var me = {};

me.board = board; me.func = func;
me.colour = "blue";
me.px = 300; me.py = 300;
me.tx = 0; me.ty = 0;
me.curves = [];

me.finish = function(segments)
{
board.create('transform', [-me.x1 * me.tx, me.y2 * me.ty], {type: 'translate'});
board.create('transform', [me.tx, -me.ty], {type: 'scale'});

var xs = [];
var ys = [];
var curves = [];

for (var i = 0; i < segments.length; i++)
{
var s = segments[i];
if (!s.lineTo && xs.length)
{
curves.push(board.create('curve', [xs, ys], {strokeWidth:1, strokeColor:me.colour}));
xs = [];
ys = [];
}

xs.push(segments[i].x);
ys.push(segments[i].y);
}
if (xs.length)
{
curves.push(board.create('curve', [xs, ys], {strokeWidth:1, strokeColor:me.colour}));
}

return curves;
}

me.update = function()
{
var bbox = board.getBoundingBox();
me.x1 = 1.2 * bbox[0]; me.x2 = 1.2 * bbox[2];
me.y1 = 1.2 * bbox[1]; me.y2 = 1.2 * bbox[3];
me.px = board.canvasWidth;
me.py = board.canvasHeight;
me.tx = me.px / (me.x2 - me.x1);
me.ty = me.py / (me.y2 - me.y1);
me.plot = new Implicit(me.func, me.finish);
me.curves = me.plot.update(me.x1, me.y1, me.x2, me.y2, me.px, me.py);
}

return me;
};

Adding in a bit of a check to see when updates are needed, and using jessie script to interpret an equation I've got implicit plotting working nicely along side the more standard cartesian, parametric and polar plots.

Ken

Hovo Menejyan

unread,
Feb 16, 2019, 11:36:19 AM2/16/19
to JSXGraph
Ken, could you please post an example of how to use this(JSFiddle maybe?) I just wasted an hour trying to make this work and I can`t figure it out.
Message has been deleted
Message has been deleted

ken.w...@gmail.com

unread,
Feb 16, 2019, 5:41:28 PM2/16/19
to JSXGraph
On Sunday, 17 February 2019 03:36:19 UTC+11, Hovo Menejyan wrote:
> Ken, could you please post an example of how to use this(JSFiddle maybe?) I just wasted an hour trying to make this work and I can`t figure it out.
>

I made a fiddle but each time I post a link the post gets deleted. :(

The link is at jsfiddle <dot> net <slash> xaczkdm0 <slash> 6 <slash>

If this is not some automated thing but a moderator is deleting the post, could you explain why?

Thanks,

Ken

michael

unread,
Feb 17, 2019, 3:14:25 AM2/17/19
to JSXGraph
Hi Ken,

they were automatically deleted by the Google Groups Spam Filter. I manually approved them (although they do not appear to be shown yet) and chose that messages from you should no longer be automatically deleted. Please let us know if it happens again.


Best regards,

Michael

Alfred Wassermann

unread,
Feb 18, 2019, 3:52:32 AM2/18/19
to JSXGraph
Very nice! 

Best wishes,
Alfred

Reply all
Reply to author
Forward
0 new messages