2013-03-02 14:58:09 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-08-16 13:24:54 -04:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Q*bertify</title>
|
|
|
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
|
|
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
|
|
|
|
<script type="text/paperscript" canvas="canvas">
|
|
|
|
|
// Please note: dragging and dropping images only works for
|
|
|
|
|
// certain browsers when serving this script online:
|
|
|
|
|
|
|
|
|
|
var values = {
|
|
|
|
|
amount: 30
|
|
|
|
|
};
|
|
|
|
|
|
2016-06-14 11:22:54 -04:00
|
|
|
var raster,
|
|
|
|
|
group;
|
2014-08-16 13:24:54 -04:00
|
|
|
var piece = createPiece();
|
|
|
|
|
var count = 0;
|
|
|
|
|
|
|
|
|
|
handleImage('mona');
|
|
|
|
|
|
|
|
|
|
var text = new PointText({
|
|
|
|
|
point: view.center,
|
|
|
|
|
justification: 'center',
|
|
|
|
|
fillColor: 'white',
|
|
|
|
|
fontSize: 15,
|
|
|
|
|
content: window.FileReader
|
|
|
|
|
? 'Drag & drop an image from your desktop'
|
|
|
|
|
: 'To drag & drop images, please use Webkit, Firefox, Chrome or IE 10'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
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,
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleImage(image) {
|
|
|
|
|
count = 0;
|
|
|
|
|
var size = piece.bounds.size;
|
|
|
|
|
|
|
|
|
|
if (group)
|
|
|
|
|
group.remove();
|
|
|
|
|
|
2016-06-14 11:22:54 -04:00
|
|
|
// As the web is asynchronous, we need to wait for the raster to
|
|
|
|
|
// load before we can perform any operation on its pixels.
|
2014-08-16 13:24:54 -04:00
|
|
|
raster = new Raster(image);
|
2016-06-14 11:22:54 -04:00
|
|
|
raster.visible = false;
|
|
|
|
|
raster.on('load', function() {
|
|
|
|
|
// Transform the raster, so it fills the view:
|
|
|
|
|
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 += size * [x + (y % 2 ? 0.5 : 0), y * 0.75];
|
|
|
|
|
group.addChild(copy);
|
|
|
|
|
}
|
2014-08-16 13:24:54 -04:00
|
|
|
}
|
|
|
|
|
|
2016-06-14 11:22:54 -04:00
|
|
|
// Transform the group so it covers the view:
|
|
|
|
|
group.fitBounds(view.bounds, true);
|
|
|
|
|
group.scale(1.1);
|
|
|
|
|
})
|
2014-08-16 13:24:54 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onFrame(event) {
|
2016-06-14 11:22:54 -04:00
|
|
|
if (!group)
|
|
|
|
|
return;
|
2014-08-16 13:24:54 -04:00
|
|
|
// 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 onDocumentDrag(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onDocumentDrop(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
var file = event.dataTransfer.files[0];
|
|
|
|
|
var reader = new FileReader();
|
|
|
|
|
|
2016-06-14 11:22:54 -04:00
|
|
|
reader.onload = function(event) {
|
2014-08-16 13:24:54 -04:00
|
|
|
var image = document.createElement('img');
|
|
|
|
|
image.onload = function () {
|
|
|
|
|
handleImage(image);
|
2016-06-14 11:22:54 -04:00
|
|
|
view.draw();
|
2014-08-16 13:24:54 -04:00
|
|
|
};
|
|
|
|
|
image.src = event.target.result;
|
|
|
|
|
};
|
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
}
|
|
|
|
|
|
2014-10-08 12:27:48 -04:00
|
|
|
document.addEventListener('drop', onDocumentDrop, false);
|
|
|
|
|
document.addEventListener('dragover', onDocumentDrag, false);
|
|
|
|
|
document.addEventListener('dragleave', onDocumentDrag, false);
|
2014-08-16 13:24:54 -04:00
|
|
|
</script>
|
2013-03-02 14:58:09 -05:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-08-16 13:24:54 -04:00
|
|
|
<canvas id="canvas" resize></canvas>
|
|
|
|
|
<img width="512" height="512" id="mona" style="display: none;" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAATAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA1NUZCMzkwOTFGMTExRTBCNTg4OEQ5RDIyNkE4Qjc5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA1NUZCMzkxOTFGMTExRTBCNTg4OEQ5RDIyNkE4Qjc5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDU1RkIzOEU5MUYxMTFFMEI1ODg4RDlEMjI2QThCNzkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDU1RkIzOEY5MUYxMTFFMEI1ODg4RDlEMjI2QThCNzkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAATDw8WEBYkFRUkLSIcIi0pIyIi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
|
2013-03-02 14:58:09 -05:00
|
|
|
</body>
|
2014-04-06 07:44:19 -04:00
|
|
|
</html>
|
