2D toolkit · lesson 1 of 8 · Intermediate · about 4 min
Repeating: floor & frac
You will build: Draw an 8×6 checkerboard of black and white.
How do you draw 100 identical things with one function? Split the space into cells and make every pixel ask “which cell am I in, and where inside it?”
float2 g = uv * float2(8.0, 6.0); // scale up: now each cell is 1.0 wide float2 cell = floor(g); // which cell: (0..7, 0..5) whole numbers float2 local = frac(g); // position inside the cell: 0..1 again
floor gives the integer part (the cell ID), frac gives the fractional part. Grids, bricks, polka dots, starfields, tiles, hex patterns — all of them start from this.
To alternate cells: fmod(cell.x + cell.y, 2.0) is 0 or 1 in a chessboard pattern.
The numbers you need
Everything the picture depends on is given, so the challenge is the code, not guessing.
- Grid
8 columns × 6 rows
Try it in your own language
The lesson is written once and shown in every language. Pick yours: Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.
Start codingGo deeper
Concept explainers with a live example: hash function, Voronoi noise.
Part of the learning paths: Noise and procedural textures, Shader art basics.