2011-03-06 09:11:18 -05:00
|
|
|
<!-- <!DOCTYPE html> -->
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
|
<title>Example</title>
|
2011-05-05 11:25:17 -04:00
|
|
|
<link rel="stylesheet" href="../css/style.css">
|
2011-06-12 14:03:18 -04:00
|
|
|
<script type="text/javascript" src="../../dist/paper.js"></script>
|
2011-03-06 09:11:18 -05:00
|
|
|
<script type="text/paperscript" canvas="canvas">
|
2011-05-15 06:36:10 -04:00
|
|
|
var raster = new Raster('lenna');
|
|
|
|
|
var size = new Size(50, 50);
|
|
|
|
|
var colSize = raster.size / size * 1.5;
|
|
|
|
|
var fullSize = size * colSize;
|
2011-05-08 12:20:23 -04:00
|
|
|
|
2011-05-19 16:55:51 -04:00
|
|
|
raster.visible = false;
|
2011-03-06 09:11:18 -05:00
|
|
|
raster.size = size;
|
|
|
|
|
for (var x = 0; x < size.width; x++) {
|
|
|
|
|
for (var y = 0; y < size.height; y++) {
|
2011-05-15 06:36:10 -04:00
|
|
|
var color = raster.getPixel(x, y);
|
|
|
|
|
var gray = color.gray * 0.9;
|
2011-05-03 03:55:01 -04:00
|
|
|
if (gray > 0.1) {
|
2011-05-15 06:36:10 -04:00
|
|
|
var pos = new Point(x, y) * colSize + colSize / 2;
|
|
|
|
|
var rectSize = gray * colSize.width;
|
|
|
|
|
var path = new Path.Rectangle([0, 0], [rectSize, rectSize]);
|
2011-05-08 12:20:23 -04:00
|
|
|
path.fillColor = color;
|
2011-03-06 09:11:18 -05:00
|
|
|
path.position = pos;
|
|
|
|
|
path.rotate(gray * 180);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2011-05-16 08:33:15 -04:00
|
|
|
project.activeLayer.position = view.center;
|
2011-05-08 12:20:23 -04:00
|
|
|
|
|
|
|
|
// Reposition the paths whenever the window is resized:
|
2011-05-16 07:51:20 -04:00
|
|
|
function onResize(event) {
|
2011-05-16 08:33:15 -04:00
|
|
|
project.activeLayer.position = view.center;
|
2011-05-16 07:51:20 -04:00
|
|
|
}
|
2011-03-06 09:11:18 -05:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2011-06-29 07:44:06 -04:00
|
|
|
<canvas id="canvas" resize></canvas>
|
2011-05-14 06:04:02 -04:00
|
|
|
<img width="512" height="512" id="lenna" style="display: none;" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAXAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUxMDE3MzA5NDAwODExRTBCQjkwRDlDMzRBOTRBODAyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUxMDE3MzBBNDAwODExRTBCQjkwRDlDMzRBOTRBODAyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTEwMTczMDc0MDA4MTFFMEJCOTBEOUMzNEE5NEE4MDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTEwMTczMDg0MDA4MTFFMEJCOTBEOUMzNEE5NEE4MDIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAASDQ0NDw0TDw8THBIQEhwhGBMT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
|
2011-05-30 18:27:39 -04:00
|
|
|
</body>
|
|
|
|
|
</html>
|
