如何绘制隐函数？

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？

你能举个例子告诉我一些要点吗？

提前谢谢。

Answer 1

不是最好的方法，也不是快速的方式。但一个简单的方法是：

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

你会得到这样的东西：

​

​

你可以看到小提琴这里。

Answer 2

要绘制f(x,y)=0，请使用行军广场方法：

• 将你的区域划分成一个小细胞网格。
• 计算每个单元格顶点处的f符号
• 找出曲线穿过一个单元格的位置:在有不同标志的边缘。用线性插值法找出交叉点，并将它们与线段连接起来。