<canvas id="canvas"></canvas>
<script type="text/processing" data-processing-target="canvas">
ArrayList<Blob> blobs;
  
void setup() {
  size(window.innerWidth, 800);
  blobs = new ArrayList<Blob>();
  
  for(int x = 0; x < width; x+=300) {
    for(int y = 0; y < height; y+=200) {
      blobs.add(new Blob(4, new PVector(x, y)));
    }
  }
}

void draw() {
  
  
  for(int i= 0; i < blobs.size(); i++) {
    Blob b = blobs.get(i);
    b.run();
  }
}

class Vertex {
  PVector pos, pos0;
  float deface = random(-40, 40);
  float t = random(-1, 1);
  float vel = random(-0.1, 0.1);
  float radius;
  
  Vertex(float angle, float radius) {
    float x = cos(angle) * (radius + deface);
    float y = sin(angle) * (radius + deface);
    pos = new PVector(x, y);
    pos0 = pos.get();
  }
 
  void draw() {
    curveVertex(pos.x, pos.y);
  }
  
  void update() { 
    pos.x = pos0.x + (cos(t) * deface);
    pos.y = pos0.y + (sin(t) * deface);
    t += vel;
    draw();
  }

}
class Blob {
  ArrayList<Vertex> vertices;
  float radius = random(60, 120);
  float rotation = 0;
  float _scale = 0;
  color fillColor;
  float vel = random(-0.015, 0.015);
  PVector center;
  
  Blob (int sides, PVector pos) {
    center = pos.get();
    fillColor = color(random(250),random(80),random(80));
    vertices = new ArrayList<Vertex>();
    float slice_angle = TWO_PI / sides;
    for(int i = 0; i < sides; i++) {
      float angle = slice_angle * i;
      vertices.add(new Vertex(angle, radius));
    }
  }
  
  void run() {
    pushMatrix();
    translate(center.x, center.y);
    scale(_scale, _scale);
    rotate(rotation);
    draw();
    popMatrix();
  }
  
  void update() {
    _scale = abs(sin(rotation) * 1.1);
    center.x = sin(rotation) + center.x;
    center.y = cos(-rotation) + center.y;
    rotation += vel;
  }
  
  void draw() {
    update();
    beginShape();
    stroke(#ffffff);
    fill(fillColor);
    vertices.get(vertices.size()-1).draw();
    for(int i = 0; i < vertices.size(); i++) {
      vertices.get(i).update();
    }
    vertices.get(0).draw();
    vertices.get(1).draw();
    endShape();
  }

};


</script>

body {
  background-color: #000;
  padding: 0;
  margin: 0;
  overflow: hidden;
}