​

​

let img;

function preload() {

  img = loadImage('bg.png');//bg

}

​

let inc = 0.1;

let scl = 20;

let cols, rows;

let zoff = 0;

let flowfield;

let particles = [];

let numParticles = 500;

​

function setup() {

  createCanvas(800, 800);

  cols = floor(width / scl);

  rows = floor(height / scl);

  flowfield = new Array(cols * rows);

​

  for (let i = 0; i < numParticles; i++) {

    particles[i] = new Particle();

  }

:

  //background(255);

   image(img, 0, 0);

}

​

function draw() {

  //background(255, 50);

  let yoff = 0;

​

  for (let y = 0; y < rows; y++) {

    let xoff = 0;

    for (let x = 0; x < cols; x++) {

      let index = x + y * cols;

      let angle = noise(xoff, yoff, zoff) * TWO_PI * 4;

      let v = p5.Vector.fromAngle(angle);

      v.setMag(1);

      flowfield[index] = v;

      xoff += inc;

    }

    yoff += inc;

  }

​

  zoff += 0.01;

​

  for (let i = 0; i < particles.length; i++) {

    particles[i].follow(flowfield);

    particles[i].update();

    particles[i].edges();

    particles[i].show();

  }

}

​

class Particle {

  constructor() {

    this.pos = createVector(random(width), random(height));

    this.vel = createVector(0, 0);

    this.acc = createVector(0, 0);

    this.maxspeed = 2;

  }

​

  follow(vectors) {

    let x = floor(this.pos.x / scl);

    let y = floor(this.pos.y / scl);

    let index = x + y * cols;

    let force = vectors[index];

    this.applyForce(force);

  }

​

  update() {

    this.vel.add(this.acc);

    this.vel.limit(this.maxspeed);

    this.pos.add(this.vel);

    this.acc.mult(0);

  }

​

  applyForce(force) {

    this.acc.add(force);

  }

​

  edges() {

    if (this.pos.x > width) this.pos.x = 0;

    if (this.pos.x < 0) this.pos.x = width;

    if (this.pos.y > height) this.pos.y = 0;

    if (this.pos.y < 0) this.pos.y = height;

  }

​

  show() {

    stroke(255);

    strokeWeight(1);

    point(this.pos.x, this.pos.y);

  }

}

​