flow

var scl = 6;

var cols, rows;

var inc = 0.1;

var zOff = 0;

var particles = [];

var flowField = [];

var numberOfParticles = 2000;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // createCanvas(600,600);

  background(255);

  pixelDensity(5);

  cols = floor(width / scl);

  rows = floor(height / scl);

  flowField = Array(cols * rows);

  console.log(flowField);

  for(var p = 0; p < numberOfParticles; p++){

    particles.push(new Particle());

  }

}

​

function draw() {

  // background(255);

  var xOff = 0;

  for(var i = 0; i < cols; i++){

    var yOff = 0;

    for(var j = 0; j < rows; j++){

      yOff += inc; 

      var angle = noise(xOff, yOff, zOff) * TWO_PI;

      // var angle = random(TWO_PI);

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

      v.setMag(.1);

      var index = i * rows + j;

      flowField[index] = v;

      stroke(0,50);

      strokeWeight(1);

      push();     

      translate(i * scl, j * scl);

      rotate(v.heading());

      // line(0,0,scl,0);

      pop();

    }

    xOff += inc;

  }

  zOff += inc * 0.1;

  particles.map(particle => {

    particle.update();

    particle.show();

    // particle.edges();

    particle.follow();

  })

}

​

function Particle(){

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

  this.color = color(0,4);

  // var r = map(this.pos.mag(), 0, sqrt(sq(width)+sq(height)), 0, 1);

  // this.color = color(r*50, r*120, r*170);

  // if(this.pos.x < width/2 && this.pos.y > height/2) this.color = color(210, 70, 50);

  // if(this.pos.x > width/2 && this.pos.y < height/2) this.color = color(245, 225, 50);

  // if(this.pos.x > width/2 && this.pos.y > height/2) this.color = color(50, 120, 170);

  this.prevPos = this.pos.copy();

  this.vel = p5.Vector.random2D();

  this.acc = createVector(0,0);

  this.maxSpeed = 2;

  this.update = function(){

    this.vel.add(this.acc);

    this.vel.limit(this.maxSpeed);

    this.pos.add(this.vel);

    this.acc.mult(0);

  }

  this.applyForce = function(force){

    this.acc.add(force);

  }

  this.follow = function(){

    var i = floor(this.pos.x / scl);

    var j = floor(this.pos.y / scl);

    var index =  i * rows + j;

    var force = flowField[index];

    this.applyForce(force);   

  }

  this.show = function(){

    stroke(red(this.color),green(this.color),blue(this.color),50);

    strokeWeight(.2);

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

    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);

    this.updatePrev();

  }

  this.updatePrev = function(){

    this.prevPos = this.pos.copy();

  }

  this.edges = function(){

    if(this.pos.x > width) {

      this.pos.x = 0;

      this.updatePrev();

    }

    if(this.pos.x < 0){

      this.pos.x = width;

      this.updatePrev();

    }

    if(this.pos.y > height){

      this.pos.y = 0;

      this.updatePrev();

    }

    if(this.pos.y < 0) {

      this.pos.y = height;

      this.updatePrev();

    }

​

  }

}