PaperJS Qber

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

  <canvas id="myCanvas" resize></canvas>
  
  <!-- need to get this image locally -->
  <img id="mona" width="100" height="100" src="Lenna.png" alt="">
	
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.12/paper-full.min.js"></script>
  <script src="main.js"></script>

</body>
</html>

main.js

paper.install(window);

var canvas = document.getElementById('myCanvas');
paper.setup(canvas);


var values = {
  amount: 30
};
var raster,
  group;
var piece = createPiece();
var count = 0;
var size = piece.bounds.size;


new Raster('mona').on('load', function() {
  console.log('load')
  raster = this;
  this.remove();

  init();
  raster.onFrame = onFrame;
  raster.onResize = onResize;
});

function init(){
  raster.fitBounds(view.bounds, true);
  group = new Group();
  for (var y = 0; y < values.amount; y++) {
    for (var x = 0; x < values.amount; x++) {
      var copy = piece.clone();
      copy.position = new Point(size.width * (x + (y % 2 ? 0.5 : 0)), size.height * (y * 0.75) );
      group.addChild(copy);
      // console.log(x, y)
    }
  }

  // Transform the group so it covers the view:
  group.fitBounds(view.bounds, true);
  group.scale(0.5);
}


function onFrame(event) {
  if (!raster)
    return;

  // Loop through the uncolored hexagons in the group and fill them
  // with the average color:
  var length = Math.min(count + values.amount, group.children.length);
  for (var i = count; i < length; i++) {
    piece = group.children[i];
    var hexagon = piece.children[0];
    var color = raster.getAverageColor(hexagon);
    if (color) {
      hexagon.fillColor = color;
      var top = piece.children[1];
      top.fillColor = color.clone();
      top.fillColor.brightness *= 1.5;

      var right = piece.children[2];
      right.fillColor = color.clone();
      right.fillColor.brightness *= 0.5;
    }
  }
  count += values.amount;
}

function onResize() {
  project.activeLayer.position = view.center;
}

function createPiece() {
  var group = new Group();
  var hexagon = new Path.RegularPolygon({
    center: view.center,
    sides: 6,
    radius: 50,
    fillColor: 'gray',
    parent: group
  });
  for (var i = 0; i < 2; i++) {
    var path = new Path({
      closed: true,
      selected: true,
      parent: group,
      fillColor: i == 0 ? 'white' : 'black'
    });
    for (var j = 0; j < 3; j++) {
      var index = (i * 2 + j) % hexagon.segments.length;
      path.add(hexagon.segments[index].clone());
    }
    path.add(hexagon.bounds.center);
  }
  // Remove the group from the document, so it is not drawn:
  group.remove();
  return group;
}