How can I arrange a set of varying line segments to form a polygon that is circumscribed by a circle?

Question

This is for a small web library I'm working on, presenting images as a 3D carousel rotating around a y-axis. Here's a quick demo of what I have.

Unfortunately, that's not quite what I want. If they're all the same size it works fine, but if any of them are inconsistent (which will usually be the case), then they protrude or recede depending on their relative size.

I don't know if the problem is in my math or my implementation of it, so I'm hoping someone can either explain where I went wrong or suggest a better method.

Here's how I worked out the radius at which they're displayed. I'm also not 100% sure if I correctly calculated the required angle (theta):

Any correction/suggestion would be duly appreciated!

Answer 1

Too long for a comment, but…

You won’t be able to have both the same perpendicular distance from the centre of the circle to each image (of varying widths) and have all the images on the edges of a concyclic polygon.

Instead you could consider arranging it so that all the varying polygon edges are tangent to an inscribed circle.

Answer 2

If $2\theta_k$ is the central angle insisting on side $L_k$, and $r$ is the radius of the circle, the equations to solve are: $$ {1\over2r}={\sin\theta_1\over L_1}={\sin\theta_2\over L_2}= \dots={\sin\theta_{n-1}\over L_{n-1}}= {\sin(\theta_1+\theta_2+\dots+\theta_{n-1})\over L_n}. $$ And this system of equations should be solved by some numerical method.