How can I plot an implicit function?

Question

I'm trying to develop an implicit plotter.
For example, if I want to draw a parable, x will vary and y will be computed for corresponding x values.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


ctx.beginPath();

// y = (x-5)*(x-5) 

var iPoints=20,
nY=0;

for (var x=-10; x<=iPoints; x++) {
    nY = ( (x-5)*(x-5) );
    ctx.lineTo(200-x, 300-nY);
}
ctx.stroke();

Or see here https://jsfiddle.net/a0gLqrvr/ But how can I plot an implicit function?
For example:
x^3 + y^3 = 3*x*y^2 - x - 1
How can I vary x and y simultaneously?
Could you show me by means of an example for some points (maybe in jsfiddle )?
Thanks in advance.

score 4 · Answer 1 · answered Mar 18 '17 at 01:14

4

To plot f(x,y)=0, use the marching squares method:

divide your region into a grid of small cells
compute the sign of f at the vertices of each cell
find where the curve crosses a cell: on edges with different signs. Use linear interpolation to find the crossing points and joint them together with a line segment.

answered Mar 18 '17 at 01:14

lhf

70,581
9
108
149

Thanks for the answer. Yes, I see, sadly in case of "implicit function", without "linear interpolation" and "marching squares", often the drawn curve will be dashed. – user3815508 Mar 19 '17 at 10:15
I'm still programming "implicit function". But sadly unsuccessful. It seems to me that you have a clue. Could you please describe your solution in more detail. Maybe you want to see my approachs, which has failed. http://stackoverflow.com/questions/43072126/how-to-find-y-for-corresponding-x-values-implicit-function-complex-number/43072826?noredirect=1 and also here http://stackoverflow.com/questions/43080688/algorithm-which-adapt-solve-the-complex-equations-implicit-function-fx-y Thank you in advance. – user3815508 Mar 29 '17 at 22:05

score 1 · Accepted Answer · answered Mar 18 '17 at 01:52

1

Not the best way, and not the fast way. But a simple way to get it done:

// x^2 + y^2 = 25^2
for (var x=-30; x<=+30; x+=0.01) {
  var smallest=1e10;
  var best_y=0;
  for (var y=-30; y<=+30; y+=0.01) {
    var v=Math.abs(x*x+y*y-625);
    if(v<smallest) {smallest=v;best_y=y;}
  }
  if(smallest<0.1) {
    ctx.fillRect(100+x, 100-best_y,1,1);
  }
}

And you get something like this:

You can see the jsfiddle here.

answered Mar 18 '17 at 01:52

Kamyar Infinity

2,711
1
21
32

1

Thanks for the answer. It vary x and y simultaneously. Maybe instead of "fillRect", I would use "moveTo" and "lineTo". – user3815508 Mar 19 '17 at 08:12

How can I plot an implicit function?

2 Answers2