Overview

This 2D curl noise visualiser is based on a post by Pete Werner. The aim is to have a number of discs move along smooth trajectories to produce visuals that look like swirling fluid. We start by generating simplex noise using Noise.js which produces a 2D field of scalar values and every time step we set the velocity of each disc according to the curl value at its location.

Curl

The curl of a vector field describes the rotation at any point. In 2D we can think of the curl being perpendicular to the canvas plane. To find the curl at the (x,y) location of a disc, we find the rate of change in both directions at some small distance around the point and return velocities (v_x, v_y):

function computeCurl(x, y){
  var eps = 0.0001;

  //Find rate of change in X direction
  var n1 = noise.simplex2(x + eps, y);
  var n2 = noise.simplex2(x - eps, y); 

  //Average to find approximate derivative
  var a = (n1 - n2)/(2 * eps);

  //Find rate of change in Y direction
  var n1 = noise.simplex2(x, y + eps); 
  var n2 = noise.simplex2(x, y - eps); 

  //Average to find approximate derivative
  var b = (n1 - n2)/(2 * eps);

  //Curl
  return [b, -a];
}
      

Controls

Adjusting the variables leads to different visuals. Step determines the zoom of the noise field where larger values result in bigger vortices. Fade determines how opaque the rectangle we draw over the previous scene is and how long the trails left by the discs will be. Flow introduces additional velocity in the positive x direction and lighten uses composite operations to mix colours.