<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Path Editing</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: 100,
minPoints: 5,
maxPoints: 15,
minRadius: 30,
maxRadius: 90
};
var hitOptions = {
segments: true,
stroke: true,
fill: true,
tolerance: 5
};
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';
};
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;
}
var segment, path;
function onMouseDown(event) {
segment = path = null;
var hitResult = project.hitTest(event.point, hitOptions);
if (event.modifiers.shift) {
if (hitResult.type == 'segment') {
hitResult.segment.remove();
};
return;
}
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();
}
hitResult.item.bringToFront();
}
}
function onMouseMove(event) {
var hitResult = project.hitTest(event.point, hitOptions);
project.activeLayer.selected = false;
if (hitResult && hitResult.item)
hitResult.item.selected = true;
}
function onMouseDrag(event) {
if (segment) {
segment.point += event.delta;
path.smooth();
} else if (path) {
path.position += event.delta;
}
}
</script>
</head>
<body style="background:black">
<canvas id="canvas" resize></canvas>
</body>
</html>