Crayon flow field

let flow;

let agents = [];

let agent_pop = 800;

var state = 2;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  smooth();

  flow = new Flowfield(15);

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

    agents.push(new Agent());

  }

  background(240, 230, 200, 15);

  //flow.display();

}

​

function draw() {

  //background(240, 230, 250, 3);

  //flow.update();

  //flow.display();

​

  for(var agent of agents){

    agent.update();

    agent.seek();

    agent.display();

  }

}

​

function keyTyped() {

  switch (key) {

    case 'd': {

      state = 1;

      break;

    }

    case 'h': {

      state = 2;

      break;

    }

  }

}

​

class Agent{

  constructor(x = random(width), y = random(height)){

    this.position = createVector(x, y);

    this.velocity = createVector(0,0);

    this.acceleration = createVector(0,0);

​

    this.r = 255

    this.g = 255;

    this.b = 255;

    this.randomizeColor();

    this.maxForce = 0.1;

    this.maxSpeed = 1;

  }

  randomizeColor(r = 255, g = 255, b = 255){

    this.r = random(r);

    this.g = random(g);

    this.b = random(b);

  }

  display(){

    push();

    this.r = constrain(random(this.r - 5, this.r + 5), 0, 255);

    this.g = constrain(random(this.g - 5, this.g + 5), 0, 255);

    this.b = constrain(random(this.b - 5, this.b + 5), 0, 255);

    noStroke();

    fill(this.r, this.g, this.b, 100);

    strokeWeight(1);

    translate(this.position.x, this.position.y);

    rotate(random(0, TWO_PI));

    triangle(4,0,-4,0,0,4);

    pop();

    if(this.position.x < 0 || this.position.x > width || this.position.y < 0 || this.position.y > height ){

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

    }

  }

  applyForce(force){

      this.acceleration.add(force);

  }

  seek() {

    var desired = flow.lookup(this.position);

    desired.normalize();

    desired.mult(this.maxSpeed);

    var steer = p5.Vector.sub(desired, this.velocity);

    steer.limit(this.maxForce);

    this.applyForce(steer);

  }

  update(){

    this.velocity.add(this.acceleration);

    this.velocity.limit(this.maxspeed);

    this.position.add(this.velocity);

    this.acceleration.set(0, 0);  

  }

}

​

class Flowfield{

  constructor(resolution = 10){

    this.resolution = resolution;

    this.rows = height/this.resolution;

    this.cols = width/this.resolution;

    this.field = [];  

    this.zoff = 0;

    this.update();

  }

  update(){

    var xoff = 0;

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

      this.field[i] = [];

      var yoff = 0;

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

        var theta = map(noise(xoff,yoff,this.zoff),0,1 ,0,TWO_PI);

        this.field[i][j] = createVector(cos(theta), sin(theta));

        yoff += 0.05;

      }

      xoff += 0.05;

    }

    this.zoff += 0.002;

  }

  lookup(v){

    var v1 = v.copy();

    var col = Math.floor(constrain(v1.x/this.resolution, 0, this.cols-1));

    var row = Math.floor(constrain(v1.y/this.resolution, 0, this.rows-1));

    return this.field[col][row].copy();

  }

  display(){

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

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

        push();

        var x = i*this.resolution + this.resolution/2;

        var y = j*this.resolution + this.resolution/2;

        translate(x, y);

        rotate(this.field[i][j].heading());

        stroke(0);

        line(-10, 0, 10, 0);

        line(10, 0, 7, 3);

        line(10, 0, 7, -3);

        pop();

      }

    }

  }

}