2011-06-21 08:54:29 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-08-16 13:24:54 -04:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Space</title>
|
|
|
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
|
|
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
|
|
|
|
<script type="text/paperscript" canvas="canvas">
|
|
|
|
|
// The amount of symbol we want to place;
|
|
|
|
|
var count = 150;
|
2011-06-21 08:54:29 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
// Create a symbol, which we will use to place instances of later:
|
|
|
|
|
var path = new Path.Circle({
|
|
|
|
|
center: new Point(0, 0),
|
|
|
|
|
radius: 5,
|
|
|
|
|
fillColor: 'white',
|
|
|
|
|
strokeColor: 'black'
|
|
|
|
|
});
|
2011-06-21 08:54:29 -04:00
|
|
|
|
2016-01-31 10:52:51 -05:00
|
|
|
var symbol = new SymbolDefinition(path);
|
2011-06-21 08:54:29 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
// Place the instances of the symbol:
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
|
// The center position is a random point in the view:
|
|
|
|
|
var center = Point.random() * view.size;
|
|
|
|
|
var placed = symbol.place(center);
|
|
|
|
|
var scale = (i + 1) / count;
|
|
|
|
|
placed.scale(scale);
|
|
|
|
|
placed.data.vector = new Point({
|
|
|
|
|
angle: Math.random() * 360,
|
|
|
|
|
length : scale * Math.random() / 5
|
|
|
|
|
});
|
|
|
|
|
}
|
2011-06-21 08:54:29 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var vector = new Point({
|
|
|
|
|
angle: 45,
|
|
|
|
|
length: 0
|
|
|
|
|
});
|
2011-07-07 10:09:02 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var mouseVector = vector.clone();
|
2011-06-21 08:54:29 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
function onMouseMove(event) {
|
|
|
|
|
mouseVector = view.center - event.point;
|
|
|
|
|
}
|
2011-06-21 08:54:29 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
// The onFrame function is called up to 60 times a second:
|
|
|
|
|
function onFrame(event) {
|
|
|
|
|
vector = vector + (mouseVector - vector) / 30;
|
2011-07-07 10:09:02 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
// Run through the active layer's children list and change
|
|
|
|
|
// the position of the placed symbols:
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
|
var item = project.activeLayer.children[i];
|
|
|
|
|
var size = item.bounds.size;
|
|
|
|
|
var length = vector.length / 10 * size.width / 10;
|
|
|
|
|
item.position += vector.normalize(length) + item.data.vector;
|
|
|
|
|
keepInView(item);
|
|
|
|
|
}
|
|
|
|
|
}
|
2011-07-07 10:09:02 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
function keepInView(item) {
|
|
|
|
|
var position = item.position;
|
|
|
|
|
var itemBounds = item.bounds;
|
|
|
|
|
var bounds = view.bounds;
|
|
|
|
|
if (itemBounds.left > bounds.width) {
|
|
|
|
|
position.x = -item.bounds.width;
|
|
|
|
|
}
|
2011-06-21 08:54:29 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
if (position.x < -itemBounds.width) {
|
|
|
|
|
position.x = bounds.width + itemBounds.width;
|
|
|
|
|
}
|
2011-06-21 08:54:29 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
if (itemBounds.top > view.size.height) {
|
|
|
|
|
position.y = -itemBounds.height;
|
|
|
|
|
}
|
2011-07-07 10:09:02 -04:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
if (position.y < -itemBounds.height) {
|
|
|
|
|
position.y = bounds.height + itemBounds.height / 2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2011-06-21 08:54:29 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-08-16 13:24:54 -04:00
|
|
|
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
|
2011-06-21 08:54:29 -04:00
|
|
|
</body>
|
2014-04-06 07:44:19 -04:00
|
|
|
</html>
|
