forked from paperjs/paper.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSpace.html
More file actions
85 lines (73 loc) · 2.11 KB
/
Copy pathSpace.html
File metadata and controls
85 lines (73 loc) · 2.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Space</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
// The amount of symbol we want to place;
var count = 150;
// Create a symbol, which we will use to place instances of later:
var path = new Path.Circle(new Point(0, 0), 5);
path.style = {
fillColor: 'white',
strokeColor: 'black'
};
var symbol = new Symbol(path);
// 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);
placed.scale(i / count);
placed.data = {};
placed.data.vector = new Point({
angle: Math.random() * 360,
length : (i / count) * Math.random() / 5
});
}
var vector = new Point({
angle: 45,
length: 0
});
var mouseVector = vector.clone();
function onMouseMove(event) {
mouseVector = view.center - event.point;
}
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
vector = vector + (mouseVector - vector) / 30;
// 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);
}
}
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;
}
if (position.x < -itemBounds.width) {
position.x = bounds.width + itemBounds.width;
}
if (itemBounds.top > view.size.height) {
position.y = -itemBounds.height;
}
if (position.y < -itemBounds.height) {
position.y = bounds.height + itemBounds.height / 2;
}
}
</script>
</head>
<body>
<canvas id="canvas" resize style='background:black'></canvas>
</body>
</html>