# B Joystick geometry

1. Sep 13, 2016

### DaveC426913

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).

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. Sep 13, 2016

### 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.

3. Sep 13, 2016

### Staff: Mentor

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

4. Sep 13, 2016

### Ssnow

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).

5. Sep 13, 2016

### DaveC426913

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.

6. Sep 13, 2016

### DaveC426913

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
7. Sep 13, 2016

### DaveC426913

I'm ... not sure.

8. Sep 13, 2016

### 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.

9. Sep 13, 2016

### DaveC426913

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
10. Sep 13, 2016

### 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).

11. Sep 13, 2016

### DaveC426913

Yeah. I could apply a fudge factor.

12. Sep 13, 2016

### 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$.

13. Sep 14, 2016

### DaveC426913

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...

14. Sep 14, 2016

### 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.

15. Sep 16, 2016

### DaveC426913

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.

Thanks @fresh_42, looking at those n-polyellipses gave me the idea.

16. Sep 16, 2016

### DaveC426913

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.

17. Sep 16, 2016

### DaveC426913

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