Moving on to the next experiment, we're creating an animated radial pulse that continuously emanates outward from the center of the screen using the Screen Position node.
The pulse is built by creating repeating rings that scroll outward over time. Screen Position provides the radial distance from center, Frac creates the repeating pattern, and Time drives the animation.
We start by setting the material domain to User Interface and blend mode to Translucent.
The Screen Position node gives us viewport UV coordinates. Subtract (0.5, 0.5) to recenter the origin at the screen center.
Before calculating radial distance, the screen aspect ratio needs to be accounted for. The ViewSize node provides screen width and height, which we can divide to get the aspect ratio. We multiply the X component of our centered coordinates by this ratio, then Append it back with the Y component. This ensures the rings remain circular rather than elliptical.
The result is then passed through a Length node to calculate the radial distance from center. This gives us a gradient that increases as we move away from the center point.
The radial distance is multiplied by a RingDensity parameter to control how many rings appear across the screen. Higher values create more tightly packed rings.
For the animation, we multiply Time by -1, then add it to the density result. Frac converts this value into repeating 0-1 cycles, with each cycle representing one ring.
Before proceeding to the next step, I'm going to document how to visualize the effects of the Time and Frac nodes as it took me a while to figure out. Feel free to skip to the next step if you've already understood how it works.
The multiply output ranges from 0 at center to 20 at the corners (assuming RingDensity of 20). The first ring spans scaled distance 0 to 1, with Frac going from 0 to 1. Every subsequent ring is another identical 0 to 1 Frac cycle.
At time = 0, the center has value 0, Frac = 0. At time = 0.1, the center has value -0.1, which gives Frac = 0.9. At time = 0.2, the center has value -0.2, giving Frac = 0.8. Meanwhile, the Frac value of 0.9 that was at center has now moved outward to scaled distance 0.1, and the point where value = 0 has moved to scaled distance 0.2.
Similarly, the second ring at time = 0 has Frac = 0 at its start. At time = 0.1, the value at its start is 0.9, Frac = 0.9. At time = 0.2, the value at its start is 0.8, Frac = 0.8, and the Frac = 0.9 that was at its start is now at scaled distance = 1.1, and so on.
The same thing happens for every ring. As time progresses, the point where value = 0 travels outward through each ring in sequence. Since all rings are doing this simultaneously, the result is rings continuously emanating outward from center.
Alright, so next we add a RingSharpness parameter (default value = 0.95) and use it with a Step node to control the hardness of each ring edge. The Frac output connects to the X input of the Step node, and RingSharpness connects to the Y input. The Step creates the ring pattern by returning 1 where the Frac output is greater than or equal to the RingSharpness value.
The Step output is multiplied by an Opacity parameter for transparency control and connected to Opacity. A color value connects to Final Color to set the ring color.
The material is then assigned to an image widget that fills the entire screen. The result is a continuous radial pulse animation emanating from screen center, as shown in the screenshot below.
The project files for this and other Screen Position experiments are available on Github: https://github.com/RohitKotiveetil/UnrealEngine--ScreenPositionExperiments
Comments
Post a Comment