Flowfield(based on shiffman coding challenge)

var inc=0.1;

var scl=12;

var zoff=0;

var rad;

particles=[];

flowfield=[];

var recording=false;

function setup(){

  createCanvas(1200,800);

  background(5);

  smooth();

  noiseDetail(2);

  cols=floor(width/scl);

  rows=floor(height/scl);

  flowfield=[cols*rows];

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

    particles[i]=new Particle();}

}

function draw(){

  var yoff=0;

  for(var y=0;y<height;y+=scl){

    var xoff=0;

    for(var x=0;x<width;x+=scl){

      var index=x/scl+y/scl*cols;

      //var anglesxoff=cos(xoff),

      //var anglesyoff=sin(yoff);

      var angles=map(noise(xoff,yoff,zoff),0,1,0,TWO_PI);

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

      v.setMag(0.1);

      flowfield[index]=v;

      xoff+=inc;

      stroke(0);

      push();

      translate(x,y);

      strokeWeight(4);

      rotate(v.heading());

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

      pop();

    }

    yoff+=inc;

    zoff+= inc/2;

  }

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

    particles[i].follow(flowfield);

    particles[i].update();

    particles[i].checkEdges();

    particles[i].show();

    }

  if(mouseIsPressed){

    recording=!recording;

  }

  if(recording){

  //  save("gol_####.png");

  }

}

function Particle(){

  this.pos=new p5.Vector(random(width/2),random(height/2));

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

  this.vel=new p5.Vector(0,0);

  this.acc=new p5.Vector(0,0);

  this.maxspeed=0.001;

  this.follow=function(vectors){

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

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

    var ii=x+y*cols;

    var force=vectors[ii];

    this.applyForce(force);

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

  }

  this.update=function(){

    this.vel.add(this.acc);

    this.pos.add(this.vel);

    this.acc.mult(0);

    this.vel.limit(this.maxspeed);

  }

  this.applyForce=function(force){

    this.acc.add(force);

  }

  this.show=function(){

    strokeWeight(1);

    var col=map(sin(millis()/10)*cos(millis()/30),-1,1,0,255);

    stroke(col,col/2,col/2,5);

    //stroke(map((noise(millis/100),0,1,0,255)),35);

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

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

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

    point(width-this.pos.x,height-this.pos.y);*/

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

  line(width-this.pos.x,this.pos.y,width-this.prevPos.x,this.prevPos.y)

  line(this.pos.x,height-this.pos.y,this.prevPos.x,height-this.prevPos.y)

  line(width-this.pos.x,height-this.pos.y,width-this.prevPos.x,height-this.prevPos.y);

    this.updatePrev();

  }

  this.updatePrev=function(){

    this.prevPos.x=this.pos.x;

    this.prevPos.y=this.pos.y;

  }

  this.checkEdges=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();

    }

  }

}