scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Flock example: use Element.getScrollBounds() to define Document#size, move css into the head and simplify the construction of heartPath.

Browse source
This commit is contained in:
Jonathan Puckey 2011-05-05 13:31:36 +01:00
parent f806c68dc0
commit ae699ff20f
1 changed files with 28 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
examples/Animated/Flock.html
View file

@ -11,7 +11,7 @@
// Resize the document, whenever the window is resized,
window.onresize = function(event) {
document.size = [window.innerWidth, window.innerHeight];
document.size = Element.getScrollBounds().size;
size = document.size;
heartPath.position = document.bounds.center;
document.redraw();
@ -233,25 +233,25 @@
}
});
var heartPath = new Path(
new Segment([514.6962890625, 624.703125], [7.0966796875, -26.3369140625], [-7.10205078125, -27.0244140625]),
new Segment([484.29052734375, 548.6025390625], [13.16845703125, 23.7060546875], [-13.173828125, -23.70703125]),
new Segment([407.84619140625, 438.14453125], [37.79296875, 49.935546875], [-27.71630859375, -36.6435546875]),
new Segment([356.654296875, 368.400390625], [6.41015625, 9.8505859375], [-10.53759765625, -16.02978515625]),
new Segment([333.80712890625, 324.25146484375], [4.69189453125, 13.3994140625], [-4.697265625, -13.39892578125]),
new Segment([326.76416015625, 283.53857421875], [0, 13.74267578125], [0, -25.42431640625]),
new Segment([352.18798828125, 219.634765625], [-16.95263671875, 17.17822265625], [16.94775390625, -17.1787109375]),
new Segment([415.0615234375, 193.8671875], [-24.96826171875, 0], [25.19287109375, 0]),
new Segment([480.68310546875, 220.66552734375], [-18.552734375, -17.86572265625], [13.96826171875, 13.28662109375]),
new Segment([514.6962890625, 280.10302734375], [-8.70703125, -26.3369140625], [7.55859375, -25.88037109375]),
new Segment([546.6484375, 221.0087890625], [-13.7431640625, 13.517578125], [19.0087890625, -18.32177734375]),
new Segment([612.61328125, 193.5234375], [-24.9677734375, 0], [24.7373046875, 0]),
new Segment([675.486328125, 219.119140625], [-17.177734375, -17.06005859375], [17.1787109375, 17.06591796875]),
new Segment([701.2548828125, 280.10302734375], [0, -23.58837890625], [0, 20.61376953125]),
new Segment([686.1376953125, 344.52197265625], [10.076171875, -22.33203125], [-10.08203125, 22.33203125]),
new Segment([627.73046875, 432.3046875], [28.8603515625, -36.1875], [-37.5673828125, 47.412109375]),
new Segment([545.6171875, 549.1171875], [17.1787109375, -30.458984375], [-13.517578125, 24.0498046875])
);
var heartPath = new Path([
[[514.6962890625, 624.703125], [7.0966796875, -26.3369140625], [-7.10205078125, -27.0244140625]],
[[484.29052734375, 548.6025390625], [13.16845703125, 23.7060546875], [-13.173828125, -23.70703125]],
[[407.84619140625, 438.14453125], [37.79296875, 49.935546875], [-27.71630859375, -36.6435546875]],
[[356.654296875, 368.400390625], [6.41015625, 9.8505859375], [-10.53759765625, -16.02978515625]],
[[333.80712890625, 324.25146484375], [4.69189453125, 13.3994140625], [-4.697265625, -13.39892578125]],
[[326.76416015625, 283.53857421875], [0, 13.74267578125], [0, -25.42431640625]],
[[352.18798828125, 219.634765625], [-16.95263671875, 17.17822265625], [16.94775390625, -17.1787109375]],
[[415.0615234375, 193.8671875], [-24.96826171875, 0], [25.19287109375, 0]],
[[480.68310546875, 220.66552734375], [-18.552734375, -17.86572265625], [13.96826171875, 13.28662109375]],
[[514.6962890625, 280.10302734375], [-8.70703125, -26.3369140625], [7.55859375, -25.88037109375]],
[[546.6484375, 221.0087890625], [-13.7431640625, 13.517578125], [19.0087890625, -18.32177734375]],
[[612.61328125, 193.5234375], [-24.9677734375, 0], [24.7373046875, 0]],
[[675.486328125, 219.119140625], [-17.177734375, -17.06005859375], [17.1787109375, 17.06591796875]],
[[701.2548828125, 280.10302734375], [0, -23.58837890625], [0, 20.61376953125]],
[[686.1376953125, 344.52197265625], [10.076171875, -22.33203125], [-10.08203125, 22.33203125]],
[[627.73046875, 432.3046875], [28.8603515625, -36.1875], [-37.5673828125, 47.412109375]],
[[545.6171875, 549.1171875], [17.1787109375, -30.458984375], [-13.517578125, 24.0498046875]]
]);
heartPath.closed = true;
heartPath.position = document.bounds.center;
heartPath.strokeColor = null;
@ -292,9 +292,15 @@
if (event.character == 'space')
layer.selected = !layer.selected;
}
</script>
<style>
body {
background: black;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body style='background-color: black; margin: 0; overflow: hidden'>
<body>
<canvas id='canvas'></canvas>
</body>