Resource Creating a sphere!

Discussion in 'Spigot Plugin Development' started by finnbon, May 9, 2016.

  1. Hello people!

    Many people have asked to make another math/animation tutorial, so here I am! :) Today I'll explain how to make a sphere! I'll try to use images as much as possible, to give you a good visualisation of what we're doing.

    First off, please note that I assume you have carefully read this tutorial and that you also understand it.

    Now, let's start!

    How are we going to build our sphere?
    Our sphere will basicly be multiple layered circles with different radiuses.
    You already know how to generate a circle, so that shouldn't be a problem.

    But, how do we determine what the radius should be?
    Imagine this sphere (it's 2d, just imagine it's an actual sphere)
    [​IMG]
    This is how we'll be building our sphere, multiple layered circles.
    But hey! Look at the radiuses on each circle. What if we would put that in a graph?
    [​IMG]
    We get a sine wave!
    But Finn, I'm bad at making connections between certain things, what does this mean?
    It means we'll use the sinus function to calculate our radiuses.
    As you can see in the graph, we'll only need 1 wave. From x = 0 to x = PI. This means that we're going to use values between 0 and PI to calculate the radiuses.

    Now let's get to the coding!

    First, we decide how many circles we want to stack onto eachother. Let's go for 10!
    We are going to make a for-loop for the height.
    Code (Java):
    for (double i = 0; i <= Math.PI; i += Math.PI / 10) { // 10 being the amount of circles.
      double radius = Math.sin(i); // we get the current radius
      double y = Math.cos(i); // we get the current y value.
    }
    Now, let me explain what's going on here.
    First we get the current radius by doing what I explained above. If you don't understand read the part with the sphere and the graph again. :)
    Now for the y variable. Although in the drawing all the circles had a set distance from each other, that will not be the case here. In this picture you can clearly see that not all the height differences are the same.
    [​IMG]
    If we did make them the same, it would look like this:
    [​IMG]
    The height differences get smaller the higher or lower we go, so we can use the cosinus function for that. :)


    Now, it's time to generate the horizontal circle. This part should feel rather familiar.
    Code (Java):
    for (double a = 0; a < Math.PI * 2; a += Math.PI / 10) {
      double x = Math.cos(a) * radius; // x-coordinate
      double z = Math.sin(a) * radius; // z-coordinate
      location.add(x, y /* from the previous code */, z); // 'location' is our center.
      // display particle at 'location'.
      location.subtract(x, y, z);
    }
    That's it! :) I hope I explained it well. I feel like I forgot a few things here and there. It's been a while since I've explained something like this, so please tell me if anything is unclear!

    Here is the full code for if you got lost on the way. Please don't copy paste this without knowing what you're doing!!
    Code (Java):
    for (double i = 0; i <= Math.PI; i += Math.PI / 10) {
       double radius = Math.sin(i);
       double y = Math.cos(i);
       for (double a = 0; a < Math.PI * 2; a+= Math.PI / 10) {
          double x = Math.cos(a) * radius;
          double z = Math.sin(a) * radius;
          location.add(x, y, z);
          // display particle at 'location'.
          location.subtract(x, y, z);
       }
    }

    Bonus:

    Improving efficiency
    This method of spawning a circle can be rather heavy for your server. There's a simple way to improve this.
    First, we need a 2d double array, like this:
    Code (Java):
    private double[][] coordinates;
    When initializing it, we do the following.
    Code (Java):
    coordinates = new double[11 + 10 * 2][];
    But what does this do? In the first for-loop, we add a tenth of PI to i, until it's greater than PI, which means it'll iterate 11 times. In the second for loop, we add a tenth of PI to a until it is greater or equal to 2 times PI, which means it'll iterate 10 * 2 = 20 times.
    In this array we will store our coordinates. First, create a new int variable called arrayLocation. (Do this above all the sphere code)
    Code (Java):
    int arrayLocation = 0;
    Now, where you would normally spawn a particle, we store the x, y and z values.
    Code (Java):
    coordinates[arrayLocation++] = new double[] { x, y, z };
    Now, to spawn the sphere. Loop through this array. Then get the x, y and z value, add it to your location, spawn a particle, and subtract them from your location. This way you only have to run the sphere code once on startup! :)

    Thanks for reading! Please provide constructive feedback if you have any! :)

    - Finn
     
    #1 finnbon, May 9, 2016
    Last edited: Oct 19, 2016
    • Winner x 16
    • Useful x 12
    • Informative x 9
    • Like x 8
    • Creative x 2
    • Friendly x 1
  2. Hello @finnbon,

    This is very helpful and useful. Props for this!

    Regards,
    Jake B.
     
    • Informative Informative x 1
    • Friendly Friendly x 1
  3. A very usefull tutorial! Thanks @finnbon ;)
     
    • Friendly Friendly x 1
  4. Awesome tutorial as usual, @finnbon.
     
    • Friendly Friendly x 1
  5. I would happily write another one, but what should the topic be? Simply another animation or somthing else? I'm open to suggestions! :)
     
  6. Hello @finnbon,

    It be very cool if you kept with particle tutorials, they are very interesting to see and very helpful!

    Thanks!
    Jake B.
     
  7. You did it again! Great tutorial. Keep it up! :)
     
    • Friendly Friendly x 1
  8. Baby i love you!
     
    • Friendly Friendly x 1
  9. You should make for like a water pulse effect. Picture pokemon
     
    • Agree Agree x 1
  10. Scoreboard animations? Like different types (scroll, flash, etc)
     
  11. That has nothing to do with this kind of math. ;)
     
    • Agree Agree x 1
  12. I know but he was asking for any tutorial :p
     
  13. Informative tutorial :D
     
  14. can you make more shape tutorial ?
     
  15. Hey!
    First off: Epic tutorial! It sure helped me alot. But i still dont get the part with the Array(Im Sorry) Could you somehow explain what you mean by looping through the array? I get the creation of the array, but i dont know how to get the created values out of that array and use those as a location.
     
  16. The arrays he created are multidimensional arrays, and in this case a 2D one. It can get quite complicated when you get down to it, but Google will supply you a better answer here for information about them.
     
  17. I assume you have problems with what a 2D array is. Let me explain it like this

    Think of it as this
    Code (Java):
    List<List<Integer>> list;
    You can also think of an array like cubes placed next to each other. Each one contains a value (or not of course, if not specified)
    [ ] [ ] [ ] [ ] [ ] [ ] [ ]

    Now, imagine that in these cubes, other arrays are stored. You could think of it as a 2 dimensional area. it's hard to explain, but you'll get it! :)
     
  18. Very good tutorial!
     
    • Like Like x 1
  19. LOL SINUS WAVE GOOD TUTORIAL
     
  20. I DONT GET IT DID I USE THE WRONG WORD ENGLISH IS NOT MY MOTHER TONGUE.