A tread on a tyre: repeat, offset, rotation
A tread tile drawn with a canvas (a canvas is as good a texture source as a file). The tyre is 2.07 m round, so repeat (30, 2) gives about 7 cm tiles. The tread slides round the tyre. The matrix lines show that repeat sits on the diagonal, offset in the last column, and rotation mixes in.
UV coordinates say which point of the picture lands on which point of the shape. wrapS, wrapT, repeat, offset, rotation and center decide what happens outside 0 to 1 and how the picture is stretched, tiled and moved.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A 4 m × 4 m floor uses a tile that should cover 0.5 m. Write the three lines that tile it.
How do you make a tyre's tread appear to roll at 1 turn per second, without turning the mesh?
Explain it without notes
A floor texture shows one small picture and then a smear. What two things are missing?
Why does the rotation example need center.set(0.5, 0.5)?
Console
Nothing logged yet.Expected console output
repeat (2, 1) | matrix: 2 0 0 0 1 0 0 0 1
+ offset (0.25, 0) | matrix: 2 0 0 0 1 0 0.25 0 1
+ rotation 90 deg at centre | matrix: 0 -1 0 2 0 0 -0.25 1 1