paper.js/examples/Rasters/RotationRaster.html

45 lines
100 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
2011-03-06 09:11:18 -05:00
<html>
<head>
2014-08-16 13:24:54 -04:00
<meta charset="UTF-8">
<title>Rotation 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">
2015-05-31 04:50:04 -04:00
var raster = new Raster('marilyn');
2014-08-16 13:24:54 -04:00
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
2014-08-16 13:24:54 -04:00
raster.visible = false;
raster.size = size;
for (var x = 0; x < size.width; x++) {
for (var y = 0; y < size.height; y++) {
var color = raster.getPixel(x, y);
var gray = (1 - color.gray) * 0.9;
if (gray > 0.1) {
var pos = new Point(x, y) * colSize + colSize / 2;
var rectSize = gray * colSize.width;
2015-05-31 04:50:04 -04:00
var path = new Path.Rectangle({
size: [rectSize, rectSize],
position: pos,
fillColor: 'black'
});
2014-08-16 13:24:54 -04:00
path.rotate(gray * 180);
}
}
}
project.activeLayer.position = view.center;
2011-05-08 12:20:23 -04:00
2014-08-16 13:24:54 -04:00
// Reposition the paths whenever the window is resized:
function onResize(event) {
project.activeLayer.position = view.center;
}
</script>
2011-03-06 09:11:18 -05:00
</head>
<body>
2014-08-16 13:24:54 -04:00
<canvas id="canvas" resize></canvas>
2015-05-31 04:50:04 -04:00
<img id="marilyn" width="512" height="512" style="display: none;" src="data:image/jpg;base64,/9j/4QCMRXhpZgAASUkqAAgAAAABAJiCAgBoAAAAGgAAAAAAAAAoYykgVGhlIEFuZHkgV2FyaG9sIEZvdW5kYXRpb24gZm9yIHRoZSBWaXN1YWwgQXJ0cywgSW5jLi9BUlMsIE5ZIGFuZCBEQUNTLCBMb25kb24gMjAxNSAvIFBob3RvIChjKSBUYXRlAAAA/+wAEUR1Y2t5AAEABAAAAEYAAP/hBMRodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSIyMTg3MDRCMTYxMzUxNkYxN0EyOEE2REJEQUVFNkI4MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4RDg0OUYzMUZEN0IxMUU0OUJGRkUwNUI5RDlBQ0M5NyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4RDg0OUYzMEZEN0IxMUU0OUJGRkUwNUI5RDlBQ0M5NyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJv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
2011-05-30 18:27:39 -04:00
</body>
</html>