paper.js
This commit is contained in:
bach
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Bezier Tool</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 path;
|
||||
var types = ['point', 'handleIn', 'handleOut'];
|
||||
function findHandle(point) {
|
||||
for (var i = 0, l = path.segments.length; i < l; i++) {
|
||||
for (var j = 0; j < 3; j++) {
|
||||
var type = types[j];
|
||||
var segment = path.segments[i];
|
||||
var segmentPoint = type == 'point'
|
||||
? segment.point
|
||||
: segment.point + segment[type];
|
||||
var distance = (point - segmentPoint).length;
|
||||
if (distance < 3) {
|
||||
return {
|
||||
type: type,
|
||||
segment: segment
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
var currentSegment, mode, type;
|
||||
function onMouseDown(event) {
|
||||
if (currentSegment)
|
||||
currentSegment.selected = false;
|
||||
mode = type = currentSegment = null;
|
||||
|
||||
if (!path) {
|
||||
path = new Path();
|
||||
path.fillColor = {
|
||||
hue: 360 * Math.random(),
|
||||
saturation: 1,
|
||||
brightness: 1,
|
||||
alpha: 0.5
|
||||
};
|
||||
}
|
||||
|
||||
var result = findHandle(event.point);
|
||||
if (result) {
|
||||
currentSegment = result.segment;
|
||||
type = result.type;
|
||||
if (path.segments.length > 1 && result.type == 'point'
|
||||
&& result.segment.index == 0) {
|
||||
mode = 'close';
|
||||
path.closed = true;
|
||||
path.selected = false;
|
||||
path = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (mode != 'close') {
|
||||
mode = currentSegment ? 'move' : 'add';
|
||||
if (!currentSegment)
|
||||
currentSegment = path.add(event.point);
|
||||
currentSegment.selected = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
if (mode == 'move' && type == 'point') {
|
||||
currentSegment.point = event.point;
|
||||
} else if (mode != 'close') {
|
||||
var delta = event.delta.clone();
|
||||
if (type == 'handleOut' || mode == 'add')
|
||||
delta = -delta;
|
||||
currentSegment.handleIn += delta;
|
||||
currentSegment.handleOut -= delta;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
An emulation of a vector pen tool.
|
||||
Click and drag to add a points.<br/>
|
||||
Drag segment handles and points to manipulate them.
|
||||
Close the path to start a new one.
|
||||
</p>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Circles</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
function onMouseDrag(event) {
|
||||
// The radius is the distance between the position
|
||||
// where the user clicked and the current position
|
||||
// of the mouse.
|
||||
var path = new Path.Circle({
|
||||
center: event.downPoint,
|
||||
radius: (event.downPoint - event.point).length,
|
||||
fillColor: 'white',
|
||||
strokeColor: 'black'
|
||||
});
|
||||
|
||||
// Remove this path on the next drag event:
|
||||
path.removeOnDrag();
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Clouds</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
// Any newly created item will inherit the following styles:
|
||||
project.currentStyle = {
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 5,
|
||||
strokeJoin: 'round',
|
||||
strokeCap: 'round'
|
||||
};
|
||||
|
||||
// The user has to drag the mouse at least 30pt before the mouse drag
|
||||
// event is fired:
|
||||
tool.minDistance = 30;
|
||||
|
||||
var path;
|
||||
function onMouseDown(event) {
|
||||
path = new Path();
|
||||
path.add(event.point);
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
path.arcTo(event.point, true);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Dripping Brush</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 path;
|
||||
var minSize = 5;
|
||||
tool.maxDistance = 20;
|
||||
function onMouseDrag(event) {
|
||||
// If the user dragged more then minSize:
|
||||
if (event.delta.length > minSize) {
|
||||
// If there is no path, make one:
|
||||
if (!path) {
|
||||
path = new Path({
|
||||
fillColor: 'black'
|
||||
});
|
||||
path.add(event.lastPoint);
|
||||
}
|
||||
|
||||
var step = event.delta / 2;
|
||||
step.angle = step.angle + 90;
|
||||
|
||||
// The top point: the middle point + the step rotated by 90 degrees:
|
||||
// -----*
|
||||
// |
|
||||
// ------
|
||||
var top = event.middlePoint + step;
|
||||
|
||||
// The bottom point: the middle point - the step rotated by 90 degrees:
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint - step;
|
||||
|
||||
path.add(top);
|
||||
path.insert(0, bottom);
|
||||
path.smooth();
|
||||
} else {
|
||||
// If the user dragged too slowly:
|
||||
|
||||
// If there is currently a path, close it
|
||||
if (path) {
|
||||
path.add(event.point);
|
||||
path.closed = true;
|
||||
path.smooth();
|
||||
|
||||
// Set path to null (nothing) so the path check above
|
||||
// will force a new path next time the user drags fast enough:
|
||||
path = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
if (path) {
|
||||
path.add(event.point);
|
||||
path.closed = true;
|
||||
path.smooth();
|
||||
|
||||
// Set path to null (nothing) so the path check above
|
||||
// will force a new path next time the user drags fast enough:
|
||||
path = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fancy Brush</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// This script belongs to the following tutorial:
|
||||
//
|
||||
// http://scriptographer.org/tutorials/geometry/working-with-mouse-vectors/#adding-brush-stroke-ends
|
||||
|
||||
tool.fixedDistance = 80;
|
||||
|
||||
var path;
|
||||
var strokeEnds = 6;
|
||||
|
||||
function onMouseDown(event) {
|
||||
path = new Path();
|
||||
path.fillColor = event.count % 2 ? 'red' : 'black';
|
||||
}
|
||||
|
||||
var lastPoint;
|
||||
function onMouseDrag(event) {
|
||||
// If this is the first drag event,
|
||||
// add the strokes at the start:
|
||||
if (event.count == 0) {
|
||||
addStrokes(event.middlePoint, event.delta * -1);
|
||||
} else {
|
||||
var step = event.delta / 2;
|
||||
step.angle += 90;
|
||||
|
||||
// The top point: the middle point + the step rotated by 90 degrees:
|
||||
// -----*
|
||||
// |
|
||||
// ------
|
||||
var top = event.middlePoint + step;
|
||||
|
||||
// The bottom point: the middle point - the step rotated by 90 degrees:
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint - step;
|
||||
|
||||
path.add(top);
|
||||
path.insert(0, bottom);
|
||||
}
|
||||
path.smooth();
|
||||
|
||||
lastPoint = event.middlePoint;
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
var delta = event.point - lastPoint;
|
||||
delta.length = tool.maxDistance;
|
||||
addStrokes(event.point, delta);
|
||||
path.closed = true;
|
||||
path.smooth();
|
||||
}
|
||||
|
||||
function addStrokes(point, delta) {
|
||||
var step = delta.rotate(90);
|
||||
var strokePoints = strokeEnds * 2 + 1;
|
||||
point -= step / 2;
|
||||
step /= strokePoints - 1;
|
||||
for (var i = 0; i < strokePoints; i++) {
|
||||
var strokePoint = point + step * i;
|
||||
var offset = delta * (Math.random() * 0.3 + 0.1);
|
||||
if (i % 2) {
|
||||
offset *= -1;
|
||||
}
|
||||
strokePoint += offset;
|
||||
path.insert(0, strokePoint);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Grid</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Values
|
||||
|
||||
tool.fixedDistance = 10;
|
||||
|
||||
var values = { size: tool.fixedDistance };
|
||||
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
|
||||
var point, path;
|
||||
|
||||
function getPos(pt) {
|
||||
return (pt / values.size).round() * values.size;
|
||||
}
|
||||
|
||||
function onMouseDown(event) {
|
||||
point = getPos(event.point);
|
||||
path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.add(point);
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
var p = getPos(event.point);
|
||||
if (point != p) {
|
||||
path.add(p);
|
||||
point = p;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE 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>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Mulitple Tools</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
// Create two drawing tools.
|
||||
// tool1 will draw straight lines, tool2 will draw clouds.
|
||||
|
||||
// Both share the mouseDown event:
|
||||
var path;
|
||||
function onMouseDown(event) {
|
||||
path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.add(event.point);
|
||||
}
|
||||
|
||||
window.app = {
|
||||
tool1: new Tool({
|
||||
onMouseDown: onMouseDown,
|
||||
onMouseDrag: function(event) {
|
||||
path.add(event.point);
|
||||
}
|
||||
}),
|
||||
|
||||
tool2: new Tool({
|
||||
minDistance: 20,
|
||||
onMouseDown: onMouseDown,
|
||||
onMouseDrag: function(event) {
|
||||
// Use the arcTo command to draw cloudy lines
|
||||
path.arcTo(event.point);
|
||||
}
|
||||
})
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#" onclick="app.tool1.activate(); return false;">Lines</a>
|
||||
<a href="#" onclick="app.tool2.activate(); return false;">Clouds</a>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Square Rounded</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Values
|
||||
|
||||
var values = {
|
||||
radius: 10,
|
||||
tolerance: 5
|
||||
};
|
||||
|
||||
checkValues();
|
||||
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
|
||||
var handle;
|
||||
function checkValues() {
|
||||
var min = values.radius * 2;
|
||||
if (values.tolerance < min) values.tolerance = min;
|
||||
handle = values.radius * Numerical.KAPPA;
|
||||
}
|
||||
|
||||
var path;
|
||||
function onMouseDown(event) {
|
||||
path = new Path({
|
||||
segments: [event.point, event.point],
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 5,
|
||||
strokeCap: 'round'
|
||||
});
|
||||
prevPoint = path.firstSegment.point;
|
||||
curPoint = path.lastSegment.point;
|
||||
curHandleSeg = null;
|
||||
}
|
||||
|
||||
var curPoint, prevPoint, curHandleSeg;
|
||||
function onMouseDrag(event) {
|
||||
var point = event.point;
|
||||
var diff = (point - prevPoint).abs();
|
||||
if (diff.x < diff.y) {
|
||||
curPoint.x = prevPoint.x;
|
||||
curPoint.y = point.y;
|
||||
} else {
|
||||
curPoint.x = point.x;
|
||||
curPoint.y = prevPoint.y;
|
||||
}
|
||||
var normal = curPoint - prevPoint;
|
||||
normal.length = 1;
|
||||
if (curHandleSeg) {
|
||||
curHandleSeg.point = prevPoint + (normal * values.radius);
|
||||
curHandleSeg.handleIn = normal * -handle;
|
||||
}
|
||||
var minDiff = Math.min(diff.x, diff.y);
|
||||
if (minDiff > values.tolerance) {
|
||||
var point = curPoint - (normal * values.radius);
|
||||
var segment = new Segment(point, null, normal * handle);
|
||||
path.insert(path.segments.length - 1, segment);
|
||||
curHandleSeg = path.lastSegment;
|
||||
// clone as we want the unmodified one:
|
||||
prevPoint = curHandleSeg.point.clone();
|
||||
path.add(curHandleSeg);
|
||||
curPoint = path.lastSegment.point;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Stars</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
function onMouseDown(event) {
|
||||
var hue = Math.random() * 360;
|
||||
project.currentStyle.fillColor = {
|
||||
hue: hue,
|
||||
saturation: 1,
|
||||
brightness: 1
|
||||
};
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
var delta = event.point - event.downPoint;
|
||||
var radius = delta.length;
|
||||
var points = 5 + Math.round(radius / 50);
|
||||
var path = new Path.Star({
|
||||
center: event.downPoint,
|
||||
points: points,
|
||||
radius1: radius / 2,
|
||||
radius2: radius
|
||||
});
|
||||
path.rotate(delta.angle);
|
||||
// Remove the path automatically before the next mouse drag
|
||||
// event:
|
||||
path.removeOnDrag();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Vektor</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// Interface
|
||||
|
||||
var values = {
|
||||
fixLength: false,
|
||||
fixAngle: false,
|
||||
showCircle: false,
|
||||
showAngleLength: true,
|
||||
showCoordinates: false
|
||||
};
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// Vector
|
||||
|
||||
var vectorStart, vector, vectorPrevious;
|
||||
var vectorItem, items, dashedItems;
|
||||
|
||||
function processVector(event, drag) {
|
||||
vector = event.point - vectorStart;
|
||||
if (vectorPrevious) {
|
||||
if (values.fixLength && values.fixAngle) {
|
||||
vector = vectorPrevious;
|
||||
} else if (values.fixLength) {
|
||||
vector.length = vectorPrevious.length;
|
||||
} else if (values.fixAngle) {
|
||||
vector = vector.project(vectorPrevious);
|
||||
}
|
||||
}
|
||||
drawVector(drag);
|
||||
}
|
||||
|
||||
function drawVector(drag) {
|
||||
if (items) {
|
||||
for (var i = 0, l = items.length; i < l; i++) {
|
||||
items[i].remove();
|
||||
}
|
||||
}
|
||||
if (vectorItem)
|
||||
vectorItem.remove();
|
||||
items = [];
|
||||
var arrowVector = vector.normalize(10);
|
||||
var end = vectorStart + vector;
|
||||
vectorItem = new Group(
|
||||
new Path(vectorStart, end),
|
||||
new Path(
|
||||
end + arrowVector.rotate(135),
|
||||
end,
|
||||
end + arrowVector.rotate(-135)
|
||||
)
|
||||
);
|
||||
vectorItem.strokeWidth = 0.75;
|
||||
vectorItem.strokeColor = '#e4141b';
|
||||
// Display:
|
||||
dashedItems = [];
|
||||
// Draw Circle
|
||||
if (values.showCircle) {
|
||||
dashedItems.push(new Path.Circle(vectorStart, vector.length));
|
||||
}
|
||||
// Draw Labels
|
||||
if (values.showAngleLength) {
|
||||
drawAngle(vectorStart, vector, !drag);
|
||||
if (!drag)
|
||||
drawLength(vectorStart, end, vector.angle < 0 ? -1 : 1, true);
|
||||
}
|
||||
var quadrant = vector.quadrant;
|
||||
if (values.showCoordinates && !drag) {
|
||||
drawLength(vectorStart, vectorStart + [vector.x, 0],
|
||||
[1, 3].indexOf(quadrant) != -1 ? -1 : 1, true, vector.x, 'x: ');
|
||||
drawLength(vectorStart, vectorStart + [0, vector.y],
|
||||
[1, 3].indexOf(quadrant) != -1 ? 1 : -1, true, vector.y, 'y: ');
|
||||
}
|
||||
for (var i = 0, l = dashedItems.length; i < l; i++) {
|
||||
var item = dashedItems[i];
|
||||
item.strokeColor = 'black';
|
||||
item.dashArray = [1, 2];
|
||||
items.push(item);
|
||||
}
|
||||
// Update palette
|
||||
values.x = vector.x;
|
||||
values.y = vector.y;
|
||||
values.length = vector.length;
|
||||
values.angle = vector.angle;
|
||||
}
|
||||
|
||||
function drawAngle(center, vector, label) {
|
||||
var radius = 25, threshold = 10;
|
||||
if (vector.length < radius + threshold || Math.abs(vector.angle) < 15)
|
||||
return;
|
||||
var from = new Point(radius, 0);
|
||||
var through = from.rotate(vector.angle / 2);
|
||||
var to = from.rotate(vector.angle);
|
||||
var end = center + to;
|
||||
dashedItems.push(new Path.Line(center,
|
||||
center + new Point(radius + threshold, 0)));
|
||||
dashedItems.push(new Path.Arc(center + from, center + through, end));
|
||||
var arrowVector = to.normalize(7.5).rotate(vector.angle < 0 ? -90 : 90);
|
||||
dashedItems.push(new Path([
|
||||
end + arrowVector.rotate(135),
|
||||
end,
|
||||
end + arrowVector.rotate(-135)
|
||||
]));
|
||||
if (label) {
|
||||
// Angle Label
|
||||
var text = new PointText(center
|
||||
+ through.normalize(radius + 10) + new Point(0, 3));
|
||||
text.content = Math.floor(vector.angle * 100) / 100 + '\xb0';
|
||||
items.push(text);
|
||||
}
|
||||
}
|
||||
|
||||
function drawLength(from, to, sign, label, value, prefix) {
|
||||
var lengthSize = 5;
|
||||
if ((to - from).length < lengthSize * 4)
|
||||
return;
|
||||
var vector = to - from;
|
||||
var awayVector = vector.normalize(lengthSize).rotate(90 * sign);
|
||||
var upVector = vector.normalize(lengthSize).rotate(45 * sign);
|
||||
var downVector = upVector.rotate(-90 * sign);
|
||||
var lengthVector = vector.normalize(
|
||||
vector.length / 2 - lengthSize * Math.SQRT2);
|
||||
var line = new Path();
|
||||
line.add(from + awayVector);
|
||||
line.lineBy(upVector);
|
||||
line.lineBy(lengthVector);
|
||||
line.lineBy(upVector);
|
||||
var middle = line.lastSegment.point;
|
||||
line.lineBy(downVector);
|
||||
line.lineBy(lengthVector);
|
||||
line.lineBy(downVector);
|
||||
dashedItems.push(line);
|
||||
if (label) {
|
||||
// Length Label
|
||||
var textAngle = Math.abs(vector.angle) > 90
|
||||
? textAngle = 180 + vector.angle : vector.angle;
|
||||
// Label needs to move away by different amounts based on the
|
||||
// vector's quadrant:
|
||||
var away = (sign >= 0 ? [1, 4] : [2, 3]).indexOf(vector.quadrant) != -1
|
||||
? 8 : 0;
|
||||
var text = new PointText(middle + awayVector.normalize(away + lengthSize));
|
||||
text.rotate(textAngle);
|
||||
text.justification = 'center';
|
||||
value = value || vector.length;
|
||||
text.content = (prefix || '') + Math.floor(value * 1000) / 1000;
|
||||
items.push(text);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// Mouse Handling
|
||||
|
||||
var dashItem;
|
||||
|
||||
function onMouseDown(event) {
|
||||
var end = vectorStart + vector;
|
||||
var create = false;
|
||||
if (event.modifiers.shift && vectorItem) {
|
||||
vectorStart = end;
|
||||
create = true;
|
||||
} else if (vector && (event.modifiers.option
|
||||
|| end && end.getDistance(event.point) < 10)) {
|
||||
create = false;
|
||||
} else {
|
||||
vectorStart = event.point;
|
||||
}
|
||||
if (create) {
|
||||
dashItem = vectorItem;
|
||||
vectorItem = null;
|
||||
}
|
||||
processVector(event, true);
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
if (!event.modifiers.shift && values.fixLength && values.fixAngle)
|
||||
vectorStart = event.point;
|
||||
processVector(event, event.modifiers.shift);
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
processVector(event, false);
|
||||
if (dashItem) {
|
||||
dashItem.dashArray = [1, 2];
|
||||
dashItem = null;
|
||||
}
|
||||
vectorPrevious = vector;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Wave</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Values
|
||||
|
||||
tool.minDistance = 10;
|
||||
|
||||
var values = {
|
||||
curviness: 0.5,
|
||||
distance: tool.minDistance,
|
||||
offset: 10,
|
||||
mouseOffset: true
|
||||
};
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
|
||||
var path;
|
||||
function onMouseDown(event) {
|
||||
path = new Path({
|
||||
strokeColor: '#000000'
|
||||
});
|
||||
}
|
||||
|
||||
var mul = 1;
|
||||
function onMouseDrag(event) {
|
||||
var step = event.delta.rotate(90 * mul);
|
||||
|
||||
if (!values.mouseOffset)
|
||||
step.length = values.offset;
|
||||
|
||||
path.add({
|
||||
point: event.point + step,
|
||||
handleIn: -event.delta * values.curviness,
|
||||
handleOut: event.delta * values.curviness
|
||||
});
|
||||
mul *= -1;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Worm Farm</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Values
|
||||
|
||||
var values = {
|
||||
minDistance: 10,
|
||||
maxDistance: 30,
|
||||
varyThickness: true
|
||||
};
|
||||
|
||||
// All newly created items will inherit the following styles:
|
||||
project.currentStyle = {
|
||||
fillColor: 'white',
|
||||
strokeColor: 'black'
|
||||
};
|
||||
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
|
||||
tool.minDistance = values.minDistance;
|
||||
tool.maxDistance = values.maxDistance;
|
||||
|
||||
var worm;
|
||||
|
||||
// Every time the user clicks the mouse to drag we create a path
|
||||
// and when a user drags the mouse we add points to it
|
||||
function onMouseDown(event) {
|
||||
worm = new Path();
|
||||
worm.add(event.point, event.point);
|
||||
worm.closed = true;
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
// the vector in the direction that the mouse moved
|
||||
var step = event.delta;
|
||||
|
||||
// if the vary thickness checkbox is marked
|
||||
// divide the length of the step vector by two:
|
||||
if (values.varyThickness) {
|
||||
step.length = step.length / 2;
|
||||
} else {
|
||||
// otherwise set the length of the step vector to half of
|
||||
// minDistance
|
||||
step.length = values.minDistance / 2;
|
||||
}
|
||||
|
||||
// the top point: the middle point + the step rotated by -90
|
||||
// degrees
|
||||
// -----*
|
||||
// |
|
||||
// ------
|
||||
var top = event.middlePoint + step.rotate(-90);
|
||||
|
||||
// the bottom point: the middle point + the step rotated by 90
|
||||
// degrees
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint + step.rotate(90);
|
||||
|
||||
// add the top point to the end of the path
|
||||
worm.add(top);
|
||||
|
||||
// insert the bottom point after the first segment of the path
|
||||
worm.insert(1, bottom);
|
||||
|
||||
// make a new line path from top to bottom
|
||||
new Path(top, bottom);
|
||||
|
||||
// This is the point at the front of the worm:
|
||||
worm.firstSegment.point = event.point;
|
||||
|
||||
// smooth the segments of the path
|
||||
worm.smooth();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user