Original subtitles

With the tiling done, we can form the shape of our bricks.

For this we'll be using a distance field, which is basically a gradient that represents the closest

distance to any point on a given surface. Let's see how we can approach this in logical steps.

Let's first make some space here, and we'll bypass the tiling for now,

as just one instance makes it easier to visualize everything.

Looking at each channel separately, we can split our plane into two fields,

with a Less Than operation. This gives us an output of one for any input below the threshold,

and a value of zero everywhere else. So with the threshold we can set the position of the split.

By adding an Absolute operation to a gradient, we can create symmetry, as all the values below

zero will get flipped. So feeding this into the Less Than operation now creates a band.

We can repeat this with the Y axis, and combine them with a Minimum operation,

which outputs the lowest of the two input values.

This gives us a rectangle, as everywhere outside this shape at least one of the values is zero,

the lowest of the two values, thus cutting off the band of the other axis. When using

the Minimum operation on binary values, like this, you can think of it like a boolean intersection.

Instead of the two absolutes, we can use a Vector Math node before the separate,

to compute the absolute value of all channels at once.

But this setup is still not ideal, with the two Less Than operations for us to control,

and it doesn't really give us much flexibility to, for example, round the corners.

A better approach is to just remove these Less Than operations,

and switch this Minimum to a Maximum. This will give us a gradient in a square shape.

This works because along the diagonals, both gradients have the same value,

and within each triangular section, the gradient that runs along that axis has a greater value than

the other gradient. So taking the Maximum, which outputs the largest of the two inputs,

we are basically selecting which of the gradients to use for each section.

If we add a Less Than after this, we get a square that we can control with a single value.

Then we can let the ratio multiplier in the Bricks group determine the ratio of the shape.

Now if we just neaten this up a bit, and plug it after the bricks setup,

we see that it doesn't quite behave as we'd like.

That's because this square setup was using the origin of the coordinate space as the center,

while our bricks have the origin in the lower left corner like a UV tile.

To fix this, we can just subtract 0.5 from our X and Y coordinates,

moving the (0,0) point to the center of the bricks.

Now if we adjust the threshold, we can change the size of the bricks,

and they are centered correctly.

Now we have the issue of the mortar gaps being different in each axis.

This is because we scaled the axes by different amounts, making the gradients

have different slopes, so the mortar gaps are being scaled proportionately. And by slope,

I mean how much the value in the gradient changes over a certain distance.

We can fix the slope difference by taking the transformation we did before the tiling

and applying it in reverse after the tiling. So let's tab into the Bricks group, to add a Size

output that will allow us to access the X and Y dimensions of the bricks from outside the group.

We can then use these dimensions to scale the vector, and correct the different scaling.

Here we are multiplying our brick dimensions, but our goal is to reverse this operation,

so let's output the inverse of this scaling factor, which is equal to one over the value.

Then we can duplicate this Combine XYZ node, and connect our factor to the Y input,

as we want to scale the vertical coordinate. And then we can connect

this as a new group output and name it. Something like Size seems appropriate.

Now we can multiply our vector. Note that here we are multiplying by the inverse of the scaling,

which is the same as dividing this value by the non-inverted scaling,

but having the inversion precomputed will be convenient for other things later.

Now we can visualize that the slopes are the same by looking at the result of the Maximum operation.

Here, with equal slopes, we see that all the diagonals are at 45 degrees from the axes,

while with different slopes, their angles will be different.

But this creates a new problem. Our shape is now a square. What we want to do is offset

the gradients such that the proportions align with the boundaries of our tiling.

This will make more sense if we think of the setup slightly differently. So far, we have been looking

at gradients from the center going outwards along the axes, but we can better transform

them such that they start at the boundaries of the tiles, and go up towards the center.

That way, no matter how we scale the gradients, the value on the tile boundary will not change

or shift, as a value of zero doesn't change when multiplied, and acts as the scaling pivot.

Before we rescaled the gradients, they all had a value of 0.5 at the boundaries,

so we can subtract that same amount from them, to set that as the zero point. But now

our gradients shifted into negative values, so we want to invert them. Instead of multiplying

by minus one, we can just flip the terms of the subtraction, which has the same effect.

Now that we inverted the direction of the gradients, we also need to invert

the operation joining them, so instead of Maximum let's use Minimum over here. We now

have basically the same thing we started with, but the magic happens when we re-enable the scaling.

We now have gradients with the same rate, as we can verify by the 45 degree diagonals,

but instead of forming a shape from the center,

we are effectively calculating the distance to the boundaries of the tiles.

This is known as a distance field. Which is basically a field of values

where each value represents the closest distance to any point on a given surface.

And here we just computed the internal distance field of a rectangle.

Now, when we change the threshold, we are actually changing how far away from

the boundaries the mask ends, making the mortar gaps equally spaced everywhere.

To recap, we now have the tiled coordinates coming from the Bricks group, we are subtracting 0.5 to

offset the coordinates to the center of the bricks, as our range goes from zero to one

in each axis, then we are taking the absolute to mirror the coordinates, and finally, we are

subtracting the coordinates from 0.5, to offset the origin back to the boundary of the bricks,

but this time mirrored, such that the coordinates are zero on all sides,

reaching the highest value in the middle, instead of being zero in the lower left corner,

and going up to the upper right corner. After all that, we are scaling the coordinates by

the inverse of the brick scaling factor, to correct the slope of our gradients.

There is just one small modification that we can make to this setup that will make our

lives easier later on. Here we are correcting the aspect ratio after the Absolute operation,

but later we will also want to have access to an

aspect corrected coordinate space that is not mirrored by the Absolute operation.

So instead of computing this twice, we can just move the multiplication before the Absolute.

This does not change the result of the absolute, but it does change the subtraction,

as our range is no longer from zero in the middle to 0.5 at the boundaries.

So we just need to multiply our offset by the same scaling factor to correct for that.