Module

Particles

Give a thousand dots a reason to move

Lessons

Video

2h 50m

Your progress

Teacher

Teo Vance

( Overview )

You will learn

Vectors · Forces · Attractors · Curl noise · GPU particles

You will finish with

A looping attractor animation

Velocity, forces, friction and attractors. Then curl noise and thousands of particles on the GPU.

What this module covers

A particle is a position and a velocity. Everything else in this module is a rule that changes the velocity: gravity, friction, a pull toward a star, a push from noise.

By lesson 3.8 you will move a hundred thousand particles at 60 frames a second, and the project is a seamless loop you can post.

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

03.1

A dot with a velocity

Position plus velocity, every frame.

Free preview

min

→

03.2

Forces add up

Gravity, wind and a mouse that pushes.

Free preview

min

→

03.3

Friction and limits

Why everything flies away, and how to stop it.

min

→

03.4

Attractors

Particles fall around the stars. The Lab lesson you can drag.

min

→

03.5

Trails and fading

Never clear the canvas. Paint a thin veil instead.

min

→

03.6

Flocking in three rules

Separation, alignment, cohesion.

min

→

03.7

Curl noise

Swirls that never bunch up.

min

→

03.8

Thousands on the GPU

Move particle maths into a shader and keep 60 frames a second.

min

→

03.9

Project: an attractor loop

A seamless 8-second loop, exported as video.

min

→

( What you’ll make )

A looping attractor animation

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 )

Particles are just dots with a reason to move. Give them good reasons.

Teo Vance

Instructor, motion and sound

Teo builds live visuals for touring musicians and teaches the physics without the maths anxiety. He runs the Thursday live critiques.

( Next module )

Shapes

→