scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add animated example of the different boolean path operations.

Browse source
This commit is contained in:
Jonathan Puckey 2014-04-28 20:23:45 +02:00
parent 04e90ec3f4
commit 083cd7a057
1 changed files with 81 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
examples/Animated/BooleanOperations.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boolean Operations</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 square = new Path.Rectangle({
position: view.center,
size: 300
});
var circle = new Path.Circle({
center: view.center,
radius: 140
});
// Remove both items from the dom:
circle.remove();
square.remove();
var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
var colors = ['red', 'green', 'blue', 'black'];
var curIndex = -1;
var operation, result;
function setMode() {
curIndex++;
if (curIndex == operations.length)
curIndex = 0;
operation = operations[curIndex];
text.content = 'square.' + operation + '(circle)';
}
// Change the mode every 3 seconds:
setInterval(setMode, 3000);
// Set the initial mode:
setMode();
function onFrame(event) {
// Move the circle around:
var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
circle.position = view.center + offset;
// Remove the result of the last path operation:
if (result)
result.remove();
// Perform the path operation on the circle:
result = square[operation](circle);
result.selected = true;
result.fillColor = colors[curIndex];
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 stats></canvas>
</body>
</html>