<iframe width='500px' height='400px' src='https://nest.ktbyte.com/nest#129491' allowfullscreen></iframe>

int rows, cols, num;
Group[] points;
PImage als;
boolean reset;

void setup() {
  size(600, 600);
  //fullScreen();
  background(200);
  smooth(8);
  reset = false;
  num = 120;
  rows = floor(width / num); // most of the time, rows == cols is true
  cols = floor(height / num); // if its not then code below will not work!
  points = new Group[rows - 1];
  for (int   i = 0; i < points.length; i++) {
    points[i] = new Group((i + 1)*0.001);
  }
  //drawLines();
  drawCircles();
	stroke(0);
	noFill();
	rect(0, 0, width - 1, height - 1);
  als = get();
  image(als, 0, 0);
  //noLoop();
}

void draw() {
  if (reset) {
    background(200);
    //drawCircles();
    //reset = false;
    //noLoop();
  } else {
		stroke(0);
		noFill();
		rect(0, 0, width - 1, height - 1);
    image(als, 0, 0);
  }
  //drawLines();
  //drawCircles();
  //if (points[0].theta >= TWO_PI - points[0].vel) {
  //  reset = true;
  //  print("here");
  //}
  for (int h = 0; h < 10; h++) {
    showIntersections(true);
    for (Group one : points) {
      one.update();
    }
  }
  als = get();
  for (int i = 0; i < points.length; i++) {
    translate((i + 1 + 0.5)*num, 0.5*num);
    points[i].makePoints();
    points[i].makeVerticalLines();
    translate(-(i + 1 + 0.5)*num, -0.5*num);
    translate(0.5*num, (i + 1 + 0.5)*num);
    points[i].makePoints();
    points[i].makeHorizontalLines();
    translate(-0.5*num, -(i + 1 + 0.5)*num);
  }
  drawLines();
  showIntersections(false);
}

void drawLines() {
  stroke(0, 50);
  strokeWeight(1);
  for (int i = 1; i < rows; i++) {
    line(i*num, 0, i*num, height);
  }

  for (int i = 1; i < rows; i++) {
    line(0, i*num, width, i*num);
  }
}

void drawCircles() {
  fill(0, 50);
  noStroke();
  rect(0, 0, num, num);

  noFill();
  strokeWeight(2);
  stroke(0);

  for (int i = 1; i <= cols; i++) {
    ellipse(num / 2, (i + 0.5)*num, num / 2, num / 2);
  }

  for (int i = 1; i <= rows; i++) {
    ellipse((i + 0.5)*num, num / 2, num / 2, num / 2);
  }

  textSize(num / 4);
  textAlign(CENTER, CENTER);
  noStroke();
  fill(0);

  for (int i = 1; i < rows; i++) {
    text(i, (i + 0.5)*num, 0.5*num - 0.02*num);
  }

  for (int i = 1; i < rows; i++) {
    text(i, 0.5*num, (i + 0.5)*num - 0.02*num);
  }
}

void showIntersections(boolean tal) {
  if (tal) {
    strokeWeight(1);
  } else {
    strokeWeight(4);
  }
  for (int i = 0; i < points.length; i++) {
    for (int j = 0; j < points.length; j++) {
      translate((1 + i + 0.5)*num, (j + 1.5)*num);
      stroke(90, 100, 150);
			// strokeWeight(1);
      point(points[i].pos.x, points[j].pos.y);
      translate(-(1 + i + 0.5)*num, -(j + 1.5)*num);
    }
  }
}

class Group { 
  float theta;
  float vel;
  PVector pos;
  Group(float v) {
    theta = 0; // random(0, TWO_PI);
    pos = new PVector(num / 4 * cos(theta), num / 4 * sin(theta));
    vel = v;
  }

  void update() {
    pos = new PVector(num / 4 * cos(theta), num / 4 * sin(theta));
    //if (theta >= TWO_PI) {
    //  theta = 0;
    //} else 
    if (theta >= TWO_PI - vel) {
      theta = - (TWO_PI - theta);
    }
    theta += vel;
  }

  void makePoints() {
    strokeWeight(8);
    stroke(100, 200, 150);
    vertex(pos.x, pos.y);
  }

  void makeHorizontalLines() {
    strokeWeight(1);
    line(pos.x, pos.y, width, pos.y);
  }

  void makeVerticalLines() {
    strokeWeight(1);
    line(pos.x, pos.y, pos.x, height);
  }
}