All language subtitles for 02-DistanceField

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.