mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-03 19:45:44 -05:00
Update examples to PaperScript.
This commit is contained in:
Jonathan Puckey
parent
c00f85c9e5
commit
e1a6c4f3d0
20 changed files with 674 additions and 716 deletions
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,15 +33,13 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var vector = new Point(doc.size.height, 0);
|
||||
var point = new Point(doc.size).divide(2);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var vector = new Point(document.size.height, 0);
|
||||
var point = new Point(document.size) / 2;
|
||||
var gradient = new Gradient();
|
||||
gradient.type = 'radial';
|
||||
var gradientColor = new GradientColor(gradient, point, point.add(vector));
|
||||
var gradientColor = new GradientColor(gradient, point, point + vector);
|
||||
|
||||
var colors = ['red', 'orange', 'yellow', 'green', 'blue'];
|
||||
var stops = [];
|
||||
|
|
@ -50,7 +49,7 @@
|
|||
}
|
||||
|
||||
gradient.stops = stops;
|
||||
var path = new Path.Rectangle(new Rectangle([0, 0], doc.size));
|
||||
var path = new Path.Rectangle(new Rectangle([0, 0], document.size));
|
||||
path.fillColor = gradientColor;
|
||||
var mouseDown = false;
|
||||
var tool = new Tool({
|
||||
|
|
@ -79,9 +78,8 @@
|
|||
vector.length += (grow ? 1 : -1);
|
||||
vector.angle += 5;
|
||||
if (!mouseDown) {
|
||||
gradientColor.hilite = point.add(vector);
|
||||
doc.redraw();
|
||||
}
|
||||
gradientColor.hilite = point + vector;
|
||||
document.redraw();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,11 +33,9 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var mousePoint = new Point(doc.size.divide(2));
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var mousePoint = document.bounds.center;
|
||||
|
||||
var amount = 25;
|
||||
var colors = ['red', 'white', 'blue', 'white'];
|
||||
|
|
@ -58,19 +57,18 @@
|
|||
}
|
||||
});
|
||||
|
||||
var children = paper.document.activeLayer.children;
|
||||
var children = document.activeLayer.children;
|
||||
var count = 0;
|
||||
function draw() {
|
||||
count++;
|
||||
for (var i = 0, l = children.length; i < l; i++) {
|
||||
var item = children[i];
|
||||
var delta = mousePoint.subtract(item.position).divide(i + 1);
|
||||
var delta = (mousePoint - item.position) / (i + 1);
|
||||
item.rotate(Math.sin((count + i) / 10) * 7);
|
||||
if (delta.length > 0.1)
|
||||
item.translate(delta);
|
||||
}
|
||||
doc.redraw();
|
||||
}
|
||||
document.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,22 +33,21 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var layer = doc.activeLayer;
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var layer = document.activeLayer;
|
||||
|
||||
var values = {
|
||||
count: 34,
|
||||
points: 32
|
||||
}
|
||||
|
||||
var center = new Point(doc.size).divide(2)
|
||||
var center = new Point(document.size) / 2;
|
||||
for (var i = 0; i < values.count; i++) {
|
||||
var offset = new Point(20 + 10 * i, 0);
|
||||
var path = new Path();
|
||||
path.fillColor = i % 2 ? 'red' : 'black';
|
||||
console.log(path.fillColor);
|
||||
path.closed = true;
|
||||
|
||||
var l = offset.length;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
offset.angle += 360 / values.points;
|
||||
var vector = offset.clone()
|
||||
vector.length = l * (j % 2 ? 0.1 : -0.1);
|
||||
path.add(offset.add(vector));
|
||||
path.add(offset + vector);
|
||||
}
|
||||
path.smooth();
|
||||
var placedSymbol = new PlacedSymbol(path);
|
||||
|
|
@ -72,8 +72,7 @@
|
|||
var angle = (values.count - i) * Math.sin(count / 128) / 10;
|
||||
item.rotate(angle);
|
||||
}
|
||||
doc.redraw();
|
||||
}
|
||||
document.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,12 +33,8 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var balls = [];
|
||||
|
||||
var circlePath = new Path.Circle([0, 0], 10);
|
||||
|
|
@ -52,9 +49,9 @@
|
|||
var Ball = Base.extend({
|
||||
initialize: function(point, vector) {
|
||||
if (!vector || vector.isZero()) {
|
||||
this.vector = Point.random().multiply(5);
|
||||
this.vector = Point.random() * 5;
|
||||
} else {
|
||||
this.vector = vector.multiply(1.5);
|
||||
this.vector = vector * 1.5;
|
||||
}
|
||||
this.point = point;
|
||||
this.dampen = 0.4;
|
||||
|
|
@ -71,32 +68,32 @@
|
|||
var x = this.point.x;
|
||||
var y = this.point.y;
|
||||
var radius = this.radius;
|
||||
this.point.x = Math.min(Math.max(radius, x), doc.size.width - radius);
|
||||
this.point.y = Math.min(Math.max(radius, y), doc.size.height - radius);
|
||||
this.point.x = Math.min(Math.max(radius, x), document.size.width - radius);
|
||||
this.point.y = Math.min(Math.max(radius, y), document.size.height - radius);
|
||||
},
|
||||
|
||||
iterate: function() {
|
||||
this.vector.y += this.gravity;
|
||||
this.vector.x *= 0.99;
|
||||
var pre = this.point.add(this.vector);
|
||||
if (pre.x < this.radius || pre.x > doc.size.width - this.radius)
|
||||
var pre = this.point + this.vector;
|
||||
if (pre.x < this.radius || pre.x > document.size.width - this.radius)
|
||||
this.vector.x *= -this.dampen;
|
||||
if (pre.y < this.radius || pre.y > doc.size.height - this.radius) {
|
||||
if (pre.y < this.radius || pre.y > document.size.height - this.radius) {
|
||||
if (Math.abs(this.vector.x) < 3) {
|
||||
this.vector.x = Math.random() * 150 - 75;
|
||||
this.vector.y = Math.random() * 100 + 20;
|
||||
}
|
||||
this.vector.y *= this.bounce;
|
||||
}
|
||||
this.point = this.point.add(this.vector);
|
||||
this.point = this.point + this.vector;
|
||||
this.contrainPoint();
|
||||
this.item.position = this.point;
|
||||
}
|
||||
});
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
var position = Point.random().multiply(doc.size);
|
||||
var vector = Point.random().subtract(0.5, 0).multiply(50, 100);
|
||||
var position = Point.random() * document.size;
|
||||
var vector = (Point.random() - [0.5, 0]) * [50, 100];
|
||||
var ball = new Ball(position, vector);
|
||||
balls.push(ball);
|
||||
}
|
||||
|
|
@ -123,8 +120,7 @@
|
|||
balls[i].iterate();
|
||||
}
|
||||
boundPath.bounds = group.bounds;
|
||||
doc.redraw();
|
||||
}
|
||||
document.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,12 +33,9 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
|
||||
var point = new Point(1024, 768).divide(2);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var point = document.bounds.center;
|
||||
for (var i = 0; i < 30; i++) {
|
||||
var vector = new Point(10 + 20 * i, 0).rotate(i);
|
||||
var l = vector.length;
|
||||
|
|
@ -47,15 +45,14 @@
|
|||
for (var j = 0; j < 17; j++) {
|
||||
vector = vector.rotate(45 / 2);
|
||||
if (j == 0) {
|
||||
path.add(point.add(vector));
|
||||
path.add(point + vector);
|
||||
} else {
|
||||
path.arcTo(point.add(vector), true);
|
||||
path.arcTo(point + vector, true);
|
||||
}
|
||||
}
|
||||
doc.activeLayer.appendBottom(path);
|
||||
}
|
||||
doc.redraw();
|
||||
document.activeLayer.appendBottom(path);
|
||||
}
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,19 +33,14 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Document(canvas);
|
||||
var center = doc.size.divide(2);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var center = document.bounds.center;
|
||||
for (var i = 0; i < 70; i++) {
|
||||
var path = new Path.Circle(center, i * 5);
|
||||
path.strokeColor = 'black';
|
||||
}
|
||||
doc.redraw();
|
||||
}
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,11 +33,8 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var letterPath = new Path(
|
||||
new Segment(new Point(63.39306640625, 265.7138671875), null, new Point(10.86669921875, 6.96630859375)),
|
||||
new Segment(new Point(106.58203125, 277.97412109375), new Point(-16.71826171875, 0), new Point(24.79931640625, 0)),
|
||||
|
|
@ -55,8 +53,7 @@
|
|||
);
|
||||
letterPath.closed = true;
|
||||
letterPath.fillColor = 'black';
|
||||
doc.redraw();
|
||||
}
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,25 +33,24 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Document(canvas);
|
||||
setInterval(draw, 20);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
count++;
|
||||
doc.activeLayer.children = [];
|
||||
var point = new Point(1024, 768).divide(2);
|
||||
document.activeLayer.children = [];
|
||||
var point = new Point(document.size) / 2;
|
||||
var vector = new Point(100, 0);
|
||||
for (var i = 0; i < 180; i++) {
|
||||
var path = new Path.Line(point.add(vector.rotate(i * 2).normalize(30)), point.add(vector.rotate(i * 2).normalize(30 + Math.abs(Math.sin((i + count / 20)) * 300))));
|
||||
var center = point + vector.rotate(i * 2).normalize(30);
|
||||
var length = 30 + Math.abs(Math.sin((i + count / 20)) * 300);
|
||||
var end = point + vector.rotate(i * 2).normalize(length);
|
||||
var path = new Path.Line(center, end);
|
||||
path.strokeColor = i % 4 ? 'black' : 'red';
|
||||
}
|
||||
doc.redraw();
|
||||
document.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,16 +33,11 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Document(canvas);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path = new Path.Rectangle([50, 50], [100, 100]);
|
||||
path.strokeColor = 'black';
|
||||
doc.redraw();
|
||||
}
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,22 +33,18 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Document(canvas);
|
||||
setInterval(draw, 30);
|
||||
}
|
||||
function draw() {
|
||||
count++;
|
||||
doc.activeLayer.children = [];
|
||||
document.activeLayer.children = [];
|
||||
var rect = new Rectangle([150, 150], [300, 300]);
|
||||
var size = Math.abs(Math.sin(count / 40)) * 150 + 10;
|
||||
var path = new Path.RoundRectangle(rect, size);
|
||||
path.fillColor = 'black';
|
||||
doc.redraw();
|
||||
document.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,12 +33,9 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
|
||||
var point = new Point(1024, 768).divide(2);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var point = new Point(document.size) / 2;
|
||||
for (var i = 0; i < 30; i++) {
|
||||
var vector = new Point(1 + 10 * i, 0).rotate(i);
|
||||
var l = vector.length;
|
||||
|
|
@ -46,14 +44,13 @@
|
|||
path.closed = true;
|
||||
for (var j = 0; j < 32; j++) {
|
||||
vector = vector.rotate(45 / 4);
|
||||
var newPoint = point.add(vector).add(vector.rotate(-180).normalize(l * (j % 2 ? 0.1 : -0.1)));
|
||||
var newPoint = point + vector + vector.rotate(-180).normalize(l * (j % 2 ? 0.1 : -0.1));
|
||||
path.add(newPoint);
|
||||
}
|
||||
path.smooth();
|
||||
doc.activeLayer.appendBottom(path);
|
||||
}
|
||||
doc.redraw();
|
||||
document.activeLayer.appendBottom(path);
|
||||
}
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,10 +33,8 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path = new Path([100, 150], [150, 200], [200, 150]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
|
|
@ -68,9 +67,8 @@
|
|||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'miter';
|
||||
path.strokeCap = 'butt';
|
||||
|
||||
doc.redraw();
|
||||
}
|
||||
console.log(path.segments);
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,11 +33,9 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
doc.currentStyle = {
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
document.currentStyle = {
|
||||
strokeColor: '#4f7aff',
|
||||
strokeWidth: 1
|
||||
};
|
||||
|
|
@ -68,8 +67,7 @@
|
|||
lastInCircle.position = [-100, -100];
|
||||
|
||||
var curRect;
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
function onMouseDown(event) {
|
||||
if (event.count > 1) {
|
||||
var first = lastInLine.segments.first;
|
||||
first.point = inLine.segments.first.point;
|
||||
|
|
@ -86,32 +84,30 @@
|
|||
inLine.visible = true;
|
||||
outLine.visible = true;
|
||||
|
||||
outCircle.position = event.point.round().add(0.5, 0.5);
|
||||
inCircle.position = event.point.round().add(0.5, 0.5);
|
||||
outCircle.position = event.point.round() + [0.5, 0.5];
|
||||
inCircle.position = event.point.round() + [0.5, 0.5];
|
||||
|
||||
var rect = new PlacedSymbol(rectSymbol);
|
||||
rect.position = event.point.round().add(0.5, 0.5);
|
||||
rect.position = event.point.round() + [0.5, 0.5];
|
||||
|
||||
curRect = new Path.Rectangle([0.5, 0.5], [4, 4]);
|
||||
curRect.position = event.point.round();
|
||||
curRect.fillColor = '#4f7aff';
|
||||
curRect.strokeWidth = 0;
|
||||
},
|
||||
}
|
||||
|
||||
onMouseDrag: function(event) {
|
||||
var delta = event.point.subtract(event.downPoint);
|
||||
function onMouseDrag(event) {
|
||||
var delta = event.point - event.downPoint;
|
||||
currentSegment.handleOut = delta;
|
||||
currentSegment.handleIn = delta.multiply(-1);
|
||||
outLine.segments.last.point = currentSegment.handleIn.add(event.downPoint);
|
||||
inLine.segments.last.point = currentSegment.handleOut.add(event.downPoint);
|
||||
currentSegment.handleIn = -delta;
|
||||
outLine.segments.last.point = currentSegment.handleIn + event.downPoint;
|
||||
inLine.segments.last.point = currentSegment.handleOut + event.downPoint;
|
||||
outCircle.position = outLine.segments.last.point;
|
||||
inCircle.position = inLine.segments.last.point;
|
||||
},
|
||||
|
||||
onMouseUp: function(event) {
|
||||
curRect.remove();
|
||||
}
|
||||
});
|
||||
|
||||
function onMouseUp(event) {
|
||||
curRect.remove();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,25 +33,20 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path;
|
||||
var tool = new Tool({
|
||||
onMouseDrag: function(event) {
|
||||
function onMouseDrag(event) {
|
||||
if (path) path.remove();
|
||||
var distance = event.downPoint.subtract(event.point).length;
|
||||
var distance = (event.downPoint - event.point).length;
|
||||
path = new Path.Circle(event.downPoint, distance);
|
||||
path.strokeColor = 'black';
|
||||
path.fillColor = 'white';
|
||||
},
|
||||
};
|
||||
|
||||
onMouseUp: function(event) {
|
||||
function onMouseUp(event) {
|
||||
path = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,26 +33,21 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path;
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
function onMouseDown(event) {
|
||||
path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 5;
|
||||
path.strokeJoin = 'round';
|
||||
path.strokeCap = 'round';
|
||||
path.add(event.point);
|
||||
},
|
||||
onMouseDrag: function(event) {
|
||||
}
|
||||
function onMouseDrag(event) {
|
||||
path.arcTo(event.point, true);
|
||||
}
|
||||
});
|
||||
tool.minDistance = 30;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,16 +33,12 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path;
|
||||
var minSize = 5;
|
||||
|
||||
var tool = new Tool({
|
||||
onMouseDrag: function(event) {
|
||||
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:
|
||||
|
|
@ -51,20 +48,20 @@
|
|||
path.add(event.lastPoint);
|
||||
}
|
||||
|
||||
var step = event.delta.divide(2);
|
||||
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.add(step);
|
||||
var top = event.middlePoint + step;
|
||||
|
||||
// The bottom point: the middle point - the step rotated by 90 degrees:
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint.subtract(step);
|
||||
var bottom = event.middlePoint - step;
|
||||
|
||||
path.add(top);
|
||||
path.insert(0, bottom);
|
||||
|
|
@ -83,9 +80,9 @@
|
|||
path = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
onMouseUp: function(event) {
|
||||
function onMouseUp(event) {
|
||||
if (path) {
|
||||
path.add(event.point);
|
||||
path.closed = true;
|
||||
|
|
@ -96,9 +93,6 @@
|
|||
path = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
tool.maxDistance = 20;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,45 +33,44 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.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;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
|
||||
var lastPoint;
|
||||
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
function onMouseDown(event) {
|
||||
path = new Path();
|
||||
path.fillColor = event.count % 2 ? 'red' : 'black';
|
||||
},
|
||||
}
|
||||
|
||||
onMouseDrag: function(event) {
|
||||
var lastPoint;
|
||||
function onMouseDrag(event) {
|
||||
// If this is the first drag event,
|
||||
// add the strokes at the start:
|
||||
if (event.count == 1) {
|
||||
addStrokes(event.middlePoint, event.delta.multiply(-1));
|
||||
addStrokes(event.middlePoint, event.delta * -1);
|
||||
} else {
|
||||
var step = event.delta.divide(2);
|
||||
step.angle = step.angle + 90;
|
||||
var step = event.delta / 2;
|
||||
step.angle += 90;
|
||||
|
||||
// The top point: the middle point + the step rotated by 90 degrees:
|
||||
// -----*
|
||||
// |
|
||||
// ------
|
||||
var top = event.middlePoint.add(step);
|
||||
var top = event.middlePoint + step;
|
||||
|
||||
// The bottom point: the middle point - the step rotated by 90 degrees:
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint.subtract(step);
|
||||
var bottom = event.middlePoint - step;
|
||||
|
||||
path.add(top);
|
||||
path.insert(0, bottom);
|
||||
|
|
@ -78,34 +78,31 @@
|
|||
path.smooth();
|
||||
|
||||
lastPoint = event.middlePoint;
|
||||
},
|
||||
}
|
||||
|
||||
onMouseUp: function(event) {
|
||||
var delta = event.point.subtract(lastPoint);
|
||||
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 = point.subtract(step.divide(2));
|
||||
step = step.divide(strokePoints - 1);
|
||||
point -= step / 2;
|
||||
step /= strokePoints - 1;
|
||||
for(var i = 0; i < strokePoints; i++) {
|
||||
var strokePoint = point.add(step.multiply(i));
|
||||
var offset = delta.multiply(Math.random() * 0.3 + 0.1);
|
||||
var strokePoint = point + step * i;
|
||||
var offset = delta * (Math.random() * 0.3 + 0.1);
|
||||
if (i % 2) {
|
||||
offset = offset.multiply(-1);
|
||||
offset *= -1;
|
||||
}
|
||||
strokePoint = strokePoint.add(offset);
|
||||
strokePoint += offset;
|
||||
path.insert(0, strokePoint);
|
||||
}
|
||||
}
|
||||
tool.fixedDistance = 80;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,36 +33,38 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Values
|
||||
|
||||
var values = { size: 10 };
|
||||
tool.fixedDistance = 10;
|
||||
|
||||
var values = { size: tool.fixedDistance };
|
||||
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
|
||||
var point, path;
|
||||
|
||||
function getPos(pt) {
|
||||
return (pt.divide(values.size)).round().multiply(values.size);
|
||||
return (pt / values.size).round() * values.size;
|
||||
}
|
||||
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var point, path;
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
function onMouseDown(event) {
|
||||
point = getPos(event.point);
|
||||
path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.add(point);
|
||||
},
|
||||
onMouseDrag: function(event) {
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
var p = getPos(event.point);
|
||||
if (!point.equals(p)) {
|
||||
if (point != p) {
|
||||
path.add(p);
|
||||
point = p;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,38 +33,41 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Values
|
||||
|
||||
tool.minDistance = 10;
|
||||
|
||||
var values = {
|
||||
curviness: 0.5,
|
||||
distance: 10,
|
||||
distance: tool.minDistance,
|
||||
offset: 10,
|
||||
mouseOffset: true
|
||||
};
|
||||
|
||||
var path;
|
||||
var mul = 1;
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
},
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
|
||||
onMouseDrag: function(event) {
|
||||
var path;
|
||||
function onMouseDown(event) {
|
||||
path = new Path();
|
||||
}
|
||||
|
||||
var mul = 1;
|
||||
function onMouseDrag(event) {
|
||||
var step = event.delta.rotate(90 * mul);
|
||||
|
||||
if (!values.mouseOffset)
|
||||
step.length = values.offset;
|
||||
var segment = new Segment(event.point.add(step));
|
||||
segment.handleIn = event.delta.multiply(-values.curviness);
|
||||
segment.handleOut = event.delta.multiply(values.curviness);
|
||||
|
||||
var segment = new Segment(event.point + step);
|
||||
segment.handleIn = -event.delta * values.curviness;
|
||||
segment.handleOut = event.delta * values.curviness;
|
||||
path.add(segment);
|
||||
mul *= -1;
|
||||
}
|
||||
});
|
||||
tool.fixedDistance = 10;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,30 +33,33 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Values
|
||||
|
||||
var values = {
|
||||
minDistance: 30,
|
||||
minDistance: 10,
|
||||
varyThickness: true
|
||||
};
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
|
||||
tool.minDistance = values.minDistance;
|
||||
|
||||
var worm;
|
||||
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
// 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.fillColor = '#ffffff';
|
||||
worm.strokeColor = '#000000';
|
||||
worm.add(event.point);
|
||||
},
|
||||
}
|
||||
|
||||
onMouseDrag: function(event) {
|
||||
function onMouseDrag(event) {
|
||||
// the vector in the direction that the mouse moved
|
||||
var step = event.delta;
|
||||
|
||||
|
|
@ -64,21 +68,24 @@
|
|||
if (values.varyThickness) {
|
||||
step.length = step.length / 2;
|
||||
} else {
|
||||
// otherwise set the length of the step vector to half of minDistance
|
||||
// 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
|
||||
// the top point: the middle point + the step rotated by -90
|
||||
// degrees
|
||||
// -----*
|
||||
// |
|
||||
// ------
|
||||
var top = event.middlePoint.add(step.rotate(-90));
|
||||
var top = event.middlePoint + step.rotate(-90);
|
||||
|
||||
// the bottom point: the middle point + the step rotated by 90 degrees
|
||||
// the bottom point: the middle point + the step rotated by 90
|
||||
// degrees
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint.add(step.rotate(90));
|
||||
var bottom = event.middlePoint + step.rotate(90);
|
||||
|
||||
// add the top point to the end of the path
|
||||
worm.add(top);
|
||||
|
|
@ -92,17 +99,13 @@
|
|||
|
||||
// smooth the segments of the path
|
||||
worm.smooth();
|
||||
},
|
||||
}
|
||||
|
||||
onMouseUp: function(event) {
|
||||
function onMouseUp(event) {
|
||||
worm.closed = true;
|
||||
worm.add(event.point);
|
||||
worm.smooth();
|
||||
}
|
||||
});
|
||||
tool.fixedDistance = 3;
|
||||
tool.minDistance = values.minDistance;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue