About Pretty Parametric Plots

Pretty Parametric Plots is an HTML5 application that I developed for fun (and practice) while preparing for software engineering interviews. The program was initially implemented in C++, but I ported it to JavaScript as a learning exercise. The program plots parametric equations of the following form:

$$ x(t) = R_1\cos(2\pi\omega_1 t)e^{k_1 t} + R_2\sin(2\pi\omega_2 t + \phi e^{k_\phi t})e^{k_2 t}$$ $$ y(t) = R_1\sin(2\pi\omega_1 t)e^{k_1 t} + R_2\cos(2\pi\omega_2 t + \phi e^{k_\phi t})e^{k_2 t}$$

as inline SVG images, using the relatively new <SVG> tag in HTML5.

Algorithm Summary

The algorithm is designed to quickly create very accurate, smooth curves, using a small number of data points. Each plot is defined using a cubic Bézier spline. Rather than spacing the component curves equally in the parameter, $t$, the algorithm adaptively computes the interval, $\delta t$, because regions of high curvature require smaller intervals than regions of low curvature. This is illustrated in the image below.

The above image shows a zoomed-in plot with quite stringent quality settings. The gray points indicate nodes (the endpoints of the individual Bézier curves within the spline). Note that sharp turns are handled efficiently by simply limiting the distance between nodes; the shortest allowed interval is approximately one third of a pixel width on the host computer’s display device. This also prevents the application from wasting time on sub-pixel structures, such as tiny loops. With additional effort, the total number of points could greatly be reduced, while retaining accuracy. Since this optimization also significantly slows the plotting operation, the application does not take this extra step.

Examples

Here’s a video showing one of these being plotted as the parameter $t$ increases. This was made using the C++ version of the code.

The current version of the application is rather simple. The user can specify the constants that define a particular plot and then adjust the width and color of the line, as well as the color of the background.

Try it

PPP is embedded in an iframe below, so you can try it out yourself:

The output images are named such that the URL can be recreated from the filename. A filename decoder is available here and embedded below: