body
{
  max-width: 500px;
  margin: auto;
}
var inc = 0.2;
var s_inc = 0.0005;
var scl = 10;
var cols, rows;
var fr;

var zOff = 0;

var particles = [];
var particlesAmount = 600;

var flowField;

function setup() 
{
    createCanvas(500, 500);
    cols = floor(width  / scl);
    rows = floor(height / scl);
    frameRate(30);

    fr = createP("");

    flowField = new Array(cols * rows);
    
    for(var i = 0; i < particlesAmount; i++)
    {
        particles[i] = new Particle();
    }

    background(0);
}

function draw() 
{    
    background(0, 5);

    var mOffX = 0;

    for (var x = 0; x < cols; x++) 
    {
        var mOffY = 0;

        for (var y = 0; y < rows; y++) 
        {
            var mIndex = x + y * rows;
            var mAngle = noise(mOffX, mOffY, zOff) * TWO_PI * 4;
            var mVector = p5.Vector.fromAngle(mAngle);
            mVector.setMag(1);
            flowField[mIndex] = mVector;
            mOffY += inc;
        }
        mOffX += inc;

        zOff += s_inc;
    }
    for(var i = 0; i < particles.length; i++)
    {
        particles[i].follow(flowField);
        particles[i].update();
        particles[i].edges();
        particles[i].show();
    }

    //fr.html(floor(frameRate()));
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js
  2. https://makaya.it/programming_projects/p5/PerlinNoise/particle.js
  3. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js