如何绘制隐式函数？

Question

我正在尝试开发一个隐式绘图仪。
例如，如果我想画一个寓言，x 会发生变化，而 y 将计算相应的 x 值。

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

或者看这里https://jsfiddle.net/a0gLqrvr/ 但是如何绘制隐式函数？
例如：
x^3 + y^3 = 3*x*y^2 - x - 1
如何同时改变 x 和 y？
您能否通过示例向我展示一些要点（也许在 jsfiddle 中）？
提前致谢。

Answer 1

要绘制 f(x,y)=0，请使用 marching squares 方法：

将您的区域划分为小单元网格
计算每个单元格顶点处f的符号
找到曲线穿过单元格的位置：在具有不同符号的边上。使用线性插值找到交叉点并用线段将它们连接在一起。

Answer 2

不是最好的方法，也不是最快的方法。但是一个简单的方法来完成它：

// 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);
  }
}

你会得到这样的结果：

你可以看到 jsfiddle here。

如何绘制隐式函数？

How can I plot an implicit function?

javascript

math

plot

implicit