Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by BradyIrv · Jun 20, 2019 at 02:36 AM · inputmathjoystickcirclesquare

How would you convert circular joystick input to a square overlay?

I'm having an issue converting joystick input to match a square screen. If you directly translate input to the screen, you will get an oval, what I want is a dynamic equation or method for also filling in the corners. I've attempted to go about this several ways and was wondering if anyone has encountered this before. joystick input is debugged, I have the correct values from joystick.value.

 // Perfect Oval matching rectangular screen
 public void DirectTranslation()
 {
     // Input Extremes: (1,0) (0.7, 0.7) (0, 1) (-0.7, 0.7) (-1,0) (-0.7, -0.7) (0,-1) (0.7, -0.7)
     float x = joystick.HorizontalInput;
     float y = joystick.VerticalInput;

     float xPos = x * Screen.width / 2;
     float yPos = y * Screen.height / 2;

     reticle.rectTransform.anchoredPosition = new Vector2(xPos, yPos);
 }

This was my first attempt to make up for the lost space when in a corner, but ended up with a cross cutout. It perfectly reaches the corners, but skips over any input value from -0.3 to 0.3 (I understand why, but could not get it to be a perfect fix):

 // Perfect to the corners, but a cross of null space when x || y are < 0.3
 public void Attempt1Fix()
 {
     float x = joystick.HorizontalInput;
     float y = joystick.VerticalInput;

     float inputMagnitude = Mathf.Abs(x) + Mathf.Abs(y);

     float xRemainder = 0;
     float yRemainder = 0;
     
     xRemainder = 1 - Mathf.Abs(x);
     xRemainder = Mathf.Clamp(xRemainder, 0, 0.3f);

     yRemainder = 1 - Mathf.Abs(y);
     yRemainder = Mathf.Clamp(yRemainder, 0, 0.3f);

     float xPos = x * Screen.width / 2;
     float yPos = y * Screen.height / 2;

     float xExtenstion = xRemainder * (Screen.width / 2);
     float yExtenstion = yRemainder * (Screen.height / 2);

     // Q1: Top Right
     if (x > 0 && y > 0) reticle.rectTransform.anchoredPosition = new Vector2(xPos + xExtenstion, yPos + yExtenstion);

     // Q2: Top Left
     if (x < 0 && y > 0) reticle.rectTransform.anchoredPosition = new Vector2(xPos - xExtenstion, yPos + yExtenstion);

     // Q3: Bottom Left
     if (x < 0 && y < 0) reticle.rectTransform.anchoredPosition = new Vector2(xPos - xExtenstion, yPos - yExtenstion);

     // Q4: Bottom Right
     if (x > 0 && y < 0) reticle.rectTransform.anchoredPosition = new Vector2(xPos + xExtenstion, yPos - yExtenstion);
 }

So now I started searching for a solution, and I came across this https://stackoverflow.com/questions/13211595/how-can-i-convert-coordinates-on-a-circle-to-coordinates-on-a-square which seems to be a perfect solution my issue. I attempted to translate the mathematics equation to C# code, but it returns some NAN values in certain joystick positions:

 // NAN values in some cases
 public void Attemp2Fix()
 {
     float x = joystick.HorizontalInput;
     float y = joystick.VerticalInput;

     // Equation found at URL in question
     // x = ½ √(2 + u² -v² +2u√2 ) - ½ √(2 + u² -v² -2u√2 )
     // y = ½ √(2 - u² +v² +2v√2 ) - ½ √(2 - u² +v² -2v√2 )

     // Attemp to recreate equation
     float xCircle = x * Screen.width / 2;
     float yCircle = y * Screen.height / 2;
     float xSquare = 0.5f * Mathf.Sqrt(2 + (xCircle * xCircle) - (yCircle * yCircle) + 2 * xCircle * Mathf.Sqrt(2)) - 0.5f * Mathf.Sqrt(2 + (xCircle * xCircle) - (yCircle * yCircle) - 2 * xCircle * Mathf.Sqrt(2));
     float ySquare = 0.5f * Mathf.Sqrt(2 - (xCircle * xCircle) + (yCircle * yCircle) + 2 * xCircle * Mathf.Sqrt(2)) - 0.5f * Mathf.Sqrt(2 - (xCircle * xCircle) + (yCircle * yCircle) - 2 * xCircle * Mathf.Sqrt(2));

     // Then apply math to reticle position
     reticle.rectTransform.anchoredPosition = new Vector2(xSquare, ySquare);
 }
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

1 Reply

· Add your reply
  • Sort: 
avatar image
0
Best Answer

Answer by Captain_Pineapple · Jun 20, 2019 at 04:04 PM

Hey there,

i guess your issue is that you did not follow the equations given in your link completly. They do a straight transformation of a circle into a square. But you apply (probably unintentionally) another transformation on your circle coordinates before you apply the equations. That is the linear scaling with the screen width and height. -> one could say you form an ellipse from your circle coordinates and then try to format them as a circle.


So how to fix it? Simply move the scaling to the back. Do it last after you did the circle to square transform and it should work out fine. If it doesn't let me know, i'll try to take a deeper look into it then.

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image BradyIrv · Jun 20, 2019 at 07:24 PM 0
Share

Hey man! Thank you so much for taking a look into that. I must have been tired when trying to enter it in. Yes 99%, there was also two errors in the equation. After taking your answer into consideration I managed to get all the kinks out, so thank you it works perfectly now.

 public void Attempt2Fix()
     {
         float xInput = joystick.HorizontalInput;
         float yInput = joystick.VerticalInput;
         
         // Attemp to recreate equation
         float u = xInput;
         float v = yInput;
 
         // Equation found at URL in question
         
         //    x = ½      √         (2 +    u²   -    v²   + 2   u   √          2 ) - ½      √         (2 +    u²   -    v²   - 2   u   √          2 )
         float x = 0.5f * $$anonymous$$athf.Sqrt(2 + (u * u) - (v * v) + 2 * u * $$anonymous$$athf.Sqrt(2)) - 0.5f * $$anonymous$$athf.Sqrt(2 + (u * u) - (v * v) - 2 * u * $$anonymous$$athf.Sqrt(2));
         
         //    y = ½      √         (2 -    u²   +    v²   + 2   v   √          2 ) - ½      √         (2 -    u²   +    v²   - 2   v   √          2 )
         float y = 0.5f * $$anonymous$$athf.Sqrt(2 - (u * u) + (v * v) + 2 * v * $$anonymous$$athf.Sqrt(2)) - 0.5f * $$anonymous$$athf.Sqrt(2 - (u * u) + (v * v) - 2 * v * $$anonymous$$athf.Sqrt(2));
 
         // Then apply math to reticle position
         reticle.rectTransform.anchoredPosition = new Vector2(x * Screen.width/2, y * Screen.height/2);
     }

This looks horrible in this window, but if you copy paste it into VS it will be legible. Thanks again

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

134 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Circular Analog Input? 1 Answer

How to use Handles.DrawSolidArc() in execute mode 0 Answers

joystick connected 1 Answer

Controller input not working correctly 0 Answers

Analog stick control 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges