Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Touch joystick border radius  (Read 1644 times)

0 Members and 1 Guest are viewing this topic.

Jan666

  • Jr. Member
  • **
  • Posts: 64
    • View Profile
Touch joystick border radius
« on: June 18, 2022, 12:37:12 pm »
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

  • Jr. Member
  • **
  • Posts: 64
    • View Profile
Re: Touch joystick border radius
« Reply #1 on: June 20, 2022, 02:10:21 pm »
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

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10801
    • View Profile
    • development blog
    • Email
Re: Touch joystick border radius
« Reply #2 on: June 20, 2022, 03:59:20 pm »
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
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

Jan666

  • Jr. Member
  • **
  • Posts: 64
    • View Profile
Re: Touch joystick border radius
« Reply #3 on: June 20, 2022, 04:08:03 pm »
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

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10801
    • View Profile
    • development blog
    • Email
Re: Touch joystick border radius
« Reply #4 on: June 20, 2022, 04:25:28 pm »
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.
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

Jan666

  • Jr. Member
  • **
  • Posts: 64
    • View Profile
Re: Touch joystick border radius
« Reply #5 on: June 20, 2022, 11:22:48 pm »
Yes i know the theory but i cant get fix it with the code, but thsnks for your reply

Jan666

  • Jr. Member
  • **
  • Posts: 64
    • View Profile
Re: Touch joystick border radius
« Reply #6 on: June 22, 2022, 12:04:52 am »
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

  • Sr. Member
  • ****
  • Posts: 492
  • Buns.
    • View Profile
    • Trederia
Re: Touch joystick border radius
« Reply #7 on: June 22, 2022, 10:40:21 am »
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

  • Jr. Member
  • **
  • Posts: 64
    • View Profile
Re: Touch joystick border radius
« Reply #8 on: June 22, 2022, 12:29:21 pm »
I dont understand, can you explain it in a code example ?

Hapax

  • Hero Member
  • *****
  • Posts: 3346
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Touch joystick border radius
« Reply #9 on: June 23, 2022, 10:30:29 pm »
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.
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*