Glsl patterns - changing the sizes of vUV's

Really struggling to formulate this topic and apologies for bad and incorrect vocabulary
In the system I’m working on I have a grid of rectangles that I’m getting with fract(
This gives me equal sized ‘vUV’ fields (red to black gradient squares) but I wonder if there is a possibility to make them different in sizes – for example if they increase in size gradually.
I managed to get an index of each square and using it I can make a rectangle inside it to grow in size, but what I would really love is if I could make the ‘vUV’ squares themselves grow in size. Any suggestions?

float rect(vec2 _st, vec2 _size){
  vec2 uv = smoothstep(_size, _size + vec2(1e-4), _st);
  uv *= smoothstep(_size, _size, vec2(1.0)-_st);
  return uv.x*uv.y;   

out vec4 fragColor;
void main()
	vec2 st =;
	vec3 color = vec3(0.);
  vec2 zoom = vec2(5, 5);
	st = st*zoom;

  vec2 index = floor(st)*0.25;     // getting indexes got each square

	st = fract(st);

  float size = 0.4;

  color += rect (vec2(st), vec2(size * index.x, size*index.y));

	color.r += st.x*st.y; //adding a gradient for

	fragColor = TDOutputSwizzle(vec4( color, 1));

Hi there,

This is a bit more tricky than it looks. The technique you’re using the subdivide your plane is based on taking fractional parts of floats. This gives every cell the same size.
It becomes quite tricky if you want arbitrary sized cells, since you need some kind of calculation to know in which cell you are and which ‘local’ cell uv it has. To calculate this you would need to know how many cells (and sizes) came ‘before’.

For example, if you want to know which cell column pixel 200 is at, it depends if the first column had width 100px, and second 99px (so it would be col 3) or that for example there was just 1 column of 250 pixels (and it would be col 1)

If you’re sizing is analytically (using some kind of equation), you could use calculus to find an equation for this, though it becomes quickly quite complex :).

So best, in my opinion, would be not to go for a single GLSL top approach in this case, but using instancing and an orthographic camera to render planes. This gives you way more flexibility and is super fast.
You could displace the vertices of the instanced planes in a vertex shader, or using chops to scale and positioning them.


Ah I see, sounds pretty complicated but good to know there is no easy solution. But I think I can live without it for now. Thanks again for your time Tim!