Resource Polygons

Discussion in 'Spigot Plugin Development' started by finnbon, Jun 25, 2016.

  1. Hey guys! I'm back with another particle animation tutorial for you! :)

    Today, I'll help you with displaying 'polygons' in minecraft. When I say polygons, I'm talking about these figures/shapes:
    [​IMG]

    Let me explain the way of doing this first, then I'll show an example of how to make a pentagon (second shape from the right).

    So, do you remember the unit circle from my first tutorial? To make a circle, you loop from 0 degrees to 360, and display a particle at each iteration. This displays 360 particles in total. But, the triangle only has 3 points, and the square has 4, etc.

    We can put the polygon in a circle (let it be our unit circle):
    [​IMG]
    As you can see, the points of the pentagon line up with the circle. So hey! We could use cos() and sin() to get 5 points on the circle, which are all at an equal distance. After showing how to do that, I'll explain how to draw lines in between the points.

    We want to display 5 points on the unit circle which are all at equal distance away from eachother. We know that the full circle is 360°, so for the first point, we want to move ⅕ of 360° over the circle, then ⅖ of 360°, then ⅗ of 360°, then ⅘ of 360° and finally the whole 360°. This will give us 5 points that all have an equal distance from eachother.

    Now let's get to some coding!

    First, we make a for loop. Set the iteration amount to the amount of points you want your polygon to have.
    Code (Java):

    int points = 5; // the amount of points the polygon should have.
    for (int iteration = 0; iteration < points; iteration++) {

    }
     
    Now, we're gonna calculate how big our angle will be for the current iteration. First, we take the whole circle (360°), then we divide it by the amount of maximum points, them multiply it by our current iteration:
    Code (Java):

    int points = 5; // the amount of points the polygon should have.
    for (int iteration = 0; iteration < points; iteration++) {
      double angle = 360.0 / points * iteration;
    }
     
    Now, we calculate our x and z value just like you would with a regular circle.
    But don't forget to convert our angle, which is currently degrees, to radians.
    Code (Java):

    int points = 5; // the amount of points the polygon should have.
    for (int iteration = 0; iteration < points; iteration++) {
      double angle = 360.0 / points * iteration;
      angle = Math.toRadians(angle);
      double x = Math.cos(angle);
      double z = Math.sin(angle);
      loc.add(x, 0, z);
      // display particle
      loc.subtract(x, 0, z);
    }
     
    In the code snippet above, I also showed how to display the points. If we run this code in game, we'll see something like this (Using Flame particles):
    [​IMG]
    As you can see, we got 5 points, each from an equal distance away from eachother! Now, it's time to draw lines in between these points.

    What we want to do, is everytime we iterate with our for-loop, draw a line to the next point. This means we'll have to get the next point as well.
    Code (Java):

    int points = 5; // the amount of points the polygon should have.
    for (int iteration = 0; iteration < points; iteration++) {
      double angle = 360.0 / points * iteration;
      double nextAngle = 360.0 / points * (iteration + 1); // the angle for the next point.
      angle = Math.toRadians(angle);
      nextAngle = Math.toRadians(nextAngle); // convert to radians.
      double x = Math.cos(angle);
      double z = Math.sin(angle);
      double x2 = Math.cos(nextAngle);
      double z2 = Math.sin(nextAngle);
    }
     
    Now, we've calculated a bunch of numbers. We calculated x and z for our current location, and x and z for the next location. What we want to do now, is get the x and z value in between those 2. This is as easy as subtracting 2 variables.
    Code (Java):

    int points = 5; // the amount of points the polygon should have.
    for (int iteration = 0; iteration < points; iteration++) {
      double angle = 360.0 / points * iteration;
      double nextAngle = 360.0 / points * (iteration + 1); // the angle for the next point.
      angle = Math.toRadians(angle);
      nextAngle = Math.toRadians(nextAngle); // convert to radians.
      double x = Math.cos(angle);
      double z = Math.sin(angle);
      double x2 = Math.cos(nextAngle);
      double z2 = Math.sin(nextAngle);
      double deltaX = x2 - x; // get the x-difference between the points.
      double deltaZ = z2 - z; // get the z-difference between the points.
    }
     
    We could use a 'Vector' for this, but it's not needed. Just using 2 doubles should be better performance wise.

    Now we calculate the distance between the points, like this:
    Code (Java):

    int points = 5; // the amount of points the polygon should have.
    for (int iteration = 0; iteration < points; iteration++) {
      double angle = 360.0 / points * iteration;
      double nextAngle = 360.0 / points * (iteration + 1); // the angle for the next point.
      angle = Math.toRadians(angle);
      nextAngle = Math.toRadians(nextAngle); // convert to radians.
      double x = Math.cos(angle);
      double z = Math.sin(angle);
      double x2 = Math.cos(nextAngle);
      double z2 = Math.sin(nextAngle);
      double deltaX = x2 - x; // get the x-difference between the points.
      double deltaZ = z2 - z; // get the z-difference between the points.
      double distance = Math.sqrt((deltaX - x) * (deltaX - x) + (deltaZ - z) * (deltaZ - z));
    }
     
    As you might've noticed, we use Pythagoras to calculate the distance. If you don't know what that is I strongly suggest googling it!
    Now, we create another for loop. This will make small steps from our current location to the next.
    (I won't include all code here, it'd be too long)
    Code (Java):

    for (double d = 0; d < distance - .1; d += .1) { // we subtract .1 from the distance because otherwise it would make 1 step too many.

    }
     
    Now, we're gonna add an x and z value to the center location (let us call this 'loc').
    First we add the x and z from our current location, then we add deltaX and deltaZ, which are multiplied by 'd', the current distance from our current point.
    Code (Java):

    for (double d = 0; d < distance - .1; d += .1) { // we subtract .1 from the distance because otherwise it would make 1 step too many.
      loc.add(x + deltaX * d, 0, z + deltaZ * d);
      // display particle at 'loc'.
      loc.subtract(x + deltaX * d, 0, z + deltaZ * d);
    }
     
    That's it! The final result (in-game) looks like this:
    [​IMG]
    The final code would look like this
    (Not trying to spoonfeed, just putting it al together for the final result):
    Code (Java):

    int points = 5; // the amount of points the polygon should have.
    for (int iteration = 0; iteration < points; iteration++) {
      double angle = 360.0 / points * iteration;
      double nextAngle = 360.0 / points * (iteration + 1); // the angle for the next point.
      angle = Math.toRadians(angle);
      nextAngle = Math.toRadians(nextAngle); // convert to radians.
      double x = Math.cos(angle);
      double z = Math.sin(angle);
      double x2 = Math.cos(nextAngle);
      double z2 = Math.sin(nextAngle);
      double deltaX = x2 - x; // get the x-difference between the points.
      double deltaZ = z2 - z; // get the z-difference between the points.
      double distance = Math.sqrt((deltaX - x) * (deltaX - x) + (deltaZ - z) * (deltaZ - z));
      for (double d = 0; d < distance - .1; d += .1) { // we subtract .1 from the distance because otherwise it would make 1 step too many.
        loc.add(x + deltaX * d, 0, z + deltaZ * d);
        // display particle at 'loc'.
        loc.subtract(x + deltaX * d, 0, z + deltaZ * d);
      }
    }
     

    You can also change the size. Simply multiply x, z, x2, z2 by your desired radius!

    I realise this might be a bit tricky to follow. I tried to explain as best as I could, I hope it helped! :)
    Feel free to ask any questions, or post any suggestions below! If I made a mistake please correct me! :)

    - Finn

    Special thanks to my math teacher, Ms. Posch.
     
    #1 finnbon, Jun 25, 2016
    Last edited: Jun 25, 2016
    • Useful Useful x 23
    • Informative Informative x 21
    • Like Like x 11
    • Winner Winner x 2
  2. Good tutorial! I hope this will be useful to someone :D


    Sent from my iPhone using Tapatalk
     
    • Friendly Friendly x 1
  3. I love all your tutorials <3
     
    • Winner Winner x 1
    • Optimistic Optimistic x 1
  4. Thanks! :D
     
  5. how would you make custom forms such as a swastika? can we do that with math too ?
     
  6. Yeah you can, I won't tell you how though. You'd be better of just drawing some lines manually.
     
  7. Another great tutorial! You sir are pretty good at math (doesn't mean much coming from a 14 year old but still :p) Thanks for this tutorial :)
     
    • Friendly Friendly x 1
  8. Thanks! :)
     
  9. Does that even work? :eek:
    Like, I know that 3(2+1) = 3*3 but still
    Does that work in java? xD
    never figured out, myself .-.
     
  10. Fixed :p
     
  11. Choco

    Moderator

    You've got some unbelievable tutorials. I myself have just finished learning about sinusoidal functions, trigonometry, etc. in the 11th grade at school, so this now all makes sense to me. (Only thing left is Calculus and Vectors next year ;)). Anyways, you've exemplified perfectly how to display particles in varying shapes, and I'll definitely be sure to keep this tutorial on hand. It's really quite useful as all I've really ever known how to create is circles. Well done. Very well done indeed
     
    • Winner Winner x 1
  12. Disc

    Supporter

    This is great, I was just looking for something like this a few days ago.
     
    • Like Like x 1
  13. It makes me so sad just looking at these amazing tutorials :( I am just starting Algebra 1. (Just yesterday I begged my mom to go and buy some algebra books lol).

    Would it be possible to make a torus? Because it is basically just a circle going in a circle vertically until it meets its other end, right?

    [​IMG]
     
  14. i am god kek

    Lol, I just look for cool threads, check them out, and do something.
     
  15. This has little to nothing to do with algebra. If you want to learn to create these types of shapes, and learn about sin, cos, and tan, that gets taught in late geometry and in trigonometry. Algebra will help you in the subjects, but there's not much about shapes and formulas there, as there are in further math levels.
     
    • Agree Agree x 1
  16. [​IMG]
    [​IMG]
    Code used for this is extremely similar to the code for a sphere, lol.
     
    • Winner Winner x 3
    • Like Like x 1
  17. share with us please <3
     
  18. Code (Java):

                    int height = 15; // amount of particles layed above each other, not the actual height.
                    for (double r = 0; r < Math.PI * 2; r += Math.PI / 15) {
                        double x = Math.cos(r);
                        double z = Math.sin(r);
                        for (double i = 0; i < height; i++) {
                            double h = i * (Math.PI / height);
                            double y = Math.cos(h);
                            double radiusEdit = Math.sin(h);
                            double inwardsRadius = radius - radiusEdit;
                            double outwardsRadius = radius + radiusEdit;

                            loc.add(x * inwardsRadius, y, z * inwardsRadius);
                            ParticleEffect.FLAME.display(0, 0, 0, 0, 1, loc, 257D);
                            loc.subtract(x * inwardsRadius, y, z * inwardsRadius);

                            loc.add(x * outwardsRadius, y, z * outwardsRadius);
                            ParticleEffect.FLAME.display(0, 0, 0, 0, 1, loc, 257D);
                            loc.subtract(x * outwardsRadius, y, z * outwardsRadius);
                        }
                    }
     
    Sorry for not providing an explanation. :S
     
    • Like Like x 3
  19. Thanks!