How to Draw Fish with Math (Part 4)
Still snakes, but we’re getting there!
I’m taking up two posts to explain this because it’s a little more difficult to understand than what we have been doing. I did give the code in the previous post already, so if you don’t have interest understanding the “why” of that code, you are free to skip this post and move on to building the rest of the fish! But if you want to understand the details! You are at the right place!
We left off at what it means for segments to “Follow” the previous segments. Firstly, it is important to define a few rules. Then we can create some functions out of these rules:
- Each segment is exactly the same distance away from its previous segment.
- The only segment that is free to move is the head.
- Every segment that is not the head has their position decided by the previous segment.
Easy enough, right? We already know to make the head equal to the mouse position. Now let’s just look at segment “1”. Rule number 1 states that the segment has to be equidistant from the previous segment. Let’s set this segment length to 10px. If segment “1” is 10px away from the head, we can draw a circle with a 10px radius around the head, and we can rest easy that segment “1” will be on the circumference of the circle. There are no exceptions!
It seems like the segment’s position has been narrowed down, but the problem is there are still an infinite amount of points on that circumference! There one more crucial piece of information we need to know the exact segment position. The angle from the head!
It helps to think of the situation in two right triangles. A big and small one, with their angles being exactly the same. In the diagram above, the small gray dot represents where segment 1 is now, and the blue dot on the edge of the circumference is where we want it to go. The other blue dot in the middle of the large circle represents the head in this case.
The ultimate goal is to find the x and y position for the blue dot. For that, we need the angle shown in the diagram. Let’s say the angle is the variable “a” and the radius of the circle is “r” (dotted line). Once we have that, the y displacement would be the sin(a) * r and the x displacement would be cos(a) * r . High school trigonometry is really handy here!
Notice I said displacement instead of position for those values. That is because the segment 1’s position is actually the head’s position displaced by those values!
So there we have it! Segment 1’s x position is the head’s x position minus the cos(a) * r.
So how do we find a? In programming, there a very useful function called atan2. If you put the length of opposite side divided with the length of the adjacent side as the parameter, it will return that angle! Remember that all of the angles in the two triangles are the same!
So there you have it! Kinematics is a high level concept for the scope of this tutorial, so don’t worry too much if it was difficult to understand. You did great!