1. Limited time only! Sign up for a free 30min personal tutor trial with Chegg Tutors
    Dismiss Notice
Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

B Joystick geometry

  1. Sep 13, 2016 #1

    DaveC426913

    User Avatar
    Gold Member

    This is a programming issue, but the question is really about geometry. Let me 'splain.

    I am making a page control in HTML/CSS/JS *no wait - come back! I swear it's not about programming!!* that allows the user to play with the opacities of three overlapping images (eg. imageA = opacity 60, imageB=39, imageC opacity=1 ). The final 3 values must always sum to 100 (i.e. you cannot have 33,33,0). This means the space for the user to play in is not a simple 3D cube with full freedom along all 3 axes (such as many RGB controls have).

    So the user can freely play with the "joystick" control by moving their mouse through the space. Note that what the user does, and what the values do - do not have be the exact same "space", as long as the user can manipulate the numbers intuitively.

    My first solution is an equilateral triangle. No matter where they place the pointer in the triangle, we can measure the distance from each of the three apexes (or, to flip it over, we can measure the altitude from each of the three baselines).

    joystick.jpg

    This works pretty well. The midpoint of a side will be some combination of 0,50,50. The dead centre will be 33,33,33. It's not a completely linear - or 1:1 - correlation between user movement and values - though it's close enough.

    I just wonder if I'm missing some geometrical shape that's tailor-made for such a circumstance. I wonder if a circle would make more sense. But a circle doesn't have three apexes ... apex's ... apeces.

    Ideas?
     
  2. jcsd
  3. Sep 13, 2016 #2

    mfb

    User Avatar
    2016 Award

    Staff: Mentor

    What is nonlinear? That triangle looks great if you want linearity in the transparency settings.

    Human brains probably won't see that as linear - something at 100% doesn't look 100 times as prominent as something at 1%, especially if the image is much brighter than the other images. But that is a biology question.
     
  4. Sep 13, 2016 #3

    fresh_42

    Staff: Mentor

    If I understood it right and we may assume that opacity is always positive, then you have something like this:

    plane.jpg
     
  5. Sep 13, 2016 #4

    Ssnow

    User Avatar
    Gold Member

    Hi, it is interesting because your solution remember me a biological model called the Hardy-Weinberg law. In this model you have a constraint that is the sum of frequencies must be constant ##p+q=1## (in your case ## 100##) so taking the square ##p^2+2pq+q^2=1## where setting ##l=p^2,m=2pq,n=q^2## you have a parabola ## m^2=4ln ## that is a parabola in ##P^2## (the projective space) that you can represent inside the triangle...
    I don't know if I have understood clearly your problem but I think your geometry can be a parabola in the projective space (i.e. you describe a parabola inside your triangle with degenerate cases).
     
  6. Sep 13, 2016 #5

    DaveC426913

    User Avatar
    Gold Member

    Right, except if you have three axes of freedom, you would be allowed to set values for 100,100,100 or 0,0,0. You shouldn't be able to.
     
  7. Sep 13, 2016 #6

    DaveC426913

    User Avatar
    Gold Member

    No, I'm not worried about that. The user never sees the numbers, just the effect. Not to mention that 100 increments is well below perception.

    I guess the triangle is pretty near as perfect as I'm going to get.

    Then it comes down to equations. Uhhh. hmmm...
    altA = altitude(A | BC) (i.e. calculate the point's altitude when A is the triangle's peak and BC is its base)
    altB = altitude(B | AC)
    altC = altitude(C | AB)
    sum = altA+altB+altC
    value A = altA *100 / sum
    value B = altB*100 / sum
    value C = altC*100 / sum
    Yeah. OK. So any point in the triangle gets normalized to a value set where A+B+C=100.

    OK. So, for example, the centre bottom point:
    altA = ~55
    altB = ~20
    altC = ~55
    sum = 130
    value A = 55*100/130 = 42
    value B = 20*100/130 = 16
    value C = 55*100/130 = 42
     
    Last edited: Sep 13, 2016
  8. Sep 13, 2016 #7

    DaveC426913

    User Avatar
    Gold Member

    I'm ... not sure. :sorry:
     
  9. Sep 13, 2016 #8

    fresh_42

    Staff: Mentor

    No, I'm not having ##(100,100,100) ## as a solution. The triangle in the figure is actually the part of a plane (given by ##x_1OP_A+x_2OP_B+x_3OP_C = 100 ##) restricted to the first octant, i.e. opacity ##\geq 0 ##.
    What you propose is a cube, which I haven't drawn.
    You have three axes of freedom plus the restriction by the linear (!) equation, which reduces the entire ##3D-##space to the ##2D-##plane. The additional positivity makes it a triangle.
     
  10. Sep 13, 2016 #9

    DaveC426913

    User Avatar
    Gold Member

    OK, that's what I thought maybe you were getting at.
    The triangle is actually a 2D plane that intersects the axial planes, pitching and yawing through the space, constrained by the formula.

    Unfortunately, I don't see how it would be intuitive to operate.
    I mean, I can, I just don't think it makes for a very elegant control.

    Well, unless it were symmetrical. Say if it were viewed from 45,45 degrees.
     
    Last edited: Sep 13, 2016
  11. Sep 13, 2016 #10

    mfb

    User Avatar
    2016 Award

    Staff: Mentor

    That still means the effect can look nonlinear with the linear joystick control.

    If that occurs, there is a simple way to implement nonlinear effects while keeping the sum constant: apply the same nonlinear function to all three components, then divide by the sum (normalizing to 1 here)

    As an example, consider f(x)=x^2. This slows the apperance of weak image components. If the user chooses the position (0.1, 0.4, 0.5), then applying the function gives (0.01, 0.16, 0.25), sum 0.42 => divide by 0.42 => new position (0.024, 0.381, 0.595).
     
  12. Sep 13, 2016 #11

    DaveC426913

    User Avatar
    Gold Member

    Yeah. I could apply a fudge factor.
     
  13. Sep 13, 2016 #12

    fresh_42

    Staff: Mentor

    Well, algorithmic you could start at ##(OP_A,OP_B,OP_C) = (100,0,0)## and change them by ##(OP_A + x = 100)## in ##x-##direction and ##(OP_A + y = 100)## in ##y-##direction of a joystick where ##x## represent ##OP_B## and ##y## represent ##OP_C##.
     
  14. Sep 14, 2016 #13

    DaveC426913

    User Avatar
    Gold Member

    I can't help but wonder if there is a surface where any coords on it are always the sum of the distance from three points.

    An elliptoid is a surface that is a fixed sum from two points.

    But I guess I'd need a four-dimensioal hyper-elliptoid to have a such a surface using three points...
     
  15. Sep 14, 2016 #14

    fresh_42

    Staff: Mentor

    There is. E.g. https://en.wikipedia.org/wiki/N-ellipse
    But you don't have three fixed points and a longer distance. Once you're in a corner, there's no room left over anymore.
     
  16. Sep 16, 2016 #15

    DaveC426913

    User Avatar
    Gold Member

    Derp. Of course there is. And it doesn't require more than 3 dimensions.

    An equilateral triangle, that's "puffed" out the sides and top - like a 3-cornered pillow.
    Any point on that surface will have vectors that add up to 100.

    joystick.png
    Thanks @fresh_42, looking at those n-polyellipses gave me the idea.
     
  17. Sep 16, 2016 #16

    DaveC426913

    User Avatar
    Gold Member

    I mean, it's purely academic. Unless I want some serious trigonometry happening in my joystick logic, I'm not going to have a 3D control on my page.

    When it comes right down to it, I'll simply be viewing the triangle from above in two dimensions - exactly as in my original diagram - and the distances will be distorted a little.
     
  18. Sep 16, 2016 #17

    DaveC426913

    User Avatar
    Gold Member

    Nailed the dimensions to one decimal place. (Nothin' like doing trig longhand with a pencil & paper...)

    joystick2.png
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook

Have something to add?
Draft saved Draft deleted



Similar Discussions: Joystick geometry
  1. Geometry Preparation (Replies: 7)

  2. Geometry of an Egg (Replies: 6)

  3. Analytical Geometry (Replies: 3)

  4. Riemann Geometry (Replies: 6)

Loading...