Touch joystick border radius

[Jan666]

Hello,
I wanna create a touch controller, a small circle i can move around with a finger inside a bigger circle. But i have no idea, how i set a  border radius, that the smaller circle still movable just inside it, any help?

[Jan666]

Can samone give me an advise

                sf::Vector2i currPos = sf::Touch::getPosition(0, window);
                        sf::Vector2f mapPos = window.mapPixelToCoords(currPos);
                       
float distance = sqrt((circIn.getPosition().x * circIn.getPosition().x) + (circIn.getPosition().y * circIn.getPosition().y));



angle = atan2(circIn.getPosition().x, circIn.getPosition().y);


angle = angle * 180 / 3.141592654f;
 



plr = circIn.getGlobalBounds();

if(plr.contains(mapPos)){

sf::Vector2i touch = sf::Touch::getPosition(0, window);


touch.x = Origin.x + 150 * cos(angle);
touch.y = Origin.y + 150 * sin(angle);
circIn.setPosition(touch.x , touch.y);
 

It doenst work anyway

[eXpl0it3r]

Are you on Android or iOS?

sf::Touch isn't implemented for other OSs right now.
If you have a Joystick controller, you'll need to use the Joystick API instead

[Jan666]

I have android, i wanna build the touch controll by myself just with a circle, but iam not fit in math, sin, cos etc. I just need to know how i can rotate/ move a circle in a radius

[eXpl0it3r]

You take the center of the circle and the center of the joystick position and subtract the two positions, then you can calculate the distance (= sqrt((a - b)^2)) and if that gets too large, you stop moving the circle, or rather you need to move it to the minimum distance from the center.

[Jan666]

Yes i know the theory but i cant get fix it with the code, but thsnks for your reply

[Jan666]

Okay i got it, can you give me an advise how to stop the joytsick circle when it reach the distance?

if(plr.contains(mapPos)){

diff.x =circOutRectPos.x - circIn.getPosition().x;
diff.y =circOutRectPos.y - circIn.getPosition().y;
distance = sqrt(diff.x * diff.x + diff.y * diff.y);

circIn.setPosition(circIn.getPosition().x, mapPos.x);
circIn.setPosition(circIn.getPosition().y, mapPos.y);

 if(distance < 175)
????????
 

How i can stop the circIn (Circle for touch ), it should slidly move along the radius border (distance),

[fallahn]

Regular circle-circle collision detection will work (there are plenty of tutorials out there), but instead of making sure the minimum distance between centres is always >= the sum of the radii, you make sure the *maximum* distance is <= large radius minus the small radius

[Jan666]

I dont understand, can you explain it in a code example ?

[Hapax]

Another option is to instead use a polar vector (or a polar form of one). This defines a vector by angle/direction and length rather than horizontal and vertical distances.

e.g.

• Take the vector (you can still use SFML's Vector2f here) from the centre of the "range" circle to the current location of the "touch" point (by taking the difference: touchPoint - rangeCircle)
• Then, convert that vector to its polar form, giving you a direction and length.
• Clamp the maximum length i.e. if the length is greater than the maximum allowed length, set it to that maximum length.
• Then, convert the vector back from its polar form.

This approach will allow you to drag past the outer circle's border and continue dragging around the outside and the inner circle will keep updating, always pointing towards where the finger is but clamped by the range.

You need to know a little maths for this. Try this wiki: Polar coordinates

If you want to see some code converting to and from polar co-ordinates - or just use these vectors to do it for you - see my library, Plinth's, Vector class implementation.