Categories

# Using MetalKit part 11

Let’s continue our journey into the wonderful world of shaders using the `Metal Shading Language (MSL)` by picking up where we left off in Part 10. Using the same playground we worked on last time, we will next try to get close to making art using `MSL` math functions such as `sin``cos``pow``abs``fmod``clamp``mix``step` and `smoothstep`.

First, let’s look at our “sun eclipse” code from last time. Strangely enough, we start from the end of the functions list above because `smoothstep` is the function we need to fix an issue we had last time and we did not pay attention to it – our output image has jaggies (is aliased) as you can see below if we zoom in enough to make it visible:

The smoothstep function depends on a `left edge` being smaller than a `right edge`. The function takes a real number `x` as input and outputs `0` if `x` is less than or equal to the left edge, `1` if `x` is greater than or equal to the right edge, and smoothly interpolates between `0` and `1` otherwise. The difference between the `step` and the `smoothstep` function is that `step` makes a sudden jump from `0` to `1` at the edge. The `smoothstep` function implements cubic `Hermite` interpolation after doing a clamp. An improved version, named `smootherstep`, has zero `1st` and `2nd` order derivatives at `x=0` and `x=1`:

```smoothstep(X) = 3X^2 - 2X^3

smootherstep(X) = 6X^5 - 15X^4 + 10X^3
```

Let’s implement the smootherstep() function:

```float smootherstep(float e1, float e2, float x)
{
x = clamp((x - e1) / (e2 - e1), 0.0, 1.0);
return x * x * x * (x * (x * 6 - 15) + 10);
}
```

The clamp() function moves the point to the nearest available value, given a `min` and `max` value. The input takes the value of `min` if less than it, the value of `max` if greater than it, and keeps its value if in between. Our compute kernel should now look like this:

```int width = output.get_width();
int height = output.get_height();
float2 uv = float2(gid) / float2(width, height);
uv = uv * 2.0 - 1.0;
float distance = distToCircle(uv, float2(0), 0.5);
float xMax = width/height;
float4 sun = float4(1, 0.7, 0, 1) * (1 - distance);
float4 planet = float4(0);
float m = smootherstep(radius - 0.005, radius + 0.005, length(uv - float2(xMax-1, 0)));
float4 pixel = mix(planet, sun, m);
output.write(pixel, gid);
```

The last function we look at before moving on, is `mix`. The mix() function performs a linear interpolation between `x` and `y` using `a` to weight between them. The return value is computed as `x * (1 - w) + y * w`. In this case, the `planet` color and `sun` color are interpolated using `smootherstep` as weight. If you execute the playground, the output image now has anti-aliasing and the jaggies are all gone:

The next functions we look at are `abs` and `fmod`. The abs() function simply returns the absolute value, or the distance of a number from `0`. In other words, any value loses its sign and always returns a non-negative value. The fmod() function returns the remainder fractional part of a float (the equivalent of the modulo operator `%` for integers). Let’s apply these two functions to some values and see what we can get:

```float3 color = float3(0.7);
if(fmod(uv.x, 0.1) < 0.005 || fmod(uv.y, 0.1) < 0.005) color = float3(0,0,1);
float2 uv_ext = uv * 2.0 - 1.0;
if(abs(uv_ext.x) < 0.02 || abs(uv_ext.y) < 0.02) color = float3(1, 0, 0);
if(abs(uv_ext.x - uv_ext.y) < 0.02 || abs(uv_ext.x + uv_ext.y) < 0.02) color = float3(0, 1, 0);
output.write(float4(color, 1), gid);
```

The output image should look like this:

First, we drew a grid of blue lines spaced out at 0.1 between them and with a thickness of 0.005. Next, we normalized the screen coordinates so we can work with the [-1, 1] interval, and then drew the `X`and `Y` axes in red with a thickness of 0.02. Finally, we drew the two diagonals in green with the same thickness, keeping in mind that x – y gives us the decreasing slope (diagonal) while x + y gives us the increasing one.

Finally, let’s use sin()cos()fract()dot() and pow() together with other functions we already discussed:

```float2 cc = 1.1 * float2(0.5 * cos(0.1) - 0.25 * cos(0.2), 0.5 * sin(0.1) - 0.25 * sin(0.2) );
float4 dmin = float4(1000.0);
float2 z = (-1.0 + 2.0*uv) * float2(1.7, 1.0);
for(int i=0; i<64; i++) {
z = cc + float2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y);
dmin=min(dmin, float4(abs(0.0 + z.y + 0.5 * sin(z.x)), abs(1.0 + z.x + 0.5 * sin(z.y)), dot(z, z), length(fract(z) - 0.5)));
}
float3 color = float3(dmin.w);
color = mix(color, float3(1.00, 0.80, 0.60), min(1.0, pow(dmin.x * 0.25, 0.20)));
color = mix(color, float3(0.72, 0.70, 0.60), min(1.0, pow(dmin.y * 0.50, 0.50)));
color = mix(color, float3(1.00, 1.00, 1.00), 1.0 - min(1.0, pow(dmin.z * 1.00, 0.15)));
color = 1.25 * color * color;
color *= 0.5 + 0.5 * pow(16.0 * uv.x * (1.0 - uv.x) * uv.y * (1.0 - uv.y), 0.15);
output.write(float4(color, 1), gid);
```

The `sin()` function is just the `sine` of an angle, the `cos()` function is obviously the `cosine` of an angle, the `fract()` function returns the fractional part of a value, the `dot()` function returns the scalar product of two vectors and finally, the `pow()` function returns the value of a number raised to the power of another number. This code generates a beautiful fractal, a true piece of art courtesy of `Inigo Quilez`. The output image should look like this:

Your assignment is to try to understand how the `magic` works here. The source code is posted on Github as usual.

Until next time!