Fract - Grid - Built-in functions - Shader Learning

Built-in functions

Fract - Grid

Task

Write a shader that draws a grid. Each cell in the grid should be 50x50 pixels in size, with a margin of 10 pixels between cells content.


Requirements


The shader should avoid using branching or conditional statements in its code, and instead rely on the fract and step functions to determine the color of each pixel.

Theory

When building a grid with cells, it is important to consider not only their width and height but also the margins. The total size of a cell is defined as the sum of its own dimensions and the margins.

  • Horizontally: total cell width = width + left margin.

  • Vertically: total cell height = height + bottom margin.

This calculation allows us to correctly determine the boundaries of each cell.


Cell Indexing in the Grid



The screen can be divided into segments equal to the cell total size (content area + margin). Dividing a pixel’s coordinate by the cell total size gives:

  • Integer part: the index of the cell in the grid (its position horizontally and vertically).
  • Fractional part: the local position of the pixel inside this cell.

This way, we can identify both the cell a pixel belongs to and its relative position within that cell.


Cell Content Area



After calculating the cell index and the local position, the pixel’s coordinates are compared with the cell boundaries:

  • If the pixel falls into the margin area, it is filled according to the margin style.

  • If the pixel is inside the main content area of the cell, it is filled with the cell’s content.