Although not every effect or demo in the wilderness is circular, it's common to see a lot of them using circular functions in one way or another.

**Math.sin** and **Math.cos** are handy because they loop, like a wave that goes up and down. When the given value goes over **Math.PI 2*, the value they give you it's going to repeat. Both sin and cos are actually both the same function but offset by

**HALF_PI**.

Their circular nature makes it super useful for repeating things. Want a repeating scale animation? Slap a cosine to it.

let scale = Math.cos(time)

Want something to go in circles? Slap both of them with the same angle.

position.x = Math.sin(time);

position.y = Math.cos(time);

#### Getting started

- Rose Patterns with circular functions
- Sine and cosine from a shader perspective
- Using Circular functions for mouse trails.

### Daydream sphere

In daydream, Keita creates 3 spheres. In their fragment shader, he samples simplex-noise using the normals of the spheres. Then, discards any pixel where the noise is lower than `0.3`

. This create the gaps that allow us to see the most inner spheres

float n = snoise(vec3(normal.x + time , normal.y, normal.z));

float visibility = step(0.3, n);

if (visibility < 1.0) discard;

### Stripes around orb

This animation is similar to the daydream sphere. However, the effect is limited to a single stripe, and it has a lot more spheres. Here's a basic version of what it would look like in the fragment shader:

float stripeSize = 0.2;

float stripe = step(0.5 -stripeSize, uv.y) * step(uv.y, 0.5 + stripeSize);

float n = snoise(vec3(normal.x + time , normal.y, normal.z)) * stripe;

…

Using the sphere UVs I calculate a white-centered stripe. Then, multiply that by the noise to get the noise only happening in the center of the sphere.

### Rectangle around circle

To position a lot of rectangles like in mrDoob's demo, we first divide 2PI by the number of rectangles:

let anglePerSquare = (Math.PI * 2.) / count

Then we loop over all our meshes and calculate their x and y position:

// in some loop

let angle = index * anglePerSquare

mesh.position.x = Math.cos(angle) * radius

mesh.position.y = Math.sin(angle) * radius

this.scene.add(mesh)

### Circle particle torus

While this looks way more complicated than the last demo. A torus is a set of circles around another circle. It's not even an extra step from the last demo, It's the same step repeated twice!

// 1s loop

let pivot = new Object3d()

let torusAngle= index * anglePerPivot

pivot.position.x = Math.cos(torusAngle) * torusRadius

pivot.position.y = Math.sin(torusAngle) * torusRadius

Then, for every pivot (an inner loop), we repeat the process above but add each mesh to the pivot.

### Dave circular motion

This kind of circular motion also worsk with **cosine** and **sine.** However, they are applied to the scale and y positoning of the rings:

// loop over all rings.

let offset = ringIndex * Math.PI + time * Math.PI

let minScale = 0.2;

let maxScale = 1.;

ring.scale.setScalar( (Math.sin(offset) * 0.5 + 0.5) * (maxScale - minScale) + minScale )

ring.position.z = Math.cos(offset) *0.8

For the circular motion to work correctly, you need to use both **cos** and **sin**.