Resource [Tutorial] Let's learn a thing about math (First steps in animations)

Discussion in 'Spigot Plugin Development' started by finnbon, Dec 26, 2015.

Thread Status:
Not open for further replies.
  1. Hello people!

    At the time of writing this, I was pretty bored and I decided to share my knowledge on using math in plugins and minecraft. I know this isn't neccesarily a spigot thing, but it's still cool to know how to use it in MC then. So let's start.

    (This is for those who have no idea how to make particle animations or how to use cos or sin, if you are more advanced I suggest you continue your search for tutorials)

    First, let's learn a thing or two about cos and sin. Cos and sin are your best friends, make sure to love them. (Same goes for PI, hehehe)
    First, you should know about the unit circle. It's just a plain circle, with a radius that's equal to 1. This circle has 2 axis,the x (horizontal) and y (vertical) one.

    Now imagine a triangle on this unit circle:
    [​IMG]
    (Keep in mind, the sin is the y axis, and the cos is the x axis.)

    Now imagine this circle in a "raster". The coordinates if A are (cos x, sin y);
    As you can see in the picture, A is risen from O 0.5. This means that the "y" is 0.5.
    So y = sin(α) = 0.5.
    As you can also see in the picture, point A is moved (aproximately) 0.866 from O (on the x axis). This means that x = 0.866, so
    x = cos(α) 0.866.

    As you can see, cos and sin are waves, and will always return a value in between 1 and -1. This GIF should give a good example of why these wave motions are made.
    [​IMG]

    Do you also remember the formula to get the Circumference of a circle? It's diameter * PI. If we want to "convert" degrees to so called "radians" (because a certain degree on the circle is a certain radians. For example, 180 degrees is PI, 90 is PI/2, etc), we can use Math.toRadians(degrees).

    Now, let's go over to putting this to use in MC.

    First, we're going to make a loop to loop through all degrees (360).

    Code (Java):

    for (int degree = 0; degree < 360; degree++) {

    }
     
    Now, we are going to calculate our x and z value. We get the cos of our degree and the sin of our degree. But first, we convert to radians.
    Code (Java):

    for (int degree = 0; degree < 360; degree++) {
        double radians = Math.toRadians(degree);
    }
     
    Then, we calculate the x and z.
    To do this, we get the cos of our radians, and the sin of our radians.
    Code (Java):

    for (int degree = 0; degree < 360; degree++) {
        double radians = Math.toRadians(degree);
        double x = Math.cos(radians);
        double z = Math.sin(radians);
    }
     
    This creates a circle with a radius that's equal to 1. To make it bigger, simply multiple x and z by the radius you wish to have.
    Let's now add x and z to our location and spawn a particle!

    Code (Java):

    for (int degree = 0; degree < 360; degree++) {
        double radians = Math.toRadians(degree);
        double x = Math.cos(radians);
        double z = Math.sin(radians);
        location.add(x,0,z);
        location.getWorld().playEffect(location, Effect.FLAME, 1);
    }
     
    After that, we have to subtract x and z again, or our location gets messed up.
    Code (Java):

    for (int degree = 0; degree < 360; degree++) {
        double radians = Math.toRadians(degree);
        double x = Math.cos(radians);
        double z = Math.sin(radians);
        location.add(x,0,z);
        location.getWorld().playEffect(location, Effect.FLAME, 1);
        location.subtract(x,0,z);
    }
     
    And there we have a flame circle! I hope you learned something from this tutorial, and make sure not to copy paste it but actually understand it! If you have questions just post below, have a nice day!

    - Finn

    EDIT: This is my first tutorial (written), so if you have ways to improve it tell me! :)
     
    #1 finnbon, Dec 26, 2015
    Last edited: Jul 25, 2016
    • Useful x 90
    • Like x 27
    • Winner x 7
    • Informative x 7
    • Friendly x 3
    • Agree x 2
    • Funny x 1
  2. Great tutorial! +1
     
    • Agree Agree x 2
    • Friendly Friendly x 2
  3. Instead of:
    Better use:
    Code (Java):
    location.getWorld().playEffect(location.clone(), Effect.FLAME, 1);
     
    • Agree Agree x 4
    • Like Like x 1
  4. Well first of location.clone() wouldn't do anything, but I assume you just forgot the .add(x,0,z); part :p
    And any reason why .clone().add() is better than .add() and .subtract() ?
     
  5. Why would this change it anyway out of curiosity?
     
  6.  
    • Agree Agree x 1
  7. This is what happens when you are attacked by

    THE SNEAKY NINJA MAN!

    In all seriousness you beat me by a matter of seconds :p!
     
    • Funny Funny x 6
  8. Ah well... slightly fail. However if you use clone, the code is faster then adding and subtracting, but i posted it wrongly.
    Correction, instead of:
    Better use:
    Code (Java):
    location.getWorld().playEffect(location.clone().add(x,0,z), Effect.FLAME, 1);
    So you don't need to subtract anymore and save performance, because your original location object hasn't been changed.
     
  9. Wow, such a great tutorial o_O
     
    • Friendly Friendly x 2
  10. Im honeslty not 100% which one is better. .add and .subtract dont seem heavy at all. They both just modify 3 doubles. If subtracting and adding to doubles is gonna be heavy for performance then I don't know what's not. I've also seen many others use .add() & .subtract() and I've never heard anyone about it being heavy for performance.
     
  11. Great tutorial and clear explaination, but the formula diameter * Pi is used to calculate the Circumference of a circel, not the perimeter.
     
  12. Haha I knew I use the wrong term, thanks for correcting me!
     
  13. You can also use all the rest of the math, where you can exactly use it for a circle.
    Lets just say you want the location 300,64,300 as x, y, z. -----> (x-300)^2 + (z-300)^2 = (r)^2 we convert to leave z alone!
    and then you can make a circle of effects, blocks, or whatever you like!
    use your own for loop to do it! depend on the radius u like!
     
  14. I r8 best tutorial 11/10 ign.
     
    • Funny Funny x 1
  15. This helped me alot Thanks :D
     
    • Like Like x 1
  16. Sadly, I will never understand this stuff..
     
    • Funny Funny x 5
    • Agree Agree x 3
  17. Google is also your friend! ;)
    (Unless you have some disorder that prevents you from understanding this, then rip)
     
    • Funny Funny x 1
  18. The education my school offers. Its always better to learn it in school where you have first-hand experience and per-person descriptions of things. Yeah, Google is helpful but its easier to learn straight up. (visual learner)
     
    • Agree Agree x 1
  19. I didn't learn anything what I explained above in school.
     
    • Agree Agree x 2
    • Funny Funny x 1
  20. I've never really had an interest in this. If I needed it for a plugin I would look it up and learn it
     
Thread Status:
Not open for further replies.