let hexs = [];

let n = 10;

​

function setup() {

  createCanvas(1001, 1600, SVG);

  for(i = 0; i < width / 100; i++){

    hexs[i] = new Hex(i * 100, height + 120);

  }

  background(255);

}

​

function draw() {

  noFill();

  strokeWeight(1);

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

    hexs[i].update();

  }

  if(frameCount > 2000){

    save("hexs.svg");

    print("saved svg");

    noLoop();

  }

}

​

class Hex{

  constructor(x, y){

    this.pos1 = createVector(x, y);

    this.vel1 = createVector(0, -1);

    this.nf1 = 0;

    this.pos2 = createVector(x + 50, y - 30);

    this.vel2 = createVector(0, -1);

    this.nf2 = 0;

    this.pos3 = createVector(x + 50, y - 90);

    this.vel3 = createVector(0, -1);

    this.nf3 = 0;

    this.pos4 = createVector(x, y - 120);

    this.vel4 = createVector(0, -1);

    this.nf4 = 0;

    this.pos5 = createVector(x - 50, y - 90);

    this.vel5 = createVector(0, -1);

    this.nf5 = 0;

    this.pos6 = createVector(x - 50, y - 30);

    this.vel6 = createVector(0, -1);

    this.nf6 = 0;

  }

  update(){

    this.nf1 = floor(noise(this.pos1.x / nscale, this.pos1.y / nscale) * n);

    this.nf2 = floor(noise(this.pos2.x / nscale, this.pos2.y / nscale) * n);

    this.nf3 = floor(noise(this.pos3.x / nscale, this.pos3.y / nscale) * n);

    this.nf4 = floor(noise(this.pos4.x / nscale, this.pos4.y / nscale) * n);

    this.nf5 = floor(noise(this.pos5.x / nscale, this.pos5.y / nscale) * n);

    this.nf6 = floor(noise(this.pos6.x / nscale, this.pos6.y / nscale) * n);

//     this.angleChance = floor(this.nf * n) * 2;

//     this.vel.setHeading(TWO_PI / n * this.angleChance);

    this.vel1.setHeading(-HALF_PI + PI / n * this.nf1 - HALF_PI);

    this.vel2.setHeading(-HALF_PI + PI / n * this.nf2 - HALF_PI);

    this.vel3.setHeading(-HALF_PI + PI / n * this.nf3 - HALF_PI);

    this.vel4.setHeading(-HALF_PI + PI / n * this.nf4 - HALF_PI);

    this.vel5.setHeading(-HALF_PI + PI / n * this.nf5 - HALF_PI);

    this.vel6.setHeading(-HALF_PI + PI / n * this.nf6 - HALF_PI);

    if(frameCount % 4 == 0){

      line(this.pos1.x, this.pos1.y, this.pos2.x, this.pos2.y);

      line(this.pos2.x, this.pos2.y, this.pos3.x, this.pos3.y);

      line(this.pos3.x, this.pos3.y, this.pos4.x, this.pos4.y);

      line(this.pos4.x, this.pos4.y, this.pos5.x, this.pos5.y);

      line(this.pos5.x, this.pos5.y, this.pos6.x, this.pos6.y);

      line(this.pos6.x, this.pos6.y, this.pos1.x, this.pos1.y);

    }

    this.pos1.add(this.vel1);

    this.pos2.add(this.vel2);

    this.pos3.add(this.vel3);

    this.pos4.add(this.vel4);

    this.pos5.add(this.vel5);

    this.pos6.add(this.vel6);

  }

}