var generatedPoints;

​

var colors = [

  { r: 255, g: 0, b: 0 },

  { r: 0, g: 255, b: 0 },

  { r: 0, g: 0, b: 255 },

  { r: 255, g: 255, b: 0 },

  { r: 255, g: 0, b: 255 }

];

​

function setup() {

  createCanvas(640, 480);

  frameRate(10);

  shapes = [];

  //shapes.push(new Shape(5, 64, null));

  var parent = null;

  var shapeCount = floor(random(3, 8));

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

    var s = new Shape(floor(random(3, 10)), random(8, 48), shapes[shapes.length - 1]);

    shapes.push(s);

    //parent = shapes[shapes.length - 1];

  }

  generatedPoints = [];

}

​

function draw() {

  background(220);

  push();

  translate(width / 2, height / 2);

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

    var s = shapes[i];

    s.update();

    s.draw();

    //check we're not just adding points already added

    if(i === shapes.length - 1) {

      var gx = s.points[0].x;

      var gy = s.points[0].y;

      if(generatedPoints.length === 0) {

        generatedPoints.push({ x: gx, y: gy });

      }

      else if(generatedPoints[0].x !== gx &&

         generatedPoints[0].y !== gy) {

        generatedPoints.push({ x: gx, y: gy });

      }

    }

  }

  stroke(255, 0, 255);

  beginShape();

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

    var p = generatedPoints[i];

    vertex(p.x, p.y);

  }

  endShape();

  pop();

}

​

function Shape(sides, radius, parent) {

  this.sides = sides;

  this.radius = radius;

  this.parent = parent;

  this.parentPointIndex = 0;

  this.generatePoints();

}

Shape.prototype.generatePoints = function() {

  this.points = [];

  var stepSize = TWO_PI / this.sides;

  var angle = 0;

  var cx = this.parent ? this.parent.points[this.parentPointIndex].x : 0;

  var cy = this.parent ? this.parent.points[this.parentPointIndex].y : 0;

  var res = 3;//minimum: 3

  var x1 = cx + this.radius * sin(angle),

      y1 = cy + this.radius * cos(angle),

      x2, y2,

      dx, dy,

      len, n, s;

  angle += stepSize;

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

    x2 = cx + this.radius * sin(angle);

    y2 = cy + this.radius * cos(angle);

    dx = x2 - x1;

    dy = y2 - y1;

    len = sqrt(dx * dx + dy * dy);    

    for(var j = res; j > 0; j--) {

      n = j / res;

      s = (n * len) / len;

      this.points.push({

        x: s * x1 + (1.0 - s) * x2,

        y: s * y1 + (1.0 - s) * y2

      });

    }

    x1 = x2;

    y1 = y2;

    angle += stepSize;

  }  

}

Shape.prototype.update = function() {

  if(this.parent) {

    //moves around parent

    this.parentPointIndex = (this.parentPointIndex + 1) % this.parent.points.length;

    this.generatePoints();

  }

}

Shape.prototype.draw = function() {

  noFill();

  stroke(64, 64, 64, 32);

​

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

    var p1 = this.points[i];

    var p2 = this.points[(i + 1) % this.points.length];

    line(p1.x, p1.y, p2.x, p2.y);

  }

  /*

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

    var color = colors[i % colors.length];

    stroke(color.r, color.g, color.b);

    ellipse(this.points[i].x, this.points[i].y, 4, 4);

    text(i, this.points[i].x, this.points[i].y);

  }

  */

}