← Shaders: 2D

⇄
Length

Program
History and progress transfer
Choose a topic — problems will keep coming one after another for as long as you like

Theory of all steps of the program by blocks. Open a topic to read it.

How a session goes

A session is 10–90 minutes: a warm-up on what you've learned, new steps with short theory and problems, practice. Each problem gives two tries: 100 points on the first, 60 on the second; after the second mistake the correct answer is shown. You move on in the program if 70 % of the problems are solved.

Problems with numbers are generated anew every time a step is repeated. A fractional answer can be entered with a comma, a point or as a fraction: 0,5, 0.5, 1/2. In Practice any topic is available without a timer.

About the course

Programs for the graphics card in GLSL (WebGL2) right in the browser: code on the left, picture on the right. Color and coordinates, the GLSL language, shapes and distance functions, rotation and animation, noise, marble and Voronoi cells. For people who can already program.

Course program: 42 lessons

C syntax for Python programmers

  1. Types, declarations, semicolons
  2. Conditions, loops, functions
  3. Checkpoint: C syntax

The pipeline and running shaders

  1. A shader is the body of a loop over pixels
  2. First shader: color
  3. Pixel coordinates
  4. Lines y = c and x = c
  5. The line y = kx + b
  6. uniform, in/out and compile errors
  7. Checkpoint: the pipeline and first shaders

The GLSL language

  1. Vectors and swizzling
  2. Vector operations
  3. Built-in functions
  4. mix — blending colors
  5. Your own functions
  6. Types and precision
  7. Loops in a shader
  8. GLSL: mixed practice
  9. Checkpoint: the GLSL language

Shapes and color

  1. Circle
  2. Soft edge and mask
  3. Rectangle
  4. Distance functions
  5. Polar coordinates
  6. Color: HSV and palettes
  7. Plotting a function
  8. Build a picture
  9. Checkpoint: shapes and color

Transformations and time

  1. Shifting and scaling coordinates
  2. Rotation
  3. Animation: u_time
  4. Repetition: fract
  5. Patterns in motion
  6. Checkpoint: transformations and time

Procedural textures and noise

  1. Pseudo-randomness
  2. Value noise
  3. fBm — a sum of octaves
  4. Marble, wood, clouds
  5. Voronoi cells
  6. Domain warping with noise
  7. A complete procedural texture
  8. Checkpoint: noise and procedural textures