Bonjour,

Pour une petite application JavaScript, j'ai besoin d'aide :

Je cherche à faire un cercle ( jusque là, tout va bien ), dans lequel il y a un autre cercle, beaucoup plus petit qui est au centre du premier. Pour clarifier la chose, ça ressemble à un joystick virtuel, un grand cercle avec un gros point au milieu.
Dans un premier temps, ce que j'aimerai pouvoir faire, c'est de "drag" le point sans qu'il puisse sortir du cercle.
Dans un second temps, ce que je voudrai c'est de récupérer deux valeurs : la distance du point par rapport au centre du cercle, et la position radiale du point.

J’espère que c'est suffisamment compréhensible , merci d'avance pour vos réponses !

Ce n'est pas très compliqué, il suffit de faire un peu de maths avec des vecteurs et du calcul de distance. En supposant que tu as à ta disposition une classe Vec2 (qui représente un vecteur ou un point dans un plan) avec des composants x et y ainsi qu'une classe Circle avec un centre (qui est un Vec2) et un rayon comme suit :

function Vec2(x,y){
  this.x = x;
  this.y = y;
}

function Circle(center,radius){
  this.center = center;
  this.radius = radius;
}

Voici une fonction qui fait ce que tu désires, la fonction prend en paramètre un Circle qui représente ton cercle, un deuxième Circle qui représente le point à l'intérieur de ton cercle et un Vec2 dont les composants x et y sont les coordonnées de la souris, la valeur de retour de la fonction est la distance du point par rapport au centre du cercle :

function dragPoint(circle, point, mouse){
  var v = new Vec2(mouse.x - circle.center.x, mouse.y - circle.center.y);
  var d = Math.sqrt(v.x*v.x + v.y*v.y);
  var lim = (circle.radius - point.radius);
  var mul = d > lim ? lim/d : 1;
  
  point.center = new Vec2(circle.center.x + v.x*mul, circle.center.y + v.y*mul);
  return d*mul;
}

En gros tu prends le vecteur v qui va du centre du cercle jusqu'à la souris puis tu utilises Pythagore pour calculer la longueur d de ce vecteur. Ensuite nous avons deux cas, celui où d est inférieur à la limite lim (le rayon du cercle - le rayon du point) que le centre du point ne doit pas dépasser et celui où d est supérieur à lim, dans le premier cas la nouvelle position du point correspond simplement aux coordonnées de la souris, dans le deuxième cas tu pars du centre du cercle et tu y ajoutes le vecteur v en prenant soin de multiplier celui-ci par le ratio lim/d pour obtenir un point dans la direction de v à une distance correspondant exactement à la limite. Pour finir tu retournes la distance du point par rapport au centre du cercle, cette distance correspond à d si on est dans le premier cas ou à lim si on est dans le deuxième cas.

En revanche je ne vois pas exactement ce que tu entends par "la position radiale du point".

Merci pour ta réponse, elle va m'être d'une grande aide
C'est pas très juste comme appellation "la position radiale du point".
Ce que je veux faire c'est savoir où il est par rapport au cercle : si deux points sont construit avec le même rayon, mais son opposés, je dois pouvoir les différenciés. Quand je parlais de "position radial", je parlais de la notion de radian :
Pour faire claire, si on découpe de cercle en 10, je veux savoir dans quel dixième du cercle le point se retrouve.
Mais si je peux faire sans les radians, ça ne me dérange pas !
Peut être récupérer le vecteur et selon son orientation déterminer mes valeurs ? Mais ça risque de changer selon la taille du moniteur, non ? ( je suis pas super fort en JavaScript...)
Merci d'avance !

Pour avoir la valeur de l'angle en radian c'est pas très dur non plus, par exemple on peut calculer le cosinus sachant que celui-ci est égal au côté adjacent de l'angle divisé par l'hypoténuse (ici en prenant comme origine le centre du cercle, le côté adjacent est la coordonnée X du point et l'hypoténuse est la distance du point), une fois que c'est fait on peut utiliser la fonction arc cosinus pour avoir la valeur de l'angle, avec un petit calcul supplémentaire on peut avoir une valeur en radian comprise entre 0 et pi*2 comme si le cercle était le cercle trigonométrique (le cercle dont tu as posté une image).

On peut modifier la fonction que j'ai posté plus haut et ça donnerait un truc comme ça (je préfère poster sur Pastebin, c'est un peu plus clair) :

http://pastebin.com/jgUvqHSr

Maintenant la fonction retourne un objet avec des propriétés distance et radian, donc pour obtenir la distance du point ou son angle en radian tu peux écrire :

var foo = dragPoint(cercle, point, new Vec2(sourisX,sourisY));
foo.distance; //distance
foo.radian; //angle en radian

C'est super sympa de ta part merci ! Je vais essayer de m'y mettre dans la semaine pour faire cette petite appli'