Polar Coordinates

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/Subtract) and scale (Multiply/Divide) these UVs to manipulate how a texture is sampled.

One useful thing we can do is use a Polar Coordinates node to convert these Cartesian coordinates into a Polar coordinate system.

PolarCoordGraph1

In the Polar Coordinates system each point is defined by a distance from a reference point, and an angle from a reference direction. In shadergraph 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.

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

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

PolarCoordGraph2

If we put the output of the Polar Coordinates node into a Split node, the R output will give us the distance from our reference point. The preview helps show 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 the preview doesn’t display negative numbers any differently from 0, but they are there!)

Okay, so these coordinates are great, but what can we do with them? Well, one thing we can do is use these as new UVs to sample textures. Here I’m using a Sample Texture 2D node to sample a noise texture, and rather than it being flat it’s become warped around the center point. Note that this texture is seamless – you can repeat the texture and it won’t show 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).

PolarCoordGraph3

This is great for a portal/wormhole or whirlpool effect. And even better, we can animate it by using a Time node! If you are trying to learn shadergraph, this might be a good exercise to attempt.

These posts use Polar Coordinates :