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,41 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Rounded Rectangles</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 mousePoint = view.center;
|
|
10
|
-
var amount = 25;
|
|
11
|
-
var colors = ['red', 'white', 'blue', 'white'];
|
|
12
|
-
|
|
13
|
-
for (var i = 0; i < amount; i++) {
|
|
14
|
-
var rect = new Rectangle([0, 0], [25, 25]);
|
|
15
|
-
rect.center = mousePoint;
|
|
16
|
-
var path = new Path.Rectangle(rect, 6);
|
|
17
|
-
path.fillColor = colors[i % 4];
|
|
18
|
-
var scale = (1 - i / amount) * 20;
|
|
19
|
-
path.scale(scale);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function onMouseMove(event) {
|
|
23
|
-
mousePoint = event.point;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
var children = project.activeLayer.children;
|
|
27
|
-
function onFrame(event) {
|
|
28
|
-
for (var i = 0, l = children.length; i < l; i++) {
|
|
29
|
-
var item = children[i];
|
|
30
|
-
var delta = (mousePoint - item.position) / (i + 5);
|
|
31
|
-
item.rotate(Math.sin((event.count + i) / 10) * 7);
|
|
32
|
-
if (delta.length > 0.1)
|
|
33
|
-
item.position += delta;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
</script>
|
|
37
|
-
</head>
|
|
38
|
-
<body>
|
|
39
|
-
<canvas id="canvas" resize hidpi="off"></canvas>
|
|
40
|
-
</body>
|
|
41
|
-
</html>
|
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Erik Liked To Dance</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 leftPath = new Path({
|
|
10
|
-
strokeColor: 'red',
|
|
11
|
-
opacity: 0.5
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
var rightPath = new Path({
|
|
15
|
-
strokeColor: 'green',
|
|
16
|
-
opacity: 0.5
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
var amount = 8;
|
|
20
|
-
var step = view.size.width / (amount + 1);
|
|
21
|
-
var flip = false;
|
|
22
|
-
|
|
23
|
-
for (var i = 0; i <= amount; i++) {
|
|
24
|
-
leftPath.add(new Point(i * step, 0));
|
|
25
|
-
rightPath.add(new Point(i * step, 0));
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
var group = new Group({
|
|
29
|
-
children: [leftPath, rightPath],
|
|
30
|
-
applyMatrix: false,
|
|
31
|
-
strokeWidth: 30,
|
|
32
|
-
strokeJoin: 'round',
|
|
33
|
-
strokeCap: 'butt',
|
|
34
|
-
pivot: leftPath.position,
|
|
35
|
-
position: view.center
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
function onMouseDown() {
|
|
39
|
-
flip = !flip;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
function onKeyDown(event) {
|
|
43
|
-
if (event.key === 'space')
|
|
44
|
-
group.fullySelected = !group.fullySelected;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
var audio, source, analyserL, analyserR, freqByteData;
|
|
48
|
-
|
|
49
|
-
view.onFrame = function() {
|
|
50
|
-
var step = view.size.width / (amount + 1);
|
|
51
|
-
var scale = view.size.height / 1.5;
|
|
52
|
-
analyserL.getByteFrequencyData(freqByteData);
|
|
53
|
-
var leftBands = getEqualizerBands(freqByteData, true);
|
|
54
|
-
analyserR.getByteFrequencyData(freqByteData);
|
|
55
|
-
var rightBands = getEqualizerBands(freqByteData, true);
|
|
56
|
-
for (var i = 1; i <= amount; i++) {
|
|
57
|
-
leftPath.segments[i].point = [i * step, -leftBands[i - 1] * scale];
|
|
58
|
-
rightPath.segments[i].point = [i * step, -rightBands[i - 1] * scale * (flip ? -1 : 1)];
|
|
59
|
-
}
|
|
60
|
-
leftPath.smooth();
|
|
61
|
-
rightPath.smooth();
|
|
62
|
-
group.pivot = [leftPath.position.x, 0];
|
|
63
|
-
group.position = view.center;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
// Pause animation until we have data
|
|
67
|
-
view.pause();
|
|
68
|
-
|
|
69
|
-
var AudioContext = window.AudioContext || window.webkitAudioContext;
|
|
70
|
-
if (AudioContext) {
|
|
71
|
-
audio = new AudioContext();
|
|
72
|
-
source = audio.createBufferSource();
|
|
73
|
-
// Create two separate analyzers for left and right channel.
|
|
74
|
-
analyserL = audio.createAnalyser();
|
|
75
|
-
analyserL.smoothingTimeConstant = 0.25;
|
|
76
|
-
analyserL.fftSize = Math.pow(2, amount) * 2;
|
|
77
|
-
analyserR = audio.createAnalyser();
|
|
78
|
-
analyserR.smoothingTimeConstant = analyserL.smoothingTimeConstant;
|
|
79
|
-
analyserR.fftSize = analyserL.fftSize;
|
|
80
|
-
// Create the buffer to receive the analyzed data.
|
|
81
|
-
freqByteData = new Uint8Array(analyserL.frequencyBinCount);
|
|
82
|
-
// Create a splitter to feed them both
|
|
83
|
-
var splitter = audio.createChannelSplitter();
|
|
84
|
-
// Connect audio processing graph
|
|
85
|
-
source.connect(splitter);
|
|
86
|
-
splitter.connect(analyserL, 0, 0);
|
|
87
|
-
splitter.connect(analyserR, 1, 0);
|
|
88
|
-
// Connect source to output also so we can hear it
|
|
89
|
-
source.connect(audio.destination);
|
|
90
|
-
loadAudioBuffer('http://assets.paperjs.org/audio/gnossienne.mp3');
|
|
91
|
-
} else {
|
|
92
|
-
// TODO: Print error message
|
|
93
|
-
alert('Audio not supported');
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
function loadAudioBuffer(url) {
|
|
97
|
-
// Load asynchronously
|
|
98
|
-
var request = new XMLHttpRequest();
|
|
99
|
-
request.open("GET", url, true);
|
|
100
|
-
request.responseType = "arraybuffer";
|
|
101
|
-
|
|
102
|
-
request.onload = function() {
|
|
103
|
-
audio.decodeAudioData(
|
|
104
|
-
request.response,
|
|
105
|
-
function(buffer) {
|
|
106
|
-
source.buffer = buffer;
|
|
107
|
-
source.loop = true;
|
|
108
|
-
source.start(0);
|
|
109
|
-
view.play();
|
|
110
|
-
},
|
|
111
|
-
|
|
112
|
-
function(buffer) {
|
|
113
|
-
alert("Error loading MP3");
|
|
114
|
-
}
|
|
115
|
-
);
|
|
116
|
-
};
|
|
117
|
-
request.send();
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
function getEqualizerBands(data) {
|
|
121
|
-
var bands = [];
|
|
122
|
-
var amount = Math.sqrt(data.length) / 2;
|
|
123
|
-
for (var i = 0; i < amount; i++) {
|
|
124
|
-
var start = Math.pow(2, i) - 1;
|
|
125
|
-
var end = start * 2 + 1;
|
|
126
|
-
var sum = 0;
|
|
127
|
-
for (var j = start; j < end; j++) {
|
|
128
|
-
sum += data[j];
|
|
129
|
-
}
|
|
130
|
-
var avg = sum / (255 * (end - start));
|
|
131
|
-
bands[i] = Math.sqrt(avg / Math.SQRT2);
|
|
132
|
-
}
|
|
133
|
-
return bands;
|
|
134
|
-
}
|
|
135
|
-
</script>
|
|
136
|
-
</head>
|
|
137
|
-
<body>
|
|
138
|
-
<canvas id="canvas" resize></canvas>
|
|
139
|
-
</body>
|
|
140
|
-
</html>
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Simplify</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 path;
|
|
10
|
-
|
|
11
|
-
var textItem = new PointText({
|
|
12
|
-
content: 'Click and drag to draw a line.',
|
|
13
|
-
point: new Point(20, 30),
|
|
14
|
-
fillColor: 'black',
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
function onMouseDown(event) {
|
|
18
|
-
// If we produced a path before, deselect it:
|
|
19
|
-
if (path) {
|
|
20
|
-
path.selected = false;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
// Create a new path and set its stroke color to black:
|
|
24
|
-
path = new Path({
|
|
25
|
-
segments: [event.point],
|
|
26
|
-
strokeColor: 'black',
|
|
27
|
-
// Select the path, so we can see its segment points:
|
|
28
|
-
fullySelected: true
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
// While the user drags the mouse, points are added to the path
|
|
33
|
-
// at the position of the mouse:
|
|
34
|
-
function onMouseDrag(event) {
|
|
35
|
-
path.add(event.point);
|
|
36
|
-
|
|
37
|
-
// Update the content of the text item to show how many
|
|
38
|
-
// segments it has:
|
|
39
|
-
textItem.content = 'Segment count: ' + path.segments.length;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// When the mouse is released, we simplify the path:
|
|
43
|
-
function onMouseUp(event) {
|
|
44
|
-
var segmentCount = path.segments.length;
|
|
45
|
-
|
|
46
|
-
// When the mouse is released, simplify it:
|
|
47
|
-
path.simplify(10);
|
|
48
|
-
|
|
49
|
-
// Select the path, so we can see its segments:
|
|
50
|
-
path.fullySelected = true;
|
|
51
|
-
|
|
52
|
-
var newSegmentCount = path.segments.length;
|
|
53
|
-
var difference = segmentCount - newSegmentCount;
|
|
54
|
-
var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
|
|
55
|
-
textItem.content = difference + ' of the ' + segmentCount + ' segments were removed. Saving ' + percentage + '%';
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
</script>
|
|
59
|
-
</head>
|
|
60
|
-
<body>
|
|
61
|
-
<canvas id="canvas" resize></canvas>
|
|
62
|
-
</body>
|
|
63
|
-
</html>
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Spiral 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
|
-
// Please note: dragging and dropping images only works for
|
|
10
|
-
// certain browsers when serving this script online:
|
|
11
|
-
var path, position, max;
|
|
12
|
-
var count = 0;
|
|
13
|
-
var grow = false;
|
|
14
|
-
|
|
15
|
-
// As the web is asynchronous, we need to wait for the raster to
|
|
16
|
-
// load before we can perform any operation on its pixels.
|
|
17
|
-
var raster = new Raster('mona');
|
|
18
|
-
raster.visible = false;
|
|
19
|
-
raster.on('load', resetSpiral);
|
|
20
|
-
|
|
21
|
-
var text = new PointText({
|
|
22
|
-
justification: 'right',
|
|
23
|
-
fontSize: 12,
|
|
24
|
-
content: window.FileReader
|
|
25
|
-
? 'drag & drop an image from your desktop to rasterize it'
|
|
26
|
-
: 'to drag & drop images, please use Webkit, Firefox, Chrome or IE 10'
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
function onFrame(event) {
|
|
30
|
-
if (grow) {
|
|
31
|
-
if (raster.loaded && (view.center - position).length < max) {
|
|
32
|
-
for (var i = 0, l = count / 36 + 1; i < l; i++) {
|
|
33
|
-
growSpiral();
|
|
34
|
-
}
|
|
35
|
-
path.smooth();
|
|
36
|
-
} else {
|
|
37
|
-
grow = false;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
function growSpiral() {
|
|
43
|
-
count++;
|
|
44
|
-
var vector = new Point({
|
|
45
|
-
angle: count * 5,
|
|
46
|
-
length: count / 100
|
|
47
|
-
});
|
|
48
|
-
var rot = vector.rotate(90);
|
|
49
|
-
var color = raster.getAverageColor(position + vector / 2);
|
|
50
|
-
var value = color ? (1 - color.gray) * 3.7 : 0;
|
|
51
|
-
rot.length = Math.max(value, 0.2);
|
|
52
|
-
path.add(position + vector - rot);
|
|
53
|
-
path.insert(0, position + vector + rot);
|
|
54
|
-
position += vector;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
function resetSpiral() {
|
|
58
|
-
grow = true;
|
|
59
|
-
|
|
60
|
-
// Transform the raster, so it fills the view:
|
|
61
|
-
raster.fitBounds(view.bounds);
|
|
62
|
-
|
|
63
|
-
if (path)
|
|
64
|
-
path.remove();
|
|
65
|
-
|
|
66
|
-
position = view.center;
|
|
67
|
-
count = 0;
|
|
68
|
-
path = new Path({
|
|
69
|
-
fillColor: 'black',
|
|
70
|
-
closed: true
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
position = view.center;
|
|
74
|
-
max = Math.min(raster.bounds.width, raster.bounds.height) * 0.5;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
function onResize() {
|
|
78
|
-
if (raster.loaded)
|
|
79
|
-
resetSpiral();
|
|
80
|
-
text.point = view.bounds.bottomRight - [30, 30];
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
function onKeyDown(event) {
|
|
84
|
-
if (event.key == 'space') {
|
|
85
|
-
path.selected = !path.selected;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
function onDocumentDrag(event) {
|
|
90
|
-
event.preventDefault();
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
function onDocumentDrop(event) {
|
|
94
|
-
event.preventDefault();
|
|
95
|
-
|
|
96
|
-
var file = event.dataTransfer.files[0];
|
|
97
|
-
var reader = new FileReader();
|
|
98
|
-
|
|
99
|
-
reader.onload = function (event) {
|
|
100
|
-
var image = document.createElement('img');
|
|
101
|
-
image.onload = function () {
|
|
102
|
-
raster = new Raster(image);
|
|
103
|
-
raster.visible = false;
|
|
104
|
-
resetSpiral();
|
|
105
|
-
};
|
|
106
|
-
image.src = event.target.result;
|
|
107
|
-
};
|
|
108
|
-
reader.readAsDataURL(file);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
document.addEventListener('drop', onDocumentDrop, false);
|
|
112
|
-
document.addEventListener('dragover', onDocumentDrag, false);
|
|
113
|
-
document.addEventListener('dragleave', onDocumentDrag, false);
|
|
114
|
-
</script>
|
|
115
|
-
</head>
|
|
116
|
-
<body>
|
|
117
|
-
<canvas id="canvas" resize style="background-color:white"></canvas>
|
|
118
|
-
<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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">
|
|
119
|
-
</body>
|
|
120
|
-
</html>
|
|
@@ -1,283 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Tadpoles</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 Flocking Processing example by Daniel Schiffman:
|
|
10
|
-
// http://processing.org/learning/topics/flocking.html
|
|
11
|
-
|
|
12
|
-
var Boid = Base.extend({
|
|
13
|
-
initialize: function(position, maxSpeed, maxForce) {
|
|
14
|
-
var strength = Math.random() * 0.5;
|
|
15
|
-
this.acceleration = new Point();
|
|
16
|
-
this.vector = Point.random() * 2 - 1;
|
|
17
|
-
this.position = position.clone();
|
|
18
|
-
this.radius = 30;
|
|
19
|
-
this.maxSpeed = maxSpeed + strength;
|
|
20
|
-
this.maxForce = maxForce + strength;
|
|
21
|
-
this.amount = strength * 10 + 10;
|
|
22
|
-
this.count = 0;
|
|
23
|
-
this.createItems();
|
|
24
|
-
},
|
|
25
|
-
|
|
26
|
-
run: function(boids) {
|
|
27
|
-
this.lastLoc = this.position.clone();
|
|
28
|
-
if (!groupTogether) {
|
|
29
|
-
this.flock(boids);
|
|
30
|
-
} else {
|
|
31
|
-
this.align(boids);
|
|
32
|
-
}
|
|
33
|
-
this.borders();
|
|
34
|
-
this.update();
|
|
35
|
-
this.calculateTail();
|
|
36
|
-
this.moveHead();
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
calculateTail: function() {
|
|
40
|
-
var segments = this.path.segments,
|
|
41
|
-
shortSegments = this.shortPath.segments;
|
|
42
|
-
var speed = this.vector.length;
|
|
43
|
-
var pieceLength = 5 + speed / 3;
|
|
44
|
-
var point = this.position;
|
|
45
|
-
segments[0].point = shortSegments[0].point = point;
|
|
46
|
-
// Chain goes the other way than the movement
|
|
47
|
-
var lastVector = -this.vector;
|
|
48
|
-
for (var i = 1; i < this.amount; i++) {
|
|
49
|
-
var vector = segments[i].point - point;
|
|
50
|
-
this.count += speed * 10;
|
|
51
|
-
var wave = Math.sin((this.count + i * 3) / 300);
|
|
52
|
-
var sway = lastVector.rotate(90).normalize(wave);
|
|
53
|
-
point += lastVector.normalize(pieceLength) + sway;
|
|
54
|
-
segments[i].point = point;
|
|
55
|
-
if (i < 3)
|
|
56
|
-
shortSegments[i].point = point;
|
|
57
|
-
lastVector = vector;
|
|
58
|
-
}
|
|
59
|
-
this.path.smooth();
|
|
60
|
-
},
|
|
61
|
-
|
|
62
|
-
createItems: function() {
|
|
63
|
-
this.head = new Shape.Ellipse({
|
|
64
|
-
center: [0, 0],
|
|
65
|
-
size: [13, 8],
|
|
66
|
-
fillColor: 'white'
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
this.path = new Path({
|
|
70
|
-
strokeColor: 'white',
|
|
71
|
-
strokeWidth: 2,
|
|
72
|
-
strokeCap: 'round'
|
|
73
|
-
});
|
|
74
|
-
for (var i = 0; i < this.amount; i++)
|
|
75
|
-
this.path.add(new Point());
|
|
76
|
-
|
|
77
|
-
this.shortPath = new Path({
|
|
78
|
-
strokeColor: 'white',
|
|
79
|
-
strokeWidth: 4,
|
|
80
|
-
strokeCap: 'round'
|
|
81
|
-
});
|
|
82
|
-
for (var i = 0; i < Math.min(3, this.amount); i++)
|
|
83
|
-
this.shortPath.add(new Point());
|
|
84
|
-
},
|
|
85
|
-
|
|
86
|
-
moveHead: function() {
|
|
87
|
-
this.head.position = this.position;
|
|
88
|
-
this.head.rotation = this.vector.angle;
|
|
89
|
-
},
|
|
90
|
-
|
|
91
|
-
// We accumulate a new acceleration each time based on three rules
|
|
92
|
-
flock: function(boids) {
|
|
93
|
-
var separation = this.separate(boids) * 3;
|
|
94
|
-
var alignment = this.align(boids);
|
|
95
|
-
var cohesion = this.cohesion(boids);
|
|
96
|
-
this.acceleration += separation + alignment + cohesion;
|
|
97
|
-
},
|
|
98
|
-
|
|
99
|
-
update: function() {
|
|
100
|
-
// Update velocity
|
|
101
|
-
this.vector += this.acceleration;
|
|
102
|
-
// Limit speed (vector#limit?)
|
|
103
|
-
this.vector.length = Math.min(this.maxSpeed, this.vector.length);
|
|
104
|
-
this.position += this.vector;
|
|
105
|
-
// Reset acceleration to 0 each cycle
|
|
106
|
-
this.acceleration = new Point();
|
|
107
|
-
},
|
|
108
|
-
|
|
109
|
-
seek: function(target) {
|
|
110
|
-
this.acceleration += this.steer(target, false);
|
|
111
|
-
},
|
|
112
|
-
|
|
113
|
-
arrive: function(target) {
|
|
114
|
-
this.acceleration += this.steer(target, true);
|
|
115
|
-
},
|
|
116
|
-
|
|
117
|
-
borders: function() {
|
|
118
|
-
var vector = new Point();
|
|
119
|
-
var position = this.position;
|
|
120
|
-
var radius = this.radius;
|
|
121
|
-
var size = view.size;
|
|
122
|
-
if (position.x < -radius) vector.x = size.width + radius;
|
|
123
|
-
if (position.y < -radius) vector.y = size.height + radius;
|
|
124
|
-
if (position.x > size.width + radius) vector.x = -size.width -radius;
|
|
125
|
-
if (position.y > size.height + radius) vector.y = -size.height -radius;
|
|
126
|
-
if (!vector.isZero()) {
|
|
127
|
-
this.position += vector;
|
|
128
|
-
var segments = this.path.segments;
|
|
129
|
-
for (var i = 0; i < this.amount; i++) {
|
|
130
|
-
segments[i].point += vector;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
},
|
|
134
|
-
|
|
135
|
-
// A method that calculates a steering vector towards a target
|
|
136
|
-
// Takes a second argument, if true, it slows down as it approaches
|
|
137
|
-
// the target
|
|
138
|
-
steer: function(target, slowdown) {
|
|
139
|
-
var steer,
|
|
140
|
-
desired = target - this.position;
|
|
141
|
-
var distance = desired.length;
|
|
142
|
-
// Two options for desired vector magnitude
|
|
143
|
-
// (1 -- based on distance, 2 -- maxSpeed)
|
|
144
|
-
if (slowdown && distance < 100) {
|
|
145
|
-
// This damping is somewhat arbitrary:
|
|
146
|
-
desired.length = this.maxSpeed * (distance / 100);
|
|
147
|
-
} else {
|
|
148
|
-
desired.length = this.maxSpeed;
|
|
149
|
-
}
|
|
150
|
-
steer = desired - this.vector;
|
|
151
|
-
steer.length = Math.min(this.maxForce, steer.length);
|
|
152
|
-
return steer;
|
|
153
|
-
},
|
|
154
|
-
|
|
155
|
-
separate: function(boids) {
|
|
156
|
-
var desiredSeperation = 60;
|
|
157
|
-
var steer = new Point();
|
|
158
|
-
var count = 0;
|
|
159
|
-
// For every boid in the system, check if it's too close
|
|
160
|
-
for (var i = 0, l = boids.length; i < l; i++) {
|
|
161
|
-
var other = boids[i];
|
|
162
|
-
var vector = this.position - other.position;
|
|
163
|
-
var distance = vector.length;
|
|
164
|
-
if (distance > 0 && distance < desiredSeperation) {
|
|
165
|
-
// Calculate vector pointing away from neighbor
|
|
166
|
-
steer += vector.normalize(1 / distance);
|
|
167
|
-
count++;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
// Average -- divide by how many
|
|
171
|
-
if (count > 0)
|
|
172
|
-
steer /= count;
|
|
173
|
-
if (!steer.isZero()) {
|
|
174
|
-
// Implement Reynolds: Steering = Desired - Velocity
|
|
175
|
-
steer.length = this.maxSpeed;
|
|
176
|
-
steer -= this.vector;
|
|
177
|
-
steer.length = Math.min(steer.length, this.maxForce);
|
|
178
|
-
}
|
|
179
|
-
return steer;
|
|
180
|
-
},
|
|
181
|
-
|
|
182
|
-
// Alignment
|
|
183
|
-
// For every nearby boid in the system, calculate the average velocity
|
|
184
|
-
align: function(boids) {
|
|
185
|
-
var neighborDist = 25;
|
|
186
|
-
var steer = new Point();
|
|
187
|
-
var count = 0;
|
|
188
|
-
for (var i = 0, l = boids.length; i < l; i++) {
|
|
189
|
-
var other = boids[i];
|
|
190
|
-
var distance = this.position.getDistance(other.position);
|
|
191
|
-
if (distance > 0 && distance < neighborDist) {
|
|
192
|
-
steer += other.vector;
|
|
193
|
-
count++;
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
if (count > 0)
|
|
198
|
-
steer /= count;
|
|
199
|
-
if (!steer.isZero()) {
|
|
200
|
-
// Implement Reynolds: Steering = Desired - Velocity
|
|
201
|
-
steer.length = this.maxSpeed;
|
|
202
|
-
steer -= this.vector;
|
|
203
|
-
steer.length = Math.min(steer.length, this.maxForce);
|
|
204
|
-
}
|
|
205
|
-
return steer;
|
|
206
|
-
},
|
|
207
|
-
|
|
208
|
-
// Cohesion
|
|
209
|
-
// For the average location (i.e. center) of all nearby boids,
|
|
210
|
-
// calculate steering vector towards that location
|
|
211
|
-
cohesion: function(boids) {
|
|
212
|
-
var neighborDist = 100;
|
|
213
|
-
var sum = new Point();
|
|
214
|
-
var count = 0;
|
|
215
|
-
for (var i = 0, l = boids.length; i < l; i++) {
|
|
216
|
-
var other = boids[i];
|
|
217
|
-
var distance = this.position.getDistance(other.position);
|
|
218
|
-
if (distance > 0 && distance < neighborDist) {
|
|
219
|
-
sum += other.position; // Add location
|
|
220
|
-
count++;
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
if (count > 0) {
|
|
224
|
-
sum /= count;
|
|
225
|
-
// Steer towards the location
|
|
226
|
-
return this.steer(sum, false);
|
|
227
|
-
}
|
|
228
|
-
return sum;
|
|
229
|
-
}
|
|
230
|
-
});
|
|
231
|
-
|
|
232
|
-
var heartPath = new Path('M514.69629,624.70313c-7.10205,-27.02441 -17.2373,-52.39453 -30.40576,-76.10059c-13.17383,-23.70703 -38.65137,-60.52246 -76.44434,-110.45801c-27.71631,-36.64355 -44.78174,-59.89355 -51.19189,-69.74414c-10.5376,-16.02979 -18.15527,-30.74951 -22.84717,-44.14893c-4.69727,-13.39893 -7.04297,-26.97021 -7.04297,-40.71289c0,-25.42432 8.47119,-46.72559 25.42383,-63.90381c16.94775,-17.17871 37.90527,-25.76758 62.87354,-25.76758c25.19287,0 47.06885,8.93262 65.62158,26.79834c13.96826,13.28662 25.30615,33.10059 34.01318,59.4375c7.55859,-25.88037 18.20898,-45.57666 31.95215,-59.09424c19.00879,-18.32178 40.99707,-27.48535 65.96484,-27.48535c24.7373,0 45.69531,8.53564 62.87305,25.5957c17.17871,17.06592 25.76855,37.39551 25.76855,60.98389c0,20.61377 -5.04102,42.08691 -15.11719,64.41895c-10.08203,22.33203 -29.54687,51.59521 -58.40723,87.78271c-37.56738,47.41211 -64.93457,86.35352 -82.11328,116.8125c-13.51758,24.0498 -23.82422,49.24902 -30.9209,75.58594z');
|
|
233
|
-
|
|
234
|
-
var boids = [];
|
|
235
|
-
var groupTogether = false;
|
|
236
|
-
|
|
237
|
-
// Add the boids:
|
|
238
|
-
for (var i = 0; i < 30; i++) {
|
|
239
|
-
var position = Point.random() * view.size;
|
|
240
|
-
boids.push(new Boid(position, 10, 0.05));
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
function onFrame(event) {
|
|
245
|
-
for (var i = 0, l = boids.length; i < l; i++) {
|
|
246
|
-
if (groupTogether) {
|
|
247
|
-
var length = ((i + event.count / 30) % l) / l * heartPath.length;
|
|
248
|
-
var point = heartPath.getPointAt(length);
|
|
249
|
-
if (point)
|
|
250
|
-
boids[i].arrive(point);
|
|
251
|
-
}
|
|
252
|
-
boids[i].run(boids);
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
// Reposition the heart path whenever the window is resized:
|
|
257
|
-
function onResize(event) {
|
|
258
|
-
heartPath.fitBounds(view.bounds);
|
|
259
|
-
heartPath.scale(0.8);
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
function onMouseDown(event) {
|
|
263
|
-
groupTogether = !groupTogether;
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
function onKeyDown(event) {
|
|
267
|
-
if (event.key == 'space') {
|
|
268
|
-
var layer = project.activeLayer;
|
|
269
|
-
layer.selected = !layer.selected;
|
|
270
|
-
return false;
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
</script>
|
|
274
|
-
<style>
|
|
275
|
-
body {
|
|
276
|
-
background: black;
|
|
277
|
-
}
|
|
278
|
-
</style>
|
|
279
|
-
</head>
|
|
280
|
-
<body>
|
|
281
|
-
<canvas id="canvas" resize></canvas>
|
|
282
|
-
</body>
|
|
283
|
-
</html>
|