Sine, Append, Abs & Lerp

 

Written For: 4.9 Estimated Duration: 20 mins Difficulty: Easy

Overview

Sine waves: a curve representing periodic oscillations of constant amplitude as given by a sine function.

I’ve found Sine waves to be one of the most versatile and staple functions to use when crafting Materials. From lerping between colours to animating vertices, it’s really helpful to understand Sine waves and how to manipulate them. I always use the online Desmos Graphing Calculator to visualise my curves and I’d recommend you try it out.

sin(x)

So we start with our basic Sine wave – it transitions between 1 and -1 over a period of time.

2sin(x)

By multiplying the Sine wave by a number, we can affect it’s amplitude; or the extremes of the range the curve is transitioning between. In this case we’ve multiplied sin(x) * 2 so we have doubled the amplitude of the curve, so it will now move from 2 to -2.

sin(x) + 3

By adding a number to the Sine wave we can offset the curve. By adding 3, the curve now moves between 4 and 2.

sin(4x)

We can also change the frequency  (or how often the curve repeats) of the Sine wave. Here we’ve multiplied by 4 to ‘speed the curve up’. Alternatively, multiplying by a fraction (like 0.5) would ‘slow the curve down’.

In Engine: Sine & Lerp

So now we understand how we can manipulate a Sine wave, how can we do this in engine? First off, we’ll use Sine to drive a Lerp (or transition) between two colours.

If you plug this network together, you’ll end up with the below result.

So what’s actually happening? Well Lerp is short for ‘linear interpolation’, meaning the Lerp node will transition between A and B based on an Alpha; 100% of A when the Alpha=0 and 100% of B when the Alpha=1.

As we know, a Sine curve moves between 1 and -1 and as you’ve probably noticed, the cube stays pink for longer than it stays blue because all the time the curve is 0 or below it’s pink, as the Alpha = 0. You can see this roughly marked out for one wavelength in the below diagram.

So how do we fix this? Well to get the curve to move in the 0-1 space, we need to multiply by 0.5 (to half the amplitude) and offset it up by adding +0.5

0.5sin(x) + 0.5

So if we update our node network too look like this:

We’ll get the result we were looking for, a smooth transition from pink to blue and back again!

In Engine: Sine & Append

As well as being used to Lerp between colours, Sine can be used to animate vertices by changing their World Position Offset. A simple setup to move an object up and down on the z-axis can be seen below.

Giving us this result.

To speed up or slow down this animation, we have to multiply Time by a value; greater than 1 makes it faster, smaller than 1 slows it down.

This speeds the ball up five times faster!

When working with Materials you have to think of the XYZ axis correlating to RGB where R=X G=Y B=Z.  You always have to plug-in a vector3 into the World Position Offset, even if you only want to move the object in one axis – so use Append to put in the blank values for the other axis.

This setup means the ball would move on the x-axis
Two Appends would be required to make the movement on the y-axis alone

In Engine: Sine & Abs

There’s one last basic function I want to mention for manipulating Sine curves – Abs – or Absolute. This function turns any negative numbers into positives, turning our normal Sine curve into this:

It’s handy to know about in-case you have a case where you never want to have negative numbers. To implement this in the Material editor, you need to add the Abs node as shown below.

And that wraps up this basic explanation of using Sine, Lerp, Append and Abs in the Material Editor!