2013-03-03 08:22:46 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-08-16 13:24:54 -04:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Hit Testing</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 values = {
|
|
|
|
|
paths: 50,
|
|
|
|
|
minPoints: 5,
|
|
|
|
|
maxPoints: 15,
|
|
|
|
|
minRadius: 30,
|
|
|
|
|
maxRadius: 90
|
|
|
|
|
};
|
2013-03-03 08:22:46 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var hitOptions = {
|
|
|
|
|
segments: true,
|
|
|
|
|
stroke: true,
|
|
|
|
|
fill: true,
|
|
|
|
|
tolerance: 5
|
|
|
|
|
};
|
2013-03-03 08:22:46 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
createPaths();
|
2013-03-03 08:22:46 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
function createPaths() {
|
|
|
|
|
var radiusDelta = values.maxRadius - values.minRadius;
|
|
|
|
|
var pointsDelta = values.maxPoints - values.minPoints;
|
|
|
|
|
for (var i = 0; i < values.paths; i++) {
|
|
|
|
|
var radius = values.minRadius + Math.random() * radiusDelta;
|
|
|
|
|
var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
|
|
|
|
|
var path = createBlob(view.size * Point.random(), radius, points);
|
|
|
|
|
var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
|
|
|
|
|
var hue = Math.random() * 360;
|
|
|
|
|
path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
|
|
|
|
|
path.strokeColor = 'black';
|
|
|
|
|
};
|
|
|
|
|
}
|
2013-03-03 08:22:46 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
function createBlob(center, maxRadius, points) {
|
|
|
|
|
var path = new Path();
|
|
|
|
|
path.closed = true;
|
|
|
|
|
for (var i = 0; i < points; i++) {
|
|
|
|
|
var delta = new Point({
|
|
|
|
|
length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
|
|
|
|
|
angle: (360 / points) * i
|
|
|
|
|
});
|
|
|
|
|
path.add(center + delta);
|
|
|
|
|
}
|
|
|
|
|
path.smooth();
|
|
|
|
|
return path;
|
|
|
|
|
}
|
2013-03-03 08:22:46 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
var segment, path;
|
|
|
|
|
var movePath = false;
|
|
|
|
|
function onMouseDown(event) {
|
|
|
|
|
segment = path = null;
|
|
|
|
|
var hitResult = project.hitTest(event.point, hitOptions);
|
|
|
|
|
if (!hitResult)
|
|
|
|
|
return;
|
2013-03-03 08:22:46 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
if (event.modifiers.shift) {
|
|
|
|
|
if (hitResult.type == 'segment') {
|
|
|
|
|
hitResult.segment.remove();
|
|
|
|
|
};
|
|
|
|
|
return;
|
|
|
|
|
}
|
2013-03-03 08:22:46 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
if (hitResult) {
|
|
|
|
|
path = hitResult.item;
|
|
|
|
|
if (hitResult.type == 'segment') {
|
|
|
|
|
segment = hitResult.segment;
|
|
|
|
|
} else if (hitResult.type == 'stroke') {
|
|
|
|
|
var location = hitResult.location;
|
|
|
|
|
segment = path.insert(location.index + 1, event.point);
|
|
|
|
|
path.smooth();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
movePath = hitResult.type == 'fill';
|
|
|
|
|
if (movePath)
|
|
|
|
|
project.activeLayer.addChild(hitResult.item);
|
|
|
|
|
}
|
2013-03-03 08:22:46 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
function onMouseMove(event) {
|
|
|
|
|
project.activeLayer.selected = false;
|
|
|
|
|
if (event.item)
|
|
|
|
|
event.item.selected = true;
|
|
|
|
|
}
|
2013-03-03 08:22:46 -05:00
|
|
|
|
2014-08-16 13:24:54 -04:00
|
|
|
function onMouseDrag(event) {
|
|
|
|
|
if (segment) {
|
|
|
|
|
segment.point += event.delta;
|
|
|
|
|
path.smooth();
|
|
|
|
|
} else if (path) {
|
|
|
|
|
path.position += event.delta;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2013-03-03 08:22:46 -05:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-08-16 13:24:54 -04:00
|
|
|
<canvas id="canvas" resize style="background:black"></canvas>
|
2013-03-03 08:22:46 -05:00
|
|
|
</body>
|
2014-04-06 07:44:19 -04:00
|
|
|
</html>
|
