paper
Version:
The Swiss Army Knife of Vector Graphics Scripting
45 lines (40 loc) • 1.23 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Multi Lines</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
tool.fixedDistance = 30;
var values = {
lines: 5,
size: 40,
smooth: true
};
var paths;
function onMouseDown(event) {
paths = [];
for (var i = 0; i < values.lines; i++) {
var path = new Path();
path.strokeColor = '#000000';
paths.push(path);
}
}
function onMouseDrag(event) {
var offset = event.delta;
offset.angle = offset.angle + 90;
var lineSize = values.size / values.lines;
for (var i = 0; i < values.lines; i++) {
var path = paths[values.lines - 1 - i];
offset.length = lineSize * i + lineSize / 2;
path.add(event.middlePoint + offset);
path.smooth();
}
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>