 |
| Pictured: Trig in action |
When I needed to modify the position of the orb I needed to change it's X and Y values. In order to get a circle, I had to use both sin and cos.
X = cos(t); Y = sin(t)
That's the (extremely) basic formula for a circle. We need something to be the t variable. We need something that will constantly and smoothly increase in size so that it continues along the Sine Wave. Without an increasing number, the orb would just stay in the same place. Time is a great tool for that, since it's always progressing.
X = cos(time); Y = sin(time)
This is a step in the right direction, but it still needs work. Not only is it going in little tiny circles, it's circling the 0,0 position on the screen instead of where the orb is! Let's handle it not being in the correct position first. When I make the particle, I can tell it what the position of its parent orb is. Since X and Y are already being taken for the position of the specific particle, I'm using J and K for the X and Y of the parent orb. We add those positions to the formula so that the particle will rotate around the center of the parent orb.
X = cos(time) + J; Y = sin(time) + K
That's better, but the more particles we add to an orb we see that they are all focused at the very center. We need it to spread out so the whole thing is filled with particles. For doing this, I decided to use the radius of the parent orb. This helps make sure that the particles never go flying out of where the boundaries of the orb are, and that as the orb gets bigger the particles don't keep filling up at the center. I do randomize it a bit so that the particles aren't all completely uniform.
X = radius * cos(time) + J; Y = radius * sin(time) + K
This gives us our final formula for updating the particles as they move around. Mostly. I also give each particle a randomized velocity (movement speed) based on the radius so that that's also not moving uniformly. The velocity modifies the time to either make it faster or slower than other particles. I also randomize how big each particle will be. The effect that I want is that it's a flowing, living piece of magical energy. Controlled entirely by trigonometry and a little bit of randomness.
So for all those like me who just couldn't see why anyone would care to learn trig, take another look at the orb below. I couldn't have made it without trig.
Want to see the orbs in action? Give the alpha demo of Siphon Spirit a try! (Currently only for Windows.)
 |
| Thanks, math! |
Oh I might need this for that new thing we're not telling people about yet.
ReplyDeleteyay, Math!
ReplyDeleteJust out of curiosity, If I understand correctly, each time a particle is added to the orb, and the orb's radius get's bigger you pick a random distance between the center of the orb and the orb's radius for the particle to start orbiting around? This would mean that the center of the orb always had a higher concentration of particles then the outside, which, it probably should. But it also means that there is an improbably but possible chance that the particles are added in the center, and even though the orb is growing, it would always look small.
A way around this would be to have a smaller radius within the orb that grows (probably not proportionally) with the radius of the orb itself. Then, when picking a radius for a new particle to start orbiting around, you just pick a random number between the radius of the orb, and the smaller radius within it.
Anyway, every time I've seen it the orb looks great, so this is probably unwarranted. But I just like math, and randomness, so I wanted to say something on the subject. :)
I actually put a little more math into it, but I didn't want to clog up the post with all the details.
ReplyDeleteI actually only randomize half the radius but leave the rest of the radius as a buffer to help promote it being on the outside. So if the radius was 10, the orb would be place anywhere between 5 and 10.
Another thing that helps this work is the draw order. Particles that are added first are drawn first, so the latest ones that are closer to the outside show up more clearly and help define the size of it better. Although we did end up having to add a halo around the player orb so they could see the exact size.
The orb that I'm showing in the gif is a selection orb, the thing that shows you what button you have selected. Figured it would be best to show it without any other art on it.