Brick Wall

The key to a brick wall pattern is offsetting every other row by half a cell — one line of code handles it:

Here's how it works.

Setting up the grid

Scaling UV by 8 divides the canvas into an 8×8 grid of brick-sized regions.

Identifying odd and even rows

floor(uv.y) gives the integer row number (0, 1, 2, 3…).

mod(floor(uv.y), 2.0) takes the remainder when dividing by 2: even rows give 0, odd rows give 1.

step(1.0, ...) converts that to a 0/1 flag: 1 for odd rows, 0 for even.

Offsetting odd rows

uv.x += ... * 0.5 shifts the x coordinate of odd rows to the right by half a cell (0.5 units).

Even rows stay in place; odd rows shift right — creating the staggered brick layout.

Drawing the mortar lines

fract(uv) gives the local coordinate within each brick. step(0.95, f.x) returns 1 in the rightmost 5% of each cell; step(0.95, f.y) does the same for the top 5%. Adding them and clamping with min(..., 1.0) marks the mortar gaps.

The result: 1 at mortar joints (dark color), 0 on the brick face (brick red).

Try changing it

Exercise

Fill in the // TODO: 每隔一行偏移 0.5 line in the exercise to add the row offset and produce the correct staggered brick pattern.

Answer Breakdown

floor(uv.y) gets the integer row ID. mod(..., 2.0) checks odd or even. step(1.0, ...) maps odd rows to 1 and even rows to 0. * 0.5 shifts odd rows half a cell to the right.

The exercise already has the full mortar-drawing logic — only this offset line is missing. Without it, all rows align vertically and it looks like a grid, not a brick wall. Adding the offset staggers alternate rows, producing the recognizable brick pattern.

Try changing * 0.5 to * 0.25 to reduce the offset and see how it affects the appearance.