Sine and cosine in positioning elements

Questions
1

I am really having hard time understanding the roles sine and cosine in positioning stuff they play for eg in this piece of code:
for (let i = 0; i < 50; i++) {
const angle = Math.random() * Math.PI * 2; // PI is half circle
const radius = 3 + Math.random() * 6;
const x = Math.sin(angle) * radius;
const z = Math.cos(angle) * radius;

const grave = new THREE.Mesh(graveGeometry, graveMaterial);
grave.position.set(x, 0.3, z);
grave.rotation.y = (Math.random() - 0.5) * 0.4;
grave.rotation.z = (Math.random() - 0.5) * 0.4;
graves.add(grave);
}

2

Functions sin and cos allow to position things along the perimeter of a circle. If we know the radius of the circle and the angle, we can calculate the coordinates of a specific point on the circle.

Because positions of points can be defined with distance (i.e. radius) and an angle of rotation (i.e. angle), the values (radius,angle) are called “polar coordinates”.

x = r * sin(α)
z = r * cos(α)

image
image889Ă—714 31.8 KB

5 Likes
3

Thanks Man for the explanation! I am just still in the highschool and the all I knew about them was just to solve some stupid trig and algebra problems LOL. Thanks again.

4

Sine and cosine are like special tools for putting things in the right place around a circle. Imagine we have a circle and we know how far out from the middle it goes (that’s the radius) and how much we’ve turned from a starting point (that’s the angle).

Using these special instructions we can figure out exactly where something should go on the circle.

So, to find where something should go, we use these simple rules:

  • For the sideways position (x), it’s the radius times the sine of the angle.
  • For the up-and-down position (z), it’s the radius times the cosine of the angle.