offsetting adventures (run these with beefy!)

offset-minkowski-surface-nets.js

var Polygon = require('polygon');
var fc = require('fc');
var Vec2 = require('vec2');
var ndarray = require('ndarray');
var sn = require('surface-nets');
var cwise = require('cwise');
var fill = require('ndarray-fill');


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)
// ]);

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;
};

var radius = 10;

var extract_greyscale = function(w, h, array1d) {
  var subject = ndarray(array1d, [w, h, 4]);
  var res = ndarray(new Float32Array(w*h), [w, h])

  fill(res, function(i, j) {
    return subject.get(j, i, 0) + subject.get(j, i, 1) + subject.get(j, i, 2);
  });

  return res;
};


var ctx = window.ctx = fc(function() {
  ctx.canvas.width = ctx.canvas.height = 900
  radius+=1;
  ctx.save();
    ctx.fillStyle = "black";
    ctx.lineJoin = 'round';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.translate(200, 500);
    // ctx.scale(.5, -.5)

    poly.rewind(true).msum(ctx, radius);
  ctx.restore();



  var data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
  var start = Date.now();
  var complex = sn(extract_greyscale(ctx.canvas.width, ctx.canvas.height, data));
console.log(complex)
  ctx.save();

    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    ctx.save();
      ctx.fillStyle = "black";
      ctx.lineJoin = 'round';
      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      ctx.translate(200, 500);
      // ctx.scale(.5, -.5)
      ctx.lineWidth = 2;
      poly.rewind(true).stroke(ctx, 'green').msum(ctx, radius, 'rgba(0, 255, 0, .2)');
    ctx.restore();

    ctx.strokeStyle = "red";
    ctx.lineWidth = .5;
    complex.cells.forEach(function(cell) {
      var p0 = complex.positions[cell[0]]
      var p1 = complex.positions[cell[1]]

      ctx.beginPath();
        ctx.moveTo(p0[0], p0[1]);
        ctx.lineTo(p1[0], p1[1]);
      ctx.closePath()
      ctx.stroke();


    });

  ctx.restore();

  console.log(Date.now() - start)

}, true);

voronoi-point-based.js

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

var vd = require('voronoi-diagram');

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)
// ]);

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.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;
};


var radius = 10;

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


  var diagram = vd(poly.toArray());
  var cells = diagram.cells;
  var points = diagram.positions;

  for(var i=0; i<cells.length; ++i) {
    var cell = cells[i]
    if(cell.indexOf(-1) >= 0) {
      console.log('here');
      continue
    }
    ctx.strokeStyle = "orange"
    ctx.beginPath()
    ctx.moveTo(points[cell[0]][0], points[cell[0]][1])
    for(var j=1; j<cell.length; ++j) {
      ctx.lineTo(points[cell[j]][0], points[cell[j]][1])
    }
    ctx.closePath()
    ctx.stroke()
  }

  ctx.restore();

}, false);