rendering spirals

August 26, 2010

After posting this Stack Overflow question, I learned that rendering spirals was more complicated than I first thought. The best approach seemed to be to use Bezier splines, specifically cubic Beziers, since those are the variety usually found in graphics APIs. There is some calculus involved in approximating a simple circle with Beziers, described in this PDF. I studied this and made some edits to the Bezier spline Wikipedia article.

Applying the method in that PDF, I would need to re-derive this approximation formula for an Archimedean spiral rather than a circle. I read a tutorial on using wxMaxima, then created a worksheet to chug through the derivation. The spiral may be composed of an arbitrary number of small, non-circular arcs. Specifying a cubic Bezier curve requires four points (xi, yi). The eight values may be obtained by solving a system of eight simultaneous linear equations: the starting and ending point of the curve (2 equations for each x and y component); the slope at the starting point and end point (2 equations); and some other point along the curve (2 equations). For the last point, the angular midpoint was selected. A common linear algebra package was used to solve the equations.

The control points must be recomputed for each segment in order to draw a full spiral. It is not correct to simply reuse a scaled and rotated version of a single segment, since for an Archimedian spiral (with constant separation distance between spiral turns) the curvature decreases as the radius increases.

Logarithmic spirals would potentially allow the reuse of segments, but with the Archimedian spiral framework written, it is easy enough to plug in an exponential function in place of the linear polar function.

I created a Python GUI app to explore the parameters. The files can be downloaded here. It requires the Ubuntu package “python-scipy” to run.

Here is the result as a Live Wallpaper for Android. I sold it for $0.99 for a while, but it earned little enough that I decided to release it as open source.



June 14, 2010

In “Introduction to Algorithms” by Cormen, Leiserson, Rivest, and Stein, a “naive” algorithm to randomize a list is described, called “Permute-With-All”. I made some plots of the probabilities of an element being moved to a particular location with this algorithm.

Probabilities, 4-element list

See the attached PDF for all of the plots, and take a look at the code.

always pair checkbox with <label> in HTML

April 9, 2010

A checkbox should never be found without the label. It significantly increases the clickable area of the box, and Windows and GNOME users expect that behavior.

* Stack Overflow: The “Notify” box when answering a question

Axis breaks, graphical ellipses

March 31, 2010

I recently needed to post a very tall web page screenshot in limited vertical space. I wanted to preserve context by including the page header, but the focal point was far down the page.  I started with this image (border added):

This seemed like a great place to use something like an axis break.

Wouldn’t it be great if there was a tool like that that you could apply to an arbitrary image?  It would put a customizable “tear” in the image, allowing you to relay only the important information in a compact form.  I think a good name for this would be “image ellipsis” or “graphical ellipsis”.  I had the urge to start a Wikipedia stub on it, and I would have if it weren’t for the original research policy.  In fact, I couldn’t think of a good forum for this insight (in hindsight, maybe, which is why I finally got around to starting a blog for myself.  Anyway, first I did it crappily by hand:

I didn’t like that, so I wrote a tool for it:

The script uses the Python Imaging Library (PIL). You’ll need to download this file and this file.