# Cyanilux

Game Dev Blog & Tutorials

# Polar Coordinates

When using UVs you are usually using the Cartesian coordinate system, or something similar to it at least. Pixels along the X or U axis start at 0 and increase to 1 horizontally, and the same goes for the Y or V axis but vertically. We can then offset (Add or Subtract) and scale (Multiply or Divide) these UVs to manipulate how a texture is sampled.

We can use the Polar Coordinates node to convert these Cartesian coordinates into a Polar coordinate system.

In the Polar Coordinates system each point is defined by a distance from a reference point, and an angle from a reference direction. In Shader Graph this reference point is the Center input on the node, and the reference direction is always downwards, which can been seen on the preview of the node where the green gradient stops.

If you are interested in the maths used to convert between these spaces, this is the generated code for the node:

 ``````1 2 3 4 5 6 7 `````` ``````void Unity_PolarCoordinates_float(float2 UV, float2 Center, float RadialScale, float LengthScale, out float2 Out) { float2 delta = UV - Center; float radius = length(delta) * 2 * RadialScale; float angle = atan2(delta.x, delta.y) * 1.0/6.28 * LengthScale; Out = float2(radius, angle); } ``````

If we put the output of the Polar Coordinates node into a Split node, the R output will give us the distance from the Center.

• The Preview node shows this as the center point is black (0), and as points get further away it increases showing red.

• In this image I’m using a circles to represent the values of 0.5 of 1.

The G output will give us the angle from the downwards direction.

• In the range of -0.5 to 0.5, increasing clockwise which can be seen via the green part of the preview.

• Note that previews won’t display negative numbers any differently from 0, but they are there! You could use an Absolute or Negate node temporarily to help visualise them.

### Example

One thing that we can do with these new coordinates is use them as new UVs to sample textures. Here I’m using a Sample Texture 2D node to sample a noise texture. Rather than it being flat (like in the other node) it’s become warped around the center point. Note that the texture used here is seamless so it repeats without any noticeable seams. (Note, if you are using a seamless texture but are getting flickering seams – turn off Mip Maps for the texture, or use the Sample Texture 2D LOD node set to 0).

This is great for a portal/wormhole or whirlpool effect. And we can also animate it by using a Time node and offsetting the values using Add or Subtract nodes! If you are trying to learn Shader Graph, this might be a good exercise to attempt.