Mathematics Stack Exchange is a question and answer site for people studying math at any level and professionals in related fields. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

In a card game I have currently the hand at the bottom placed in an ugly linear corner, but actually would like to change that to an arc:

enter image description here

Unfortunately my math skills are very rusty now (at the age of 40; I was quite good at math as a teen, participated in math olympiades etc...) so I hope someone will give me a jump start.

All cards (dimensions: 2 _dx and 2 _dy) have their origin point in the middle (i.e. they are rotated around their middle) and I place them by calling the method, y, rotation) where the x/y origin point is in the left top corner (as usual for computer stuff).

The cards as you see them on the screenshot above are placed from left to right using the index i (because they are sorted by color and rank already at the server) using this call:

            // 12 cards (1 full) should fit into table width,
            // but the gap shouldn't exceed card width of "2 _dx"
            var horizGap:Number = Math.min(width / 13, 2 * _dx);
            var leftMargin:Number = (width - 13 * horizGap) / 2; 

   + horizGap * (i + 1),       // OK
                height - 3 * _dy + (_dy/5) * Math.abs(i - 5), // MUST CHANGE
                4 * (i - 5));                                 // OK

I think the x and the rotation (i.e. the first and the last arguments in the above call) are okay and I just need to change the second argument (the y) to get a nicer looking arc.

The playing table component has dimensions width and height.

I probably should use (x - width/2) ^ 2 to get an arc, correct?

share|cite|improve this question
up vote 3 down vote accepted

Define the arc as a parametric path given by varying a parameter $t$ from 0.0 to 1.0. You can subdivide that interval based on how many cards are to be placed. Arcs are generated by parametric functions based on sinusoidals. For instance a circle of radius R about the origin is $\langle x(t), y(t)\rangle = \langle R\sin(t), R\cos(t)\rangle$, for $t$ from $0$ to $2\pi$. From there it's just a matter of transforming the coordinates, as well as the parameter $t$ so that you get an arc of a radius that you want in the right position and orientation in the graphical viewport.

You're thinking of using the $x^2 + y^2 = r^2$ equation for a circle, using which it is possible to plot circles, via $y = \sqrt{r^2 - x^2}$. That approach could work here, especially since you're not walking over a full half-circle (thereby avoiding the limits where the function goes vertical). All the same, the cards will not be equally spaced over the arc, because for equal steps in $x$, the points $\langle x, \sqrt{r^2 - x^2}\rangle$ are not equidistant. That's not necessarily a bad thing, visually.

share|cite|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.