createCanvas(1080, 1080);

  colorMode(HSB, 360);

  frameRate(60);

  hexRadius = 60;

  hexHeight = 2*hexRadius;

  hb = new hexBackground(hexHeight);

  pos = createVector(0, 0);

  pos2 = createVector(0, 0);

  pos3 = createVector(0, 0);

  direction = createVector(0, -1);

  direction2 = createVector(0, -1).rotate(2*PI/3);

  direction3 = createVector(0, -1).rotate(-2*PI/3);

  count = 0;

  xMax = 0;

  yMin = 0;

  yMax = 0;

  mag = 5;

  direction = direction.setMag(mag)

  direction2 = direction2.setMag(mag)

  direction3 = direction3.setMag(mag)

  while(xMax<width/2) {

    xMax+=hexHeight*cos(PI/6)/2;

  }

  xMax-=3*hexHeight*cos(PI/6)/4;

  while(yMax<height/2) {

    if(count%2==0) {

      yMax += hexRadius/2;

    } else {

      yMax += hexRadius;

    }

    count++;

  }

  if(count%2 == 0) {

    yMax -= 5*hexRadius/4;

  } else {

    yMax -= 5*hexRadius/8;

  }

  count = 0;

  while(yMin>-height/2) {

    if(count%2==0) {

      yMin -= hexRadius;

    } else {

      yMin -= hexRadius/2;

    }

    count++;

  }

  if(count%2 == 0) {

    yMin += 5*hexRadius/8;

  } else {

    yMin += 5*hexRadius/4;

  }

  count = 0;

  trail = [];

  prex = pos.x;

  prey = pos.y;

  prex2 = pos2.x;

  prey2 = pos2.y;

  prex3 = pos3.x;

  prey3 = pos3.y;

  translate(width/2, height/2);

  background(20);

  stroke(60);

  hb.show();

}

​

function draw() {

  translate(width/2, height/2);

  strokeWeight(3);

  fill(20);

    /*

  trail.push(new Trail(prex, prey, pos.x, pos.y));

    prex = pos.x;

  prey = pos.y;

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

    trail[i].show();

  }

  if(trail.length > 400) {

    trail.shift();

  }

  */

  stroke((frameCount/2)%360, 360, 360);

  ellipse(pos.x, pos.y, 10*(sin(frameCount/10)+2));

  stroke((frameCount/2+120)%360, 360, 360);

  ellipse(pos2.x, pos2.y, 10*(sin(frameCount/10)+2));

  stroke((frameCount/2+240)%360, 360, 360);

  ellipse(pos3.x, pos3.y, 10*(sin(frameCount/10)+2));

  if((frameCount*mag)%hexRadius == 0) {

    newDirection();

  }

  pos.add(direction);

  pos2.add(direction2);

  pos3.add(direction3);

}

​

function newDirection() {

  oldDir = direction;

  oldDir2 = direction2;

  oldDir3 = direction3;

  if(pos.x > xMax) {

    direction.mult(-1);

  }

  if(pos.x < -xMax) {

    direction.mult(-1);

  }

  if(pos.y >= yMax || pos.y <= yMin) {

    if(pos.x > xMax || pos.x < -xMax) {

      direction = oldDir.mult(-1);

    } else {

        direction.y *=-1;

    }

  }

  if(pos2.x > xMax) {

    direction2.mult(-1);

  }

  if(pos2.x < -xMax) {

    direction2.mult(-1);

  }

  if(pos2.y >= yMax || pos2.y <= yMin) {

    if(pos2.x > xMax || pos2.x < -xMax) {

      direction2 = oldDir2.mult(-1);

    } else {

        direction2.y *=-1;

    }

  }

  if(pos3.x > xMax) {

    direction3.mult(-1);

  }

  if(pos3.x < -xMax) {

    direction3.mult(-1);

  }

  if(pos3.y >= yMax || pos3.y <= yMin) {

    if(pos3.x > xMax || pos3.x < -xMax) {

      direction3 = oldDir3.mult(-1);

    } else {

        direction3.y *=-1;

    }

  }

  if(!(pos.y >= yMax || pos.y <= yMin || pos.x > xMax || pos.x < -xMax)) {

    ran = pow(-1, round(random(0, 2)));

    direction.rotate(ran*PI/3);

  }

  if(!(pos2.y >= yMax || pos2.y <= yMin || pos2.x > xMax || pos2.x < -xMax)) {

    ran = pow(-1, round(random(0, 2)));

    direction2.rotate(ran*PI/3);

  }

  if(!(pos3.y >= yMax || pos3.y <= yMin || pos3.x > xMax || pos3.x < -xMax)) {

    ran = pow(-1, round(random(0, 2)));

    direction3.rotate(ran*PI/3);

  }

}