2011-07-05 12:28:30 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-08-16 13:24:54 -04:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Spiral Raster</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 path, position, max;
|
|
|
|
|
var count = 0;
|
2016-06-14 11:22:54 -04:00
|
|
|
var grow = false;
|
|
|
|
|
|
|
|
|
|
// 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
|
|
|
var raster = new Raster('mona');
|
2016-06-14 11:22:54 -04:00
|
|
|
raster.visible = false;
|
|
|
|
|
raster.on('load', resetSpiral);
|
2014-08-16 13:24:54 -04:00
|
|
|
|
|
|
|
|
var text = new PointText({
|
|
|
|
|
justification: 'right',
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
content: window.FileReader
|
|
|
|
|
? 'drag & drop an image from your desktop to rasterize it'
|
|
|
|
|
: 'to drag & drop images, please use Webkit, Firefox, Chrome or IE 10'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function onFrame(event) {
|
|
|
|
|
if (grow) {
|
2016-06-14 11:22:54 -04:00
|
|
|
if (raster.loaded && (view.center - position).length < max) {
|
2014-08-16 13:24:54 -04:00
|
|
|
for (var i = 0, l = count / 36 + 1; i < l; i++) {
|
|
|
|
|
growSpiral();
|
|
|
|
|
}
|
|
|
|
|
path.smooth();
|
|
|
|
|
} else {
|
|
|
|
|
grow = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function growSpiral() {
|
|
|
|
|
count++;
|
|
|
|
|
var vector = new Point({
|
|
|
|
|
angle: count * 5,
|
|
|
|
|
length: count / 100
|
|
|
|
|
});
|
|
|
|
|
var rot = vector.rotate(90);
|
|
|
|
|
var color = raster.getAverageColor(position + vector / 2);
|
|
|
|
|
var value = color ? (1 - color.gray) * 3.7 : 0;
|
|
|
|
|
rot.length = Math.max(value, 0.2);
|
|
|
|
|
path.add(position + vector - rot);
|
|
|
|
|
path.insert(0, position + vector + rot);
|
|
|
|
|
position += vector;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function resetSpiral() {
|
|
|
|
|
grow = true;
|
|
|
|
|
|
|
|
|
|
// Transform the raster, so it fills the view:
|
|
|
|
|
raster.fitBounds(view.bounds);
|
|
|
|
|
|
|
|
|
|
if (path)
|
|
|
|
|
path.remove();
|
|
|
|
|
|
|
|
|
|
position = view.center;
|
|
|
|
|
count = 0;
|
|
|
|
|
path = new Path({
|
|
|
|
|
fillColor: 'black',
|
|
|
|
|
closed: true
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
position = view.center;
|
|
|
|
|
max = Math.min(raster.bounds.width, raster.bounds.height) * 0.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onResize() {
|
2016-06-14 11:22:54 -04:00
|
|
|
if (raster.loaded)
|
|
|
|
|
resetSpiral();
|
2014-08-16 13:24:54 -04:00
|
|
|
text.point = view.bounds.bottomRight - [30, 30];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onKeyDown(event) {
|
|
|
|
|
if (event.key == 'space') {
|
|
|
|
|
path.selected = !path.selected;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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 () {
|
|
|
|
|
raster = new Raster(image);
|
2016-06-14 11:22:54 -04:00
|
|
|
raster.visible = false;
|
2014-08-16 13:24:54 -04:00
|
|
|
resetSpiral();
|
|
|
|
|
};
|
|
|
|
|
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>
|
2011-07-05 12:28:30 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-08-16 13:24:54 -04:00
|
|
|
<canvas id="canvas" resize style="background-color:white"></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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
|
2011-07-05 12:28:30 -04:00
|
|
|
</body>
|
2014-04-06 07:44:19 -04:00
|
|
|
</html>
|
