Module

Shapes

Build forms from distance

Lessons

Video

2h 20m

Your progress

Teacher

Rui Okada

( Overview )

You will learn

Distance fields · Smooth minimum · Contours · Lighting

You will finish with

A living logo mark

Signed distance fields: describe a shape as a question, blend shapes smoothly and draw contour rings.

What this module covers

Instead of drawing a circle, we ask every pixel how far it is from one. That single change unlocks blending, outlines, rings and soft light.

You will write your first shader in lesson 4.2 and end the module with a logo mark that breathes.

( Lessons )

Every lesson in this module.

The first two lessons of every module are free to watch. Each one opens in the Lab when you finish.

04.1

Distance as a picture

Colour every pixel by its distance to a point.

Free preview

min

→

04.2

Circles, boxes, lines

The three shapes you will use forever.

Free preview

min

→

04.3

Union and cut

min, max and minus: boolean shapes in one line each.

min

→

04.4

Smooth minimum

Shapes that melt into each other.

min

→

04.5

Contour rings

fract of the distance draws rings for free.

min

→

04.6

Shapes in motion

Move the centres with time and sine.

min

→

04.7

From 2D to light

Normals from distance, and a light that makes it read as 3D.

min

→

04.8

Project: a living mark

A logo that breathes, exported as a loop and a still.

min

→

( What you’ll make )

A living logo mark

Rendered live from the module’s own sketch. Your version will look different, which is the point.

( Try it now )

Change a number from the course.

Three lessons from across the course, running live. Drag any yellow value.

01-6-flow-field.js

// 01.6 Flow fields: every line follows the noise
const scale  =0.0028  // how far you zoom into the noise
const turns  =1.60  // how hard the lines curl
const lines  =2200  // how many lines to draw
const steps  =70  // how long each line runs
const weight =0.8  // stroke width in px
for (let i = 0; i < lines; i++) {
  let [x, y] = randomPoint()
  for (let s = 0; s < steps; s++) {
    const a = noise(x * scale, y * scale) * TAU * turns
    lineTo(x += cos(a), y += sin(a))
  }
  stroke(chalk, weight)
}

canvas 1:1seed 007drawing 0%

↔ Drag any yellow number. The drawing starts over.

( Your teacher for this module )

A shader is a question you ask every pixel at once. Ask a good one.

Rui Okada

Instructor, shaders

Rui spent six years writing shaders for mobile games before switching to print. He is the reason our Shapes module ends with you drawing light.

( Next module )

Patterns

→