Get points over the tangent circle(or oval) and balance poker chips on

I try to display some chips for a free poker game (HTML/Javascript client, python server) game. There are seats around the center of the table. for each seats, i know cosinus, sinus, radius (distance from the center of the table), and the values/counts chips array.

I try to display each chips aligned and balanced on the tangent at the seat point

In image: (i can't create image so : http://i.stack.imgur.com/a4Obw.png )

for now, i wrote this code :

开发者_JAVA百科function balanced_stack( chips, cos, sin, radius ) 
{
    var html = ''

    // I receive a chips array like [ [ 100, 8 ], [ 200, 10 ], [ 500, 7 ] ]
    // so 8 chips of 100$, 10 chips of 200$ .. etc
    for(var i in chips) 
    {
        var value = chips[i][0]; // the token value
        var count = chips[i][1]; // the token count

        var m = 0; // margin for a single stack
        var left = i * 20 * sin + cos * radius;
        var top = -i * 20 * cos + sin * radius;

        for( var j=1; j<= count; j++ ) 
        {       
            html += '<img style="z-index:'+( parseInt(top) + 9999)+'; left:'+left+'px; top: '+top+'px; margin-top:'+( -2*m )+'px;" \
                            src="/images/chips/'+value+'.png" />'
            m ++;
        }

        return html
    }
}

but it's not right balanced and not good looking.

add : the cosinus and sinus can be greater than 1 and less than -1 because table may be oval

If you ellipse is defined by {a*cos(x),b*sin(x)}, the tangent is {-a*sin(x),b*cos(x)}. Using a definition that combines the ellipse's axes with the sine/cosine of the angle around the table does not allow you extract that easily. Besides, it seems a bad idea to call that quantity sin/cos since they are restricted to the domain -1 to +1 by their mathematical definition...

I think i solved the problem of the tangent with the equation of SEngstrom. All chips are aligned on the right tangent. You can see here :

function( chips, cos, sin, radius ) 
{
    var html = ''

    // Considering the equation for the tangent {a*cos(x),b*cos(x)}+d*{-a*sin(x),b*cos(x)}
    var a = 1.6; // x coefficient for the ellipse
    var b = 1; // y coefficient for the ellipse


    // I receive a chips array like [ [ 100, 8 ], [ 200, 10 ], [ 500, 7 ] ], so 8 chips of 100$, 10 chips of 200$ .. etc
    for(var i in chips) 
    {
        var value = chips[i][0]; // the token value
        var count = chips[i][1]; // the token count

        var m = 0; // margin for a single stack

        var left = i * 20 * sin * a + cos * radius * a; 
        var top = -i * 20 * cos * b + sin * radius * b;

        for( var j=1; j<= count; j++ ) 
        {       
            html += '<img style="z-index:'+( parseInt(top) + 9999)+'; left:'+left+'px; top: '+top+'px; margin-top:'+( -2*m )+'px;" \
                            class="chip chip_'+value+'" src="/images/chips/'+CHIPS.COLORS[ value ]+'.png" />'
            m ++;
        }       
    }
    return html
}

But as you can see, there is a blank space between each single stack, because a chip have width of 20px, with a regular cos/sin it's ok but here, the distance between each single stack is amplified by the ellipse coefficient (i * 20 * sin * a)

Think about it this way: the second term for (left,top) in your code finds the center of the stack. To that you want to add stacks along the tangent. Since your stacks are defined by a pixel width, the form of the term to add to the center point can have the convenient form of i*pxwidth*{nx,ny}, where nx and ny are the (x,y) components of the normalized tangent vector, 'i' is an integer counting up the individual stacks, and pxwidth is the desired pixel width. If sin and cos are true sine/cosines, (-sin,cos) is already a normalized vector since sin^2+cos^2=1.

What I don't understand in your code is the ((20*a)-20) which equals 20*(a-1). Some sort of correction factor for a>1. It is not symmetric for b, but then it would be zero for b=1...

I tried solutions a bit blindly, and I wrote: (that seems to work)

var left = (i * ((20*a) - 20) * sin * a) + (cos * radius * a); 
var top = -(i * ((20*a) - 20) * cos * b) + (sin * radius * b);

Can you explain me why that works? I'm mathematically weak.

with 20 fake players around the ellipse table (a=1.6, b=1):