CODEWITHSUNDEEP
algorithmplotgraph
maklas
maklas

Reputation: 332

Algorithm for plotting 2d xy graph

I'm trying to plot XY graph in real time using Java. Functions that only rely on X are easy. Just iterate over x0...xn, get value and draw lines between the points. There are a lot of guides on it and it's intuitive.

But there is literally no guide on plotting graphs with x AND y being a variable. Consider this equation: sin(x^3 * y^2) = cos(x^2 * y^3)

Using online Graph plotter I get this: Using desmos.com

While my best result plotting the same function is this: I tried

I just iterate over every pixel on screen and pass pixel positions as parameters to the function. If function's output is close to 0, I color the pixel. As you can see it's bad. It also takes huge amount of processing power. It only redraws once every couple of seconds. And if I try to increase precision, all lines just become thicker. Especially around intersections.

My question is how can I make my program faster and make it produce better looking graphs. Maybe there are some algorithms for that purpose?

Upvotes: 2

Views: 1657

Answers (2)

user3386109
user3386109

Reputation: 34829

The challenge is to chose the correct threshold. Pixels where abs(f(x,y)) is below the threshold should be colored. Pixels above the threshold should be white.

The problem is that if the threshold is too low, gaps appear in places where no pixel is exactly on the line. On the other hand, if the threshold is too high, the lines widen in places where the function is near zero, and the function is changing slowly.

So what's the correct threshold? The answer is the magnitude of the gradient, multiplied by the radius of a pixel. In other words, the pixel should be colored when

abs(f(x,y)) < |g(x,y)| * pixelRadius

The reason is that the magnitude of the gradient is equal to the maximum slope of the surface (at a given point). So a zero crossing occurs within a pixel if the slope is large enough to reduce the function to zero, inside the pixel.

That of course is only rough approximation. It assumes that the gradient doesn't change significantly within the area bounded by the pixel. The function in the question conforms to that assumption reasonably well, except in the upper right corner. Notice that in the graph below, there are Moiré patterns in the upper right. I believe that those are due to the failure in my antialiasing calculation: I don't compensate for a rapidly changing gradient.

In the graph below, pixels are white if

abs(f(x,y)) > |g(x,y)| * pixelRadius

Otherwise the pixel intensity is a number from 0 to 1, with 0 being black and 1 being white:

intensity = abs(f(x,y)) / (|g(x,y)| * pixelRadius)

enter image description here

Upvotes: 1

Yang
Yang

Reputation: 91

I don't how exactly the online plotter did, but here are some suggestions.

  • Simplify your equation, as to this specific one, you can easily have x^2 * y^2 * (x ± y) = (2 * n + 1 / 2) * pi where n for any integer. It's much clearer than the original one.
  • Draw lines rather than points. Every n here stands for 4 curves, you can now loop over x and figure out y and draw a line between adjacent points.

Hope it helps!

Upvotes: 0

Related Questions