In this tutorial we will animate a Circle in Unity's Unlit Shader.
We will start with Circle drawn on screen, if you don't know how to draw a Circle you could follow this tutorials.
(How to Draw a Cirlce).
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.
Lets Draw the Circle First. Our origin is in the center.
To draw the Circle we shifted our origin from bottom left corner to center, by just substracting the float2(0.5, 0.5) from UV.
If length of UV at specific pixel is less than radius (0.2) then the color is white otherwise it is black.
The size of Circle at different values of radius is given below.
To animate the Circle we just have to iterate the radius values like, in a wave form.
0.20 .. 0.22 .. 0.24 .. 0.26 .. 0.28 .. 0.30 .. 0.28 .. 0.26 .. 0.24 .. 0.22 .. 0.20
Before animating the radius values you have to understand the working of Sin function.
At radius 0.2
At radius 0.25
At radius 0.30
Sin( ) function returns positive and negative half cycle of values. (As shown in the graph)
Positive half cycle have values 0.0 .. 0.25 .. 0.50 .. 0.75 .. 1.0 .. 0.75 .. 0.5 .. 0.25 .. 0.0
(From 0.0 to 1.0 then back from 1.0 to 0.0)
Negative half cycle have values 0.0 .. -0.25 .. -0.50 .. -0.75 .. -1.0 .. -0.75 .. -0.5 .. -0.25 .. 0.0
(From 0.0 to -1.0 then back from -1.0 to 0.0)
If we give _Time.y as input to Sin function. e.g sin(_Time.y)
For different values of _Time.y the Sin function will return the following values. (As shown in the graph)
sin(_Time.y) returns 3 half cycles in a time interval of 9.5. (As mention in the graph)
If we multiply 5 with _Time.y, e.g sin(_Time.y * 5)
It will return 6 half cycles (Positive & Negative).
Currently the Sin function is returning positive and negative half cycles, and we need only positive half cycles, so we will convert the negative half cycles into positive one's.
We will use abs function. e.g abs(sin(_Time.y))
abs function returns only positive value, if you pass -0.4 it will return 0.4.
abs function will convert our negative half cycles into positive one's. (As shown in te graph)
Positive half cycle have values 0.0 .. 0.25 .. 0.50 .. 0.75 .. 1.0 .. 0.75 .. 0.5 .. 0.25 .. 0.0
(It goes From 0.0 .. 0.5 .. 1.0 then back from 1.0 .. 0.5 .. 0.0)
We want to scale the value from 0.0 ... 1.0 to 0.0 ... 0.4. e.g
0.0 .. 0.1 .. 0.2 .. 0.3 .. 0.4 .. 0.3 .. 0.2 .. 0.1 .. 0.0
For this purpose we will multiply abs(sin(_Time.y)) with 0.4, e.g abs(sin(_Time.y)) * 0.4
abs(sin(_Time.y)) * 0.1 will gives us iterating values Like,
0.0 .. 0.025 .. 0.05 .. 0.075 .. 0.1 .. 0.075 .. 0.05 .. 0.025 .. 0.0
If you add abs(sin(_Time.y)) * 0.1 in 0.2 at each frame. (mentioned in Green cell)
It will give us iterating values of radius. e.g
0.20 .. 0.22 .. 0.24 .. 0.26 .. 0.28 .. 0.30 .. 0.28 .. 0.26 .. 0.24 .. 0.22 .. 0.20
At frame 1 value of radius is 0.2 + 0.025 = 0.225
At frame 2 value of radius is 0.2 + 0.05 = 0.25
At frame 3 value of radius is 0.2 + 0.075 = 0.275
At frame 4 value of radius is 0.2 + 0.1 = 0.3
At frame 5 value of radius is 0.2 + 0.075 = 0.275
At frame 6 value of radius is 0.2 + 0.05 = 0.25
At frame 7 value of radius is 0.2 + 0.025 = 0.225
At frame 8 value of radius is 0.2 + 0.0 = 0.20
And that's how you can animate a Circle.
[IMPORTANT] The color of Circle is white in your screen, you have to make it colorful on your own.
