paper
Version:
The Swiss Army Knife of Vector Graphics Scripting
116 lines (98 loc) • 3.55 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Path Intersections</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var text = new PointText({
position: view.center + [0, 200],
fillColor: 'black',
justification: 'center',
fontSize: 20
});
var originals = new Group({ insert: false }); // Don't insert in DOM.
var square = new Path.Rectangle({
position: view.center,
size: 300,
parent: originals,
fillColor: 'white'
});
// Make a ring using subtraction of two circles:
var inner = new Path.Circle({
center: view.center,
radius: 100,
parent: originals,
fillColor: 'white'
});
var outer = new Path.Circle({
center: view.center,
radius: 140,
parent: originals,
fillColor: 'white'
});
var ring = outer.subtract(inner);
var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
var colors = ['red', 'green', 'blue', 'black'];
var curIndex = -1;
var operation, result, activeItem;
// Change the mode every 3 seconds:
setInterval(setMode, 3000);
// Set the initial mode:
setMode();
function setMode() {
curIndex++;
if (curIndex == operations.length * 2)
curIndex = 0;
operation = operations[curIndex % operations.length];
}
function onMouseDown(event) {
var hitResult = originals.hitTest(event.point);
activeItem = hitResult && hitResult.item;
}
function onMouseDrag(event) {
if (activeItem)
activeItem.position = event.point;
}
function onMouseUp() {
activeItem = null;
square.position = view.center;
}
function onFrame(event) {
if (activeItem != ring) {
// Move the ring around:
var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
ring.position = view.center + offset;
}
// Remove the result of the last path operation:
if (result)
result.remove();
// Perform the path operation on the ring:
if (curIndex < operations.length) {
result = square[operation](ring);
text.content = 'square.' + operation + '(ring)';
} else {
result = ring[operation](square);
text.content = 'ring.' + operation + '(square)';
}
result.selected = true;
result.fillColor = colors[curIndex % colors.length];
result.moveBelow(text);
// If the result is a group, color each of its children differently:
if (result instanceof Group) {
for (var i = 0; i < result.children.length; i++) {
result.children[i].fillColor = colors[i];
}
}
};
function onResize() {
text.position = view.center + [0, 200];
square.position = view.center;
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>