Drawing a math function / relation / curve

Question

I am wanting to replicate the equation plotting functionality provided by the Desmos Graphing Calulator, and other graphing tools, such as Wolfram Alpha, and MatLab. I am planning on using WebGL to plot the equations.

This simple sine equation I am quite comfortable in dealing with, as there is 1 y-axis value for every x-axis value i.e. it passes the vertical line test. I can iterate through each x-axis pixel on the screen, and evaluate the function and obtain the relevant y-axis value, giving me a set of points to draw a line from. I'm not sure if this is the most optimal way, but it certainly works.

However with this square wave, if I were to evaluate at the points x = 0,1,2,3 etc, I would only get a single corresponding y-value. How can I draw this function?

As another example, how would I draw a circle that only provides this implicit equation?

I'm not looking to use a graphing library, nor am I interested in how to ONLY draw these 3 shapes. I'm more interested in how the libraries themselves provide a generic math function drawing capabilities that is able to draw any equation that is provided to them.

Answer 1

If you want to visualize the square wave correctly, there must be no vertical lines. The visualization in your question implies that the function passes through the immediate values, which is not the case. So I would vote for not drawing the vertical lines. If, however, you really want that, here is a way how to do it:

If you use the simple approach that connects every point to a line, you're almost there. The only difference is that the vertical lines are not vertical but a bit shallower. To avoid this, you can first detect function value jumps. If you detect such a jump, run a binary search between the two incident pixels to find the actual jump location. Add two more points on the line two draw a vertical line at the location of the jump.

For implicit shapes, there are basically two options: Either try to find an explicit representation (which is most likely not an option) or extract the contour using Marching Cubes.