interesect a polygon with an expanding grid of lines

intersect-lines.js

var Polygon = require('polygon');
var fc = require('fc');
var Vec2 = require('vec2');
var Line2 = require('line2');

var poly = new Polygon([
  Vec2(-100, -100),
  Vec2(100, -100),
  Vec2(200, -200),
  Vec2(100, 0),

  Vec2(300, 0),
  Vec2(350, -100),
  Vec2(350, -200),
  Vec2(275, -300),
  Vec2(600, -300),

  Vec2(400, -200),
  Vec2(400, -150),

  Vec2(600, -100),
  Vec2(500, 200),
  Vec2(300, 100),
  Vec2(100, 200),
  Vec2(-100, 100),
  Vec2(-100, 0)
]);

// var poly = new Polygon([
//   Vec2(-100, -100),
//   Vec2(100, -100),
//   Vec2(100, 100),
//   Vec2(200, 200),
//   Vec2(-100, 100)
// ]);


Line2.prototype.render = function(ctx, color, bounds) {

  ctx.beginPath()

  if (this.isVertical()) {
    ctx.moveTo(this.xintercept(), -1000)
    ctx.lineTo(this.xintercept(), 1000)

  } else if (this.isHorizontal()) {
    ctx.moveTo(-1000, this.yintercept());
    ctx.lineTo(1000, this.yintercept());

  } else {

    ctx.moveTo(this.solveForY(0), 0);
    ctx.lineTo(ctx.canvas.width, this.solveForX(ctx.canvas.width));

  }
  ctx.closePath();
  ctx.strokeStyle = color || 'green';
  ctx.stroke()
}

Polygon.prototype.stroke = function(ctx, color) {
  ctx.strokeStyle = color;

  ctx.beginPath()
    ctx.moveTo(this.point(0).x, this.point(0).y);

    var points = this.points.map(function(c) {
      ctx.lineTo(c.x, c.y);
      return c.toArray();
    });

  ctx.closePath();
  ctx.stroke();

  return this;
}

Polygon.prototype.fill = function(ctx, color) {
  ctx.fillStyle = ctx.strokeStyle = color;

  ctx.beginPath()
    ctx.moveTo(this.point(0).x, this.point(0).y);

    var points = this.points.map(function(c) {
      ctx.lineTo(c.x, c.y);
      return c.toArray();
    });

  ctx.closePath();
  ctx.fill();

  return this;
}

Polygon.prototype.msum = function(ctx, radius, color) {

  ctx.save();
    // ctx.globalCompositeOperation = 'destination-out';
    ctx.lineWidth = radius * 2;
    this.stroke(ctx, color || 'white');
  ctx.restore();

  return this;
};

Polygon.prototype.toArray = function() {
  var ret = [];
  var that = this;
  this.points.forEach(function(point, i) {
    ret.push(that.point(i-1).subtract(point, true).divide(2).add(point).toArray());
    ret.push(point.toArray());
  });
  return ret;
};

Polygon.prototype.intersectLine = function(line, ctx, color, tx, ty) {
  poly.each(function(p, c) {
    var isect = line.intersectSegment(p.x, p.y, c.x, c.y);
    if (isect && isect !== true) {
      ctx.beginPath()
        ctx.save();
          ctx.translate(isect.x, isect.y)
          ctx.arc(0, 0, 20, Math.PI*2, false);
        ctx.restore();
      ctx.closePath();
      ctx.strokeStyle = color || "red";
      ctx.lineWidth = 1;
      ctx.stroke();
      ctx.beginPath()
        ctx.save();
          ctx.translate(isect.x, isect.y)
          ctx.arc(0, 0, 10, Math.PI*2, false);
        ctx.restore();
      ctx.closePath();
      ctx.fillStyle =  color || "red";
      ctx.fill();
    }
  });
}



var radius = 0;

var ctx = window.ctx = fc(function() {
  radius+=.1;
  var tx = 200, ty = 500;
  ctx.save();
    ctx.fillStyle = "black";
    ctx.lineJoin = 'round';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.translate(tx, ty);
    // poly.msum(ctx, radius, 'rgba(0, 255, 0, .3)').stroke(ctx, 'white');
    poly.stroke(ctx, 'white');


  var bounds = poly.aabb();
  for (var x = -1000; x<1000; x+=radius) {
    var line = new Line2(0, x, 10, x);
    poly.intersectLine(line, ctx, 'orange', tx, ty);

    //line.render(ctx, 'rgba(0, 255, 0, .2)', bounds);
  }

  for (var y = -1000; y<1000; y+=radius) {
    var line = new Line2(y, 0, y, 1);



    poly.intersectLine(line, ctx, '#FFE73C', tx, ty);
    //line.render(ctx, 'rgba(0, 255, 0, .2)', bounds);

  }

  ctx.restore();
}, true);