paper 0.12.18 → 0.12.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +49 -0
- package/README.md +5 -14
- package/dist/docs/assets/js/paper.js +94 -54
- package/dist/docs/classes/Color.html +2 -2
- package/dist/docs/classes/CompoundPath.html +2 -2
- package/dist/docs/classes/Curve.html +2 -2
- package/dist/docs/classes/CurveLocation.html +2 -2
- package/dist/docs/classes/Event.html +2 -2
- package/dist/docs/classes/Gradient.html +2 -2
- package/dist/docs/classes/GradientStop.html +2 -2
- package/dist/docs/classes/Group.html +2 -2
- package/dist/docs/classes/HitResult.html +2 -2
- package/dist/docs/classes/Item.html +2 -2
- package/dist/docs/classes/Key.html +2 -2
- package/dist/docs/classes/KeyEvent.html +2 -2
- package/dist/docs/classes/Layer.html +2 -2
- package/dist/docs/classes/Matrix.html +2 -2
- package/dist/docs/classes/MouseEvent.html +2 -2
- package/dist/docs/classes/PaperScope.html +2 -2
- package/dist/docs/classes/PaperScript.html +2 -2
- package/dist/docs/classes/Path.html +2 -2
- package/dist/docs/classes/PathItem.html +2 -2
- package/dist/docs/classes/Point.html +2 -2
- package/dist/docs/classes/PointText.html +2 -2
- package/dist/docs/classes/Project.html +2 -2
- package/dist/docs/classes/Raster.html +2 -2
- package/dist/docs/classes/Rectangle.html +2 -2
- package/dist/docs/classes/Segment.html +2 -2
- package/dist/docs/classes/Shape.html +2 -2
- package/dist/docs/classes/Size.html +2 -2
- package/dist/docs/classes/Style.html +2 -2
- package/dist/docs/classes/SymbolDefinition.html +2 -2
- package/dist/docs/classes/SymbolItem.html +2 -2
- package/dist/docs/classes/TextItem.html +2 -2
- package/dist/docs/classes/Tool.html +2 -2
- package/dist/docs/classes/ToolEvent.html +2 -2
- package/dist/docs/classes/Tween.html +2 -2
- package/dist/docs/classes/View.html +2 -2
- package/dist/docs/classes/global.html +2 -2
- package/dist/docs/classes/index.html +2 -2
- package/dist/docs/index.html +1 -1
- package/dist/node/canvas.js +9 -7
- package/dist/node/self.js +9 -1
- package/dist/paper-core.js +93 -53
- package/dist/paper-core.min.js +3 -3
- package/dist/paper-full.js +94 -54
- package/dist/paper-full.min.js +3 -3
- package/dist/paper.d.ts +2 -2
- package/package.json +11 -7
- package/dist/paperjs/LICENSE.txt +0 -23
- package/dist/paperjs/dist/node/canvas.js +0 -66
- package/dist/paperjs/dist/node/extend.js +0 -156
- package/dist/paperjs/dist/node/self.js +0 -58
- package/dist/paperjs/dist/node/xml.js +0 -40
- package/dist/paperjs/dist/paper-core.d.ts +0 -1
- package/dist/paperjs/dist/paper-core.js +0 -15703
- package/dist/paperjs/dist/paper-core.min.js +0 -32
- package/dist/paperjs/dist/paper-full.js +0 -17472
- package/dist/paperjs/dist/paper-full.min.js +0 -32
- package/dist/paperjs/dist/paper.d.ts +0 -7394
- package/dist/paperjs/docs/assets/css/docs.css +0 -414
- package/dist/paperjs/docs/assets/js/codemirror.js +0 -4
- package/dist/paperjs/docs/assets/js/docs.js +0 -493
- package/dist/paperjs/docs/assets/js/jquery.js +0 -6
- package/dist/paperjs/docs/assets/js/paper.js +0 -17472
- package/dist/paperjs/docs/classes/Color.html +0 -2188
- package/dist/paperjs/docs/classes/CompoundPath.html +0 -8877
- package/dist/paperjs/docs/classes/Curve.html +0 -2323
- package/dist/paperjs/docs/classes/CurveLocation.html +0 -672
- package/dist/paperjs/docs/classes/Event.html +0 -176
- package/dist/paperjs/docs/classes/Gradient.html +0 -240
- package/dist/paperjs/docs/classes/GradientStop.html +0 -273
- package/dist/paperjs/docs/classes/Group.html +0 -6864
- package/dist/paperjs/docs/classes/HitResult.html +0 -239
- package/dist/paperjs/docs/classes/Item.html +0 -6628
- package/dist/paperjs/docs/classes/Key.html +0 -139
- package/dist/paperjs/docs/classes/KeyEvent.html +0 -308
- package/dist/paperjs/docs/classes/Layer.html +0 -6850
- package/dist/paperjs/docs/classes/Matrix.html +0 -1744
- package/dist/paperjs/docs/classes/MouseEvent.html +0 -355
- package/dist/paperjs/docs/classes/PaperScope.html +0 -459
- package/dist/paperjs/docs/classes/PaperScript.html +0 -198
- package/dist/paperjs/docs/classes/Path.html +0 -11775
- package/dist/paperjs/docs/classes/PathItem.html +0 -8639
- package/dist/paperjs/docs/classes/Point.html +0 -2699
- package/dist/paperjs/docs/classes/PointText.html +0 -7029
- package/dist/paperjs/docs/classes/Project.html +0 -1305
- package/dist/paperjs/docs/classes/Raster.html +0 -7843
- package/dist/paperjs/docs/classes/Rectangle.html +0 -1654
- package/dist/paperjs/docs/classes/Segment.html +0 -939
- package/dist/paperjs/docs/classes/Shape.html +0 -7363
- package/dist/paperjs/docs/classes/Size.html +0 -1825
- package/dist/paperjs/docs/classes/Style.html +0 -919
- package/dist/paperjs/docs/classes/SymbolDefinition.html +0 -311
- package/dist/paperjs/docs/classes/SymbolItem.html +0 -6755
- package/dist/paperjs/docs/classes/TextItem.html +0 -6869
- package/dist/paperjs/docs/classes/Tool.html +0 -761
- package/dist/paperjs/docs/classes/ToolEvent.html +0 -446
- package/dist/paperjs/docs/classes/Tween.html +0 -374
- package/dist/paperjs/docs/classes/View.html +0 -1772
- package/dist/paperjs/docs/classes/global.html +0 -425
- package/dist/paperjs/docs/classes/index.html +0 -88
- package/dist/paperjs/docs/index.html +0 -11
- package/dist/paperjs/examples/Animated/AnimatedStar.html +0 -53
- package/dist/paperjs/examples/Animated/BooleanOperations.html +0 -115
- package/dist/paperjs/examples/Animated/CandyCrash.html +0 -151
- package/dist/paperjs/examples/Animated/Extruded.html +0 -50
- package/dist/paperjs/examples/Animated/Lines.html +0 -53
- package/dist/paperjs/examples/Animated/Smoothing.html +0 -70
- package/dist/paperjs/examples/Animated/Space.html +0 -86
- package/dist/paperjs/examples/Animated/SpaceUsingShapes.html +0 -79
- package/dist/paperjs/examples/Games/Paperoids.html +0 -569
- package/dist/paperjs/examples/JSON/Circle Testing.html +0 -34
- package/dist/paperjs/examples/JSON/Compound Path.html +0 -25
- package/dist/paperjs/examples/JSON/Empty Path Testing.html +0 -31
- package/dist/paperjs/examples/JSON/Gradients.html +0 -34
- package/dist/paperjs/examples/JSON/Group Transform.html +0 -28
- package/dist/paperjs/examples/JSON/Line Testing.html +0 -44
- package/dist/paperjs/examples/JSON/Random Path Testing.html +0 -42
- package/dist/paperjs/examples/JSON/Raster.html +0 -29
- package/dist/paperjs/examples/JSON/Rect and Attribute Testing.html +0 -56
- package/dist/paperjs/examples/JSON/Rotated Primitives.html +0 -55
- package/dist/paperjs/examples/JSON/Selection.html +0 -43
- package/dist/paperjs/examples/JSON/Shapes.html +0 -54
- package/dist/paperjs/examples/JSON/Symbols.html +0 -30
- package/dist/paperjs/examples/JSON/Text Testing.html +0 -38
- package/dist/paperjs/examples/JSON/Tiger.html +0 -19
- package/dist/paperjs/examples/JSON/Transform Test 1.html +0 -32
- package/dist/paperjs/examples/JSON/Transform Test 2.html +0 -30
- package/dist/paperjs/examples/Node.js/AnimatedStar.js +0 -52
- package/dist/paperjs/examples/Node.js/BooleanOperations.js +0 -36
- package/dist/paperjs/examples/Node.js/JSONtoPDF.js +0 -20
- package/dist/paperjs/examples/Node.js/Raster.js +0 -32
- package/dist/paperjs/examples/Node.js/RasterRemote.js +0 -33
- package/dist/paperjs/examples/Node.js/SvgExport.js +0 -52
- package/dist/paperjs/examples/Node.js/SvgImport.js +0 -23
- package/dist/paperjs/examples/Node.js/Tadpoles.js +0 -16
- package/dist/paperjs/examples/Node.js/Tadpoles.pjs +0 -278
- package/dist/paperjs/examples/Node.js/in.json +0 -1
- package/dist/paperjs/examples/Node.js/in.svg +0 -16
- package/dist/paperjs/examples/Paperjs.org/BooleanOperattions.html +0 -115
- package/dist/paperjs/examples/Paperjs.org/BouncingBalls.html +0 -103
- package/dist/paperjs/examples/Paperjs.org/Chain.html +0 -54
- package/dist/paperjs/examples/Paperjs.org/DivisionRaster.html +0 -72
- package/dist/paperjs/examples/Paperjs.org/FutureSplash.html +0 -122
- package/dist/paperjs/examples/Paperjs.org/HitTesting.html +0 -103
- package/dist/paperjs/examples/Paperjs.org/InteractiveTiger.html +0 -777
- package/dist/paperjs/examples/Paperjs.org/MetaBalls.html +0 -132
- package/dist/paperjs/examples/Paperjs.org/NyanRainbow.html +0 -202
- package/dist/paperjs/examples/Paperjs.org/PathIntersections.html +0 -76
- package/dist/paperjs/examples/Paperjs.org/Qbertify.html +0 -146
- package/dist/paperjs/examples/Paperjs.org/RadialRainbows.html +0 -80
- package/dist/paperjs/examples/Paperjs.org/RoundedRectangles.html +0 -41
- package/dist/paperjs/examples/Paperjs.org/SatieLikedToDraw.html +0 -140
- package/dist/paperjs/examples/Paperjs.org/Simplify.html +0 -63
- package/dist/paperjs/examples/Paperjs.org/SpiralRaster.html +0 -120
- package/dist/paperjs/examples/Paperjs.org/Tadpoles.html +0 -283
- package/dist/paperjs/examples/Paperjs.org/Voronoi.html +0 -134
- package/dist/paperjs/examples/Rasters/PhyllotaxisRaster.html +0 -96
- package/dist/paperjs/examples/Rasters/Raster.html +0 -34
- package/dist/paperjs/examples/Rasters/RotationRaster.html +0 -44
- package/dist/paperjs/examples/Rasters/Smoothing.html +0 -36
- package/dist/paperjs/examples/SVG Export/Circle Testing.html +0 -32
- package/dist/paperjs/examples/SVG Export/Clipping.html +0 -17
- package/dist/paperjs/examples/SVG Export/Compound Path.html +0 -22
- package/dist/paperjs/examples/SVG Export/Empty Path Testing.html +0 -28
- package/dist/paperjs/examples/SVG Export/Gradients.html +0 -52
- package/dist/paperjs/examples/SVG Export/Group Transform.html +0 -25
- package/dist/paperjs/examples/SVG Export/Line Testing.html +0 -41
- package/dist/paperjs/examples/SVG Export/Random Path Testing.html +0 -39
- package/dist/paperjs/examples/SVG Export/Raster.html +0 -21
- package/dist/paperjs/examples/SVG Export/Rect and Attribute Testing.html +0 -53
- package/dist/paperjs/examples/SVG Export/Rotated Primitives.html +0 -80
- package/dist/paperjs/examples/SVG Export/Shapes.html +0 -58
- package/dist/paperjs/examples/SVG Export/Symbols.html +0 -27
- package/dist/paperjs/examples/SVG Export/Text Testing.html +0 -45
- package/dist/paperjs/examples/SVG Export/Tiger.html +0 -23
- package/dist/paperjs/examples/SVG Export/Transform Test 1.html +0 -29
- package/dist/paperjs/examples/SVG Export/Transform Test 2.html +0 -27
- package/dist/paperjs/examples/SVG Import/Arcs.html +0 -78
- package/dist/paperjs/examples/SVG Import/Butterfly.html +0 -223
- package/dist/paperjs/examples/SVG Import/Circle and Ellipse Testing.html +0 -26
- package/dist/paperjs/examples/SVG Import/Clipping.html +0 -100
- package/dist/paperjs/examples/SVG Import/From File.html +0 -30
- package/dist/paperjs/examples/SVG Import/Gradient.html +0 -138
- package/dist/paperjs/examples/SVG Import/Gradients.html +0 -30
- package/dist/paperjs/examples/SVG Import/Inkscape Pivot.html +0 -52
- package/dist/paperjs/examples/SVG Import/Inkscape.html +0 -88
- package/dist/paperjs/examples/SVG Import/Line Testing.html +0 -24
- package/dist/paperjs/examples/SVG Import/MoreGradients.html +0 -107
- package/dist/paperjs/examples/SVG Import/Multiple Paths Test 1.html +0 -42
- package/dist/paperjs/examples/SVG Import/Multiple Paths Test 2.html +0 -33
- package/dist/paperjs/examples/SVG Import/Nested Groups Test.html +0 -78
- package/dist/paperjs/examples/SVG Import/Polybezier.html +0 -43
- package/dist/paperjs/examples/SVG Import/Rect Testing.html +0 -25
- package/dist/paperjs/examples/SVG Import/Symbols.html +0 -24
- package/dist/paperjs/examples/SVG Import/Testing.html +0 -40
- package/dist/paperjs/examples/SVG Import/Text Testing.html +0 -19
- package/dist/paperjs/examples/SVG Import/Tiger.html +0 -742
- package/dist/paperjs/examples/SVG Import/Transform Testing.html +0 -22
- package/dist/paperjs/examples/SVG Import/Viewbox.html +0 -38
- package/dist/paperjs/examples/Scripts/Arcs.html +0 -39
- package/dist/paperjs/examples/Scripts/BlendModes.html +0 -77
- package/dist/paperjs/examples/Scripts/BooleanOperations.html +0 -937
- package/dist/paperjs/examples/Scripts/CompoundPath.html +0 -19
- package/dist/paperjs/examples/Scripts/CurveTimeParameterization.html +0 -61
- package/dist/paperjs/examples/Scripts/HslColor.html +0 -53
- package/dist/paperjs/examples/Scripts/PathStructure.html +0 -82
- package/dist/paperjs/examples/Scripts/PathTangents.html +0 -73
- package/dist/paperjs/examples/Scripts/Resize.html +0 -42
- package/dist/paperjs/examples/Scripts/RoundRectangle.html +0 -28
- package/dist/paperjs/examples/Scripts/Shapes.html +0 -54
- package/dist/paperjs/examples/Scripts/StrokeBounds.html +0 -101
- package/dist/paperjs/examples/Scripts/StrokeScaling.html +0 -65
- package/dist/paperjs/examples/Tools/BezierTool.html +0 -90
- package/dist/paperjs/examples/Tools/Circles.html +0 -28
- package/dist/paperjs/examples/Tools/Clouds.html +0 -35
- package/dist/paperjs/examples/Tools/DrippingBrush.html +0 -73
- package/dist/paperjs/examples/Tools/FancyBrush.html +0 -82
- package/dist/paperjs/examples/Tools/Grid.html +0 -44
- package/dist/paperjs/examples/Tools/MultiLines.html +0 -44
- package/dist/paperjs/examples/Tools/MultipleTools.html +0 -44
- package/dist/paperjs/examples/Tools/PathEditing.html +0 -95
- package/dist/paperjs/examples/Tools/SquareRounded.html +0 -76
- package/dist/paperjs/examples/Tools/Stars.html +0 -38
- package/dist/paperjs/examples/Tools/Vektor.html +0 -200
- package/dist/paperjs/examples/Tools/Wave.html +0 -50
- package/dist/paperjs/examples/Tools/WormFarm.html +0 -88
- package/dist/paperjs/examples/Worker/Main.html +0 -53
- package/dist/paperjs/examples/Worker/Worker.js +0 -14
- package/dist/paperjs/examples/css/style.css +0 -12
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Path Intersections</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/style.css">
|
|
7
|
-
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
|
8
|
-
<script type="text/paperscript" canvas="canvas">
|
|
9
|
-
var text = new PointText({
|
|
10
|
-
position: view.center + [0, 200],
|
|
11
|
-
fillColor: 'black',
|
|
12
|
-
justification: 'center',
|
|
13
|
-
fontSize: 20
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
var originals = new Group({ insert: false }); // Don't insert in DOM.
|
|
17
|
-
|
|
18
|
-
var square = new Path.Rectangle({
|
|
19
|
-
position: view.center,
|
|
20
|
-
size: 300,
|
|
21
|
-
parent: originals,
|
|
22
|
-
fillColor: 'white'
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
// Make a ring using subtraction of two circles:
|
|
26
|
-
var inner = new Path.Circle({
|
|
27
|
-
center: view.center,
|
|
28
|
-
radius: 100,
|
|
29
|
-
parent: originals,
|
|
30
|
-
fillColor: 'white'
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
var outer = new Path.Circle({
|
|
34
|
-
center: view.center,
|
|
35
|
-
radius: 140,
|
|
36
|
-
parent: originals,
|
|
37
|
-
fillColor: 'white'
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
var ring = outer.subtract(inner);
|
|
41
|
-
|
|
42
|
-
var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
|
|
43
|
-
var colors = ['red', 'green', 'blue', 'black'];
|
|
44
|
-
var curIndex = -1;
|
|
45
|
-
var operation, result, activeItem;
|
|
46
|
-
|
|
47
|
-
// Change the mode every 3 seconds:
|
|
48
|
-
setInterval(setMode, 3000);
|
|
49
|
-
|
|
50
|
-
// Set the initial mode:
|
|
51
|
-
setMode();
|
|
52
|
-
|
|
53
|
-
function setMode() {
|
|
54
|
-
curIndex++;
|
|
55
|
-
if (curIndex == operations.length * 2)
|
|
56
|
-
curIndex = 0;
|
|
57
|
-
operation = operations[curIndex % operations.length];
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
function onMouseDown(event) {
|
|
61
|
-
var hitResult = originals.hitTest(event.point);
|
|
62
|
-
activeItem = hitResult && hitResult.item;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function onMouseDrag(event) {
|
|
66
|
-
if (activeItem)
|
|
67
|
-
activeItem.position = event.point;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function onMouseUp() {
|
|
71
|
-
activeItem = null;
|
|
72
|
-
square.position = view.center;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
function onFrame(event) {
|
|
76
|
-
if (activeItem != ring) {
|
|
77
|
-
// Move the ring around:
|
|
78
|
-
var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
|
|
79
|
-
ring.position = view.center + offset;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
// Remove the result of the last path operation:
|
|
83
|
-
if (result)
|
|
84
|
-
result.remove();
|
|
85
|
-
|
|
86
|
-
// Perform the path operation on the ring:
|
|
87
|
-
if (curIndex < operations.length) {
|
|
88
|
-
result = square[operation](ring);
|
|
89
|
-
text.content = 'square.' + operation + '(ring)';
|
|
90
|
-
} else {
|
|
91
|
-
result = ring[operation](square);
|
|
92
|
-
text.content = 'ring.' + operation + '(square)';
|
|
93
|
-
}
|
|
94
|
-
result.selected = true;
|
|
95
|
-
result.fillColor = colors[curIndex % colors.length];
|
|
96
|
-
result.moveBelow(text);
|
|
97
|
-
|
|
98
|
-
// If the result is a group, color each of its children differently:
|
|
99
|
-
if (result instanceof Group) {
|
|
100
|
-
for (var i = 0; i < result.children.length; i++) {
|
|
101
|
-
result.children[i].fillColor = colors[i];
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
};
|
|
105
|
-
|
|
106
|
-
function onResize() {
|
|
107
|
-
text.position = view.center + [0, 200];
|
|
108
|
-
square.position = view.center;
|
|
109
|
-
}
|
|
110
|
-
</script>
|
|
111
|
-
</head>
|
|
112
|
-
<body>
|
|
113
|
-
<canvas id="canvas" resize></canvas>
|
|
114
|
-
</body>
|
|
115
|
-
</html>
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Bouncing Balls</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/style.css">
|
|
7
|
-
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
|
8
|
-
<script type="text/paperscript" canvas="canvas">
|
|
9
|
-
var Ball = function(point, vector) {
|
|
10
|
-
if (!vector || vector.isZero()) {
|
|
11
|
-
this.vector = Point.random() * 5;
|
|
12
|
-
} else {
|
|
13
|
-
this.vector = vector * 2;
|
|
14
|
-
}
|
|
15
|
-
this.point = point;
|
|
16
|
-
this.dampen = 0.4;
|
|
17
|
-
this.gravity = 3;
|
|
18
|
-
this.bounce = -0.6;
|
|
19
|
-
|
|
20
|
-
var color = {
|
|
21
|
-
hue: Math.random() * 360,
|
|
22
|
-
saturation: 1,
|
|
23
|
-
brightness: 1
|
|
24
|
-
};
|
|
25
|
-
var gradient = new Gradient([color, 'black'], true);
|
|
26
|
-
|
|
27
|
-
var radius = this.radius = 50 * Math.random() + 30;
|
|
28
|
-
// Wrap CompoundPath in a Group, since CompoundPaths directly
|
|
29
|
-
// applies the transformations to the content, just like Path.
|
|
30
|
-
var ball = new CompoundPath({
|
|
31
|
-
children: [
|
|
32
|
-
new Path.Circle({
|
|
33
|
-
radius: radius
|
|
34
|
-
}),
|
|
35
|
-
new Path.Circle({
|
|
36
|
-
center: radius / 8,
|
|
37
|
-
radius: radius / 3
|
|
38
|
-
})
|
|
39
|
-
],
|
|
40
|
-
fillColor: new Color(gradient, 0, radius, radius / 8),
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
this.item = new Group({
|
|
44
|
-
children: [ball],
|
|
45
|
-
applyMatrix: false,
|
|
46
|
-
position: this.point
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
Ball.prototype.iterate = function() {
|
|
51
|
-
var size = view.size;
|
|
52
|
-
this.vector.y += this.gravity;
|
|
53
|
-
this.vector.x *= 0.99;
|
|
54
|
-
var pre = this.point + this.vector;
|
|
55
|
-
if (pre.x < this.radius || pre.x > size.width - this.radius)
|
|
56
|
-
this.vector.x *= -this.dampen;
|
|
57
|
-
if (pre.y < this.radius || pre.y > size.height - this.radius) {
|
|
58
|
-
if (Math.abs(this.vector.x) < 3)
|
|
59
|
-
this.vector = Point.random() * [150, 100] + [-75, 20];
|
|
60
|
-
this.vector.y *= this.bounce;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
var max = Point.max(this.radius, this.point + this.vector);
|
|
64
|
-
this.item.position = this.point = Point.min(max, size - this.radius);
|
|
65
|
-
this.item.rotate(this.vector.x);
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
var balls = [];
|
|
70
|
-
for (var i = 0; i < 10; i++) {
|
|
71
|
-
var position = Point.random() * view.size,
|
|
72
|
-
vector = (Point.random() - [0.5, 0]) * [50, 100],
|
|
73
|
-
ball = new Ball(position, vector);
|
|
74
|
-
balls.push(ball);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
var textItem = new PointText({
|
|
78
|
-
point: [20, 30],
|
|
79
|
-
fillColor: 'black',
|
|
80
|
-
content: 'Click, drag and release to add balls.'
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
var lastDelta;
|
|
84
|
-
function onMouseDrag(event) {
|
|
85
|
-
lastDelta = event.delta;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
function onMouseUp(event) {
|
|
89
|
-
var ball = new Ball(event.point, lastDelta);
|
|
90
|
-
balls.push(ball);
|
|
91
|
-
lastDelta = null;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
function onFrame() {
|
|
95
|
-
for (var i = 0, l = balls.length; i < l; i++)
|
|
96
|
-
balls[i].iterate();
|
|
97
|
-
}
|
|
98
|
-
</script>
|
|
99
|
-
</head>
|
|
100
|
-
<body>
|
|
101
|
-
<canvas id="canvas" resize></canvas>
|
|
102
|
-
</body>
|
|
103
|
-
</html>
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Chain</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/style.css">
|
|
7
|
-
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
|
8
|
-
<script type="text/paperscript" canvas="canvas">
|
|
9
|
-
// Adapted from the following Processing example:
|
|
10
|
-
// http://processing.org/learning/topics/follow3.html
|
|
11
|
-
|
|
12
|
-
// The amount of points in the path:
|
|
13
|
-
var points = 25;
|
|
14
|
-
|
|
15
|
-
// The distance between the points:
|
|
16
|
-
var length = 35;
|
|
17
|
-
|
|
18
|
-
var path = new Path({
|
|
19
|
-
strokeColor: '#E4141B',
|
|
20
|
-
strokeWidth: 20,
|
|
21
|
-
strokeCap: 'round'
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
var start = view.center / [10, 1];
|
|
25
|
-
for (var i = 0; i < points; i++)
|
|
26
|
-
path.add(start + new Point(i * length, 0));
|
|
27
|
-
|
|
28
|
-
function onMouseMove(event) {
|
|
29
|
-
path.firstSegment.point = event.point;
|
|
30
|
-
for (var i = 0; i < points - 1; i++) {
|
|
31
|
-
var segment = path.segments[i];
|
|
32
|
-
var nextSegment = segment.next;
|
|
33
|
-
var vector = segment.point - nextSegment.point;
|
|
34
|
-
vector.length = length;
|
|
35
|
-
nextSegment.point = segment.point - vector;
|
|
36
|
-
}
|
|
37
|
-
path.smooth({ type: 'continuous' });
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
function onMouseDown(event) {
|
|
41
|
-
path.fullySelected = true;
|
|
42
|
-
path.strokeColor = '#e08285';
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
function onMouseUp(event) {
|
|
46
|
-
path.fullySelected = false;
|
|
47
|
-
path.strokeColor = '#e4141b';
|
|
48
|
-
}
|
|
49
|
-
</script>
|
|
50
|
-
</head>
|
|
51
|
-
<body>
|
|
52
|
-
<canvas id="canvas" resize></canvas>
|
|
53
|
-
</body>
|
|
54
|
-
</html>
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Division Raster</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/style.css">
|
|
7
|
-
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
|
8
|
-
<script type="text/paperscript" canvas="canvas">
|
|
9
|
-
// Based on 'JPEG Raster' by Jonathan Puckey:
|
|
10
|
-
// http://www.flickr.com/photos/puckey/3179779686/in/photostream/
|
|
11
|
-
|
|
12
|
-
// Create a raster item using the image with id='mona'
|
|
13
|
-
var raster = new Raster('mona');
|
|
14
|
-
|
|
15
|
-
// Make the raster invisible:
|
|
16
|
-
raster.visible = false;
|
|
17
|
-
|
|
18
|
-
var lastPos = view.center;
|
|
19
|
-
function moveHandler(event) {
|
|
20
|
-
if (lastPos.getDistance(event.point) < 10)
|
|
21
|
-
return;
|
|
22
|
-
lastPos = event.point;
|
|
23
|
-
|
|
24
|
-
var size = this.bounds.size.clone();
|
|
25
|
-
var isLandscape = size.width > size.height;
|
|
26
|
-
|
|
27
|
-
// If the path is in landscape orientation, we're going to
|
|
28
|
-
// split the path horizontally, otherwise vertically:
|
|
29
|
-
|
|
30
|
-
size /= isLandscape ? [2, 1] : [1, 2];
|
|
31
|
-
|
|
32
|
-
var path = new Path.Rectangle({
|
|
33
|
-
point: this.bounds.topLeft.floor(),
|
|
34
|
-
size: size.ceil(),
|
|
35
|
-
onMouseMove: moveHandler
|
|
36
|
-
});
|
|
37
|
-
path.fillColor = raster.getAverageColor(path);
|
|
38
|
-
|
|
39
|
-
var path = new Path.Rectangle({
|
|
40
|
-
point: isLandscape
|
|
41
|
-
? this.bounds.topCenter.ceil()
|
|
42
|
-
: this.bounds.leftCenter.ceil(),
|
|
43
|
-
size: size.floor(),
|
|
44
|
-
onMouseMove: moveHandler
|
|
45
|
-
});
|
|
46
|
-
path.fillColor = raster.getAverageColor(path);
|
|
47
|
-
|
|
48
|
-
this.remove();
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function onResize(event) {
|
|
52
|
-
project.activeLayer.removeChildren();
|
|
53
|
-
|
|
54
|
-
// Transform the raster so that it fills the bounding rectangle
|
|
55
|
-
// of the view:
|
|
56
|
-
raster.fitBounds(view.bounds, true);
|
|
57
|
-
|
|
58
|
-
// Create a path that fills the view, and fill it with
|
|
59
|
-
// the average color of the raster:
|
|
60
|
-
new Path.Rectangle({
|
|
61
|
-
rectangle: view.bounds,
|
|
62
|
-
fillColor: raster.getAverageColor(view.bounds),
|
|
63
|
-
onMouseMove: moveHandler
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
</script>
|
|
67
|
-
</head>
|
|
68
|
-
<body>
|
|
69
|
-
<canvas id="canvas" resize></canvas>
|
|
70
|
-
<img width="512" height="512" id="mona" style="display: none;" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAATAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA1NUZCMzkwOTFGMTExRTBCNTg4OEQ5RDIyNkE4Qjc5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA1NUZCMzkxOTFGMTExRTBCNTg4OEQ5RDIyNkE4Qjc5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDU1RkIzOEU5MUYxMTFFMEI1ODg4RDlEMjI2QThCNzkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDU1RkIzOEY5MUYxMTFFMEI1ODg4RDlEMjI2QThCNzkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAATDw8WEBYkFRUkLSIcIi0pIyIi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">
|
|
71
|
-
</body>
|
|
72
|
-
</html>
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Future Splash</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/style.css">
|
|
7
|
-
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
|
8
|
-
<script type="text/paperscript" canvas="canvas">
|
|
9
|
-
// Code ported to Paper.js from http://the389.com/9/1/
|
|
10
|
-
// with permission.
|
|
11
|
-
|
|
12
|
-
var values = {
|
|
13
|
-
friction: 0.8,
|
|
14
|
-
timeStep: 0.01,
|
|
15
|
-
amount: 15,
|
|
16
|
-
mass: 2,
|
|
17
|
-
count: 0
|
|
18
|
-
};
|
|
19
|
-
values.invMass = 1 / values.mass;
|
|
20
|
-
|
|
21
|
-
var path, springs;
|
|
22
|
-
var size = view.size * [1.2, 1];
|
|
23
|
-
|
|
24
|
-
var Spring = function(a, b, strength, restLength) {
|
|
25
|
-
this.a = a;
|
|
26
|
-
this.b = b;
|
|
27
|
-
this.restLength = restLength || 80;
|
|
28
|
-
this.strength = strength ? strength : 0.55;
|
|
29
|
-
this.mamb = values.invMass * values.invMass;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
Spring.prototype.update = function() {
|
|
33
|
-
var delta = this.b - this.a;
|
|
34
|
-
var dist = delta.length;
|
|
35
|
-
var normDistStrength = (dist - this.restLength) /
|
|
36
|
-
(dist * this.mamb) * this.strength;
|
|
37
|
-
delta.y *= normDistStrength * values.invMass * 0.2;
|
|
38
|
-
if (!this.a.fixed)
|
|
39
|
-
this.a.y += delta.y;
|
|
40
|
-
if (!this.b.fixed)
|
|
41
|
-
this.b.y -= delta.y;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
function createPath(strength) {
|
|
46
|
-
var path = new Path({
|
|
47
|
-
fillColor: 'black'
|
|
48
|
-
});
|
|
49
|
-
springs = [];
|
|
50
|
-
for (var i = 0; i <= values.amount; i++) {
|
|
51
|
-
var segment = path.add(new Point(i / values.amount, 0.5) * size);
|
|
52
|
-
var point = segment.point;
|
|
53
|
-
if (i == 0 || i == values.amount)
|
|
54
|
-
point.y += size.height;
|
|
55
|
-
point.px = point.x;
|
|
56
|
-
point.py = point.y;
|
|
57
|
-
// The first two and last two points are fixed:
|
|
58
|
-
point.fixed = i < 2 || i > values.amount - 2;
|
|
59
|
-
if (i > 0) {
|
|
60
|
-
var spring = new Spring(segment.previous.point, point, strength);
|
|
61
|
-
springs.push(spring);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
path.position.x -= size.width / 4;
|
|
65
|
-
return path;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
function onResize() {
|
|
69
|
-
if (path)
|
|
70
|
-
path.remove();
|
|
71
|
-
size = view.bounds.size * [2, 1];
|
|
72
|
-
path = createPath(0.1);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
function onMouseMove(event) {
|
|
76
|
-
var location = path.getNearestLocation(event.point);
|
|
77
|
-
var segment = location.segment;
|
|
78
|
-
var point = segment.point;
|
|
79
|
-
|
|
80
|
-
if (!point.fixed && location.distance < size.height / 4) {
|
|
81
|
-
var y = event.point.y;
|
|
82
|
-
point.y += (y - point.y) / 6;
|
|
83
|
-
var previous = segment.previous && segment.previous.point;
|
|
84
|
-
var next = segment.next && segment.next.point;
|
|
85
|
-
if (previous && !previous.fixed)
|
|
86
|
-
previous.y += (y - previous.y) / 24;
|
|
87
|
-
if (next && !next.fixed)
|
|
88
|
-
next.y += (y - next.y) / 24;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
function onFrame(event) {
|
|
93
|
-
updateWave(path);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
function updateWave(path) {
|
|
97
|
-
var force = 1 - values.friction * values.timeStep * values.timeStep;
|
|
98
|
-
for (var i = 0, l = path.segments.length; i < l; i++) {
|
|
99
|
-
var point = path.segments[i].point;
|
|
100
|
-
var dy = (point.y - point.py) * force;
|
|
101
|
-
point.py = point.y;
|
|
102
|
-
point.y = Math.max(point.y + dy, 0);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
for (var j = 0, l = springs.length; j < l; j++) {
|
|
106
|
-
springs[j].update();
|
|
107
|
-
}
|
|
108
|
-
path.smooth({ type: 'continuous' });
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
function onKeyDown(event) {
|
|
112
|
-
if (event.key == 'space') {
|
|
113
|
-
path.fullySelected = !path.fullySelected;
|
|
114
|
-
path.fillColor = path.fullySelected ? null : 'black';
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
</script>
|
|
118
|
-
</head>
|
|
119
|
-
<body>
|
|
120
|
-
<canvas id="canvas" resize hidpi="off"></canvas>
|
|
121
|
-
</body>
|
|
122
|
-
</html>
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Hit Testing</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/style.css">
|
|
7
|
-
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
|
8
|
-
<script type="text/paperscript" canvas="canvas">
|
|
9
|
-
var values = {
|
|
10
|
-
paths: 50,
|
|
11
|
-
minPoints: 5,
|
|
12
|
-
maxPoints: 15,
|
|
13
|
-
minRadius: 30,
|
|
14
|
-
maxRadius: 90
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
var hitOptions = {
|
|
18
|
-
segments: true,
|
|
19
|
-
stroke: true,
|
|
20
|
-
fill: true,
|
|
21
|
-
tolerance: 5
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
createPaths();
|
|
25
|
-
|
|
26
|
-
function createPaths() {
|
|
27
|
-
var radiusDelta = values.maxRadius - values.minRadius;
|
|
28
|
-
var pointsDelta = values.maxPoints - values.minPoints;
|
|
29
|
-
for (var i = 0; i < values.paths; i++) {
|
|
30
|
-
var radius = values.minRadius + Math.random() * radiusDelta;
|
|
31
|
-
var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
|
|
32
|
-
var path = createBlob(view.size * Point.random(), radius, points);
|
|
33
|
-
var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
|
|
34
|
-
var hue = Math.random() * 360;
|
|
35
|
-
path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
|
|
36
|
-
path.strokeColor = 'black';
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
function createBlob(center, maxRadius, points) {
|
|
41
|
-
var path = new Path();
|
|
42
|
-
path.closed = true;
|
|
43
|
-
for (var i = 0; i < points; i++) {
|
|
44
|
-
var delta = new Point({
|
|
45
|
-
length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
|
|
46
|
-
angle: (360 / points) * i
|
|
47
|
-
});
|
|
48
|
-
path.add(center + delta);
|
|
49
|
-
}
|
|
50
|
-
path.smooth();
|
|
51
|
-
return path;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
var segment, path;
|
|
55
|
-
var movePath = false;
|
|
56
|
-
function onMouseDown(event) {
|
|
57
|
-
segment = path = null;
|
|
58
|
-
var hitResult = project.hitTest(event.point, hitOptions);
|
|
59
|
-
if (!hitResult)
|
|
60
|
-
return;
|
|
61
|
-
|
|
62
|
-
if (event.modifiers.shift) {
|
|
63
|
-
if (hitResult.type == 'segment') {
|
|
64
|
-
hitResult.segment.remove();
|
|
65
|
-
};
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
if (hitResult) {
|
|
70
|
-
path = hitResult.item;
|
|
71
|
-
if (hitResult.type == 'segment') {
|
|
72
|
-
segment = hitResult.segment;
|
|
73
|
-
} else if (hitResult.type == 'stroke') {
|
|
74
|
-
var location = hitResult.location;
|
|
75
|
-
segment = path.insert(location.index + 1, event.point);
|
|
76
|
-
path.smooth();
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
movePath = hitResult.type == 'fill';
|
|
80
|
-
if (movePath)
|
|
81
|
-
project.activeLayer.addChild(hitResult.item);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
function onMouseMove(event) {
|
|
85
|
-
project.activeLayer.selected = false;
|
|
86
|
-
if (event.item)
|
|
87
|
-
event.item.selected = true;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
function onMouseDrag(event) {
|
|
91
|
-
if (segment) {
|
|
92
|
-
segment.point += event.delta;
|
|
93
|
-
path.smooth();
|
|
94
|
-
} else if (path) {
|
|
95
|
-
path.position += event.delta;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
</script>
|
|
99
|
-
</head>
|
|
100
|
-
<body>
|
|
101
|
-
<canvas id="canvas" resize style="background:black"></canvas>
|
|
102
|
-
</body>
|
|
103
|
-
</html>
|