mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
81 lines
2 KiB
HTML
81 lines
2 KiB
HTML
<!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>
|