如何绘制隐式函数？

Question

我正在努力开发一个隐含的绘图仪 例如，如果我想绘制一个比喻，x将会变化，并且将为相应的x值计算y。

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。