Obtenir des points sur le cercle tangent (ou ovale) et équilibrer les jetons de poker

Question

J'essaie d'afficher quelques jetons pour un jeu de poker gratuit (client HTML/Javascript, serveur python). Il y a des sièges autour du centre de la table. pour chaque siège, je connais cosinus, sinus, rayon (distance du centre de la table), et les valeurs/compte tableau de puces.

J'essaie d'afficher chaque puces alignées et équilibrées sur la tangente au point de siège

Dans l'image: (je ne peux pas créer une image si: http://i.stack.imgur.com/a4Obw.png)

pour l'instant, je l'ai écrit ce code:

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 
    } 
} 

mais ce n'est pas juste équilibré et pas beau.

ajouter: le Cosinus et sinus peut être supérieur à 1 et inférieur à -1 car la table peut être ovale

Answer 1

Si vous ellipse est définie par {a cos * (x), sin b * (x)} , la tangente est {-a * sin (x), b * cos (x)}. L'utilisation d'une définition qui combine les axes de l'ellipse avec le sinus/cosinus de l'angle autour de la table ne permet pas de l'extraire facilement. En outre, il semble une mauvaise idée d'appeler cette quantité sin/cos puisqu'ils sont limités au domaine -1 à +1 par leur définition mathématique ...

Answer 2

Je pense avoir résolu le problème de la tangente avec l'équation de SEngstrom. Toutes les puces sont alignées sur la tangente droite. Vous pouvez voir ici:

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 
} 

Mais comme vous pouvez le voir, il y a un espace vide entre chaque pile unique, car une puce ont une largeur de 20px, avec un régulier cos/sin il est ok, mais ici, la distance entre chaque pile unique est amplifiée par le coefficient d'ellipse (i * 20 * sin * un)

Answer 3

J'ai essayé des solutions un peu à l'aveuglette, et je l'ai écrit: (qui semble fonctionner)

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

Can vous m'expliquez pourquoi cela fonctionne? Je suis mathématiquement faible.

avec 20 joueurs faux autour de la table d'ellipse (a = 1,6, b = 1):

Answer 4

penser de cette façon: le second terme (à gauche, en haut) dans votre code trouve le centre de la pile. Pour cela, vous voulez ajouter des piles le long de la tangente. Puisque vos piles sont définies par une largeur de pixel, la forme du terme à ajouter au point central peut avoir la forme pratique de i * pxwidth * {nx, ny}, où nx et ny sont les composantes (x, y) de le vecteur tangent normalisé, 'i' est un nombre entier comptant les piles individuelles, et pxwidth est la largeur de pixel désirée. Si sin et cos sont vrai sinus/cosinus, (-sin, cos) est déjà un vecteur normalisé puisque sin^2 + cos^2 = 1.

Ce que je ne comprends pas dans votre code est le ((20 * a) -20) qui est égal à 20 * (a-1). Une sorte de facteur de correction pour un> 1. Il n'est pas symétrique pour b, mais alors il serait nul pour b = 1 ...