mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
91 lines
34 KiB
HTML
91 lines
34 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<title>Example</title>
|
||
|
|
<link rel="stylesheet" href="../css/style.css">
|
||
|
|
<script type="text/javascript">var root = '../../'</script>
|
||
|
|
<script type="text/javascript" src="../../src/load.js"></script>
|
||
|
|
<script type="text/paperscript" canvas="canvas">
|
||
|
|
// Example inspired by: 'Phyllotactic Spirals' by Ken Frederick
|
||
|
|
// http://scriptographer.org/scripts/general-scripts/phyllotactic-spirals/
|
||
|
|
|
||
|
|
// Further reading:
|
||
|
|
// http://en.wikipedia.org/wiki/Phyllotaxis
|
||
|
|
|
||
|
|
var values = {
|
||
|
|
// The amount of paths to produce:
|
||
|
|
amount: 400
|
||
|
|
}
|
||
|
|
|
||
|
|
var raster = new Raster('lenna');
|
||
|
|
// Make the raster very transparent, to almost hide it:
|
||
|
|
raster.opacity = 0.1;
|
||
|
|
|
||
|
|
// Position the raster in the center of the view
|
||
|
|
raster.position = view.center;
|
||
|
|
|
||
|
|
// Scale the raster by 150%
|
||
|
|
raster.scale(1.5)
|
||
|
|
|
||
|
|
// Create the group of circle shaped paths, and move the group
|
||
|
|
// to the center of the view and scale it up a bit:
|
||
|
|
var group = createPhyllotaxis(values.amount);
|
||
|
|
group.position = view.center;
|
||
|
|
group.scale(1.5);
|
||
|
|
|
||
|
|
var bgCircle = new Path.Circle(group.position, group.bounds.width / 2);
|
||
|
|
bgCircle.fillColor = 'black';
|
||
|
|
bgCircle.scale(1.1);
|
||
|
|
bgCircle.position = view.center;
|
||
|
|
bgCircle.moveBelow(group);
|
||
|
|
|
||
|
|
|
||
|
|
// Colorize the paths within the group:
|
||
|
|
colorizePaths();
|
||
|
|
|
||
|
|
function createPhyllotaxis(amount) {
|
||
|
|
var group = new Group();
|
||
|
|
// The Golden Angle (http://en.wikipedia.org/wiki/Golden_angle)
|
||
|
|
var rotation = 137.51;
|
||
|
|
var spacing = 5;
|
||
|
|
for (var i = 1; i <= amount; i++) {
|
||
|
|
var point = new Point({
|
||
|
|
length: spacing * Math.sqrt(i),
|
||
|
|
angle: i * rotation
|
||
|
|
});
|
||
|
|
var radius = 4 - (i / amount * 3);
|
||
|
|
group.appendTop(new Path.Circle(point, radius));
|
||
|
|
}
|
||
|
|
return group;
|
||
|
|
}
|
||
|
|
|
||
|
|
function colorizePaths() {
|
||
|
|
for (var i = 0, l = group.children.length; i < l; i++) {
|
||
|
|
var path = group.children[i];
|
||
|
|
// Set the path's fill color to the average color of the
|
||
|
|
// raster pixels that fall within it:
|
||
|
|
path.fillColor = raster.getAverageColor(path);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onMouseMove(event) {
|
||
|
|
// Move the group to the current position of the mouse:
|
||
|
|
group.position = event.point;
|
||
|
|
bgCircle.position = event.point;
|
||
|
|
// Colorize the paths:
|
||
|
|
colorizePaths();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Whenever the view is resized, recenter the raster and recolorize
|
||
|
|
// the paths:
|
||
|
|
function onResize() {
|
||
|
|
raster.position = view.center;
|
||
|
|
colorizePaths();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<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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
|
||
|
|
<canvas id="canvas" keepalive="true" resize></canvas>
|
||
|
|
</body>
|