Move Object In Circular Path

In this tutorial we will learn how to move an object in circular path in Unity's Unlit Shader.



[IMPORTANT]
If you are visiting this website for the very first time, please have a look at the first tutorial, it would help you to understand this tutorial better. Click Here!

Project Setup

First add a plane then rotate it's face toward camera, or set the plane rotation to (90, 180, 0).
Add a unlit shader and apply it to a material, and apply that material to the plane.

open the Unlit Shader in Visual Studio.

Bootstrap Themes



With this rotation of plane, the origin of i.uv is bottom left corner.

Bootstrap Themes

We will start from this point, a circle drawn on screen.
If you don't know how to draw a circle you could follow this tutorial. Click Here!

Bootstrap Themes
Bootstrap Themes
Bootstrap Themes

To move the circle, we just have to move UV vectors of all pixels.

For example if we add float2(0.25, 0) in UV's of all pixels, it will shift the UV vectors of all pixels to the left, and the UV vectors with length less than 0.2 also shifted to left, so our circle will draw there.

e.g
-0.5 + 0.25 = -0.25
0.0 + 0.25 = 0.25
0.5 + 0.25 = 0.75
.
.

Bootstrap Themes
Bootstrap Themes
Bootstrap Themes
Bootstrap Themes
Bootstrap Themes
Bootstrap Themes
Bootstrap Themes

If we add float2(0.25, -0.25) in UV.

Bootstrap Themes
Bootstrap Themes
Bootstrap Themes

If we add float2(0.25, 0.25) in UV.

Bootstrap Themes
Bootstrap Themes
Bootstrap Themes

If we add float2(-0.25, 0.25) in UV.

Bootstrap Themes
Bootstrap Themes
Bootstrap Themes

If we add float2(-0.25, -0.25) in UV.

Bootstrap Themes
Bootstrap Themes
Bootstrap Themes

By just adding With these four points in UV we were able to move the circle in corner points.
To move the circle in circular path we just have to add these circular points in UV.

Bootstrap Themes
Bootstrap Themes

How to generate points at circular position?
There is an equation that could generate points at circular position.

x = r cos(θ)
y = r sin(θ)

Just input the radius (r) and angle (θ) and this equation will generate a point (x, y) at radius (r) from origin and at an angle (θ).

Circular points (x, y) generated for different values of radius (r) and angle (θ) are shown in the image.

(x, y) for r = 0.25, & θ = 0 o
(x, y) for r = 0.25, & θ = 36 o
.
.
(x, y) for r = 0.25, & θ = 144 o
.
.
(x, y) for r = 0.25, & θ = 324 o

Bootstrap Themes

Now just add these circular offset points in UV, and our object(circle) will start moving in a circular path.
_Time.y keep on increasing on each frame, so behaves like input angle (θ).

Bootstrap Themes