Question

I am working on a design where I would like to position header elements along a curve. Example:

Typically I would do this manually using CSS, but in this case there can be a dynamic number of items.

I’m curious if anyone knows of a way to place a dynamic number of items along a curve? I’m guessing it would require a way of specifying an equation that defines what the curve should be (notice that the curve above peaks right of center…) and then place items spaced evenly on that.

Has anyone done this before? Any recommendations on where to start?

Answer 1

A simple way to specify a curve is using a Bezier cubic.

function bez3(x0, y0, x1, y1, x2, y2, x3, y3, t)
{
    var x01 = x0 + t*(x1 - x0);
    var y01 = y0 + t*(y1 - y0);
    var x12 = x1 + t*(x2 - x1);
    var y12 = y1 + t*(y2 - y1);
    var x23 = x2 + t*(x3 - x2);
    var y23 = y2 + t*(y3 - y2);

    var x012 = x01 + t*(x12 - x01);
    var y012 = y01 + t*(y12 - y01);
    var x123 = x12 + t*(x23 - x12);
    var y123 = y12 + t*(y23 - y12);

    return {x: x012 + t*(x123 - x012),
            y: y012 + t*(y123 - y012)};
}

The curve starts at t=0, (x0, y0) tangent toward (x1, y1) and arrives at t=1, (x3, y3) coming tangent from (x2, y2).

For t=0 the function returns the starting point (x0, y0), for t=1 the function returns the ending point (x3, y3). Values of t between 0 and 1 are points along the curve (they’re smoothly but not equally spaced however). You can think to t as a “time” parameter of a point moving along the curve.

Following this link is possible to see an interactive version implemented in javascript/canvas (the example uses letters A, B, C and D instead of 0, 1, 2 and 3 to mark the different points).