Module

Noise

Make randomness behave

Lessons

Video

2h 35m

Your progress

100

Teacher

Mara Ellison

( Overview )

You will learn

Value noise · Octaves · Domain warping · Dithering

You will finish with

A dithered terrain print

Why Math.random looks wrong, and how value noise, octaves and domain warping make it look like nature.

What this module covers

Pure randomness looks like television static. Noise is randomness with memory: nearby points agree with each other, and that is what makes hills, clouds and marble.

We build value noise by hand, stack octaves, warp noise with more noise, and finish by reducing it all to one bit with ordered dithering. The project is a terrain print you could hang.

( 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.

02.1

Why random looks wrong

Static versus nature, side by side.

Free preview

min

→

02.2

Value noise by hand

A grid of random values, smoothly blended. Twelve lines of code.

Free preview

min

→

02.3

Ridges

Noise lifts each row into a hill. The Lab lesson you can drag.

min

→

02.4

Octaves and fbm

Add smaller noise on top of bigger noise until it looks like a coastline.

min

→

02.5

Domain warping

Feed noise into noise. Marble, smoke and weather.

min

→

02.6

Contour lines

Draw every place the noise crosses a value. Instant topography.

min

→

02.7

Dithering to one bit

Bayer matrices, and why newspapers still look good.

min

→

02.8

Project: a terrain print

A dithered landscape, framed and exported.

min

→

( What you’ll make )

A dithered terrain print

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 )

The first time a loop you wrote draws something you did not expect, you are hooked. My job is to get you there by lesson three.

Mara Ellison

Lead instructor

Mara has made generative prints and installations for twelve years, including a 40-metre wall for a Lisbon metro station. She writes the Lab lessons and marks every cohort project herself.

( Next module )

Particles

→