# Resource Polygons

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

1. ### finnbon

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:

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):

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;
double x = Math.cos(angle);
double z = Math.sin(angle);
// 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):

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.
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.
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.
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:

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.
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
Last edited: Jun 25, 2016
• Useful x 23
• Informative x 21
• Like x 11
• Winner x 2
2. ### Rexcantor64

Good tutorial! I hope this will be useful to someone

Sent from my iPhone using Tapatalk

• Friendly x 1
3. ### LegendBuilders

I love all your tutorials <3

• Winner x 1
• Optimistic x 1

Thanks!

5. ### Franz-san

how would you make custom forms such as a swastika? can we do that with math too ?

6. ### finnbon

Yeah you can, I won't tell you how though. You'd be better of just drawing some lines manually.

7. ### iTouchedTrump

Another great tutorial! You sir are pretty good at math (doesn't mean much coming from a 14 year old but still ) Thanks for this tutorial

• Friendly x 1

Thanks!

9. ### Proximyst

Does that even work?
Like, I know that 3(2+1) = 3*3 but still
Does that work in java? xD
never figured out, myself .-.

Fixed

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 x 1
12. ### Disc Supporter

This is great, I was just looking for something like this a few days ago.

• Like x 1
13. ### avighnash

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?

15. ### avighnash

i am god kek

Lol, I just look for cool threads, check them out, and do something.

16. ### GamerzKing

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 x 1
17. ### finnbon

Code used for this is extremely similar to the code for a sphere, lol.

• Winner x 3
• Like x 1

19. ### finnbon

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);

ParticleEffect.FLAME.display(0, 0, 0, 0, 1, loc, 257D);