var renderType;

var drawOutline;

var buffer;

​

function setup() {

  createCanvas(400, 400);

  renderType = true;

  drawOutline = 1;

  buffer = [];

  points = generateRandomPoly(width / 2, height / 2, 10, 100, floor(random(10, 50)));

}

​

function generateRandomPoly(centreX, centreY, minRadius, maxRadius, pointCount) {

  var step = TWO_PI / pointCount;

  var polyPoints = [];

  var i = 0, x, y, rad;

  for(; i <= pointCount; i++) {

    rad = random(minRadius, maxRadius);

    x = centreX + rad * cos(i * step);

    y = centreY + rad * sin(i * step);

    polyPoints.push(createVector(x, y));

  }

  return polyPoints;

}

​

function draw() {

  background(0);

  var aabb = getAABB(points);

  if(renderType) {

    //this is piecemeal render

    //choose a random location within the bounding box

    //and if it is within the generated poly add to buffer

    var rx = floor(random(aabb.x, aabb.x + aabb.width));

    var ry = floor(random(aabb.y, aabb.y + aabb.height));

    if(isPointInPoly(rx, ry, points)) {

      buffer.push({

        x: rx,

        y: ry

      })

    }

  }

  else {

    //complete render

    for(var y = aabb.y; y < aabb.y + aabb.height; y++) {

      for(var x = aabb.x; x < aabb.x + aabb.width; x++) {

        if(isPointInPoly(x, y, points)) {

          buffer.push({

            x: x,

            y: y

          })

        }

      }

    }

  }

  if(drawOutline) {

    stroke(255);

    var p1, p2;

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

      p1 = points[i - 1];

      p2 = points[i];

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

    }

​

    line(p2.x, p2.y, points[0].x, points[0].y);

  }

  noStroke();

  fill(255, 0, 0);

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

    rect(buffer[i].x, buffer[i].y, 1, 1);

  }

  fill(255);

  text(renderType ? "piecemeal" : "complete", 16, 16);

}

​

//change the drawing method using left arrow

//reset the buffer using the right arrow

function keyPressed() {

  if (keyCode === LEFT_ARROW) {

    renderType = !renderType;

  } else if (keyCode === RIGHT_ARROW) {

    buffer = [];

  }

}

​

//lazy

function getAABB(pointsToBound) {

  var minX = 10000000;

  var maxX = -10000000;

  var minY = 10000000;

  var maxY = -10000000;

​

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

      var pt = pointsToBound[i];

      minX = min(minX, pt.x);

      maxX = max(maxX, pt.x);

      minY = min(minY, pt.y);

      maxY = max(maxY, pt.y);    

  }

  return {

    x: minX,

    y: minY,

    width: maxX - minX,

    height: maxY - minY

  }

}

​

//you can read more about this here

//https://stackoverflow.com/a/16391873

function isPointInPoly(px, py, pts) {

    var i, j;

    var c = false;

    for (i = 0, j = pts.length - 1; i < pts.length; j = i++) {

        if((pts[i].y > py) != (pts[j].y > py) &&

          px < (pts[j].x - pts[i].x) * (py - pts[i].y) / (pts[j].y - pts[i].y) + pts[i].x)

        {

            c = !c;

        }

    }

    return c;

}