mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-28 17:02:24 -05:00
bc2729683c
- Symbol -> SymbolDefinition - PlacedSymbol -> SymbolItem - Symbol#definition -> SymbolDefinition#item - PlacedSymbol#symbol -> SymbolItem#definition - Deprecate Project#symbols Closes #770
86 lines
2.5 KiB
HTML
86 lines
2.5 KiB
HTML
<!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-full.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({
|
|
center: new Point(0, 0),
|
|
radius: 5,
|
|
fillColor: 'white',
|
|
strokeColor: 'black'
|
|
});
|
|
|
|
var symbol = new SymbolDefinition(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);
|
|
var scale = (i + 1) / count;
|
|
placed.scale(scale);
|
|
placed.data.vector = new Point({
|
|
angle: Math.random() * 360,
|
|
length : scale * 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 hidpi="off" style="background:black"></canvas>
|
|
</body>
|
|
</html>
|