02 Drawing shapes with math

Transforms: move the coordinates first

Transform the coordinates, then draw the same square.

Translate X0.00

-0.40.4

Coordinate scale1.00

0.43

Rotation · radians0.30

-3.143.14

ExerciseTune values0%

Make this square: shifted right, smaller, turned 45°

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  p -= vec2(0.000, 0.0);
  p *= 1.000;
  float a = 0.300;
  p = mat2(cos(a), -sin(a), sin(a), cos(a)) * p;
  float d = max(abs(p.x), abs(p.y)) - 0.22;
  float mask = 1.0 - smoothstep(0.0, 0.008, d);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.96, 0.43, 0.30), mask);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  p -= vec2(0.000, 0.0);
  p *= 1.000;
  float a = 0.300;
  p = mat2(cos(a), -sin(a), sin(a), cos(a)) * p;
  float d = max(abs(p.x), abs(p.y)) - 0.22;
  float mask = 1.0 - smoothstep(0.0, 0.008, d);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.96, 0.43, 0.30), mask);
  gl_FragColor = vec4(color, 1.0);
}

JS sidegl.uniform2f(uResolution, …, …)

You transform the coordinates, not the shape: p − offset moves the shape toward offset; scaling the coordinates up makes the shape smaller.

Try it

Set scale to 2: did the square get smaller or bigger?
Rotate by 0.785 (45°): the square becomes a diamond