-
Ternary diagram / ternary plot calculations
To all masters of expressions & math!
I’m trying to create a ternary diagram where a dot layer would have three slider controls in which all 3 percentage values would be calculated from the dot’s position on the diagram.
I already knew I wouldn’t be able to figure out how to do get this to properly work, so I tried to at least create something extremely simple which would help me in reading the diagram and guess working it and then enter the displayed values manually – so I’d fake it. But this didn’t work either, so I’m back at 0 and rethinking if I could maybe get it to work the way it should.
Is there someone who understands the math behind ternary diagrams and can fairly easily come up with the formula which I could put into 3 sliders to spit out the percentage?
Thanks a ton.
Just to let you know what I’ve been trying, here’s my fake guess work expression:
For the y axis I mapped my points on the composition to 0 and 100% by interpolating the y position into percentages which get updated when I move the dot. I put this expression into a slider to display the percentage:
y0 = 620;
y100 = 450;
yR = position[1];
Math.round((linear(yR, y0, y100,100,0))/5)*5
Did the same for the x axis but I soon realised this his nowhere close to even helping me guess the correct values for my dot 😉 so as I said, I will have to scratch all this. -
22 Replies
-
Reading up on the ternary plot, I came to the following conclusion.
(Lets say that the percentage values run as follows: A horizontally at the base from right to left, B from lower left to top and C from top to lower right.) A, B and C are referring both to the percentages and the directions the percentages are plotted here
1) You need only two of the three values to locate the spot, for the third value C will always be C = 100-A-B.
2) This being the case, you could always start from the same corner (which would be 0,0) and use two vectors to calculate the position, thus
3) starting from lower right corner, move the amount of A*S (S = the length of the base or side) of the diagram to the left, then
4) move B% along the direction of side B, the formula for such move being x = S*B*cos(60) and y = S*B*sin(60)
Thus, from the origin point at the bottom right corner, the dot position should be at
x = -A*S + S*B*Math.cos(60)
y = S*B*Mat.sin(60)
That is, if I got that right. I didn’t test my theory.
-
Thank you so much Kalle,
I need to test this and see if the math works out, but I’m still missing a piece. As I understand your post, it would check the current X & Y position of the dot and spit out a coordinate, correct? How can I convert that X/Y information into the percentages for A and B?
-
Hi Patrick,
No, it is supposed to generate the x and y positions from the percentages A and B.
-
I think that Patrick wants the converse: given a reference triangle and a point in that triangle with comp coordinates [x,y], find the coordinates of the point in the triangle system (barycentric coordinates).
What the “formulas” look like will depend much on how you have parametrized the triangle. For instance in one case you know the coordinates of the 3 summits of the triangle, in another case you know the bottom left corner and the length of a side, and if you use a shape layer you’ll know the center and outer radius. So you should tell more about your framework.
Xavier.
-
Hmm, okay. What are the slider controls for then? Storing the results?
If that is the case, you would have to calculate the distances of the point to each side of the triangle. That’s a different math problem…
-
Along these lines:
The dot’s coordinates are (px, py)
The origin point is at the horizontal center of the base.
a = length of side of triangle
which makes the height of the triangle:
h = a*sin(60)Distance from left side:
d1 = abs(h*px – py + h)/sqrt(h*h+1)Distance from right side:
d2 = abs(-h*px – py + h)/sqrt(h*h+1)Distance from base:
d3 = pyThe three percentages would then be:
A = d1/(d1+d2+d3)*100
B = d2/(d1+d2+d3)*100
C = d3/(d1+d2+d3)*100All theoretical. If there’s an error somewhere, it’s gonna be fun to try and find it.
-
There might be a problem with the divisor sqrt(h*h+1). That’s how the distance calculation equation ended up with b = -1, but it still doesn’t make sense to me. Seems like there should be something there that depends on the length of the triangle’s side instead of 1. (Just thinking aloud.)
-
Yeah — the left and right side distance calculations are messed up. I’ll have to take another look at them.
-
“I think that Patrick wants the converse: given a reference triangle and a point in that triangle with comp coordinates [x,y], find the coordinates of the point in the triangle system (barycentric coordinates).”
Exactly that is what I’m looking for: I want to animate the dot, and I’m looking for an expression that calculates the percentages for A and B at that position.
Thanks, Xavier.Actually it doesn’t really matter how it is set it up, because I could easily change it. I would just have to make sure it fits. So if there’s a workflow that would make it easier to get this going, let me know.
Right now, the triangle is an imported .ai vector and the easiest way from here would be to use the coordinates of the 3 summits.
-
Thank you so much Kalle. At least I can follow along the lines of your math, but I couldn’t come up with it myself! 😉
Reply to this Discussion! Login or Sign Up