Question

Turning a line into a ring is a simple task in graphics programs such as GIMP:

_{(source: adamhaskell.net)}

I’m trying to work out if it’s possible to produce the same effect in CSS.

So I worked out the following:

• The above algorithm maps x to r and y to θ
• To do this, x is scaled to the range of [0,w/2], with w being the width of the image
• Also, y is scaled to the range of [0,2π]
• To transform polar coordinates back into Cartesian: xc = rp*cos(θp) and yc = rp*sin(θp)
• The result is then translated so the origin is in the centre of the image.
• So we have:

 

x' = (x/2)*cos(y/h*2π) + w/2;  
y' = (x/2)*sin(y/h*2π) + h/2;

This is all fine and dandy, but how can I produce such a transform in CSS? Presumably none of the keywords are useful, so it has to be a Matrix transform. Well, I have no idea how to build a matrix from the two equations above, much less how to represent it in a CSS transform.

Can anyone help me on this last step?

Answer 1

I never worked with CSS transform matrices, but I think what you want is not possible.
Using transform matrices you do a linear transformation. Linear transformations ALWAYS map a straight line to a straight line or to 0. Take a look at Wikipedia for more information.

So it’s impossible to map a straight line to a circle using matrices.