// https://thecodingtrain.com/CodingChallenges/024-perlinnoiseflowfield.html

​

var inc = 0.1;

var scl = 20;

var cols, rows;

​

var zoff = 0;

​

var fr;

​

var particles = [];

​

var flowfield;

​

var attractor;

​

function setup() {

  createCanvas(900, 900);

  //background(255);

  cols = floor(width / scl);

  rows = floor(height / scl);

  fr = createP('');

​

  attractor = new Attr(450, 300, 3);

  flowfield = new Array(cols * rows);

​

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

    let x = [];

    let y = [];

    x[0] = random(0,450);

    x[1] = random(500,850);

    y[0] = random(200,800);

    y[1] = random(0,500);

    let p = int(random(0,2));

    particles[i] = new Particle(x[p],y[p]);

  }

​

  noStroke();

  fill(20);

  rect(100, 200, 300, 500);

  rect(500, 100, 300, 400);

  button = createButton('save image');

  button.size(150, 40);

  button.style('font-size', '22px');

  button.style('background-color', 'white')

  button.mousePressed(saveIMG);

​

}

​

function draw() {

  var yoff = 0;

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

    var xoff = 0;

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

      var index = x + y * cols;

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

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

      v.setMag(0.1);

      flowfield[index] = v;

      xoff += inc;

      stroke(0, 50);

      // push();

      // translate(x * scl, y * scl);

      // rotate(v.heading());

      // strokeWeight(1);

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

      // pop();

    }

    yoff += inc;

​

    zoff += 0.0003;

  }

​

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

    attractor.attract(particles[i]);

    particles[i].follow(flowfield);

    particles[i].update();

    particles[i].edges();

    particles[i].show();

  }

​

  // fr.html(floor(frameRate()));

}

​

function saveIMG() {

  save('flowfield.png')

}