scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'refs/heads/master' into solve-cubic

Browse source 
Conflicts:
	src/path/Curve.js
	src/path/PathItem.Boolean.js
	src/util/Numerical.js
This commit is contained in:
Jürg Lehni 2015-01-02 15:33:23 +01:00
parent 6c6ad76c94
commit 878be7962e
248 changed files with 40120 additions and 39655 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.tm_properties
View file

@ -3,8 +3,8 @@ windowTitle = "$TM_DISPLAYNAME — Paper.js"
excludeDirectories = "{$excludeDirectories,dist,build/jsdoc-toolkit,node_modules,bower_components,patch,projects}"
# JavaScript coding conventions
showInvisibles = true
softTabs = false
showInvisibles = false
softTabs = true
tabSize = 4
softWrap = false
wrapColumn = 80

64
README.md
View file

@ -18,11 +18,11 @@ For OSX see <http://madebyhoundstooth.com/blog/install-node-with-homebrew-on-os-
For Linux see <http://nodejs.org/download/> to locate 32-bit and 64-bit nodejs binaries as well as sources. It is recommended that you download directly from the nodejs site; the version available via many OS-supplied package managers is out-of-date and doesn't work with many of the packages paper uses. NPM is now included with the nodejs distribution. Once nodejs (with npm) has been installed you can install bower using the following command:
npm install -g bower
npm install -g bower
With Bower installed, simply type this command in your project folder:
bower install paper
bower install paper
Upon execution, you will find a `paper` folder inside the project's `bower_components` folder. For more information on Bower and to learn about its features for dependence tracking, see <http://bower.io/>.
@ -42,57 +42,57 @@ You can also use NPM to install Paper.js for Node.js. But before doing so, you n
The easiest way to install Cairo is install Homebrew <http://mxcl.github.io/homebrew/> then issue the command:
brew install cairo
brew install cairo
Note that currently there is an issue on OSX with Cairo. If the above causes errors, the following will most likely fix it:
PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig/ npm install paper
PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig/ npm install paper
Also, whenever you would like to update the modules, you will need to execute:
PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig/ npm update
PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig/ npm update
**Installing Cairo on Debian/Ubuntu Linux:**
sudo apt-get install libcairo2-dev
sudo apt-get install libcairo2-dev
You might also need these additional packages if you don't usually build from c++ sources:
sudo apt-get install build-essential libssl-dev libjpeg8-dev libgif-dev
sudo apt-get install build-essential libssl-dev libjpeg8-dev libgif-dev
**After Cairo has been installed:**
You should now be able to install the Paper.js module from NPM:
npm install paper
npm install paper
## Development
**Get the source (for building):**
git clone --recursive git://github.com/paperjs/paper.js.git
git clone --recursive git://github.com/paperjs/paper.js.git
**Get the source (for contributing):**
If you want to contribute to the project you will have to [make a fork](http://help.github.com/forking/). Then do this:
git clone --recursive git@github.com:yourusername/paper.js.git
cd paper.js
git remote add upstream git://github.com/paperjs/paper.js.git
git clone --recursive git@github.com:yourusername/paper.js.git
cd paper.js
git remote add upstream git://github.com/paperjs/paper.js.git
### Refreshing Your Clone
To fetch changes from origin (your fork), run
git fetch origin
git fetch origin
If you are working with a fork and would like to fetch from upstream, run
git fetch upstream
git fetch upstream
To update the `jsdoc-toolkit` submodule inside the `build` folder, used to generate the documentation, run
git submodule update --init
git submodule update --init
### Building the Library
@ -100,41 +100,41 @@ Paper.js has a couple of dependencies as Bower and NPM modules. See <http://made
In order to be able to build Paper.js, after checking out the repository, paper has dependencies that need to be installed. Install them by issuing the following commands from the paper.js directory:
npm install
bower install
npm install
bower install
You might find that the npm command fails attempting to fetch packages needed for dependencies due to using https (the default protocol to access the npm registry). If that is the case you can switch to using http for registry access with the following command:
npm config set registry http://registry.npmjs.org/
npm config set registry http://registry.npmjs.org/
Next you need to create minified versions of some of these dependencies. This is handled by the `minify-components.sh` script inside the `build` folder:
cd build
./minify-components.sh
cd build
./minify-components.sh
The Paper.js sources are distributed across many separate files, organised in subfolders inside the `src` folder. To compile them all into one distributable file, you can run the `build.sh` script inside the `build` folder:
cd build
./build.sh
cd build
./build.sh
You will then find the built library inside the `dist` folder, named `paper.js`.
`build.sh` offer two modes:
commented Preprocessed but still formated and commented
stripped Formated but without comments (default)
commented Preprocessed but still formated and commented
stripped Formated but without comments (default)
In order to minify the resulting built versions, you can run the `minify.sh` script:
cd build
./minify.sh
cd build
./minify.sh
### Building the Documentation
Similarly to building the library, you can run `docs.sh` inside the `build` folder to build the documentation.
cd build
./docs.sh
cd build
./docs.sh
Your docs will then be located at `dist/docs`.
@ -142,13 +142,13 @@ Your docs will then be located at `dist/docs`.
As a handy alternative to building the library after each change to try it out in your scripts, there is a helper script `src/load.js` that loads the library directly from all the separate source files in the `src` folder. The shell script `load.sh` in the `build` folder produces a `paper.js` library in `dist` that does nothing else than loading the source files through `src/load.js`. This means you can switch between loading from sources and loading a built library simply by running `build.sh` or `load.sh` inside the `build` folder.
cd build
./load.sh
cd build
./load.sh
And to go back to a built library
cd build
./build.sh
cd build
./build.sh
Note that your PaperScripts examples do not need to change, they can keep loading `dist/paper-full.js`, which will always do the right thing. Note also that `src/load.js` handles both browsers and Node.js, through the handy PrePro JS preprocessing library <http://github.com/lehni/prepro.js>.

7
bower.json
View file

@ -1,6 +1,6 @@
{
"name": "paper",
"version": "0.9.18",
"version": "0.9.21",
"description": "The Swiss Army Knife of Vector Graphics Scripting",
"license": "MIT",
"homepage": "http://paperjs.org",
@ -24,9 +24,8 @@
"test"
],
"devDependencies": {
"straps": "~1.5.2",
"acorn": "git://github.com/paperjs/acorn#0.3.2",
"esprima": "~1.0.3",
"straps": "~1.7.0",
"acorn": "~0.4.0",
"stats.js": "r11"
},
"keywords": [

14
build/build.sh
View file

@ -14,30 +14,30 @@
# build.sh MODE
#
# MODE:
# commented Preprocessed, still formated and commented
# stripped Preprocessed, formated but without comments
# commented Preprocessed, still formated and commented
# stripped Preprocessed, formated but without comments
if [ $# -eq 0 ]
then
MODE="stripped"
MODE="stripped"
else
MODE=$1
MODE=$1
fi
# Create the dist folder if it does not exist yet.
if [ ! -d ../dist/ ]
then
mkdir ../dist/
mkdir ../dist/
fi
if [ -f ../dist/paper-full.js ]
then
rm ../dist/paper-full.js
rm ../dist/paper-full.js
fi
if [ -f ../dist/paper-node.js ]
then
rm ../dist/paper-node.js
rm ../dist/paper-node.js
fi
./preprocess.sh $MODE ../src/paper.js "-i '../src/constants.js'" ../dist/paper-full.js

12
build/docs.sh
View file

@ -13,14 +13,14 @@
# Generate documentation
#
# MODE:
# docs Generates the JS API docs - Default
# serverdocs Generates the website templates for the online JS API docs
# docs Generates the JS API docs - Default
# serverdocs Generates the website templates for the online JS API docs
if [ $# -eq 0 ]
then
MODE="docs"
MODE="docs"
else
MODE=$1
MODE=$1
fi
cd jsdoc-toolkit
@ -29,6 +29,6 @@ cd ..
if [ $MODE = "docs" ]
then
# Build paper.js library for documentation
./preprocess.sh stripped ../src/paper.js "-o '{ \"browser\": true }' -i '../src/constants.js'" ../dist/docs/assets/js/paper.js
# Build paper.js library for documentation
./preprocess.sh stripped ../src/paper.js "-o '{ \"browser\": true }' -i '../src/constants.js'" ../dist/docs/assets/js/paper.js
fi

2
build/jsdoc-toolkit

@ -1 +1 @@
Subproject commit 608ce74f16b77aec7546c924894f8080064047c4
Subproject commit ea345d5dc9c1024d2fcbfc7cc1669f8c23ac5c10

4
build/load.sh
View file

@ -16,12 +16,12 @@
if [ -f ../dist/paper-full.js ]
then
rm ../dist/paper-full.js
rm ../dist/paper-full.js
fi
if [ -f ../dist/paper-node.js ]
then
rm ../dist/paper-node.js
rm ../dist/paper-node.js
fi
ln -s ../src/load.js ../dist/paper-full.js

3
build/minify-components.sh
View file

@ -10,5 +10,4 @@
#
# All rights reserved.
../node_modules/.bin/uglifyjs ../bower_components/acorn/acorn.js -o ../bower_components/acorn/acorn.min.js -c -m -b ascii_only=true,beautify=false
../node_modules/.bin/uglifyjs ../bower_components/esprima/esprima.js -o ../bower_components/esprima/esprima.min.js -c -m -b ascii_only=true,beautify=false
../node_modules/.bin/uglifyjs ../bower_components/acorn/acorn.js -o ../bower_components/acorn/acorn.min.js -c -m -b ascii_only=true,beautify=falsefy=false

25
build/preprocess.sh
View file

@ -21,25 +21,24 @@
# preprocess.sh MODE SOURCE ARGUMENTS DESTINATION
#
# MODE:
# commented Preprocessed, still formated and commented
# stripped Preprocessed, formated but without comments
# commented Preprocessed, still formated and commented
# stripped Preprocessed, formated but without comments
# Get the date from the git log:
DATE=$(git log -1 --pretty=format:%ad)
# Load __options from options.js and convert it to escaped JSON, to be passed on
# to prepro:
OPTIONS=$(printf '%q' $(node -e "
eval(require('fs').readFileSync('../src/options.js', 'utf8'));
process.stdout.write(JSON.stringify(__options));
eval(require('fs').readFileSync('../src/options.js', 'utf8'));
process.stdout.write(JSON.stringify(__options));
"))
# Build the prepo.js command out of it, passing on version and date as defines:
COMMAND="../node_modules/.bin/prepro -o $OPTIONS -o '{ \"date\": \"$DATE\", \"stats\": false }' $3 $2"
COMMAND="../node_modules/.bin/prepro -o $OPTIONS -o '{ \"date\": \"$DATE\" }' $3 $2"
# Flags to pass to prepro
if [ $1 = "stripped" ]; then FLAGS="-c"; else FLAGS=""; fi
case $1 in
commented)
eval $COMMAND > $4
;;
stripped)
eval "$COMMAND -c" > $4
;;
esac
eval "$COMMAND $FLAGS" > $4
# Now convert 4 spaces to tabs, to shave of some bytes (quite a few KB actually)
unexpand -t 4 -a $4 > "$4-tabs" && mv "$4-tabs" $4
# Remove trailing white-space on each line
perl -p -i -e "s/[ \t]*$//g" $4

21
build/publish.sh
View file

@ -12,18 +12,18 @@
# Extract the paper.js version from options.js:
VERSION=$(printf '%q' $(node -e "
eval(require('fs').readFileSync('../src/options.js', 'utf8'));
process.stdout.write(__options.version);
eval(require('fs').readFileSync('../src/options.js', 'utf8'));
process.stdout.write(__options.version);
"))
# Helper function that updates paper.js vesion in JSON files
function update_version()
{
node -e "
var data = require('$1');
data.version = '$VERSION';
require('fs').writeFile('$1',
JSON.stringify(data, null, ' ') + require('os').EOL);
var data = require('$1');
data.version = '$VERSION';
require('fs').writeFile('$1',
JSON.stringify(data, null, ' ') + require('os').EOL);
"
}
@ -50,16 +50,15 @@ git add -u component.json
git add -u dist
# Commit
git commit -m "Bump version to v$VERSION"
# Tag
# Tag & Push
git tag "v$VERSION"
# Push
git push --follow-tags
git push
git push --tags
# Publish
npm publish
# Copy paperjs.zip to the website's download folder
cd $SITE_DIR
echo `PWD`
cp $PAPER_DIR/dist/paperjs.zip $DIST_FILE
# Update the online version of paper.js
cp $PAPER_DIR/dist/paper-full.js assets/js/paper.js
@ -67,7 +66,7 @@ cp $PAPER_DIR/dist/paper-full.js assets/js/paper.js
git add -A $DIST_FILE
git add -u assets/js/paper.js
git commit -m "Release version v$VERSION"
# Tag
# Tag & Push
git tag "v$VERSION"
git push
git push --tags

2
build/zip.sh
View file

@ -31,7 +31,7 @@ cp -r $BASE/dist/docs .
# Erase the old Zip file
if [ -f $BASE/dist/paperjs.zip ]
then
rm $BASE/dist/paperjs.zip
rm $BASE/dist/paperjs.zip
fi
# Zip the whole thing
zip -9 -r $BASE/dist/paperjs.zip * LICENSE.txt -x "*/.DS_Store"

2
component.json
View file

@ -1,6 +1,6 @@
{
"name": "paper",
"version": "0.9.18",
"version": "0.9.21",
"description": "The Swiss Army Knife of Vector Graphics Scripting",
"license": "MIT",
"repo": "paperjs/paper.js",

2212
dist/paper-core.js vendored
View file

File diff suppressed because it is too large Load diff

16
dist/paper-core.min.js vendored
View file

File diff suppressed because one or more lines are too long

2632
dist/paper-full.js vendored
View file

File diff suppressed because one or more lines are too long

18
dist/paper-full.min.js vendored
View file

File diff suppressed because one or more lines are too long

2259
dist/paper-node.js vendored
View file

File diff suppressed because one or more lines are too long

82
examples/Animated/AnimatedStar.html
View file

@ -1,53 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animated Star</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var layer = project.activeLayer;
<meta charset="UTF-8">
<title>Animated Star</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var layer = project.activeLayer;
var values = {
count: 34,
points: 32
};
var values = {
count: 34,
points: 32
};
for (var i = 0; i < values.count; i++) {
var path = new Path({
fillColor: i % 2 ? 'red' : 'black',
closed: true
});
for (var i = 0; i < values.count; i++) {
var path = new Path({
fillColor: i % 2 ? 'red' : 'black',
closed: true
});
var offset = new Point(20 + 10 * i, 0);
var l = offset.length;
for (var j = 0; j < values.points * 2; j++) {
offset.angle += 360 / values.points;
var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
path.add(offset + vector);
}
path.smooth();
layer.insertChild(0, new Group({
children: [path],
applyMatrix: false
}));
}
var offset = new Point(20 + 10 * i, 0);
var l = offset.length;
for (var j = 0; j < values.points * 2; j++) {
offset.angle += 360 / values.points;
var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
path.add(offset + vector);
}
path.smooth();
layer.insertChild(0, new Group({
children: [path],
applyMatrix: false
}));
}
function onFrame(event) {
for (var i = 0; i < values.count; i++) {
var item = layer.children[i];
var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
item.rotate(angle);
}
}
function onFrame(event) {
for (var i = 0; i < values.count; i++) {
var item = layer.children[i];
var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
item.rotate(angle);
}
}
// Reposition the paths whenever the window is resized:
function onResize(event) {
layer.position = view.center;
}
</script>
// Reposition the paths whenever the window is resized:
function onResize(event) {
layer.position = view.center;
}
</script>
</head>
<body>
<canvas id="canvas" resize stats hidpi="off"></canvas>
<canvas id="canvas" resize stats hidpi="off"></canvas>
</body>
</html>

115
examples/Animated/BooleanOperations.html Normal file
View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boolean Operations</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var text = new PointText({
position: view.center + [0, 200],
fillColor: 'black',
justification: 'center',
fontSize: 20
});
var originals = new Group({ insert: false }); // Don't insert in DOM.
var square = new Path.Rectangle({
position: view.center,
size: 300,
parent: originals,
fillColor: 'white'
});
// Make a ring using subtraction of two circles:
var inner = new Path.Circle({
center: view.center,
radius: 100,
insert: false
});
var outer = new Path.Circle({
center: view.center,
radius: 140,
insert: false
});
var ring = outer.subtract(inner);
ring.parent = originals;
ring.fillColor = 'white';
var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
var colors = ['red', 'green', 'blue', 'black'];
var curIndex = -1;
var operation, result, activeItem;
// Change the mode every 3 seconds:
setInterval(setMode, 3000);
// Set the initial mode:
setMode();
function setMode() {
curIndex++;
if (curIndex == operations.length * 2)
curIndex = 0;
operation = operations[curIndex % operations.length];
}
function onMouseDown(event) {
var hitResult = originals.hitTest(event.point);
activeItem = hitResult && hitResult.item;
}
function onMouseDrag(event) {
if (activeItem)
activeItem.position = event.point;
}
function onMouseUp() {
activeItem = null;
square.position = view.center;
}
function onFrame(event) {
if (activeItem != ring) {
// Move the ring around:
var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
ring.position = view.center + offset;
}
// Remove the result of the last path operation:
if (result)
result.remove();
// Perform the path operation on the ring:
if (curIndex < operations.length) {
result = square[operation](ring);
text.content = 'square.' + operation + '(ring)';
} else {
result = ring[operation](square);
text.content = 'ring.' + operation + '(square)';
}
result.selected = true;
result.fillColor = colors[curIndex % operations.length];
result.moveBelow(text);
// If the result is a group, color each of its children differently:
if (result instanceof Group) {
for (var i = 0; i < result.children.length; i++) {
result.children[i].fillColor = colors[i];
}
}
};
function onResize() {
text.position = view.center + [0, 200];
square.position = view.center;
}
</script>
</head>
<body>
<canvas id="canvas" resize stats></canvas>
</body>
</html>

256
examples/Animated/CandyCrash.html
View file

@ -1,151 +1,151 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Candy Crash</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// kynd.info 2014
<meta charset="UTF-8">
<title>Candy Crash</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// kynd.info 2014
function Ball(r, p, v) {
this.radius = r;
this.point = p;
this.vector = v;
this.maxVec = 15;
this.numSegment = Math.floor(r / 3 + 2);
this.boundOffset = [];
this.boundOffsetBuff = [];
this.sidePoints = [];
this.path = new Path({
fillColor: {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
},
blendMode: 'screen'
});
function Ball(r, p, v) {
this.radius = r;
this.point = p;
this.vector = v;
this.maxVec = 15;
this.numSegment = Math.floor(r / 3 + 2);
this.boundOffset = [];
this.boundOffsetBuff = [];
this.sidePoints = [];
this.path = new Path({
fillColor: {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
},
blendMode: 'screen'
});
for (var i = 0; i < this.numSegment; i ++) {
this.boundOffset.push(this.radius);
this.boundOffsetBuff.push(this.radius);
this.path.add(new Point());
this.sidePoints.push(new Point({
angle: 360 / this.numSegment * i,
length: 1
}));
}
}
for (var i = 0; i < this.numSegment; i ++) {
this.boundOffset.push(this.radius);
this.boundOffsetBuff.push(this.radius);
this.path.add(new Point());
this.sidePoints.push(new Point({
angle: 360 / this.numSegment * i,
length: 1
}));
}
}
Ball.prototype = {
iterate: function() {
this.checkBorders();
if (this.vector.length > this.maxVec)
this.vector.length = this.maxVec;
this.point += this.vector;
this.updateShape();
},
Ball.prototype = {
iterate: function() {
this.checkBorders();
if (this.vector.length > this.maxVec)
this.vector.length = this.maxVec;
this.point += this.vector;
this.updateShape();
},
checkBorders: function() {
var size = view.size;
if (this.point.x < -this.radius)
this.point.x = size.width + this.radius;
if (this.point.x > size.width + this.radius)
this.point.x = -this.radius;
if (this.point.y < -this.radius)
this.point.y = size.height + this.radius;
if (this.point.y > size.height + this.radius)
this.point.y = -this.radius;
},
checkBorders: function() {
var size = view.size;
if (this.point.x < -this.radius)
this.point.x = size.width + this.radius;
if (this.point.x > size.width + this.radius)
this.point.x = -this.radius;
if (this.point.y < -this.radius)
this.point.y = size.height + this.radius;
if (this.point.y > size.height + this.radius)
this.point.y = -this.radius;
},
updateShape: function() {
var segments = this.path.segments;
for (var i = 0; i < this.numSegment; i ++)
segments[i].point = this.getSidePoint(i);
updateShape: function() {
var segments = this.path.segments;
for (var i = 0; i < this.numSegment; i ++)
segments[i].point = this.getSidePoint(i);
this.path.smooth();
for (var i = 0; i < this.numSegment; i ++) {
if (this.boundOffset[i] < this.radius / 4)
this.boundOffset[i] = this.radius / 4;
var next = (i + 1) % this.numSegment;
var prev = (i > 0) ? i - 1 : this.numSegment - 1;
var offset = this.boundOffset[i];
offset += (this.radius - offset) / 15;
offset += ((this.boundOffset[next] + this.boundOffset[prev]) / 2 - offset) / 3;
this.boundOffsetBuff[i] = this.boundOffset[i] = offset;
}
},
this.path.smooth();
for (var i = 0; i < this.numSegment; i ++) {
if (this.boundOffset[i] < this.radius / 4)
this.boundOffset[i] = this.radius / 4;
var next = (i + 1) % this.numSegment;
var prev = (i > 0) ? i - 1 : this.numSegment - 1;
var offset = this.boundOffset[i];
offset += (this.radius - offset) / 15;
offset += ((this.boundOffset[next] + this.boundOffset[prev]) / 2 - offset) / 3;
this.boundOffsetBuff[i] = this.boundOffset[i] = offset;
}
},
react: function(b) {
var dist = this.point.getDistance(b.point);
if (dist < this.radius + b.radius && dist != 0) {
var overlap = this.radius + b.radius - dist;
var direc = (this.point - b.point).normalize(overlap * 0.015);
this.vector += direc;
b.vector -= direc;
react: function(b) {
var dist = this.point.getDistance(b.point);
if (dist < this.radius + b.radius && dist != 0) {
var overlap = this.radius + b.radius - dist;
var direc = (this.point - b.point).normalize(overlap * 0.015);
this.vector += direc;
b.vector -= direc;
this.calcBounds(b);
b.calcBounds(this);
this.updateBounds();
b.updateBounds();
}
},
this.calcBounds(b);
b.calcBounds(this);
this.updateBounds();
b.updateBounds();
}
},
getBoundOffset: function(b) {
var diff = this.point - b;
var angle = (diff.angle + 180) % 360;
return this.boundOffset[Math.floor(angle / 360 * this.boundOffset.length)];
},
getBoundOffset: function(b) {
var diff = this.point - b;
var angle = (diff.angle + 180) % 360;
return this.boundOffset[Math.floor(angle / 360 * this.boundOffset.length)];
},
calcBounds: function(b) {
for (var i = 0; i < this.numSegment; i ++) {
var tp = this.getSidePoint(i);
var bLen = b.getBoundOffset(tp);
var td = tp.getDistance(b.point);
if (td < bLen) {
this.boundOffsetBuff[i] -= (bLen - td) / 2;
}
}
},
calcBounds: function(b) {
for (var i = 0; i < this.numSegment; i ++) {
var tp = this.getSidePoint(i);
var bLen = b.getBoundOffset(tp);
var td = tp.getDistance(b.point);
if (td < bLen) {
this.boundOffsetBuff[i] -= (bLen - td) / 2;
}
}
},
getSidePoint: function(index) {
return this.point + this.sidePoints[index] * this.boundOffset[index];
},
getSidePoint: function(index) {
return this.point + this.sidePoints[index] * this.boundOffset[index];
},
updateBounds: function() {
for (var i = 0; i < this.numSegment; i ++)
this.boundOffset[i] = this.boundOffsetBuff[i];
}
};
updateBounds: function() {
for (var i = 0; i < this.numSegment; i ++)
this.boundOffset[i] = this.boundOffsetBuff[i];
}
};
//--------------------- main ---------------------
//--------------------- main ---------------------
var balls = [];
var numBalls = 18;
for (var i = 0; i < numBalls; i++) {
var position = Point.random() * view.size;
var vector = new Point({
angle: 360 * Math.random(),
length: Math.random() * 10
});
var radius = Math.random() * 60 + 60;
balls.push(new Ball(radius, position, vector));
}
var balls = [];
var numBalls = 18;
for (var i = 0; i < numBalls; i++) {
var position = Point.random() * view.size;
var vector = new Point({
angle: 360 * Math.random(),
length: Math.random() * 10
});
var radius = Math.random() * 60 + 60;
balls.push(new Ball(radius, position, vector));
}
function onFrame() {
for (var i = 0; i < balls.length - 1; i++) {
for (var j = i + 1; j < balls.length; j++) {
balls[i].react(balls[j]);
}
}
for (var i = 0, l = balls.length; i < l; i++) {
balls[i].iterate();
}
}
function onFrame() {
for (var i = 0; i < balls.length - 1; i++) {
for (var j = i + 1; j < balls.length; j++) {
balls[i].react(balls[j]);
}
}
for (var i = 0, l = balls.length; i < l; i++) {
balls[i].iterate();
}
}
</script>
</script>
</head>
<body>
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
</body>
</html>

76
examples/Animated/Extruded.html
View file

@ -1,50 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Extruded</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var lineGroup = new Group();
var lineCount = 100;
for (var i = 0; i < lineCount; i++) {
var linePath = new Path.Line([0, 0], [0, 0]);
lineGroup.addChild(linePath);
}
lineGroup.strokeColor = 'red';
<meta charset="UTF-8">
<title>Extruded</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var lineGroup = new Group();
var lineCount = 100;
for (var i = 0; i < lineCount; i++) {
var linePath = new Path.Line([0, 0], [0, 0]);
lineGroup.addChild(linePath);
}
lineGroup.strokeColor = 'red';
var path1 = new Path('M63.39307,265.71387c10.8667,6.96631 26.4707,12.26025 43.18896,12.26025c24.79932,0 39.28857,-13.09619 39.28857,-32.04346c0,-17.27588 -10.03125,-27.58545 -35.38721,-37.05908c-30.65088,-11.146 -49.59814,-27.30713 -49.59814,-53.49902c0,-29.25732 24.2417,-50.9917 60.74365,-50.9917c18.94727,0 33.1582,4.4585 41.23877,9.19531L156.18018,133.35986c-5.85156,-3.62256 -18.39014,-8.9165 -35.38721,-8.9165c-25.63525,0 -35.3877,15.3252 -35.3877,28.14258c0,17.5542 11.42432,26.19238 37.33789,36.22314c31.76514,12.26025 47.64795,27.58545 47.64795,55.1709c0,28.979 -21.17676,54.33496 -65.48096,54.33496c-18.11133,0 -37.89502,-5.57275 -47.92578,-12.26025z');
path1.position = view.center;
var path1 = new Path('M63.39307,265.71387c10.8667,6.96631 26.4707,12.26025 43.18896,12.26025c24.79932,0 39.28857,-13.09619 39.28857,-32.04346c0,-17.27588 -10.03125,-27.58545 -35.38721,-37.05908c-30.65088,-11.146 -49.59814,-27.30713 -49.59814,-53.49902c0,-29.25732 24.2417,-50.9917 60.74365,-50.9917c18.94727,0 33.1582,4.4585 41.23877,9.19531L156.18018,133.35986c-5.85156,-3.62256 -18.39014,-8.9165 -35.38721,-8.9165c-25.63525,0 -35.3877,15.3252 -35.3877,28.14258c0,17.5542 11.42432,26.19238 37.33789,36.22314c31.76514,12.26025 47.64795,27.58545 47.64795,55.1709c0,28.979 -21.17676,54.33496 -65.48096,54.33496c-18.11133,0 -37.89502,-5.57275 -47.92578,-12.26025z');
path1.position = view.center;
var path2 = path1.clone();
path1.scale(1.5);
path2.scale(2);
var path2 = path1.clone();
path1.scale(1.5);
path2.scale(2);
var length1 = path1.length;
var length2 = path2.length;
function onFrame(event) {
var vector = new Point({
angle: -event.count % 360,
length: 100
});
path1.rotate(-0.5);
path1.position = view.center - vector;
var length1 = path1.length;
var length2 = path2.length;
function onFrame(event) {
var vector = new Point({
angle: -event.count % 360,
length: 100
});
path1.rotate(-0.5);
path1.position = view.center - vector;
path2.rotate(-0.5);
path2.position = view.center + vector.normalize(50);
path2.rotate(-0.5);
path2.position = view.center + vector.normalize(50);
for (var i = 0; i < lineCount; i++) {
var path = lineGroup.children[i];
var l1 = (length1 / lineCount * (i + event.count / 10)) % length1;
var l2 = (length2 / lineCount * (i + event.count / 10)) % length2;
path.firstSegment.point = path1.getPointAt(l1),
path.lastSegment.point = path2.getPointAt(l2);
}
}
</script>
for (var i = 0; i < lineCount; i++) {
var path = lineGroup.children[i];
var l1 = (length1 / lineCount * (i + event.count / 10)) % length1;
var l2 = (length2 / lineCount * (i + event.count / 10)) % length2;
path.firstSegment.point = path1.getPointAt(l1),
path.lastSegment.point = path2.getPointAt(l2);
}
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

84
examples/Animated/Lines.html
View file

@ -1,53 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lines</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var amount = 45;
for (var i = 0; i < amount; i++) {
var path = new Path({
fillColor: {
hue: 1,
saturation: 1,
brightness: Math.random()
},
closed: true
});
}
<meta charset="UTF-8">
<title>Lines</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var amount = 45;
for (var i = 0; i < amount; i++) {
var path = new Path({
fillColor: {
hue: 1,
saturation: 1,
brightness: Math.random()
},
closed: true
});
}
var position = view.center;
var mousePos = view.center;
var children = project.activeLayer.children;
var position = view.center;
var mousePos = view.center;
var children = project.activeLayer.children;
function iterate(count) {
var delta = mousePos - position;
position += delta / 10;
for (var i = 1; i < amount; i++) {
var path = children[i];
var length = Math.abs(Math.sin(i + count / 40) * 300);
path.segments = [
position + delta / 1.5,
position + { angle: i / amount * 360, length: length },
position + { angle: (i + 1) / amount * 360, length: length }
];
path.fillColor.hue = count - length;
}
}
function iterate(count) {
var delta = mousePos - position;
position += delta / 10;
for (var i = 1; i < amount; i++) {
var path = children[i];
var length = Math.abs(Math.sin(i + count / 40) * 300);
path.segments = [
position + delta / 1.5,
position + { angle: i / amount * 360, length: length },
position + { angle: (i + 1) / amount * 360, length: length }
];
path.fillColor.hue = count - length;
}
}
function onFrame(event) {
iterate(event.count);
}
function onFrame(event) {
iterate(event.count);
}
function onMouseMove(event) {
iterate();
mousePos = event.point;
}
</script>
function onMouseMove(event) {
iterate();
mousePos = event.point;
}
</script>
</head>
<body style="background:black">
<canvas id="canvas" resize></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

116
examples/Animated/Smoothing.html
View file

@ -1,70 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Smoothing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var width, height, center;
var points = 10;
var smooth = true;
var path = new Path({
fillColor: 'black'
});
var mousePos = view.center / 2;
var pathHeight = mousePos.y;
initializePath();
<meta charset="UTF-8">
<title>Smoothing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var width, height, center;
var points = 10;
var smooth = true;
var path = new Path({
fillColor: 'black'
});
var mousePos = view.center / 2;
var pathHeight = mousePos.y;
initializePath();
function initializePath() {
center = view.center;
width = view.size.width;
height = view.size.height / 2;
path.segments = [];
path.add(view.bounds.bottomLeft);
for (var i = 1; i < points; i++) {
var point = new Point(width / points * i, center.y);
path.add(point);
}
path.add(view.bounds.bottomRight);
path.fullySelected = true;
}
function initializePath() {
center = view.center;
width = view.size.width;
height = view.size.height / 2;
path.segments = [];
path.add(view.bounds.bottomLeft);
for (var i = 1; i < points; i++) {
var point = new Point(width / points * i, center.y);
path.add(point);
}
path.add(view.bounds.bottomRight);
path.fullySelected = true;
}
function onFrame(event) {
pathHeight += (center.y - mousePos.y - pathHeight) / 10;
for (var i = 1; i < points; i++) {
var sinSeed = event.count + (i + i % 10) * 100;
var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
path.segments[i].point.y = yPos;
}
if (smooth)
path.smooth();
}
function onFrame(event) {
pathHeight += (center.y - mousePos.y - pathHeight) / 10;
for (var i = 1; i < points; i++) {
var sinSeed = event.count + (i + i % 10) * 100;
var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
path.segments[i].point.y = yPos;
}
if (smooth)
path.smooth();
}
function onMouseMove(event) {
mousePos = event.point;
}
function onMouseMove(event) {
mousePos = event.point;
}
function onMouseDown(event) {
smooth = !smooth;
if (!smooth) {
// If smooth has been turned off, we need to reset
// the handles of the path:
for (var i = 0, l = path.segments.length; i < l; i++) {
var segment = path.segments[i];
segment.handleIn = segment.handleOut = null;
}
}
}
function onMouseDown(event) {
smooth = !smooth;
if (!smooth) {
// If smooth has been turned off, we need to reset
// the handles of the path:
for (var i = 0, l = path.segments.length; i < l; i++) {
var segment = path.segments[i];
segment.handleIn = segment.handleOut = null;
}
}
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

134
examples/Animated/Space.html
View file

@ -1,86 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Space</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// The amount of symbol we want to place;
var count = 150;
<meta charset="UTF-8">
<title>Space</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// The amount of symbol we want to place;
var count = 150;
// Create a symbol, which we will use to place instances of later:
var path = new Path.Circle({
center: new Point(0, 0),
radius: 5,
fillColor: 'white',
strokeColor: 'black'
});
// Create a symbol, which we will use to place instances of later:
var path = new Path.Circle({
center: new Point(0, 0),
radius: 5,
fillColor: 'white',
strokeColor: 'black'
});
var symbol = new Symbol(path);
var symbol = new Symbol(path);
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placed = symbol.place(center);
var scale = (i + 1) / count;
placed.scale(scale);
placed.data.vector = new Point({
angle: Math.random() * 360,
length : scale * Math.random() / 5
});
}
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placed = symbol.place(center);
var scale = (i + 1) / count;
placed.scale(scale);
placed.data.vector = new Point({
angle: Math.random() * 360,
length : scale * Math.random() / 5
});
}
var vector = new Point({
angle: 45,
length: 0
});
var vector = new Point({
angle: 45,
length: 0
});
var mouseVector = vector.clone();
var mouseVector = vector.clone();
function onMouseMove(event) {
mouseVector = view.center - event.point;
}
function onMouseMove(event) {
mouseVector = view.center - event.point;
}
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
vector = vector + (mouseVector - vector) / 30;
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
vector = vector + (mouseVector - vector) / 30;
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
var size = item.bounds.size;
var length = vector.length / 10 * size.width / 10;
item.position += vector.normalize(length) + item.data.vector;
keepInView(item);
}
}
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
var size = item.bounds.size;
var length = vector.length / 10 * size.width / 10;
item.position += vector.normalize(length) + item.data.vector;
keepInView(item);
}
}
function keepInView(item) {
var position = item.position;
var itemBounds = item.bounds;
var bounds = view.bounds;
if (itemBounds.left > bounds.width) {
position.x = -item.bounds.width;
}
function keepInView(item) {
var position = item.position;
var itemBounds = item.bounds;
var bounds = view.bounds;
if (itemBounds.left > bounds.width) {
position.x = -item.bounds.width;
}
if (position.x < -itemBounds.width) {
position.x = bounds.width + itemBounds.width;
}
if (position.x < -itemBounds.width) {
position.x = bounds.width + itemBounds.width;
}
if (itemBounds.top > view.size.height) {
position.y = -itemBounds.height;
}
if (itemBounds.top > view.size.height) {
position.y = -itemBounds.height;
}
if (position.y < -itemBounds.height) {
position.y = bounds.height + itemBounds.height / 2;
}
}
</script>
if (position.y < -itemBounds.height) {
position.y = bounds.height + itemBounds.height / 2;
}
}
</script>
</head>
<body>
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
</body>
</html>

122
examples/Animated/SpaceUsingShapes.html
View file

@ -1,79 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Space</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// The amount of symbol we want to place;
var count = 150;
<meta charset="UTF-8">
<title>Space</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// The amount of symbol we want to place;
var count = 150;
project.currentStyle = {
fillColor: 'white'
};
project.currentStyle = {
fillColor: 'white'
};
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var scale = (i + 1) / count;
var path = new Shape.Circle(center, 5 * scale);
path.data.vector = new Point({
angle: Math.random() * 360,
length : scale * Math.random() / 5
});
}
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var scale = (i + 1) / count;
var path = new Shape.Circle(center, 5 * scale);
path.data.vector = new Point({
angle: Math.random() * 360,
length : scale * Math.random() / 5
});
}
var vector = new Point({
angle: 45,
length: 0
});
var vector = new Point({
angle: 45,
length: 0
});
var mouseVector = vector.clone();
var mouseVector = vector.clone();
function onMouseMove(event) {
mouseVector = view.center - event.point;
}
function onMouseMove(event) {
mouseVector = view.center - event.point;
}
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
vector = vector + (mouseVector - vector) / 30;
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
vector = vector + (mouseVector - vector) / 30;
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
var size = item.bounds.size;
var length = vector.length / 10 * size.width / 10;
item.position += vector.normalize(length) + item.data.vector;
keepInView(item);
}
}
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
var size = item.bounds.size;
var length = vector.length / 10 * size.width / 10;
item.position += vector.normalize(length) + item.data.vector;
keepInView(item);
}
}
function keepInView(item) {
var position = item.position;
var itemBounds = item.bounds;
var bounds = view.bounds;
if (itemBounds.left > bounds.width) {
position.x = -item.bounds.width;
}
function keepInView(item) {
var position = item.position;
var itemBounds = item.bounds;
var bounds = view.bounds;
if (itemBounds.left > bounds.width) {
position.x = -item.bounds.width;
}
if (position.x < -itemBounds.width) {
position.x = bounds.width + itemBounds.width;
}
if (position.x < -itemBounds.width) {
position.x = bounds.width + itemBounds.width;
}
if (itemBounds.top > view.size.height) {
position.y = -itemBounds.height;
}
if (itemBounds.top > view.size.height) {
position.y = -itemBounds.height;
}
if (position.y < -itemBounds.height) {
position.y = bounds.height + itemBounds.height / 2;
}
}
</script>
if (position.y < -itemBounds.height) {
position.y = bounds.height + itemBounds.height / 2;
}
}
</script>
</head>
<body>
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
</body>
</html>

1010
examples/Games/Paperoids.html
View file

File diff suppressed because it is too large Load diff

73
examples/Interface/Palette.html
View file

@ -1,73 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Palette</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var values = {
number: 1,
string: 200,
checkbox: true,
list: 'Two',
text: 'Hello World!'
};
var components = {
number: {
type: 'number',
label: 'A Number',
step: 2.5
},
string: {
type: 'string',
label: 'A String'
},
checkbox: {
type: 'boolean',
label: 'A Checkbox',
onChange: function(value) {
values.list = value ? 'Two' : 'One';
}
},
list: {
type: 'list',
label: 'A List',
options: [ 'One', 'Two', 'Three' ]
},
text: {
type: 'text',
label: 'A Text'
},
button: {
type: 'button',
label: 'A Button',
value: 'Click Me!',
onClick: function() {
console.log('Resetting');
palette.reset();
values.text = 'You clicked!';
}
},
slider: {
type: 'slider',
label: 'A Slider',
value: 10,
range: [0, 50],
step: 10
}
};
var palette = new Palette('Values', components, values);
palette.onChange = function(component, name, value) {
console.log(name + ' = ' + value, component);
}
values.number = 10;
values.string = 'Woop woop';
values.list = 'Three';
console.log(JSON.stringify(values));
</script>
</head>
<body>
<canvas id="canvas" width="640" height="100"></canvas>
</body>
</html>

50
examples/JSON/Circle Testing.html
View file

@ -1,34 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Circle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var topLeft = new Point(200, 200);
var size = new Size(150, 100);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'black';
<meta charset="UTF-8">
<title>Circle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var topLeft = new Point(200, 200);
var size = new Size(150, 100);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'black';
var topLeft = new Point(5, 400);
var size = new Size(100, 50);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'yellow';
var topLeft = new Point(5, 400);
var size = new Size(100, 50);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'yellow';
var path = new Path.Circle(new Point(50, 50), 25);
path.fillColor = 'red';
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
var path = new Path.Circle(new Point(50, 50), 25);
path.fillColor = 'red';
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

36
examples/JSON/Compound Path.html
View file

@ -1,25 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Compound Path</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
project.currentStyle.fillColor = 'black';
var path1 = new Path.Rectangle([200, 200], [100, 100]);
var path2 = new Path.Rectangle([50, 50], [200, 200]);
var path3 = new Path.Rectangle([0, 0], [400, 400]);
new CompoundPath(path1, path2, path3);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
<meta charset="UTF-8">
<title>Compound Path</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
project.currentStyle.fillColor = 'black';
var path1 = new Path.Rectangle([200, 200], [100, 100]);
var path2 = new Path.Rectangle([50, 50], [200, 200]);
var path3 = new Path.Rectangle([0, 0], [400, 400]);
new CompoundPath(path1, path2, path3);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

42
examples/JSON/Empty Path Testing.html
View file

@ -1,31 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Empty Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path();
path.strokeColor = 'black';
path.add(new Point(30, 30));
path.add(new Point(100, 100));
<meta charset="UTF-8">
<title>Empty Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path();
path.strokeColor = 'black';
path.add(new Point(30, 30));
path.add(new Point(100, 100));
var segments = [new Point(30, 90), new Point(100, 150)];
var path2 = new Path(segments);
path2.strokeColor = 'yellow';
var segments = [new Point(30, 90), new Point(100, 150)];
var path2 = new Path(segments);
path2.strokeColor = 'yellow';
var path3 = new Path();
var path3 = new Path();
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

44
examples/JSON/Gradients.html
View file

@ -1,29 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
path.fillColor = {
// gradient: [['yellow', 'red', 'black'], true],
stops: ['yellow', 'red', 'black'],
radial: true,
origin: path.position,
destination: path.bounds.rightCenter
}
path.strokeColor = 'black';
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
<meta charset="UTF-8">
<title>Gradients</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
path.fillColor = {
// gradient: [['yellow', 'red', 'black'], true],
stops: ['yellow', 'red', 'black'],
radial: true,
origin: path.position,
destination: path.bounds.rightCenter
}
path.strokeColor = 'black';
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

42
examples/JSON/Group Transform.html
View file

@ -1,28 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group Transform</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var circle1 = new Path.Circle(new Point(100, 100), 50);
circle1.fillColor = 'red';
var circle2 = new Path.Circle(new Point(200, 100), 50);
circle2.fillColor = 'blue';
var group = new Group(circle1, circle2);
group.translate([100, 100]);
group.scale(0.5);
group.rotate(10);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
<meta charset="UTF-8">
<title>Group Transform</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var circle1 = new Path.Circle(new Point(100, 100), 50);
circle1.fillColor = 'red';
var circle2 = new Path.Circle(new Point(200, 100), 50);
circle2.fillColor = 'blue';
var group = new Group(circle1, circle2);
group.translate([100, 100]);
group.scale(0.5);
group.rotate(10);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

68
examples/JSON/Line Testing.html
View file

@ -1,44 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var x1 = 5,
x2 = 45,
y1 = 5,
y2 = 45;
var line1 = new Path.Line([x1, y1], [x2, y2]);
line1.strokeColor = "blue";
line1.strokeWidth = "10";
<meta charset="UTF-8">
<title>Line Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var x1 = 5,
x2 = 45,
y1 = 5,
y2 = 45;
var line1 = new Path.Line([x1, y1], [x2, y2]);
line1.strokeColor = "blue";
line1.strokeWidth = "10";
var x3 = 20,
x4 = 99,
y3 = 20,
y4 = 77;
var line2 = new Path.Line([x3, y3], [x4, y4]);
line2.strokeColor = "red";
line2.strokeWidth = "2";
var x3 = 20,
x4 = 99,
y3 = 20,
y4 = 77;
var line2 = new Path.Line([x3, y3], [x4, y4]);
line2.strokeColor = "red";
line2.strokeWidth = "2";
var x5 = 50,
x6 = 200,
y5 = 55,
y6 = 300;
var line3 = new Path.Line([x5, y5], [x6, y6]);
line3.strokeColor = "yellow";
line3.strokeWidth = "5";
var x5 = 50,
x6 = 200,
y5 = 55,
y6 = 300;
var line3 = new Path.Line([x5, y5], [x6, y6]);
line3.strokeColor = "yellow";
line3.strokeWidth = "5";
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

64
examples/JSON/Random Path Testing.html
View file

@ -1,42 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Random Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var center = new Point(100, 100);
var sides = 3;
var radius = 50;
var triangle = new Path.RegularPolygon(center, sides, radius);
triangle.fillColor = 'black';
copy = triangle.clone();
copy.strokeColor = 'blue';
copy.rotate(45);
<meta charset="UTF-8">
<title>Random Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var center = new Point(100, 100);
var sides = 3;
var radius = 50;
var triangle = new Path.RegularPolygon(center, sides, radius);
triangle.fillColor = 'black';
copy = triangle.clone();
copy.strokeColor = 'blue';
copy.rotate(45);
var center = new Point(100, 300);
var sides = 10;
var radius = 50;
var decahedron = new Path.RegularPolygon(center, sides, radius);
decahedron.fillColor = 'black';
var center = new Point(100, 300);
var sides = 10;
var radius = 50;
var decahedron = new Path.RegularPolygon(center, sides, radius);
decahedron.fillColor = 'black';
var center = new Point(100, 400);
var points = 6;
var radius1 = 20;
var radius2 = 50;
var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black';
var center = new Point(100, 400);
var points = 6;
var radius1 = 20;
var radius2 = 50;
var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black';
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

44
examples/JSON/Raster.html
View file

File diff suppressed because one or more lines are too long

90
examples/JSON/Rect and Attribute Testing.html
View file

@ -1,56 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var point1 = new Point(10, 10);
var size1 = new Size(50, 50);
var rectangle1 = new Rectangle(point1, size1);
var path1 = new Path.Rectangle(rectangle1);
path1.strokeColor = 'black';
path1.fillColor = 'red';
path1.id = "square1";
path1.strokeCap = "square";
path1.opacity = ".1";
path1.dashArray = [5, 2];
path1.dashOffset = "0";
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var point1 = new Point(10, 10);
var size1 = new Size(50, 50);
var rectangle1 = new Rectangle(point1, size1);
var path1 = new Path.Rectangle(rectangle1);
path1.strokeColor = 'black';
path1.fillColor = 'red';
path1.id = "square1";
path1.strokeCap = "square";
path1.opacity = ".1";
path1.dashArray = [5, 2];
path1.dashOffset = "0";
var point2 = new Point(75, 75);
var point22 = new Point(100, 100);
var path2 = new Path.Rectangle(point2, point22);
path2.strokeColor = 'red';
path2.strokeWidth = '4';
path2.fillColor = 'blue';
path2.id = "square2";
path2.strokeCap = "butt";
path2.opacity = "1";
var point2 = new Point(75, 75);
var point22 = new Point(100, 100);
var path2 = new Path.Rectangle(point2, point22);
path2.strokeColor = 'red';
path2.strokeWidth = '4';
path2.fillColor = 'blue';
path2.id = "square2";
path2.strokeCap = "butt";
path2.opacity = "1";
var point3 = new Point(150, 150);
var size3 = new Size(50, 50);
var rectangle3 = new Rectangle(point3, size3);
var path3 = new Path.Rectangle(rectangle3);
path3.strokeColor = 'blue';
var point3 = new Point(150, 150);
var size3 = new Size(50, 50);
var rectangle3 = new Rectangle(point3, size3);
var path3 = new Path.Rectangle(rectangle3);
path3.strokeColor = 'blue';
var point4 = new Point(200, 200);
var size4 = new Size(100, 100);
var rectangle4 = new Rectangle(point4, size4);
var cornerSize4 = new Size(30, 30);
var path4 = new Path.Rectangle(rectangle4, cornerSize4);
path4.strokeColor= 'yellow';
path4.fillColor='purple';
var point4 = new Point(200, 200);
var size4 = new Size(100, 100);
var rectangle4 = new Rectangle(point4, size4);
var cornerSize4 = new Size(30, 30);
var path4 = new Path.Rectangle(rectangle4, cornerSize4);
path4.strokeColor= 'yellow';
path4.fillColor='purple';
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

88
examples/JSON/Rotated Primitives.html
View file

@ -1,55 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rotated Primitives</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
// This "arbitrary" shape triggered rectangles in the original code,
// since point2 is as far from point0 as point3 is from point1.
var path = new Path({
closed: true,
strokeColor: 'black'
});
path.moveTo(0, 0);
path.lineTo(50, 50);
path.lineTo(100, 100);
path.lineTo(-50, 150);
path.position += 100;
<meta charset="UTF-8">
<title>Rotated Primitives</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
// This "arbitrary" shape triggered rectangles in the original code,
// since point2 is as far from point0 as point3 is from point1.
var path = new Path({
closed: true,
strokeColor: 'black'
});
path.moveTo(0, 0);
path.lineTo(50, 50);
path.lineTo(100, 100);
path.lineTo(-50, 150);
path.position += 100;
var rect = new Path.Rectangle({
point: [200, 100],
size: [200, 300],
fillColor: 'red'
});
rect.rotate(40);
var rect = new Path.Rectangle({
point: [200, 100],
size: [200, 300],
fillColor: 'red'
});
rect.rotate(40);
var circle = new Path.Circle({
center: [200, 300],
radius: 100,
fillColor: 'green'
});
circle.scale(0.5, 1);
circle.rotate(40);
var circle = new Path.Circle({
center: [200, 300],
radius: 100,
fillColor: 'green'
});
circle.scale(0.5, 1);
circle.rotate(40);
var rect = new Path.Rectangle({
point: [250, 20],
size: [200, 300],
radius: [40, 20],
fillColor: 'yellow'
});
rect.rotate(-20);
var rect = new Path.Rectangle({
point: [250, 20],
size: [200, 300],
radius: [40, 20],
fillColor: 'yellow'
});
rect.rotate(-20);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

64
examples/JSON/Selection.html
View file

@ -1,43 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Ellipse({
from: [10, 10],
to: [200, 100],
fillColor: 'red'
});
path.firstSegment.handleOut.selected = true;
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Ellipse({
from: [10, 10],
to: [200, 100],
fillColor: 'red'
});
path.firstSegment.handleOut.selected = true;
var circle = new Path.Circle({
center: [50, 150],
radius: 25,
fillColor: 'blue'
});
circle.selected = true;
var circle = new Path.Circle({
center: [50, 150],
radius: 25,
fillColor: 'blue'
});
circle.selected = true;
var rectangle = new Path.Rectangle({
from: [25, 200],
to: [100, 225],
fillColor: 'green'
});
rectangle.lastSegment.point.selected = true;
var rectangle = new Path.Rectangle({
from: [25, 200],
to: [100, 225],
fillColor: 'green'
});
rectangle.lastSegment.point.selected = true;
var group = new Group(circle, rectangle);
var group = new Group(circle, rectangle);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

73
examples/JSON/Shapes.html
View file

@ -1,39 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var ellipse = new Shape.Ellipse({
from: [10, 10],
to: [200, 100],
fillColor: 'red'
});
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var circle = new Shape.Circle({
center: [100, 100],
radius: 50,
fillColor: 'red'
});
var circle = new Shape.Circle({
center: [50, 150],
radius: 25,
fillColor: 'blue'
});
var ellipse = new Shape.Ellipse({
center: [100, 200],
radius: [50, 25],
fillColor: 'blue',
strokeColor: 'black',
strokeWidth: 4,
rotation: 20
});
var rectangle = new Shape.Rectangle({
from: [25, 200],
to: [100, 225],
fillColor: 'green'
});
rectangle.rotate(30);
var rect = new Shape.Rectangle({
center: [100, 300],
size: [100, 50],
fillColor: 'green',
strokeColor: 'black',
strokeWidth: 4,
rotation: -20
});
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
var roundRect = new Shape.Rectangle({
center: [100, 400],
size: [50, 100],
radius: [15, 20],
fillColor: 'orange',
strokeColor: 'black',
strokeWidth: 4,
rotation: 20
});
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

46
examples/JSON/Symbols.html
View file

@ -1,30 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var ellipse = new Path.Ellipse({
from: [0, 0],
to: [200, 100],
fillColor: 'red'
});
var symbol = new Symbol(ellipse);
var p1 = symbol.place([100, 100]);
p1.rotate(45);
var p2 = symbol.place([300, 200]);
p2.rotate(-30);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var ellipse = new Path.Ellipse({
from: [0, 0],
to: [200, 100],
fillColor: 'red'
});
var symbol = new Symbol(ellipse);
var p1 = symbol.place([100, 100]);
p1.rotate(45);
var p2 = symbol.place([300, 200]);
p2.rotate(-30);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

58
examples/JSON/Text Testing.html
View file

@ -1,38 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var text = new PointText(new Point(50, 100));
text.fillColor = 'black';
text.content = 'This is a test';
<meta charset="UTF-8">
<title>Text Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var text = new PointText(new Point(50, 100));
text.fillColor = 'black';
text.content = 'This is a test';
var text = new PointText(new Point(100, 150));
text.fillColor = 'red';
text.strokeWidth = '4';
text.content = 'This is also a test';
/*
text.scale(5);
text.translate(15, 15);
text.rotate(20);
text.shear(20, 5);
*/
text.rotate(45);
text.shear(.85, .15);
text.scale(.85, 2);
var text = new PointText(new Point(100, 150));
text.fillColor = 'red';
text.strokeWidth = '4';
text.content = 'This is also a test';
/*
text.scale(5);
text.translate(15, 15);
text.rotate(20);
text.shear(20, 5);
*/
text.rotate(45);
text.shear(.85, .15);
text.scale(.85, 2);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

23
examples/JSON/Tiger.html
View file

File diff suppressed because one or more lines are too long

44
examples/JSON/Transform Test 1.html
View file

@ -1,32 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transform Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var circlePath = new Path.Circle(new Point(280, 100), 25);
circlePath.strokeColor = 'black';
circlePath.fillColor = 'white';
<meta charset="UTF-8">
<title>Transform Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var circlePath = new Path.Circle(new Point(280, 100), 25);
circlePath.strokeColor = 'black';
circlePath.fillColor = 'white';
var clones = 30;
var angle = 360 / clones;
var clones = 30;
var angle = 360 / clones;
for(var i = 0; i < clones; i++) {
var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
for(var i = 0; i < clones; i++) {
var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

44
examples/JSON/Transform Test 2.html
View file

@ -1,30 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
path.style = {
fillColor: 'white',
strokeColor: 'black'
};
var copy = path.clone();
copy.strokeColor = 'red';
copy.rotate(-45);
copy.scale(0.5);
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
path.style = {
fillColor: 'white',
strokeColor: 'black'
};
var copy = path.clone();
copy.strokeColor = 'red';
copy.rotate(-45);
copy.scale(0.5);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

60
examples/Node.js/AnimatedStar.js
View file

@ -4,46 +4,46 @@ paper.setup(new paper.Canvas(1024, 768));
var layer = paper.project.activeLayer;
var values = {
count: 34,
points: 32
count: 34,
points: 32
};
initialize();
paper.view.exportFrames({
amount: 100,
directory: __dirname,
onComplete: function() {
console.log('Done exporting.');
},
onProgress: function(event) {
console.log(event.percentage + '% complete, frame took: ' + event.delta);
}
amount: 100,
directory: __dirname,
onComplete: function() {
console.log('Done exporting.');
},
onProgress: function(event) {
console.log(event.percentage + '% complete, frame took: ' + event.delta);
}
});
function initialize() {
for (var i = 0; i < values.count; i++) {
var offset = new paper.Point(20 + 10 * i, 0);
var path = new paper.Path();
path.fillColor = i % 2 ? 'red' : 'black';
path.closed = true;
for (var i = 0; i < values.count; i++) {
var offset = new paper.Point(20 + 10 * i, 0);
var path = new paper.Path();
path.fillColor = i % 2 ? 'red' : 'black';
path.closed = true;
var l = offset.length;
for (var j = 0; j < values.points * 2; j++) {
offset.angle += 360 / values.points;
var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
path.add(offset.add(vector));
}
path.smooth();
layer.insertChild(0, path);
}
layer.fitBounds(paper.view.bounds);
var l = offset.length;
for (var j = 0; j < values.points * 2; j++) {
offset.angle += 360 / values.points;
var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
path.add(offset.add(vector));
}
path.smooth();
layer.insertChild(0, path);
}
layer.fitBounds(paper.view.bounds);
}
paper.view.onFrame = function(event) {
for (var i = 0, l = layer.children.length; i < l; i++) {
var item = layer.children[i];
var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
item.rotate(angle);
}
for (var i = 0, l = layer.children.length; i < l; i++) {
var item = layer.children[i];
var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
item.rotate(angle);
}
}

48
examples/Node.js/BooleanOperations.js
View file

@ -2,32 +2,32 @@ var http = require('http');
var paper = require('paper');
http.createServer(function(request, response) {
var canvas = new paper.Canvas(800, 800);
paper.setup(canvas);
with(paper) {
var style = {
fillColor: new Color(1, 1, 0, 0.5),
strokeColor: new Color(0, 0, 0),
strokeWidth: 1.5
};
var canvas = new paper.Canvas(800, 800);
paper.setup(canvas);
with(paper) {
var style = {
fillColor: new Color(1, 1, 0, 0.5),
strokeColor: new Color(0, 0, 0),
strokeWidth: 1.5
};
var first = new Path.Rectangle([50, 50], [150, 150]);
first.style = style;
var second = first.clone().translate(50, 50);
second.style = style;
var first = new Path.Rectangle([50, 50], [150, 150]);
first.style = style;
var second = first.clone().translate(50, 50);
second.style = style;
var intersection = first.subtract(second);
intersection.style = style;
intersection.translate(250, 0);
view.update();
}
var stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
response.write(chunk);
});
stream.on('end', function() {
response.end();
});
var intersection = first.subtract(second);
intersection.style = style;
intersection.translate(250, 0);
view.update();
}
var stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
response.write(chunk);
});
stream.on('end', function() {
response.end();
});
}).listen(3000);
console.log('Server running at http://127.0.0.1:3000/');

26
examples/Node.js/JSONtoPDF.js
View file

@ -1,19 +1,19 @@
var paper = require('paper'),
path = require('path'),
fs = require('fs');
path = require('path'),
fs = require('fs');
var canvas = new paper.Canvas(612, 792, 'pdf');
paper.setup(canvas);
with (paper) {
fs.readFile('./in.json', { encoding: 'utf8' }, function (err, data) {
if (err)
throw err;
project.importJSON(data);
view.update();
fs.writeFile(path.resolve(__dirname, 'out.pdf'), canvas.toBuffer(), function (err) {
if (err)
throw err;
console.log('Saved!');
});
});
fs.readFile('./in.json', { encoding: 'utf8' }, function (err, data) {
if (err)
throw err;
project.importJSON(data);
view.update();
fs.writeFile(path.resolve(__dirname, 'out.pdf'), canvas.toBuffer(), function (err) {
if (err)
throw err;
console.log('Saved!');
});
});
}

47
examples/Node.js/Raster.js
View file

File diff suppressed because one or more lines are too long

74
examples/Node.js/SVGExport.js
View file

@ -1,49 +1,49 @@
var paper = require('paper'),
path = require('path'),
fs = require('fs');
path = require('path'),
fs = require('fs');
paper.setup(new paper.Canvas(300, 600));
with (paper) {
var stops = [new Color(1, 1, 0, 0), 'red', 'black'];
var stops = [new Color(1, 1, 0, 0), 'red', 'black'];
var radius = view.bounds.width * 0.4,
from = new Point(view.center.x),
to = from.add(radius, 0);
var radius = view.bounds.width * 0.4,
from = new Point(view.center.x),
to = from.add(radius, 0);
var circle = new Path.Circle({
center: from,
radius: radius,
fillColor: {
stops: stops,
radial: true,
origin: from,
destination: to
},
strokeColor: 'black'
});
var circle = new Path.Circle({
center: from,
radius: radius,
fillColor: {
stops: stops,
radial: true,
origin: from,
destination: to
},
strokeColor: 'black'
});
var from = view.bounds.leftCenter,
to = view.bounds.bottomRight;
var from = view.bounds.leftCenter,
to = view.bounds.bottomRight;
var rect = new Path.Rectangle({
from: from,
to: to,
fillColor: {
stops: stops,
radial: false,
origin: from,
destination: to
},
strokeColor: 'black'
});
var rect = new Path.Rectangle({
from: from,
to: to,
fillColor: {
stops: stops,
radial: false,
origin: from,
destination: to
},
strokeColor: 'black'
});
rect.rotate(45).scale(0.7);
rect.rotate(45).scale(0.7);
var svg = project.exportSVG({ asString: true });
console.log(svg);
var svg = project.exportSVG({ asString: true });
console.log(svg);
fs.writeFile(path.resolve(__dirname, 'out.svg'),svg, function (err) {
if (err) throw err;
console.log('Saved!');
});
fs.writeFile(path.resolve(__dirname, 'out.svg'),svg, function (err) {
if (err) throw err;
console.log('Saved!');
});
}

34
examples/Node.js/SVGImport.js
View file

@ -1,22 +1,22 @@
var paper = require('paper'),
path = require('path'),
fs = require('fs');
path = require('path'),
fs = require('fs');
paper.setup(new paper.Canvas(300, 600));
with (paper) {
fs.readFile('./in.svg', { encoding: 'utf8' }, function (err, data) {
if (err)
throw err;
project.importSVG(data);
paper.view.exportFrames({
amount: 1,
directory: __dirname,
onComplete: function() {
console.log('Done exporting.');
},
onProgress: function(event) {
console.log(event.percentage + '% complete, frame took: ' + event.delta);
}
});
});
fs.readFile('./in.svg', { encoding: 'utf8' }, function (err, data) {
if (err)
throw err;
project.importSVG(data);
paper.view.exportFrames({
amount: 1,
directory: __dirname,
onComplete: function() {
console.log('Done exporting.');
},
onProgress: function(event) {
console.log(event.percentage + '% complete, frame took: ' + event.delta);
}
});
});
}

16
examples/Node.js/Tadpoles.js
View file

@ -2,12 +2,12 @@ var paper = require('paper');
var scope = require('./Tadpoles.pjs')(new paper.Size(1024, 768));
scope.view.exportFrames({
amount: 400,
directory: __dirname,
onComplete: function() {
console.log('Done exporting.');
},
onProgress: function(event) {
console.log(event.percentage + '% complete, frame took: ' + event.delta);
}
amount: 400,
directory: __dirname,
onComplete: function() {
console.log('Done exporting.');
},
onProgress: function(event) {
console.log(event.percentage + '% complete, frame took: ' + event.delta);
}
});

170
examples/Paperjs.org/BouncingBalls.html
View file

@ -1,103 +1,103 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bouncing Balls</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var Ball = function(point, vector) {
if (!vector || vector.isZero()) {
this.vector = Point.random() * 5;
} else {
this.vector = vector * 2;
}
this.point = point;
this.dampen = 0.4;
this.gravity = 3;
this.bounce = -0.6;
<meta charset="UTF-8">
<title>Bouncing Balls</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var Ball = function(point, vector) {
if (!vector || vector.isZero()) {
this.vector = Point.random() * 5;
} else {
this.vector = vector * 2;
}
this.point = point;
this.dampen = 0.4;
this.gravity = 3;
this.bounce = -0.6;
var color = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
};
var gradient = new Gradient([color, 'black'], true);
var color = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
};
var gradient = new Gradient([color, 'black'], true);
var radius = this.radius = 50 * Math.random() + 30;
// Wrap CompoundPath in a Group, since CompoundPaths directly
// applies the transformations to the content, just like Path.
var ball = new CompoundPath({
children: [
new Path.Circle({
radius: radius
}),
new Path.Circle({
center: radius / 8,
radius: radius / 3
})
],
fillColor: new Color(gradient, 0, radius, radius / 8),
});
var radius = this.radius = 50 * Math.random() + 30;
// Wrap CompoundPath in a Group, since CompoundPaths directly
// applies the transformations to the content, just like Path.
var ball = new CompoundPath({
children: [
new Path.Circle({
radius: radius
}),
new Path.Circle({
center: radius / 8,
radius: radius / 3
})
],
fillColor: new Color(gradient, 0, radius, radius / 8),
});
this.item = new Group({
children: [ball],
applyMatrix: false,
position: this.point
});
}
this.item = new Group({
children: [ball],
applyMatrix: false,
position: this.point
});
}
Ball.prototype.iterate = function() {
var size = view.size;
this.vector.y += this.gravity;
this.vector.x *= 0.99;
var pre = this.point + this.vector;
if (pre.x < this.radius || pre.x > size.width - this.radius)
this.vector.x *= -this.dampen;
if (pre.y < this.radius || pre.y > size.height - this.radius) {
if (Math.abs(this.vector.x) < 3)
this.vector = Point.random() * [150, 100] + [-75, 20];
this.vector.y *= this.bounce;
}
Ball.prototype.iterate = function() {
var size = view.size;
this.vector.y += this.gravity;
this.vector.x *= 0.99;
var pre = this.point + this.vector;
if (pre.x < this.radius || pre.x > size.width - this.radius)
this.vector.x *= -this.dampen;
if (pre.y < this.radius || pre.y > size.height - this.radius) {
if (Math.abs(this.vector.x) < 3)
this.vector = Point.random() * [150, 100] + [-75, 20];
this.vector.y *= this.bounce;
}
var max = Point.max(this.radius, this.point + this.vector);
this.item.position = this.point = Point.min(max, size - this.radius);
this.item.rotate(this.vector.x);
};
var max = Point.max(this.radius, this.point + this.vector);
this.item.position = this.point = Point.min(max, size - this.radius);
this.item.rotate(this.vector.x);
};
var balls = [];
for (var i = 0; i < 10; i++) {
var position = Point.random() * view.size,
vector = (Point.random() - [0.5, 0]) * [50, 100],
ball = new Ball(position, vector);
balls.push(ball);
}
var balls = [];
for (var i = 0; i < 10; i++) {
var position = Point.random() * view.size,
vector = (Point.random() - [0.5, 0]) * [50, 100],
ball = new Ball(position, vector);
balls.push(ball);
}
var textItem = new PointText({
point: [20, 30],
fillColor: 'black',
content: 'Click, drag and release to add balls.'
});
var textItem = new PointText({
point: [20, 30],
fillColor: 'black',
content: 'Click, drag and release to add balls.'
});
var lastDelta;
function onMouseDrag(event) {
lastDelta = event.delta;
}
var lastDelta;
function onMouseDrag(event) {
lastDelta = event.delta;
}
function onMouseUp(event) {
var ball = new Ball(event.point, lastDelta);
balls.push(ball);
lastDelta = null;
}
function onMouseUp(event) {
var ball = new Ball(event.point, lastDelta);
balls.push(ball);
lastDelta = null;
}
function onFrame() {
for (var i = 0, l = balls.length; i < l; i++)
balls[i].iterate();
}
</script>
function onFrame() {
for (var i = 0, l = balls.length; i < l; i++)
balls[i].iterate();
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

80
examples/Paperjs.org/Chain.html
View file

@ -1,54 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chain</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html
<meta charset="UTF-8">
<title>Chain</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html
// The amount of points in the path:
var points = 25;
// The amount of points in the path:
var points = 25;
// The distance between the points:
var length = 35;
// The distance between the points:
var length = 35;
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 20,
strokeCap: 'round'
});
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 20,
strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
path.add(start + new Point(i * length, 0));
var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
path.add(start + new Point(i * length, 0));
function onMouseMove(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
var vector = segment.point - nextSegment.point;
vector.length = length;
nextSegment.point = segment.point - vector;
}
path.smooth();
}
function onMouseMove(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
var vector = segment.point - nextSegment.point;
vector.length = length;
nextSegment.point = segment.point - vector;
}
path.smooth();
}
function onMouseDown(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
function onMouseDown(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
function onMouseUp(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
</script>
function onMouseUp(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

84
examples/Paperjs.org/DivisionRaster.html
View file

File diff suppressed because one or more lines are too long

208
examples/Paperjs.org/FutureSplash.html
View file

@ -1,124 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Future Splash</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Code ported to Paper.js from http://the389.com/9/1/
// with permission.
<meta charset="UTF-8">
<title>Future Splash</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Code ported to Paper.js from http://the389.com/9/1/
// with permission.
var values = {
friction: 0.8,
timeStep: 0.01,
amount: 15,
mass: 2,
count: 0
};
values.invMass = 1 / values.mass;
var values = {
friction: 0.8,
timeStep: 0.01,
amount: 15,
mass: 2,
count: 0
};
values.invMass = 1 / values.mass;
var path, springs;
var size = view.size * [1.2, 1];
var path, springs;
var size = view.size * [1.2, 1];
var Spring = function(a, b, strength, restLength) {
this.a = a;
this.b = b;
this.restLength = restLength || 80;
this.strength = strength ? strength : 0.55;
this.mamb = values.invMass * values.invMass;
};
var Spring = function(a, b, strength, restLength) {
this.a = a;
this.b = b;
this.restLength = restLength || 80;
this.strength = strength ? strength : 0.55;
this.mamb = values.invMass * values.invMass;
};
Spring.prototype.update = function() {
var delta = this.b - this.a;
var dist = delta.length;
var normDistStrength = (dist - this.restLength) /
(dist * this.mamb) * this.strength;
delta.y *= normDistStrength * values.invMass * 0.2;
if (!this.a.fixed)
this.a.y += delta.y;
if (!this.b.fixed)
this.b.y -= delta.y;
};
Spring.prototype.update = function() {
var delta = this.b - this.a;
var dist = delta.length;
var normDistStrength = (dist - this.restLength) /
(dist * this.mamb) * this.strength;
delta.y *= normDistStrength * values.invMass * 0.2;
if (!this.a.fixed)
this.a.y += delta.y;
if (!this.b.fixed)
this.b.y -= delta.y;
};
function createPath(strength) {
var path = new Path({
fillColor: 'black'
});
springs = [];
for (var i = 0; i <= values.amount; i++) {
var segment = path.add(new Point(i / values.amount, 0.5) * size);
var point = segment.point;
if (i == 0 || i == values.amount)
point.y += size.height;
point.px = point.x;
point.py = point.y;
// The first two and last two points are fixed:
point.fixed = i < 2 || i > values.amount - 2;
if (i > 0) {
var spring = new Spring(segment.previous.point, point, strength);
springs.push(spring);
}
}
path.position.x -= size.width / 4;
return path;
}
function createPath(strength) {
var path = new Path({
fillColor: 'black'
});
springs = [];
for (var i = 0; i <= values.amount; i++) {
var segment = path.add(new Point(i / values.amount, 0.5) * size);
var point = segment.point;
if (i == 0 || i == values.amount)
point.y += size.height;
point.px = point.x;
point.py = point.y;
// The first two and last two points are fixed:
point.fixed = i < 2 || i > values.amount - 2;
if (i > 0) {
var spring = new Spring(segment.previous.point, point, strength);
springs.push(spring);
}
}
path.position.x -= size.width / 4;
return path;
}
function onResize() {
if (path)
path.remove();
size = view.bounds.size * [2, 1];
path = createPath(0.1);
}
function onResize() {
if (path)
path.remove();
size = view.bounds.size * [2, 1];
path = createPath(0.1);
}
function onMouseMove(event) {
var location = path.getNearestLocation(event.point);
var segment = location.segment;
var point = segment.point;
function onMouseMove(event) {
var location = path.getNearestLocation(event.point);
var segment = location.segment;
var point = segment.point;
if (!point.fixed && location.distance < size.height / 4) {
var y = event.point.y;
point.y += (y - point.y) / 6;
if (segment.previous && !segment.previous.fixed) {
var previous = segment.previous.point;
previous.y += (y - previous.y) / 24;
}
if (segment.next && !segment.next.fixed) {
var next = segment.next.point;
next.y += (y - next.y) / 24;
}
}
}
if (!point.fixed && location.distance < size.height / 4) {
var y = event.point.y;
point.y += (y - point.y) / 6;
if (segment.previous && !segment.previous.fixed) {
var previous = segment.previous.point;
previous.y += (y - previous.y) / 24;
}
if (segment.next && !segment.next.fixed) {
var next = segment.next.point;
next.y += (y - next.y) / 24;
}
}
}
function onFrame(event) {
updateWave(path);
}
function onFrame(event) {
updateWave(path);
}
function updateWave(path) {
var force = 1 - values.friction * values.timeStep * values.timeStep;
for (var i = 0, l = path.segments.length; i < l; i++) {
var point = path.segments[i].point;
var dy = (point.y - point.py) * force;
point.py = point.y;
point.y = Math.max(point.y + dy, 0);
}
function updateWave(path) {
var force = 1 - values.friction * values.timeStep * values.timeStep;
for (var i = 0, l = path.segments.length; i < l; i++) {
var point = path.segments[i].point;
var dy = (point.y - point.py) * force;
point.py = point.y;
point.y = Math.max(point.y + dy, 0);
}
for (var j = 0, l = springs.length; j < l; j++) {
springs[j].update();
}
path.smooth();
}
for (var j = 0, l = springs.length; j < l; j++) {
springs[j].update();
}
path.smooth();
}
function onKeyDown(event) {
if (event.key == 'space') {
path.fullySelected = !path.fullySelected;
path.fillColor = path.fullySelected ? null : 'black';
}
}
</script>
function onKeyDown(event) {
if (event.key == 'space') {
path.fullySelected = !path.fullySelected;
path.fillColor = path.fullySelected ? null : 'black';
}
}
</script>
</head>
<body>
<canvas id="canvas" resize hidpi="off"></canvas>
<canvas id="canvas" resize hidpi="off"></canvas>
</body>
</html>

174
examples/Paperjs.org/HitTesting.html
View file

@ -1,103 +1,103 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hit Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var values = {
paths: 50,
minPoints: 5,
maxPoints: 15,
minRadius: 30,
maxRadius: 90
};
<meta charset="UTF-8">
<title>Hit Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var values = {
paths: 50,
minPoints: 5,
maxPoints: 15,
minRadius: 30,
maxRadius: 90
};
var hitOptions = {
segments: true,
stroke: true,
fill: true,
tolerance: 5
};
var hitOptions = {
segments: true,
stroke: true,
fill: true,
tolerance: 5
};
createPaths();
createPaths();
function createPaths() {
var radiusDelta = values.maxRadius - values.minRadius;
var pointsDelta = values.maxPoints - values.minPoints;
for (var i = 0; i < values.paths; i++) {
var radius = values.minRadius + Math.random() * radiusDelta;
var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
var path = createBlob(view.size * Point.random(), radius, points);
var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
var hue = Math.random() * 360;
path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
path.strokeColor = 'black';
};
}
function createPaths() {
var radiusDelta = values.maxRadius - values.minRadius;
var pointsDelta = values.maxPoints - values.minPoints;
for (var i = 0; i < values.paths; i++) {
var radius = values.minRadius + Math.random() * radiusDelta;
var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
var path = createBlob(view.size * Point.random(), radius, points);
var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
var hue = Math.random() * 360;
path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
path.strokeColor = 'black';
};
}
function createBlob(center, maxRadius, points) {
var path = new Path();
path.closed = true;
for (var i = 0; i < points; i++) {
var delta = new Point({
length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
angle: (360 / points) * i
});
path.add(center + delta);
}
path.smooth();
return path;
}
function createBlob(center, maxRadius, points) {
var path = new Path();
path.closed = true;
for (var i = 0; i < points; i++) {
var delta = new Point({
length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
angle: (360 / points) * i
});
path.add(center + delta);
}
path.smooth();
return path;
}
var segment, path;
var movePath = false;
function onMouseDown(event) {
segment = path = null;
var hitResult = project.hitTest(event.point, hitOptions);
if (!hitResult)
return;
var segment, path;
var movePath = false;
function onMouseDown(event) {
segment = path = null;
var hitResult = project.hitTest(event.point, hitOptions);
if (!hitResult)
return;
if (event.modifiers.shift) {
if (hitResult.type == 'segment') {
hitResult.segment.remove();
};
return;
}
if (event.modifiers.shift) {
if (hitResult.type == 'segment') {
hitResult.segment.remove();
};
return;
}
if (hitResult) {
path = hitResult.item;
if (hitResult.type == 'segment') {
segment = hitResult.segment;
} else if (hitResult.type == 'stroke') {
var location = hitResult.location;
segment = path.insert(location.index + 1, event.point);
path.smooth();
}
}
movePath = hitResult.type == 'fill';
if (movePath)
project.activeLayer.addChild(hitResult.item);
}
if (hitResult) {
path = hitResult.item;
if (hitResult.type == 'segment') {
segment = hitResult.segment;
} else if (hitResult.type == 'stroke') {
var location = hitResult.location;
segment = path.insert(location.index + 1, event.point);
path.smooth();
}
}
movePath = hitResult.type == 'fill';
if (movePath)
project.activeLayer.addChild(hitResult.item);
}
function onMouseMove(event) {
project.activeLayer.selected = false;
if (event.item)
event.item.selected = true;
}
function onMouseMove(event) {
project.activeLayer.selected = false;
if (event.item)
event.item.selected = true;
}
function onMouseDrag(event) {
if (segment) {
segment.point += event.delta;
path.smooth();
} else if (path) {
path.position += event.delta;
}
}
</script>
function onMouseDrag(event) {
if (segment) {
segment.point += event.delta;
path.smooth();
} else if (path) {
path.position += event.delta;
}
}
</script>
</head>
<body>
<canvas id="canvas" resize style="background:black"></canvas>
<canvas id="canvas" resize style="background:black"></canvas>
</body>
</html>

564
examples/Paperjs.org/InteractiveTiger.html
View file

File diff suppressed because one or more lines are too long

218
examples/Paperjs.org/MetaBalls.html
View file

@ -1,132 +1,132 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meta Balls</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Ported from original Metaball script by SATO Hiroyuki
// http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
project.currentStyle = {
fillColor: 'black'
};
<meta charset="UTF-8">
<title>Meta Balls</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Ported from original Metaball script by SATO Hiroyuki
// http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
project.currentStyle = {
fillColor: 'black'
};
var ballPositions = [[255, 129], [610, 73], [486, 363],
[117, 459], [484, 726], [843, 306], [789, 615], [1049, 82],
[1292, 428], [1117, 733], [1352, 86], [92, 798]];
var ballPositions = [[255, 129], [610, 73], [486, 363],
[117, 459], [484, 726], [843, 306], [789, 615], [1049, 82],
[1292, 428], [1117, 733], [1352, 86], [92, 798]];
var handle_len_rate = 2.4;
var circlePaths = [];
var radius = 50;
for (var i = 0, l = ballPositions.length; i < l; i++) {
var circlePath = new Path.Circle({
center: ballPositions[i],
radius: 50
});
circlePaths.push(circlePath);
}
var handle_len_rate = 2.4;
var circlePaths = [];
var radius = 50;
for (var i = 0, l = ballPositions.length; i < l; i++) {
var circlePath = new Path.Circle({
center: ballPositions[i],
radius: 50
});
circlePaths.push(circlePath);
}
var largeCircle = new Path.Circle({
center: [676, 433],
radius: 100
});
circlePaths.push(largeCircle);
var largeCircle = new Path.Circle({
center: [676, 433],
radius: 100
});
circlePaths.push(largeCircle);
function onMouseMove(event) {
largeCircle.position = event.point;
generateConnections(circlePaths);
}
function onMouseMove(event) {
largeCircle.position = event.point;
generateConnections(circlePaths);
}
var connections = new Group();
function generateConnections(paths) {
// Remove the last connection paths:
connections.children = [];
var connections = new Group();
function generateConnections(paths) {
// Remove the last connection paths:
connections.children = [];
for (var i = 0, l = paths.length; i < l; i++) {
for (var j = i - 1; j >= 0; j--) {
var path = metaball(paths[i], paths[j], 0.5, handle_len_rate, 300);
if (path) {
connections.appendTop(path);
path.removeOnMove();
}
}
}
}
for (var i = 0, l = paths.length; i < l; i++) {
for (var j = i - 1; j >= 0; j--) {
var path = metaball(paths[i], paths[j], 0.5, handle_len_rate, 300);
if (path) {
connections.appendTop(path);
path.removeOnMove();
}
}
}
}
generateConnections(circlePaths);
generateConnections(circlePaths);
// ---------------------------------------------
function metaball(ball1, ball2, v, handle_len_rate, maxDistance) {
var center1 = ball1.position;
var center2 = ball2.position;
var radius1 = ball1.bounds.width / 2;
var radius2 = ball2.bounds.width / 2;
var pi2 = Math.PI / 2;
var d = center1.getDistance(center2);
var u1, u2;
// ---------------------------------------------
function metaball(ball1, ball2, v, handle_len_rate, maxDistance) {
var center1 = ball1.position;
var center2 = ball2.position;
var radius1 = ball1.bounds.width / 2;
var radius2 = ball2.bounds.width / 2;
var pi2 = Math.PI / 2;
var d = center1.getDistance(center2);
var u1, u2;
if (radius1 == 0 || radius2 == 0)
return;
if (radius1 == 0 || radius2 == 0)
return;
if (d > maxDistance || d <= Math.abs(radius1 - radius2)) {
return;
} else if (d < radius1 + radius2) { // case circles are overlapping
u1 = Math.acos((radius1 * radius1 + d * d - radius2 * radius2) /
(2 * radius1 * d));
u2 = Math.acos((radius2 * radius2 + d * d - radius1 * radius1) /
(2 * radius2 * d));
} else {
u1 = 0;
u2 = 0;
}
if (d > maxDistance || d <= Math.abs(radius1 - radius2)) {
return;
} else if (d < radius1 + radius2) { // case circles are overlapping
u1 = Math.acos((radius1 * radius1 + d * d - radius2 * radius2) /
(2 * radius1 * d));
u2 = Math.acos((radius2 * radius2 + d * d - radius1 * radius1) /
(2 * radius2 * d));
} else {
u1 = 0;
u2 = 0;
}
var angle1 = (center2 - center1).getAngleInRadians();
var angle2 = Math.acos((radius1 - radius2) / d);
var angle1a = angle1 + u1 + (angle2 - u1) * v;
var angle1b = angle1 - u1 - (angle2 - u1) * v;
var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
var p1a = center1 + getVector(angle1a, radius1);
var p1b = center1 + getVector(angle1b, radius1);
var p2a = center2 + getVector(angle2a, radius2);
var p2b = center2 + getVector(angle2b, radius2);
var angle1 = (center2 - center1).getAngleInRadians();
var angle2 = Math.acos((radius1 - radius2) / d);
var angle1a = angle1 + u1 + (angle2 - u1) * v;
var angle1b = angle1 - u1 - (angle2 - u1) * v;
var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
var p1a = center1 + getVector(angle1a, radius1);
var p1b = center1 + getVector(angle1b, radius1);
var p2a = center2 + getVector(angle2a, radius2);
var p2b = center2 + getVector(angle2b, radius2);
// define handle length by the distance between
// both ends of the curve to draw
var totalRadius = (radius1 + radius2);
var d2 = Math.min(v * handle_len_rate, (p1a - p2a).length / totalRadius);
// define handle length by the distance between
// both ends of the curve to draw
var totalRadius = (radius1 + radius2);
var d2 = Math.min(v * handle_len_rate, (p1a - p2a).length / totalRadius);
// case circles are overlapping:
d2 *= Math.min(1, d * 2 / (radius1 + radius2));
// case circles are overlapping:
d2 *= Math.min(1, d * 2 / (radius1 + radius2));
radius1 *= d2;
radius2 *= d2;
radius1 *= d2;
radius2 *= d2;
var path = new Path({
segments: [p1a, p2a, p2b, p1b],
style: ball1.style,
closed: true
});
var segments = path.segments;
segments[0].handleOut = getVector(angle1a - pi2, radius1);
segments[1].handleIn = getVector(angle2a + pi2, radius2);
segments[2].handleOut = getVector(angle2b - pi2, radius2);
segments[3].handleIn = getVector(angle1b + pi2, radius1);
return path;
}
var path = new Path({
segments: [p1a, p2a, p2b, p1b],
style: ball1.style,
closed: true
});
var segments = path.segments;
segments[0].handleOut = getVector(angle1a - pi2, radius1);
segments[1].handleIn = getVector(angle2a + pi2, radius2);
segments[2].handleOut = getVector(angle2b - pi2, radius2);
segments[3].handleIn = getVector(angle1b + pi2, radius1);
return path;
}
// ------------------------------------------------
function getVector(radians, length) {
return new Point({
// Convert radians to degrees:
angle: radians * 180 / Math.PI,
length: length
});
}
</script>
// ------------------------------------------------
function getVector(radians, length) {
return new Point({
// Convert radians to degrees:
angle: radians * 180 / Math.PI,
length: length
});
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

352
examples/Paperjs.org/NyanRainbow.html
View file

@ -1,202 +1,202 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nyan Rainbow</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/javascript" src="http://paperjs.org/assets/mediaelement/mediaelement.js"></script>
<script type="text/paperscript" canvas="canvas">
// A tribute to Nyan Cat http://www.youtube.com/watch?v=QH2-TGUlwu4
var mediaElement;
var playing = false;
MediaElement('nyan', {
pluginPath: '/assets/mediaelement/',
success: function(me) {
mediaElement = me;
me.play();
me.addEventListener('timeupdate', function(time) {
if (me.currentTime > 3.7)
playing = true;
});
}
});
<meta charset="UTF-8">
<title>Nyan Rainbow</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/javascript" src="http://paperjs.org/assets/mediaelement/mediaelement.js"></script>
<script type="text/paperscript" canvas="canvas">
// A tribute to Nyan Cat http://www.youtube.com/watch?v=QH2-TGUlwu4
var mediaElement;
var playing = false;
MediaElement('nyan', {
pluginPath: '/assets/mediaelement/',
success: function(me) {
mediaElement = me;
me.play();
me.addEventListener('timeupdate', function(time) {
if (me.currentTime > 3.7)
playing = true;
});
}
});
var mousePos = view.center + [view.bounds.width / 3, 100];
var position = view.center;
var mousePos = view.center + [view.bounds.width / 3, 100];
var position = view.center;
function onFrame(event) {
position += (mousePos - position) / 10;
var vector = (view.center - position) / 10;
moveStars(vector * 3);
moveRainbow(vector, event);
}
function onFrame(event) {
position += (mousePos - position) / 10;
var vector = (view.center - position) / 10;
moveStars(vector * 3);
moveRainbow(vector, event);
}
function onMouseMove(event) {
mousePos = event.point;
}
function onMouseMove(event) {
mousePos = event.point;
}
function onKeyDown(event) {
if (event.key == 'space')
project.activeLayer.selected = !project.activeLayer.selected;
}
function onKeyDown(event) {
if (event.key == 'space')
project.activeLayer.selected = !project.activeLayer.selected;
}
var moveStars = new function() {
// The amount of symbol we want to place;
var count = 50;
var moveStars = new function() {
// The amount of symbol we want to place;
var count = 50;
// Create a symbol, which we will use to place instances of later:
var path = new Path.Circle({
center: new Point(0, 0),
radius: 5,
fillColor: 'white',
strokeColor: 'black'
});
// Create a symbol, which we will use to place instances of later:
var path = new Path.Circle({
center: new Point(0, 0),
radius: 5,
fillColor: 'white',
strokeColor: 'black'
});
var symbol = new Symbol(path);
var symbol = new Symbol(path);
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placed = symbol.place(center);
placed.scale(i / count + 0.01);
placed.data = {
vector: new Point({
angle: Math.random() * 360,
length : (i / count) * Math.random() / 5
})
};
}
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placed = symbol.place(center);
placed.scale(i / count + 0.01);
placed.data = {
vector: new Point({
angle: Math.random() * 360,
length : (i / count) * Math.random() / 5
})
};
}
var vector = new Point({
angle: 45,
length: 0
});
var vector = new Point({
angle: 45,
length: 0
});
function keepInView(item) {
var position = item.position;
var viewBounds = view.bounds;
if (position.isInside(viewBounds))
return;
var itemBounds = item.bounds;
if (position.x > viewBounds.width + 5) {
position.x = -item.bounds.width;
}
function keepInView(item) {
var position = item.position;
var viewBounds = view.bounds;
if (position.isInside(viewBounds))
return;
var itemBounds = item.bounds;
if (position.x > viewBounds.width + 5) {
position.x = -item.bounds.width;
}
if (position.x < -itemBounds.width - 5) {
position.x = viewBounds.width;
}
if (position.x < -itemBounds.width - 5) {
position.x = viewBounds.width;
}
if (position.y > viewBounds.height + 5) {
position.y = -itemBounds.height;
}
if (position.y > viewBounds.height + 5) {
position.y = -itemBounds.height;
}
if (position.y < -itemBounds.height - 5) {
position.y = viewBounds.height
}
}
if (position.y < -itemBounds.height - 5) {
position.y = viewBounds.height
}
}
return function(vector) {
// Run through the active layer's children list and change
// the position of the placed symbols:
var layer = project.activeLayer;
for (var i = 0; i < count; i++) {
var item = layer.children[i];
var size = item.bounds.size;
var length = vector.length / 10 * size.width / 10;
item.position += vector.normalize(length) + item.data.vector;
keepInView(item);
}
};
};
return function(vector) {
// Run through the active layer's children list and change
// the position of the placed symbols:
var layer = project.activeLayer;
for (var i = 0; i < count; i++) {
var item = layer.children[i];
var size = item.bounds.size;
var length = vector.length / 10 * size.width / 10;
item.position += vector.normalize(length) + item.data.vector;
keepInView(item);
}
};
};
var moveRainbow = new function() {
var paths = [];
var colors = ['red', 'orange', 'yellow', 'lime', 'blue', 'purple'];
for (var i = 0; i < colors.length; i++) {
var path = new Path({
fillColor: colors[i]
});
paths.push(path);
}
var moveRainbow = new function() {
var paths = [];
var colors = ['red', 'orange', 'yellow', 'lime', 'blue', 'purple'];
for (var i = 0; i < colors.length; i++) {
var path = new Path({
fillColor: colors[i]
});
paths.push(path);
}
var count = 30;
var group = new Group(paths);
var headGroup;
var eyePosition = new Point();
var eyeFollow = (Point.random() - 0.5);
var blinkTime = 200;
function createHead(vector, count) {
var eyeVector = (eyePosition - eyeFollow);
eyePosition -= eyeVector / 4;
if (eyeVector.length < 0.00001)
eyeFollow = (Point.random() - 0.5);
if (headGroup)
headGroup.remove();
var top = paths[0].lastSegment.point;
var bottom = paths[paths.length - 1].firstSegment.point;
var radius = (bottom - top).length / 2;
var circle = new Path.Circle({
center: top + (bottom - top) / 2,
radius: radius,
fillColor: 'black'
});
circle.scale(vector.length / 100, 1);
circle.rotate(vector.angle, circle.center);
var count = 30;
var group = new Group(paths);
var headGroup;
var eyePosition = new Point();
var eyeFollow = (Point.random() - 0.5);
var blinkTime = 200;
function createHead(vector, count) {
var eyeVector = (eyePosition - eyeFollow);
eyePosition -= eyeVector / 4;
if (eyeVector.length < 0.00001)
eyeFollow = (Point.random() - 0.5);
if (headGroup)
headGroup.remove();
var top = paths[0].lastSegment.point;
var bottom = paths[paths.length - 1].firstSegment.point;
var radius = (bottom - top).length / 2;
var circle = new Path.Circle({
center: top + (bottom - top) / 2,
radius: radius,
fillColor: 'black'
});
circle.scale(vector.length / 100, 1);
circle.rotate(vector.angle, circle.center);
innerCircle = circle.clone();
innerCircle.scale(0.5);
innerCircle.fillColor = (count % blinkTime < 3)
|| (count % (blinkTime + 5) < 3) ? 'black' : 'white';
if (count % (blinkTime + 40) == 0)
blinkTime = Math.round(Math.random() * 40) + 200;
var eye = circle.clone();
eye.position += eyePosition * radius;
eye.scale(0.15, innerCircle.position);
eye.fillColor = 'black';
headGroup = new Group(circle, innerCircle, eye);
}
innerCircle = circle.clone();
innerCircle.scale(0.5);
innerCircle.fillColor = (count % blinkTime < 3)
|| (count % (blinkTime + 5) < 3) ? 'black' : 'white';
if (count % (blinkTime + 40) == 0)
blinkTime = Math.round(Math.random() * 40) + 200;
var eye = circle.clone();
eye.position += eyePosition * radius;
eye.scale(0.15, innerCircle.position);
eye.fillColor = 'black';
headGroup = new Group(circle, innerCircle, eye);
}
return function(vector, event) {
var vector = (view.center - position) / 10;
return function(vector, event) {
var vector = (view.center - position) / 10;
if (vector.length < 5)
vector.length = 5;
count += vector.length / 100;
group.translate(vector);
var rotated = vector.rotate(90);
var middle = paths.length / 2;
for (var j = 0; j < paths.length; j++) {
var path = paths[j];
var nyanSwing = playing ? Math.sin(event.count / 2) * vector.length : 1;
var unitLength = vector.length * (2 + Math.sin(event.count / 10)) / 2;
var length = (j - middle) * unitLength + nyanSwing;
var top = view.center + rotated.normalize(length);
var bottom = view.center + rotated.normalize(length + unitLength);
path.add(top);
path.insert(0, bottom);
if (path.segments.length > 200) {
var index = Math.round(path.segments.length / 2);
path.segments[index].remove();
path.segments[index - 1].remove();
}
path.smooth();
}
createHead(vector, event.count);
if (mediaElement)
mediaElement.setVolume(vector.length / 200);
}
}
</script>
<style>
body {
background: black;
}
</style>
if (vector.length < 5)
vector.length = 5;
count += vector.length / 100;
group.translate(vector);
var rotated = vector.rotate(90);
var middle = paths.length / 2;
for (var j = 0; j < paths.length; j++) {
var path = paths[j];
var nyanSwing = playing ? Math.sin(event.count / 2) * vector.length : 1;
var unitLength = vector.length * (2 + Math.sin(event.count / 10)) / 2;
var length = (j - middle) * unitLength + nyanSwing;
var top = view.center + rotated.normalize(length);
var bottom = view.center + rotated.normalize(length + unitLength);
path.add(top);
path.insert(0, bottom);
if (path.segments.length > 200) {
var index = Math.round(path.segments.length / 2);
path.segments[index].remove();
path.segments[index - 1].remove();
}
path.smooth();
}
createHead(vector, event.count);
if (mediaElement)
mediaElement.setVolume(vector.length / 200);
}
}
</script>
<style>
body {
background: black;
}
</style>
</head>
<body>
<audio id="nyan" src="http://dl.dropbox.com/u/31703/nyan.mp3" autoplay autobuffer preload=none loop style="display:none"></audio>
<canvas id="canvas" resize hidpi="off"></canvas>
<audio id="nyan" src="http://dl.dropbox.com/u/31703/nyan.mp3" autoplay autobuffer preload=none loop style="display:none"></audio>
<canvas id="canvas" resize hidpi="off"></canvas>
</body>
</html>

119
examples/Paperjs.org/PathIntersections.html
View file

@ -1,76 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Path Intersections</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var words = project.importSVG(document.getElementById('svg'));
words.fillColor = null;
words.strokeColor = 'black';
<meta charset="UTF-8">
<title>Path Intersections</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Imported SVG Groups have their applyMatrix flag turned off by
// default. This is required for SVG importing to work correctly. Turn
// it on now, so we don't have to deal with nested coordinate spaces.
var words = project.importSVG(document.getElementById('svg'));
words.visible = true; // Turn off the effect of display:none;
words.fillColor = null;
words.strokeColor = 'black';
var yesGroup = words.children.yes;
var yesGroup = words.children.yes;
var noGroup = words.children.no;
// Imported SVG Groups have their applyMatrix flag turned off by
// default. This is required for SVG importing to work correctly. Turn
// it on now, so we don't have to deal with nested coordinate spaces.
yesGroup.applyMatrix = true;
noGroup.applyMatrix = true;
var noGroup = words.children.no;
// Resize the words to fit snugly inside the view:
words.fitBounds(view.bounds);
words.scale(0.8);
// Resize the words to fit snugly inside the view:
project.activeLayer.fitBounds(view.bounds);
project.activeLayer.scale(0.8);
yesGroup.position = view.center;
noGroup.position = [-900, -900];
yesGroup.position = view.center;
noGroup.position = [-900, -900];
function onMouseMove(event) {
noGroup.position = event.point;
for (var i = 0; i < yesGroup.children.length; i++) {
for (var j = 0; j < noGroup.children.length; j++) {
showIntersections(noGroup.children[j], yesGroup.children[i])
}
}
}
function onMouseMove(event) {
noGroup.position = event.point;
for (var i = 0; i < yesGroup.children.length; i++) {
for (var j = 0; j < noGroup.children.length; j++) {
showIntersections(noGroup.children[j], yesGroup.children[i])
}
}
}
function showIntersections(path1, path2) {
var intersections = path1.getIntersections(path2);
for (var i = 0; i < intersections.length; i++) {
new Path.Circle({
center: intersections[i].point,
radius: 5,
fillColor: '#009dec'
}).removeOnMove();
}
}
</script>
function showIntersections(path1, path2) {
var intersections = path1.getIntersections(path2);
for (var i = 0; i < intersections.length; i++) {
new Path.Circle({
center: intersections[i].point,
radius: 5,
fillColor: '#009dec'
}).removeOnMove();
}
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="600" resize=true></canvas>
<canvas id="canvas" resize></canvas>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="600" width="600" id="svg" style="display:none">
xmlns:xlink="http://www.w3.org/1999/xlink"
height="600" width="600" id="svg" style="display:none">
<g id="yes">
<path d="M427.151,85.781h27.331l-38.608,72.151v43.283h-24.121v-43.283l-39.94-72.151h28.428l23.964,50.277L427.151,85.781z"/>
<path d="M553.467,106.221h-61.084v24.512h56.073v20.048h-56.073v29.681h63.905v20.753H468.81V85.781h84.657V106.221z"/>
<path d="M592.307,165.583c0.746,5.274,2.213,9.215,4.396,11.826c3.998,4.751,10.848,7.126,20.551,7.126
c5.811,0,10.529-0.626,14.152-1.88c6.877-2.4,10.316-6.864,10.316-13.392c0-3.811-1.686-6.761-5.053-8.849
c-3.371-2.036-8.713-3.837-16.027-5.404l-12.498-2.741c-12.283-2.714-20.721-5.664-25.314-8.849
c-7.779-5.326-11.668-13.652-11.668-24.982c0-10.337,3.805-18.925,11.414-25.765c7.611-6.839,18.789-10.259,33.537-10.259
c12.312,0,22.816,3.224,31.512,9.671c8.693,6.449,13.252,15.807,13.676,28.076h-23.182c-0.428-6.943-3.531-11.877-9.312-14.801
c-3.855-1.931-8.645-2.897-14.371-2.897c-6.369,0-11.455,1.253-15.254,3.759c-3.801,2.506-5.701,6.004-5.701,10.494
c0,4.125,1.873,7.205,5.621,9.241c2.408,1.358,7.52,2.95,15.336,4.777l20.258,4.777c8.879,2.089,15.533,4.882,19.965,8.379
c6.881,5.431,10.32,13.288,10.32,23.572c0,10.547-4.076,19.305-12.23,26.274c-8.152,6.97-19.67,10.455-34.551,10.455
c-15.197,0-27.15-3.433-35.857-10.298c-8.707-6.865-13.061-16.302-13.061-28.311H592.307z"/>
<path d="M427.151,85.781h27.331l-38.608,72.151v43.283h-24.121v-43.283l-39.94-72.151h28.428l23.964,50.277L427.151,85.781z"/>
<path d="M553.467,106.221h-61.084v24.512h56.073v20.048h-56.073v29.681h63.905v20.753H468.81V85.781h84.657V106.221z"/>
<path d="M592.307,165.583c0.746,5.274,2.213,9.215,4.396,11.826c3.998,4.751,10.848,7.126,20.551,7.126
c5.811,0,10.529-0.626,14.152-1.88c6.877-2.4,10.316-6.864,10.316-13.392c0-3.811-1.686-6.761-5.053-8.849
c-3.371-2.036-8.713-3.837-16.027-5.404l-12.498-2.741c-12.283-2.714-20.721-5.664-25.314-8.849
c-7.779-5.326-11.668-13.652-11.668-24.982c0-10.337,3.805-18.925,11.414-25.765c7.611-6.839,18.789-10.259,33.537-10.259
c12.312,0,22.816,3.224,31.512,9.671c8.693,6.449,13.252,15.807,13.676,28.076h-23.182c-0.428-6.943-3.531-11.877-9.312-14.801
c-3.855-1.931-8.645-2.897-14.371-2.897c-6.369,0-11.455,1.253-15.254,3.759c-3.801,2.506-5.701,6.004-5.701,10.494
c0,4.125,1.873,7.205,5.621,9.241c2.408,1.358,7.52,2.95,15.336,4.777l20.258,4.777c8.879,2.089,15.533,4.882,19.965,8.379
c6.881,5.431,10.32,13.288,10.32,23.572c0,10.547-4.076,19.305-12.23,26.274c-8.152,6.97-19.67,10.455-34.551,10.455
c-15.197,0-27.15-3.433-35.857-10.298c-8.707-6.865-13.061-16.302-13.061-28.311H592.307z"/>
</g>
<g id="no">
<path d="M400.993,246.168h25.287l45.821,80.49v-80.49h22.476v115.435h-24.115l-46.993-81.906v81.906h-22.476V246.168z"/>
<path d="M605.936,351.343c-8.721,8.98-21.33,13.471-37.826,13.471c-16.498,0-29.107-4.49-37.824-13.471
c-11.697-11.016-17.542-26.887-17.542-47.615c0-21.144,5.845-37.015,17.542-47.614c8.717-8.979,21.326-13.47,37.824-13.47
c16.496,0,29.105,4.491,37.826,13.47c11.641,10.6,17.463,26.47,17.463,47.614C623.398,324.457,617.576,340.328,605.936,351.343z
M590.859,333.801c5.611-7.048,8.418-17.072,8.418-30.073c0-12.947-2.807-22.958-8.418-30.033
c-5.613-7.074-13.195-10.611-22.75-10.611s-17.178,3.524-22.867,10.572c-5.691,7.048-8.537,17.072-8.537,30.072
c0,13.001,2.846,23.025,8.537,30.073c5.689,7.048,13.312,10.572,22.867,10.572S585.246,340.849,590.859,333.801z"/>
<path d="M400.993,246.168h25.287l45.821,80.49v-80.49h22.476v115.435h-24.115l-46.993-81.906v81.906h-22.476V246.168z"/>
<path d="M605.936,351.343c-8.721,8.98-21.33,13.471-37.826,13.471c-16.498,0-29.107-4.49-37.824-13.471
c-11.697-11.016-17.542-26.887-17.542-47.615c0-21.144,5.845-37.015,17.542-47.614c8.717-8.979,21.326-13.47,37.824-13.47
c16.496,0,29.105,4.491,37.826,13.47c11.641,10.6,17.463,26.47,17.463,47.614C623.398,324.457,617.576,340.328,605.936,351.343z
M590.859,333.801c5.611-7.048,8.418-17.072,8.418-30.073c0-12.947-2.807-22.958-8.418-30.033
c-5.613-7.074-13.195-10.611-22.75-10.611s-17.178,3.524-22.867,10.572c-5.691,7.048-8.537,17.072-8.537,30.072
c0,13.001,2.846,23.025,8.537,30.073c5.689,7.048,13.312,10.572,22.867,10.572S585.246,340.849,590.859,333.801z"/>
</g>
</svg>
</body>

236
examples/Paperjs.org/Qbertify.html
View file

File diff suppressed because one or more lines are too long

128
examples/Paperjs.org/RadialRainbows.html
View file

@ -1,80 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Radial Rainbows</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var point = view.center;
<meta charset="UTF-8">
<title>Radial Rainbows</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var point = view.center;
var colors = [];
var cycles = 4;
for (var i = 0, l = 60; i < l; i++) {
var brightness = 1 - (i / l) * 1.5;
var hue = i / l * cycles * 360;
var color = {
hue: hue,
saturation: 1,
brightness: brightness
};
colors.push(color);
}
var colors = [];
var cycles = 4;
for (var i = 0, l = 60; i < l; i++) {
var brightness = 1 - (i / l) * 1.5;
var hue = i / l * cycles * 360;
var color = {
hue: hue,
saturation: 1,
brightness: brightness
};
colors.push(color);
}
var path = new Path.Rectangle(view.bounds);
var gradient = new Gradient(colors, true);
var radius = Math.max(view.size.width, view.size.height) * 0.75;
path.fillColor = new Color(gradient, point, point + [radius, 0]);
var gradientColor = path.fillColor;
var path = new Path.Rectangle(view.bounds);
var gradient = new Gradient(colors, true);
var radius = Math.max(view.size.width, view.size.height) * 0.75;
path.fillColor = new Color(gradient, point, point + [radius, 0]);
var gradientColor = path.fillColor;
var mouseDown = false,
mousePoint = view.center;
var mouseDown = false,
mousePoint = view.center;
function onMouseDown(event) {
mouseDown = true;
mousePoint = event.point;
}
function onMouseDown(event) {
mouseDown = true;
mousePoint = event.point;
}
function onMouseDrag(event) {
mousePoint = event.point;
}
function onMouseDrag(event) {
mousePoint = event.point;
}
function onMouseUp(event) {
vector.length = 10;
mouseDown = false;
}
function onMouseUp(event) {
vector.length = 10;
mouseDown = false;
}
var grow = false;
var vector = new Point(150, 0);
var grow = false;
var vector = new Point(150, 0);
function onFrame() {
for (var i = 0, l = gradient.stops.length; i < l; i++)
gradient.stops[i].color.hue -= 20;
if (grow && vector.length > 300) {
grow = false;
} else if (!grow && vector.length < 75) {
grow = true;
}
if (mouseDown) {
point = point + (mousePoint - point) / 10;
} else {
vector.length += (grow ? 1 : -1);
vector.angle += 5;
}
gradientColor.highlight = mouseDown ? point : point + vector;
}
function onFrame() {
for (var i = 0, l = gradient.stops.length; i < l; i++)
gradient.stops[i].color.hue -= 20;
if (grow && vector.length > 300) {
grow = false;
} else if (!grow && vector.length < 75) {
grow = true;
}
if (mouseDown) {
point = point + (mousePoint - point) / 10;
} else {
vector.length += (grow ? 1 : -1);
vector.angle += 5;
}
gradientColor.highlight = mouseDown ? point : point + vector;
}
function onResize(event) {
point = view.center;
path.bounds = view.bounds;
var gradientColor = path.fillColor;
gradientColor.origin = point;
var radius = Math.max(view.size.width, view.size.height) * 0.75;
gradientColor.destination = point + [radius, 0];
}
</script>
function onResize(event) {
point = view.center;
path.bounds = view.bounds;
var gradientColor = path.fillColor;
gradientColor.origin = point;
var radius = Math.max(view.size.width, view.size.height) * 0.75;
gradientColor.destination = point + [radius, 0];
}
</script>
</head>
<body>
<canvas id="canvas" hidpi="off" resize></canvas>
<canvas id="canvas" hidpi="off" resize></canvas>
</body>
</html>

62
examples/Paperjs.org/RoundedRectangles.html
View file

@ -1,41 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rounded Rectangles</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var mousePoint = view.center;
var amount = 25;
var colors = ['red', 'white', 'blue', 'white'];
<meta charset="UTF-8">
<title>Rounded Rectangles</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var mousePoint = view.center;
var amount = 25;
var colors = ['red', 'white', 'blue', 'white'];
for (var i = 0; i < amount; i++) {
var rect = new Rectangle([0, 0], [25, 25]);
rect.center = mousePoint;
var path = new Path.Rectangle(rect, 6);
path.fillColor = colors[i % 4];
var scale = (1 - i / amount) * 20;
path.scale(scale);
}
for (var i = 0; i < amount; i++) {
var rect = new Rectangle([0, 0], [25, 25]);
rect.center = mousePoint;
var path = new Path.Rectangle(rect, 6);
path.fillColor = colors[i % 4];
var scale = (1 - i / amount) * 20;
path.scale(scale);
}
function onMouseMove(event) {
mousePoint = event.point;
}
function onMouseMove(event) {
mousePoint = event.point;
}
var children = project.activeLayer.children;
function onFrame(event) {
for (var i = 0, l = children.length; i < l; i++) {
var item = children[i];
var delta = (mousePoint - item.position) / (i + 5);
item.rotate(Math.sin((event.count + i) / 10) * 7);
if (delta.length > 0.1)
item.position += delta;
}
}
</script>
var children = project.activeLayer.children;
function onFrame(event) {
for (var i = 0, l = children.length; i < l; i++) {
var item = children[i];
var delta = (mousePoint - item.position) / (i + 5);
item.rotate(Math.sin((event.count + i) / 10) * 7);
if (delta.length > 0.1)
item.position += delta;
}
}
</script>
</head>
<body>
<canvas id="canvas" resize hidpi="off"></canvas>
<canvas id="canvas" resize hidpi="off"></canvas>
</body>
</html>

226
examples/Paperjs.org/SatieLikedToDraw.html
View file

@ -6,135 +6,135 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var leftPath = new Path({
strokeColor: 'red',
opacity: 0.5
});
var leftPath = new Path({
strokeColor: 'red',
opacity: 0.5
});
var rightPath = new Path({
strokeColor: 'green',
opacity: 0.5
});
var rightPath = new Path({
strokeColor: 'green',
opacity: 0.5
});
var amount = 8;
var step = view.size.width / (amount + 1);
var flip = false;
var amount = 8;
var step = view.size.width / (amount + 1);
var flip = false;
for (var i = 0; i <= amount; i++) {
leftPath.add(new Point(i * step, 0));
rightPath.add(new Point(i * step, 0));
}
for (var i = 0; i <= amount; i++) {
leftPath.add(new Point(i * step, 0));
rightPath.add(new Point(i * step, 0));
}
var group = new Group({
children: [leftPath, rightPath],
applyMatrix: false,
strokeWidth: 30,
strokeJoin: 'round',
strokeCap: 'butt',
pivot: leftPath.position,
position: view.center
});
var group = new Group({
children: [leftPath, rightPath],
applyMatrix: false,
strokeWidth: 30,
strokeJoin: 'round',
strokeCap: 'butt',
pivot: leftPath.position,
position: view.center
});
function onMouseDown() {
flip = !flip;
}
function onMouseDown() {
flip = !flip;
}
function onKeyDown(event) {
if (event.key === 'space')
group.fullySelected = !group.fullySelected;
}
function onKeyDown(event) {
if (event.key === 'space')
group.fullySelected = !group.fullySelected;
}
var audio, source, analyserL, analyserR, freqByteData;
var audio, source, analyserL, analyserR, freqByteData;
view.onFrame = function() {
var step = view.size.width / (amount + 1);
var scale = view.size.height / 1.5;
analyserL.getByteFrequencyData(freqByteData);
var leftBands = getEqualizerBands(freqByteData, true);
analyserR.getByteFrequencyData(freqByteData);
var rightBands = getEqualizerBands(freqByteData, true);
for (var i = 1; i <= amount; i++) {
leftPath.segments[i].point = [i * step, -leftBands[i - 1] * scale];
rightPath.segments[i].point = [i * step, -rightBands[i - 1] * scale * (flip ? -1 : 1)];
}
leftPath.smooth();
rightPath.smooth();
group.pivot = [leftPath.position.x, 0];
group.position = view.center;
}
view.onFrame = function() {
var step = view.size.width / (amount + 1);
var scale = view.size.height / 1.5;
analyserL.getByteFrequencyData(freqByteData);
var leftBands = getEqualizerBands(freqByteData, true);
analyserR.getByteFrequencyData(freqByteData);
var rightBands = getEqualizerBands(freqByteData, true);
for (var i = 1; i <= amount; i++) {
leftPath.segments[i].point = [i * step, -leftBands[i - 1] * scale];
rightPath.segments[i].point = [i * step, -rightBands[i - 1] * scale * (flip ? -1 : 1)];
}
leftPath.smooth();
rightPath.smooth();
group.pivot = [leftPath.position.x, 0];
group.position = view.center;
}
// Pause animation until we have data
view.pause();
// Pause animation until we have data
view.pause();
var AudioContext = window.AudioContext || window.webkitAudioContext;
if (AudioContext) {
audio = new AudioContext();
source = audio.createBufferSource();
// Create two separate analyzers for left and right channel.
analyserL = audio.createAnalyser();
analyserL.smoothingTimeConstant = 0.25;
analyserL.fftSize = Math.pow(2, amount) * 2;
analyserR = audio.createAnalyser();
analyserR.smoothingTimeConstant = analyserL.smoothingTimeConstant;
analyserR.fftSize = analyserL.fftSize;
// Create the buffer to receive the analyzed data.
freqByteData = new Uint8Array(analyserL.frequencyBinCount);
// Create a splitter to feed them both
var splitter = audio.createChannelSplitter();
// Connect audio processing graph
source.connect(splitter);
splitter.connect(analyserL, 0, 0);
splitter.connect(analyserR, 1, 0);
// Connect source to output also so we can hear it
source.connect(audio.destination);
loadAudioBuffer('http://dl.dropboxusercontent.com/s/ozlvjokqu7ujjwh/gnossienne.mp3');
} else {
// TODO: Print error message
alert('Audio not supported');
}
var AudioContext = window.AudioContext || window.webkitAudioContext;
if (AudioContext) {
audio = new AudioContext();
source = audio.createBufferSource();
// Create two separate analyzers for left and right channel.
analyserL = audio.createAnalyser();
analyserL.smoothingTimeConstant = 0.25;
analyserL.fftSize = Math.pow(2, amount) * 2;
analyserR = audio.createAnalyser();
analyserR.smoothingTimeConstant = analyserL.smoothingTimeConstant;
analyserR.fftSize = analyserL.fftSize;
// Create the buffer to receive the analyzed data.
freqByteData = new Uint8Array(analyserL.frequencyBinCount);
// Create a splitter to feed them both
var splitter = audio.createChannelSplitter();
// Connect audio processing graph
source.connect(splitter);
splitter.connect(analyserL, 0, 0);
splitter.connect(analyserR, 1, 0);
// Connect source to output also so we can hear it
source.connect(audio.destination);
loadAudioBuffer('http://assets.paperjs.org/audio/gnossienne.mp3');
} else {
// TODO: Print error message
alert('Audio not supported');
}
function loadAudioBuffer(url) {
// Load asynchronously
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
function loadAudioBuffer(url) {
// Load asynchronously
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function() {
audio.decodeAudioData(
request.response,
function(buffer) {
source.buffer = buffer;
source.loop = true;
source.start(0);
view.play();
},
request.onload = function() {
audio.decodeAudioData(
request.response,
function(buffer) {
source.buffer = buffer;
source.loop = true;
source.start(0);
view.play();
},
function(buffer) {
alert("Error loading MP3");
}
);
};
request.send();
}
function(buffer) {
alert("Error loading MP3");
}
);
};
request.send();
}
function getEqualizerBands(data) {
var bands = [];
var amount = Math.sqrt(data.length) / 2;
for(var i = 0; i < amount; i++) {
var start = Math.pow(2, i) - 1;
var end = start * 2 + 1;
var sum = 0;
for (var j = start; j < end; j++) {
sum += data[j];
}
var avg = sum / (255 * (end - start));
bands[i] = Math.sqrt(avg / Math.sqrt(2));
}
return bands;
}
function getEqualizerBands(data) {
var bands = [];
var amount = Math.sqrt(data.length) / 2;
for(var i = 0; i < amount; i++) {
var start = Math.pow(2, i) - 1;
var end = start * 2 + 1;
var sum = 0;
for (var j = start; j < end; j++) {
sum += data[j];
}
var avg = sum / (255 * (end - start));
bands[i] = Math.sqrt(avg / Math.sqrt(2));
}
return bands;
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

92
examples/Paperjs.org/Simplify.html
View file

@ -1,63 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simplify</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var path;
<meta charset="UTF-8">
<title>Simplify</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var path;
var textItem = new PointText({
content: 'Click and drag to draw a line.',
point: new Point(20, 30),
fillColor: 'black',
});
var textItem = new PointText({
content: 'Click and drag to draw a line.',
point: new Point(20, 30),
fillColor: 'black',
});
function onMouseDown(event) {
// If we produced a path before, deselect it:
if (path) {
path.selected = false;
}
function onMouseDown(event) {
// If we produced a path before, deselect it:
if (path) {
path.selected = false;
}
// Create a new path and set its stroke color to black:
path = new Path({
segments: [event.point],
strokeColor: 'black',
// Select the path, so we can see its segment points:
fullySelected: true
});
}
// Create a new path and set its stroke color to black:
path = new Path({
segments: [event.point],
strokeColor: 'black',
// Select the path, so we can see its segment points:
fullySelected: true
});
}
// While the user drags the mouse, points are added to the path
// at the position of the mouse:
function onMouseDrag(event) {
path.add(event.point);
// While the user drags the mouse, points are added to the path
// at the position of the mouse:
function onMouseDrag(event) {
path.add(event.point);
// Update the content of the text item to show how many
// segments it has:
textItem.content = 'Segment count: ' + path.segments.length;
}
// Update the content of the text item to show how many
// segments it has:
textItem.content = 'Segment count: ' + path.segments.length;
}
// When the mouse is released, we simplify the path:
function onMouseUp(event) {
var segmentCount = path.segments.length;
// When the mouse is released, we simplify the path:
function onMouseUp(event) {
var segmentCount = path.segments.length;
// When the mouse is released, simplify it:
path.simplify(10);
// When the mouse is released, simplify it:
path.simplify(10);
// Select the path, so we can see its segments:
path.fullySelected = true;
// Select the path, so we can see its segments:
path.fullySelected = true;
var newSegmentCount = path.segments.length;
var difference = segmentCount - newSegmentCount;
var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
textItem.content = difference + ' of the ' + segmentCount + ' segments were removed. Saving ' + percentage + '%';
var newSegmentCount = path.segments.length;
var difference = segmentCount - newSegmentCount;
var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
textItem.content = difference + ' of the ' + segmentCount + ' segments were removed. Saving ' + percentage + '%';
}
</script>
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

190
examples/Paperjs.org/SpiralRaster.html
View file

File diff suppressed because one or more lines are too long

502
examples/Paperjs.org/Tadpoles.html
View file

@ -1,283 +1,283 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tadpoles</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Adapted from Flocking Processing example by Daniel Schiffman:
// http://processing.org/learning/topics/flocking.html
<meta charset="UTF-8">
<title>Tadpoles</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Adapted from Flocking Processing example by Daniel Schiffman:
// http://processing.org/learning/topics/flocking.html
var Boid = Base.extend({
initialize: function(position, maxSpeed, maxForce) {
var strength = Math.random() * 0.5;
this.acceleration = new Point();
this.vector = Point.random() * 2 - 1;
this.position = position.clone();
this.radius = 30;
this.maxSpeed = maxSpeed + strength;
this.maxForce = maxForce + strength;
this.amount = strength * 10 + 10;
this.count = 0;
this.createItems();
},
var Boid = Base.extend({
initialize: function(position, maxSpeed, maxForce) {
var strength = Math.random() * 0.5;
this.acceleration = new Point();
this.vector = Point.random() * 2 - 1;
this.position = position.clone();
this.radius = 30;
this.maxSpeed = maxSpeed + strength;
this.maxForce = maxForce + strength;
this.amount = strength * 10 + 10;
this.count = 0;
this.createItems();
},
run: function(boids) {
this.lastLoc = this.position.clone();
if (!groupTogether) {
this.flock(boids);
} else {
this.align(boids);
}
this.borders();
this.update();
this.calculateTail();
this.moveHead();
},
run: function(boids) {
this.lastLoc = this.position.clone();
if (!groupTogether) {
this.flock(boids);
} else {
this.align(boids);
}
this.borders();
this.update();
this.calculateTail();
this.moveHead();
},
calculateTail: function() {
var segments = this.path.segments,
shortSegments = this.shortPath.segments;
var speed = this.vector.length;
var pieceLength = 5 + speed / 3;
var point = this.position;
segments[0].point = shortSegments[0].point = point;
// Chain goes the other way than the movement
var lastVector = -this.vector;
for (var i = 1; i < this.amount; i++) {
var vector = segments[i].point - point;
this.count += speed * 10;
var wave = Math.sin((this.count + i * 3) / 300);
var sway = lastVector.rotate(90).normalize(wave);
point += lastVector.normalize(pieceLength) + sway;
segments[i].point = point;
if (i < 3)
shortSegments[i].point = point;
lastVector = vector;
}
this.path.smooth();
},
calculateTail: function() {
var segments = this.path.segments,
shortSegments = this.shortPath.segments;
var speed = this.vector.length;
var pieceLength = 5 + speed / 3;
var point = this.position;
segments[0].point = shortSegments[0].point = point;
// Chain goes the other way than the movement
var lastVector = -this.vector;
for (var i = 1; i < this.amount; i++) {
var vector = segments[i].point - point;
this.count += speed * 10;
var wave = Math.sin((this.count + i * 3) / 300);
var sway = lastVector.rotate(90).normalize(wave);
point += lastVector.normalize(pieceLength) + sway;
segments[i].point = point;
if (i < 3)
shortSegments[i].point = point;
lastVector = vector;
}
this.path.smooth();
},
createItems: function() {
this.head = new Shape.Ellipse({
center: [0, 0],
size: [13, 8],
fillColor: 'white'
});
createItems: function() {
this.head = new Shape.Ellipse({
center: [0, 0],
size: [13, 8],
fillColor: 'white'
});
this.path = new Path({
strokeColor: 'white',
strokeWidth: 2,
strokeCap: 'round'
});
for (var i = 0; i < this.amount; i++)
this.path.add(new Point());
this.path = new Path({
strokeColor: 'white',
strokeWidth: 2,
strokeCap: 'round'
});
for (var i = 0; i < this.amount; i++)
this.path.add(new Point());
this.shortPath = new Path({
strokeColor: 'white',
strokeWidth: 4,
strokeCap: 'round'
});
for (var i = 0; i < Math.min(3, this.amount); i++)
this.shortPath.add(new Point());
},
this.shortPath = new Path({
strokeColor: 'white',
strokeWidth: 4,
strokeCap: 'round'
});
for (var i = 0; i < Math.min(3, this.amount); i++)
this.shortPath.add(new Point());
},
moveHead: function() {
this.head.position = this.position;
this.head.rotation = this.vector.angle;
},
moveHead: function() {
this.head.position = this.position;
this.head.rotation = this.vector.angle;
},
// We accumulate a new acceleration each time based on three rules
flock: function(boids) {
var separation = this.separate(boids) * 3;
var alignment = this.align(boids);
var cohesion = this.cohesion(boids);
this.acceleration += separation + alignment + cohesion;
},
// We accumulate a new acceleration each time based on three rules
flock: function(boids) {
var separation = this.separate(boids) * 3;
var alignment = this.align(boids);
var cohesion = this.cohesion(boids);
this.acceleration += separation + alignment + cohesion;
},
update: function() {
// Update velocity
this.vector += this.acceleration;
// Limit speed (vector#limit?)
this.vector.length = Math.min(this.maxSpeed, this.vector.length);
this.position += this.vector;
// Reset acceleration to 0 each cycle
this.acceleration = new Point();
},
update: function() {
// Update velocity
this.vector += this.acceleration;
// Limit speed (vector#limit?)
this.vector.length = Math.min(this.maxSpeed, this.vector.length);
this.position += this.vector;
// Reset acceleration to 0 each cycle
this.acceleration = new Point();
},
seek: function(target) {
this.acceleration += this.steer(target, false);
},
seek: function(target) {
this.acceleration += this.steer(target, false);
},
arrive: function(target) {
this.acceleration += this.steer(target, true);
},
arrive: function(target) {
this.acceleration += this.steer(target, true);
},
borders: function() {
var vector = new Point();
var position = this.position;
var radius = this.radius;
var size = view.size;
if (position.x < -radius) vector.x = size.width + radius;
if (position.y < -radius) vector.y = size.height + radius;
if (position.x > size.width + radius) vector.x = -size.width -radius;
if (position.y > size.height + radius) vector.y = -size.height -radius;
if (!vector.isZero()) {
this.position += vector;
var segments = this.path.segments;
for (var i = 0; i < this.amount; i++) {
segments[i].point += vector;
}
}
},
borders: function() {
var vector = new Point();
var position = this.position;
var radius = this.radius;
var size = view.size;
if (position.x < -radius) vector.x = size.width + radius;
if (position.y < -radius) vector.y = size.height + radius;
if (position.x > size.width + radius) vector.x = -size.width -radius;
if (position.y > size.height + radius) vector.y = -size.height -radius;
if (!vector.isZero()) {
this.position += vector;
var segments = this.path.segments;
for (var i = 0; i < this.amount; i++) {
segments[i].point += vector;
}
}
},
// A method that calculates a steering vector towards a target
// Takes a second argument, if true, it slows down as it approaches
// the target
steer: function(target, slowdown) {
var steer,
desired = target - this.position;
var distance = desired.length;
// Two options for desired vector magnitude
// (1 -- based on distance, 2 -- maxSpeed)
if (slowdown && distance < 100) {
// This damping is somewhat arbitrary:
desired.length = this.maxSpeed * (distance / 100);
} else {
desired.length = this.maxSpeed;
}
steer = desired - this.vector;
steer.length = Math.min(this.maxForce, steer.length);
return steer;
},
// A method that calculates a steering vector towards a target
// Takes a second argument, if true, it slows down as it approaches
// the target
steer: function(target, slowdown) {
var steer,
desired = target - this.position;
var distance = desired.length;
// Two options for desired vector magnitude
// (1 -- based on distance, 2 -- maxSpeed)
if (slowdown && distance < 100) {
// This damping is somewhat arbitrary:
desired.length = this.maxSpeed * (distance / 100);
} else {
desired.length = this.maxSpeed;
}
steer = desired - this.vector;
steer.length = Math.min(this.maxForce, steer.length);
return steer;
},
separate: function(boids) {
var desiredSeperation = 60;
var steer = new Point();
var count = 0;
// For every boid in the system, check if it's too close
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var vector = this.position - other.position;
var distance = vector.length;
if (distance > 0 && distance < desiredSeperation) {
// Calculate vector pointing away from neighbor
steer += vector.normalize(1 / distance);
count++;
}
}
// Average -- divide by how many
if (count > 0)
steer /= count;
if (!steer.isZero()) {
// Implement Reynolds: Steering = Desired - Velocity
steer.length = this.maxSpeed;
steer -= this.vector;
steer.length = Math.min(steer.length, this.maxForce);
}
return steer;
},
separate: function(boids) {
var desiredSeperation = 60;
var steer = new Point();
var count = 0;
// For every boid in the system, check if it's too close
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var vector = this.position - other.position;
var distance = vector.length;
if (distance > 0 && distance < desiredSeperation) {
// Calculate vector pointing away from neighbor
steer += vector.normalize(1 / distance);
count++;
}
}
// Average -- divide by how many
if (count > 0)
steer /= count;
if (!steer.isZero()) {
// Implement Reynolds: Steering = Desired - Velocity
steer.length = this.maxSpeed;
steer -= this.vector;
steer.length = Math.min(steer.length, this.maxForce);
}
return steer;
},
// Alignment
// For every nearby boid in the system, calculate the average velocity
align: function(boids) {
var neighborDist = 25;
var steer = new Point();
var count = 0;
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var distance = this.position.getDistance(other.position);
if (distance > 0 && distance < neighborDist) {
steer += other.vector;
count++;
}
}
// Alignment
// For every nearby boid in the system, calculate the average velocity
align: function(boids) {
var neighborDist = 25;
var steer = new Point();
var count = 0;
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var distance = this.position.getDistance(other.position);
if (distance > 0 && distance < neighborDist) {
steer += other.vector;
count++;
}
}
if (count > 0)
steer /= count;
if (!steer.isZero()) {
// Implement Reynolds: Steering = Desired - Velocity
steer.length = this.maxSpeed;
steer -= this.vector;
steer.length = Math.min(steer.length, this.maxForce);
}
return steer;
},
if (count > 0)
steer /= count;
if (!steer.isZero()) {
// Implement Reynolds: Steering = Desired - Velocity
steer.length = this.maxSpeed;
steer -= this.vector;
steer.length = Math.min(steer.length, this.maxForce);
}
return steer;
},
// Cohesion
// For the average location (i.e. center) of all nearby boids,
// calculate steering vector towards that location
cohesion: function(boids) {
var neighborDist = 100;
var sum = new Point();
var count = 0;
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var distance = this.position.getDistance(other.position);
if (distance > 0 && distance < neighborDist) {
sum += other.position; // Add location
count++;
}
}
if (count > 0) {
sum /= count;
// Steer towards the location
return this.steer(sum, false);
}
return sum;
}
});
// Cohesion
// For the average location (i.e. center) of all nearby boids,
// calculate steering vector towards that location
cohesion: function(boids) {
var neighborDist = 100;
var sum = new Point();
var count = 0;
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var distance = this.position.getDistance(other.position);
if (distance > 0 && distance < neighborDist) {
sum += other.position; // Add location
count++;
}
}
if (count > 0) {
sum /= count;
// Steer towards the location
return this.steer(sum, false);
}
return sum;
}
});
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');
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');
var boids = [];
var groupTogether = false;
var boids = [];
var groupTogether = false;
// Add the boids:
for (var i = 0; i < 30; i++) {
var position = Point.random() * view.size;
boids.push(new Boid(position, 10, 0.05));
}
// Add the boids:
for (var i = 0; i < 30; i++) {
var position = Point.random() * view.size;
boids.push(new Boid(position, 10, 0.05));
}
function onFrame(event) {
for (var i = 0, l = boids.length; i < l; i++) {
if (groupTogether) {
var length = ((i + event.count / 30) % l) / l * heartPath.length;
var point = heartPath.getPointAt(length);
if (point)
boids[i].arrive(point);
}
boids[i].run(boids);
}
}
function onFrame(event) {
for (var i = 0, l = boids.length; i < l; i++) {
if (groupTogether) {
var length = ((i + event.count / 30) % l) / l * heartPath.length;
var point = heartPath.getPointAt(length);
if (point)
boids[i].arrive(point);
}
boids[i].run(boids);
}
}
// Reposition the heart path whenever the window is resized:
function onResize(event) {
heartPath.fitBounds(view.bounds);
heartPath.scale(0.8);
}
// Reposition the heart path whenever the window is resized:
function onResize(event) {
heartPath.fitBounds(view.bounds);
heartPath.scale(0.8);
}
function onMouseDown(event) {
groupTogether = !groupTogether;
}
function onMouseDown(event) {
groupTogether = !groupTogether;
}
function onKeyDown(event) {
if (event.key == 'space') {
var layer = project.activeLayer;
layer.selected = !layer.selected;
return false;
}
}
</script>
<style>
body {
background: black;
}
</style>
function onKeyDown(event) {
if (event.key == 'space') {
var layer = project.activeLayer;
layer.selected = !layer.selected;
return false;
}
}
</script>
<style>
body {
background: black;
}
</style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

236
examples/Paperjs.org/Voronoi.html
View file

@ -1,134 +1,134 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Voronoi</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/javascript" src="http://jonathanpuckey.com/static/rhill-voronoi-core.js"></script>
<script type="text/paperscript" canvas="canvas">
var voronoi = new Voronoi();
var sites = generateBeeHivePoints(view.size / 200, true);
var bbox, diagram;
var oldSize = view.size;
var spotColor = new Color('red');
var mousePos = view.center;
var selected = false;
<meta charset="UTF-8">
<title>Voronoi</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/javascript" src="http://jonathanpuckey.com/static/rhill-voronoi-core.js"></script>
<script type="text/paperscript" canvas="canvas">
var voronoi = new Voronoi();
var sites = generateBeeHivePoints(view.size / 200, true);
var bbox, diagram;
var oldSize = view.size;
var spotColor = new Color('red');
var mousePos = view.center;
var selected = false;
onResize();
onResize();
function onMouseDown(event) {
sites.push(event.point);
renderDiagram();
}
function onMouseDown(event) {
sites.push(event.point);
renderDiagram();
}
function onMouseMove(event) {
mousePos = event.point;
if (event.count == 0)
sites.push(event.point);
sites[sites.length - 1] = event.point;
renderDiagram();
}
function onMouseMove(event) {
mousePos = event.point;
if (event.count == 0)
sites.push(event.point);
sites[sites.length - 1] = event.point;
renderDiagram();
}
function renderDiagram() {
project.activeLayer.children = [];
var diagram = voronoi.compute(sites, bbox);
if (diagram) {
for (var i = 0, l = sites.length; i < l; i++) {
var cell = diagram.cells[sites[i].voronoiId];
if (cell) {
var halfedges = cell.halfedges,
length = halfedges.length;
if (length > 2) {
var points = [];
for (var j = 0; j < length; j++) {
v = halfedges[j].getEndpoint();
points.push(new Point(v));
}
createPath(points, sites[i]);
}
}
}
}
}
function renderDiagram() {
project.activeLayer.children = [];
var diagram = voronoi.compute(sites, bbox);
if (diagram) {
for (var i = 0, l = sites.length; i < l; i++) {
var cell = diagram.cells[sites[i].voronoiId];
if (cell) {
var halfedges = cell.halfedges,
length = halfedges.length;
if (length > 2) {
var points = [];
for (var j = 0; j < length; j++) {
v = halfedges[j].getEndpoint();
points.push(new Point(v));
}
createPath(points, sites[i]);
}
}
}
}
}
function removeSmallBits(path) {
var averageLength = path.length / path.segments.length;
var min = path.length / 50;
for(var i = path.segments.length - 1; i >= 0; i--) {
var segment = path.segments[i];
var cur = segment.point;
var nextSegment = segment.next;
var next = nextSegment.point + nextSegment.handleIn;
if (cur.getDistance(next) < min) {
segment.remove();
}
}
}
function removeSmallBits(path) {
var averageLength = path.length / path.segments.length;
var min = path.length / 50;
for(var i = path.segments.length - 1; i >= 0; i--) {
var segment = path.segments[i];
var cur = segment.point;
var nextSegment = segment.next;
var next = nextSegment.point + nextSegment.handleIn;
if (cur.getDistance(next) < min) {
segment.remove();
}
}
}
function generateBeeHivePoints(size, loose) {
var points = [];
var col = view.size / size;
for(var i = -1; i < size.width + 1; i++) {
for(var j = -1; j < size.height + 1; j++) {
var point = new Point(i, j) / new Point(size) * view.size + col / 2;
if (j % 2)
point += new Point(col.width / 2, 0);
if (loose)
point += (col / 4) * Point.random() - col / 4;
points.push(point);
}
}
return points;
}
function createPath(points, center) {
var path = new Path();
if (!selected) {
path.fillColor = spotColor;
} else {
path.fullySelected = selected;
}
path.closed = true;
function generateBeeHivePoints(size, loose) {
var points = [];
var col = view.size / size;
for(var i = -1; i < size.width + 1; i++) {
for(var j = -1; j < size.height + 1; j++) {
var point = new Point(i, j) / new Point(size) * view.size + col / 2;
if (j % 2)
point += new Point(col.width / 2, 0);
if (loose)
point += (col / 4) * Point.random() - col / 4;
points.push(point);
}
}
return points;
}
function createPath(points, center) {
var path = new Path();
if (!selected) {
path.fillColor = spotColor;
} else {
path.fullySelected = selected;
}
path.closed = true;
for (var i = 0, l = points.length; i < l; i++) {
var point = points[i];
var next = points[(i + 1) == points.length ? 0 : i + 1];
var vector = (next - point) / 2;
path.add({
point: point + vector,
handleIn: -vector,
handleOut: vector
});
}
path.scale(0.95);
removeSmallBits(path);
return path;
}
for (var i = 0, l = points.length; i < l; i++) {
var point = points[i];
var next = points[(i + 1) == points.length ? 0 : i + 1];
var vector = (next - point) / 2;
path.add({
point: point + vector,
handleIn: -vector,
handleOut: vector
});
}
path.scale(0.95);
removeSmallBits(path);
return path;
}
function onResize() {
var margin = 20;
bbox = {
xl: margin,
xr: view.bounds.width - margin,
yt: margin,
yb: view.bounds.height - margin
};
for (var i = 0, l = sites.length; i < l; i++) {
sites[i] = sites[i] * view.size / oldSize;
}
oldSize = view.size;
renderDiagram();
}
function onResize() {
var margin = 20;
bbox = {
xl: margin,
xr: view.bounds.width - margin,
yt: margin,
yb: view.bounds.height - margin
};
for (var i = 0, l = sites.length; i < l; i++) {
sites[i] = sites[i] * view.size / oldSize;
}
oldSize = view.size;
renderDiagram();
}
function onKeyDown(event) {
if (event.key == 'space') {
selected = !selected;
renderDiagram();
}
}
</script>
function onKeyDown(event) {
if (event.key == 'space') {
selected = !selected;
renderDiagram();
}
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

160
examples/Rasters/PhyllotaxisRaster.html
View file

File diff suppressed because one or more lines are too long

50
examples/Rasters/Raster.html
View file

File diff suppressed because one or more lines are too long

66
examples/Rasters/RotationRaster.html
View file

File diff suppressed because one or more lines are too long

41
examples/SVG Export/Circle Testing.html
View file

@ -1,33 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Circle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Circle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var topLeft = new Point(200, 200);
var size = new Size(150, 100);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'black';
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var topLeft = new Point(200, 200);
var size = new Size(150, 100);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'black';
var topLeft = new Point(5, 400);
var size = new Size(100, 50);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'yellow';
var topLeft = new Point(5, 400);
var size = new Size(100, 50);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Ellipse(rectangle);
path.fillColor = 'yellow';
var path = new Path.Circle(new Point(50, 50), 25);
path.fillColor = 'red';
var path = new Path.Circle(new Point(50, 50), 25);
path.fillColor = 'red';
document.getElementById('svg').appendChild(project.exportSVG());
</script>
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

17
examples/SVG Export/Clipping.html
View file

File diff suppressed because one or more lines are too long

27
examples/SVG Export/Compound Path.html
View file

@ -1,23 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Compound Path</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Compound Path</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle.fillColor = 'black';
var path1 = new Path.Rectangle([200, 200], [100, 100]);
var path2 = new Path.Rectangle([50, 50], [200, 200]);
var path3 = new Path.Rectangle([0, 0], [400, 400]);
new CompoundPath(path1, path2, path3);
document.getElementById('svg').appendChild(project.exportSVG());
</script>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle.fillColor = 'black';
var path1 = new Path.Rectangle([200, 200], [100, 100]);
var path2 = new Path.Rectangle([50, 50], [200, 200]);
var path3 = new Path.Rectangle([0, 0], [400, 400]);
new CompoundPath(path1, path2, path3);
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

33
examples/SVG Export/Empty Path Testing.html
View file

@ -1,29 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Empty Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Empty Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var path = new Path();
path.strokeColor = 'black';
path.add(new Point(30, 30));
path.add(new Point(100, 100));
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var path = new Path();
path.strokeColor = 'black';
path.add(new Point(30, 30));
path.add(new Point(100, 100));
var segments = [new Point(30, 90), new Point(100, 150)];
var path2 = new Path(segments);
path2.strokeColor = 'yellow';
var segments = [new Point(30, 90), new Point(100, 150)];
var path2 = new Path(segments);
path2.strokeColor = 'yellow';
var path3 = new Path();
var path3 = new Path();
document.getElementById('svg').appendChild(project.exportSVG());
</script>
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

75
examples/SVG Export/Gradients.html
View file

@ -1,53 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Gradients</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var stops = [new Color(1, 1, 0, 0), 'red', 'black'];
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var stops = [new Color(1, 1, 0, 0), 'red', 'black'];
var radius = view.bounds.width * 0.4,
from = new Point(view.center.x),
to = from + [radius, 0];
var radius = view.bounds.width * 0.4,
from = new Point(view.center.x),
to = from + [radius, 0];
var circle = new Path.Circle({
center: from,
radius: radius,
fillColor: {
stops: stops,
radial: true,
origin: from,
destination: to
},
strokeColor: 'black'
});
var circle = new Path.Circle({
center: from,
radius: radius,
fillColor: {
stops: stops,
radial: true,
origin: from,
destination: to
},
strokeColor: 'black'
});
var from = view.bounds.leftCenter,
to = view.bounds.bottomRight;
var from = view.bounds.leftCenter,
to = view.bounds.bottomRight;
var rect = new Path.Rectangle({
from: from,
to: to,
fillColor: {
stops: stops,
radial: false,
origin: from,
destination: to
},
strokeColor: 'black'
});
var rect = new Path.Rectangle({
from: from,
to: to,
fillColor: {
stops: stops,
radial: false,
origin: from,
destination: to
},
strokeColor: 'black'
});
rect.rotate(45).scale(0.7);
rect.rotate(45).scale(0.7);
document.getElementById('svg').appendChild(project.exportSVG());
</script>
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="300" height="600"></canvas>
<svg id="svg" width="300" height="600"></svg>
<canvas id="canvas" width="300" height="600"></canvas>
</body>
</html>

33
examples/SVG Export/Group Transform.html
View file

@ -1,26 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group Transform</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Group Transform</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var circle1 = new Path.Circle(new Point(100, 100), 50);
circle1.fillColor = 'red';
var circle2 = new Path.Circle(new Point(200, 100), 50);
circle2.fillColor = 'blue';
var group = new Group(circle1, circle2);
group.translate([100, 100]);
group.scale(0.5);
group.rotate(10);
document.getElementById('svg').appendChild(project.exportSVG());
</script>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var circle1 = new Path.Circle(new Point(100, 100), 50);
circle1.fillColor = 'red';
var circle2 = new Path.Circle(new Point(200, 100), 50);
circle2.fillColor = 'blue';
var group = new Group(circle1, circle2);
group.translate([100, 100]);
group.scale(0.5);
group.rotate(10);
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

59
examples/SVG Export/Line Testing.html
View file

@ -1,42 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line Testing</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Line Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var x1 = 5,
x2 = 45,
y1 = 5,
y2 = 45;
var line1 = new Path.Line([x1, y1], [x2, y2]);
line1.strokeColor = "blue";
line1.strokeWidth = "10";
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var x1 = 5,
x2 = 45,
y1 = 5,
y2 = 45;
var line1 = new Path.Line([x1, y1], [x2, y2]);
line1.strokeColor = "blue";
line1.strokeWidth = "10";
var x3 = 20,
x4 = 99,
y3 = 20,
y4 = 77;
var line2 = new Path.Line([x3, y3], [x4, y4]);
line2.strokeColor = "red";
line2.strokeWidth = "2";
var x3 = 20,
x4 = 99,
y3 = 20,
y4 = 77;
var line2 = new Path.Line([x3, y3], [x4, y4]);
line2.strokeColor = "red";
line2.strokeWidth = "2";
var x5 = 50,
x6 = 200,
y5 = 55,
y6 = 300;
var line3 = new Path.Line([x5, y5], [x6, y6]);
line3.strokeColor = "yellow";
line3.strokeWidth = "5";
var x5 = 50,
x6 = 200,
y5 = 55,
y6 = 300;
var line3 = new Path.Line([x5, y5], [x6, y6]);
line3.strokeColor = "yellow";
line3.strokeWidth = "5";
document.getElementById('svg').appendChild(project.exportSVG());
</script>
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

55
examples/SVG Export/Random Path Testing.html
View file

@ -1,40 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Random Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Random Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var center = new Point(100, 100);
var sides = 3;
var radius = 50;
var triangle = new Path.RegularPolygon(center, sides, radius);
triangle.fillColor = 'black';
copy = triangle.clone();
copy.strokeColor = 'blue';
copy.rotate(45);
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var center = new Point(100, 100);
var sides = 3;
var radius = 50;
var triangle = new Path.RegularPolygon(center, sides, radius);
triangle.fillColor = 'black';
copy = triangle.clone();
copy.strokeColor = 'blue';
copy.rotate(45);
var center = new Point(100, 300);
var sides = 10;
var radius = 50;
var decahedron = new Path.RegularPolygon(center, sides, radius);
decahedron.fillColor = 'black';
var center = new Point(100, 300);
var sides = 10;
var radius = 50;
var decahedron = new Path.RegularPolygon(center, sides, radius);
decahedron.fillColor = 'black';
var center = new Point(100, 400);
var points = 6;
var radius1 = 20;
var radius2 = 50;
var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black';
var center = new Point(100, 400);
var points = 6;
var radius1 = 20;
var radius2 = 50;
var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black';
document.getElementById('svg').appendChild(project.exportSVG());
</script>
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

25
examples/SVG Export/Raster.html
View file

File diff suppressed because one or more lines are too long

81
examples/SVG Export/Rect and Attribute Testing.html
View file

@ -1,54 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var point1 = new Point(10, 10);
var size1 = new Size(50, 50);
var rectangle1 = new Rectangle(point1, size1);
var path1 = new Path.Rectangle(rectangle1);
path1.strokeColor = 'black';
path1.fillColor = 'red';
path1.id = "square1";
path1.strokeCap = "square";
path1.opacity = ".1";
path1.dashArray = [5, 2];
path1.dashOffset = "0";
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var point1 = new Point(10, 10);
var size1 = new Size(50, 50);
var rectangle1 = new Rectangle(point1, size1);
var path1 = new Path.Rectangle(rectangle1);
path1.strokeColor = 'black';
path1.fillColor = 'red';
path1.id = "square1";
path1.strokeCap = "square";
path1.opacity = ".1";
path1.dashArray = [5, 2];
path1.dashOffset = "0";
var point2 = new Point(75, 75);
var point22 = new Point(100, 100);
var path2 = new Path.Rectangle(point2, point22);
path2.strokeColor = 'red';
path2.strokeWidth = '4';
path2.fillColor = 'blue';
path2.id = "square2";
path2.strokeCap = "butt";
path2.opacity = "1";
var point2 = new Point(75, 75);
var point22 = new Point(100, 100);
var path2 = new Path.Rectangle(point2, point22);
path2.strokeColor = 'red';
path2.strokeWidth = '4';
path2.fillColor = 'blue';
path2.id = "square2";
path2.strokeCap = "butt";
path2.opacity = "1";
var point3 = new Point(150, 150);
var size3 = new Size(50, 50);
var rectangle3 = new Rectangle(point3, size3);
var path3 = new Path.Rectangle(rectangle3);
path3.strokeColor = 'blue';
var point3 = new Point(150, 150);
var size3 = new Size(50, 50);
var rectangle3 = new Rectangle(point3, size3);
var path3 = new Path.Rectangle(rectangle3);
path3.strokeColor = 'blue';
var point4 = new Point(200, 200);
var size4 = new Size(100, 100);
var rectangle4 = new Rectangle(point4, size4);
var cornerSize4 = new Size(30, 30);
var path4 = new Path.Rectangle(rectangle4, cornerSize4);
path4.strokeColor= 'yellow';
path4.fillColor='purple';
var point4 = new Point(200, 200);
var size4 = new Size(100, 100);
var rectangle4 = new Rectangle(point4, size4);
var cornerSize4 = new Size(30, 30);
var path4 = new Path.Rectangle(rectangle4, cornerSize4);
path4.strokeColor= 'yellow';
path4.fillColor='purple';
document.getElementById('svg').appendChild(project.exportSVG());
</script>
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

131
examples/SVG Export/Rotated Primitives.html
View file

@ -1,81 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rotated Primitives</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Rotated Primitives</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// This "arbitrary" shape triggered rectangles in the original code,
// since point2 is as far from point0 as point3 is from point1.
var path = new Path({
closed: true,
strokeColor: 'black'
});
path.moveTo(0, 0);
path.lineTo(50, 50);
path.lineTo(100, 100);
path.lineTo(-50, 150);
path.position += 100;
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// This "arbitrary" shape triggered rectangles in the original code,
// since point2 is as far from point0 as point3 is from point1.
var path = new Path({
closed: true,
strokeColor: 'black'
});
path.moveTo(0, 0);
path.lineTo(50, 50);
path.lineTo(100, 100);
path.lineTo(-50, 150);
path.position += 100;
var rect = new Path.Rectangle({
point: [200, 100],
size: [200, 300],
fillColor: 'red'
});
rect.rotate(40);
var rect = new Path.Rectangle({
point: [200, 100],
size: [200, 300],
fillColor: 'red'
});
rect.rotate(40);
var circle = new Path.Circle({
center: [200, 300],
radius: 100,
fillColor: 'green'
});
circle.scale(0.5, 1);
circle.rotate(40);
var circle = new Path.Circle({
center: [200, 300],
radius: 100,
fillColor: 'green'
});
circle.scale(0.5, 1);
circle.rotate(40);
var ellipse = new Path.Ellipse({
point: [300, 300],
size: [100, 200],
fillColor: 'blue'
});
ellipse.rotate(-40);
var ellipse = new Path.Ellipse({
point: [300, 300],
size: [100, 200],
fillColor: 'blue'
});
ellipse.rotate(-40);
var rect = new Path.Rectangle({
point: [250, 20],
size: [200, 300],
radius: [40, 20],
fillColor: 'yellow'
});
rect.rotate(-20);
rect.data = {
string: '----',
number: 1234,
array: ['a ray', 'some rays'],
bool: true,
nil: null,
point: new Point(12, 34),
size: new Size(12, 34),
rectangle: new Rectangle([12, 34], [56, 78]),
deep: {
deeper: {
deepest: true
}
}
};
var rect = new Path.Rectangle({
point: [250, 20],
size: [200, 300],
radius: [40, 20],
fillColor: 'yellow'
});
rect.rotate(-20);
rect.data = {
string: '----',
number: 1234,
array: ['a ray', 'some rays'],
bool: true,
nil: null,
point: new Point(12, 34),
size: new Size(12, 34),
rectangle: new Rectangle([12, 34], [56, 78]),
deep: {
deeper: {
deepest: true
}
}
};
var parallelogram = new Path({
closed: true,
segments: [[50, 0], [50, 100], [90, 120], [90, 20]],
fillColor: '#99c'
});
var parallelogram = new Path({
closed: true,
segments: [[50, 0], [50, 100], [90, 120], [90, 20]],
fillColor: '#99c'
});
document.getElementById('svg').appendChild(project.exportSVG({ matchShapes: true }));
</script>
document.body.appendChild(project.exportSVG({ matchShapes: true }));
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

91
examples/SVG Export/Shapes.html
View file

@ -1,59 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shapes</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Shapes</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var rect = new Shape.Rectangle({
point: [200, 100],
size: [200, 300],
fillColor: 'red'
});
rect.rotate(40);
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var rect = new Shape.Rectangle({
point: [200, 100],
size: [200, 300],
fillColor: 'red'
});
rect.rotate(40);
var circle = new Shape.Circle({
center: [200, 300],
radius: 100,
fillColor: 'green'
});
circle.scale(0.5, 1);
circle.rotate(40);
var circle = new Shape.Circle({
center: [200, 300],
radius: 100,
fillColor: 'green'
});
circle.scale(0.5, 1);
circle.rotate(40);
var ellipse = new Shape.Ellipse({
point: [300, 300],
size: [100, 200],
fillColor: 'blue'
});
ellipse.rotate(-40);
var ellipse = new Shape.Ellipse({
point: [300, 300],
size: [100, 200],
fillColor: 'blue'
});
ellipse.rotate(-40);
var rect = new Shape.Rectangle({
point: [250, 20],
size: [200, 300],
radius: [40, 20],
fillColor: 'yellow'
});
rect.rotate(-20);
document.getElementById('svg').appendChild(project.exportSVG());
var rect = new Shape.Rectangle({
point: [250, 20],
size: [200, 300],
radius: [40, 20],
fillColor: 'yellow'
});
rect.rotate(-20);
document.body.appendChild(project.exportSVG());
var prev = null;
function onMouseMove(event) {
if (prev)
prev.selected = false;
var result = project.hitTest(event.point);
if (result) {
var item = result.item;
item.selected = true;
prev = item;
}
}
</script>
var prev = null;
function onMouseMove(event) {
if (prev)
prev.selected = false;
var result = project.hitTest(event.point);
if (result) {
var item = result.item;
item.selected = true;
prev = item;
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

37
examples/SVG Export/Symbols.html
View file

@ -1,28 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var ellipse = new Path.Ellipse({
from: [0, 0],
to: [200, 100],
fillColor: 'red'
});
var symbol = new Symbol(ellipse);
var p1 = symbol.place([100, 100]);
p1.rotate(45);
var p2 = symbol.place([300, 200]);
p2.rotate(-30);
document.getElementById('svg').appendChild(project.exportSVG());
</script>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var ellipse = new Path.Ellipse({
from: [0, 0],
to: [200, 100],
fillColor: 'red'
});
var symbol = new Symbol(ellipse);
var p1 = symbol.place([100, 100]);
p1.rotate(45);
var p2 = symbol.place([300, 200]);
p2.rotate(-30);
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

67
examples/SVG Export/Text Testing.html
View file

@ -1,46 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Testing</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Text Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var text = new PointText(new Point(50, 100));
text.fillColor = 'black';
text.content = 'This is a test';
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var text = new PointText(new Point(50, 100));
text.fillColor = 'black';
text.content = 'This is a test';
var text = new PointText(new Point(100, 150));
text.fillColor = 'red';
text.strokeWidth = '4';
text.content = 'This is also a test';
/*
text.scale(5);
text.translate(15, 15);
text.rotate(20);
text.shear(20, 5);
*/
text.rotate(45);
text.shear(.85, .15);
text.scale(.85, 2);
var text = new PointText(new Point(100, 150));
text.fillColor = 'red';
text.strokeWidth = '4';
text.content = 'This is also a test';
/*
text.scale(5);
text.translate(15, 15);
text.rotate(20);
text.shear(20, 5);
*/
text.rotate(45);
text.shear(.85, .15);
text.scale(.85, 2);
var path2 = new Path.Circle(new Point(100, 100), 50);
path2.strokeColor = 'black';
path2.shear(.5, .5);
colors = ['red', 'blue', 'green', 'orange'];
for (var i in path2.segments) {
var p = path2.segments[i].point;
var c = new Path.Circle(p, 2);
c.fillColor = colors[i];
}
var path2 = new Path.Circle(new Point(100, 100), 50);
path2.strokeColor = 'black';
path2.shear(.5, .5);
colors = ['red', 'blue', 'green', 'orange'];
for (var i in path2.segments) {
var p = path2.segments[i].point;
var c = new Path.Circle(p, 2);
c.fillColor = colors[i];
}
document.getElementById('svg').appendChild(project.exportSVG());
</script>
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

29
examples/SVG Export/Tiger.html
View file

File diff suppressed because one or more lines are too long

35
examples/SVG Export/Transform Test 1.html
View file

@ -1,30 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transform Testing</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Transform Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var circlePath = new Path.Circle(new Point(280, 100), 25);
circlePath.strokeColor = 'black';
circlePath.fillColor = 'white';
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var circlePath = new Path.Circle(new Point(280, 100), 25);
circlePath.strokeColor = 'black';
circlePath.fillColor = 'white';
var clones = 30;
var angle = 360 / clones;
var clones = 30;
var angle = 360 / clones;
for(var i = 0; i < clones; i++) {
var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
for(var i = 0; i < clones; i++) {
var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
document.getElementById('svg').appendChild(project.exportSVG());
</script>
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

35
examples/SVG Export/Transform Test 2.html
View file

@ -1,28 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
path.style = {
fillColor: 'white',
strokeColor: 'black'
};
var copy = path.clone();
copy.strokeColor = 'red';
copy.rotate(-45);
copy.scale(0.5);
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
path.style = {
fillColor: 'white',
strokeColor: 'black'
};
var copy = path.clone();
copy.strokeColor = 'red';
copy.rotate(-45);
copy.scale(0.5);
document.getElementById('svg').appendChild(project.exportSVG());
</script>
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

134
examples/SVG Import/Arcs.html
View file

@ -1,76 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Arcs Testing</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
<meta charset="UTF-8">
<title>Arcs Testing</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="500" id="svg">
<g transform="scale(0.5)">
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="500" id="svg">
<g transform="scale(0.5)">
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
<g font-family="Verdana" transform="translate(0,400)">
<defs>
<g id="baseEllipses" font-size="20" >
<ellipse cx="125" cy="125" rx="100" ry="50"
fill="none" stroke="#888888" stroke-width="2" />
<ellipse cx="225" cy="75" rx="100" ry="50"
fill="none" stroke="#888888" stroke-width="2" />
<text x="35" y="70">Arc start</text>
<text x="225" y="145">Arc end</text>
</g>
</defs>
<rect x="1" y="1" width="1198" height="523"
fill="none" stroke="blue" stroke-width="1" />
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
<g font-family="Verdana" transform="translate(0,400)">
<defs>
<g id="baseEllipses" font-size="20" >
<ellipse cx="125" cy="125" rx="100" ry="50"
fill="none" stroke="#888888" stroke-width="2" />
<ellipse cx="225" cy="75" rx="100" ry="50"
fill="none" stroke="#888888" stroke-width="2" />
<text x="35" y="70">Arc start</text>
<text x="225" y="145">Arc end</text>
</g>
</defs>
<rect x="1" y="1" width="1198" height="523"
fill="none" stroke="blue" stroke-width="1" />
<g font-size="30" >
<g transform="translate(0,0)">
<use xlink:href="#baseEllipses"/>
</g>
<g transform="translate(400,0)">
<text x="50" y="210">large-arc-flag=0</text>
<text x="50" y="250">sweep-flag=0</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 0,0 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
<g transform="translate(800,0)">
<text x="50" y="210">large-arc-flag=0</text>
<text x="50" y="250">sweep-flag=1</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 0,1 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
<g transform="translate(400,250)">
<text x="50" y="210">large-arc-flag=1</text>
<text x="50" y="250">sweep-flag=0</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 1,0 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
<g transform="translate(800,250)">
<text x="50" y="210">large-arc-flag=1</text>
<text x="50" y="250">sweep-flag=1</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 1,1 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
</g>
</g>
</svg>
<canvas id="canvas" width="1000" height="500"></canvas>
<g font-size="30" >
<g transform="translate(0,0)">
<use xlink:href="#baseEllipses"/>
</g>
<g transform="translate(400,0)">
<text x="50" y="210">large-arc-flag=0</text>
<text x="50" y="250">sweep-flag=0</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 0,0 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
<g transform="translate(800,0)">
<text x="50" y="210">large-arc-flag=0</text>
<text x="50" y="250">sweep-flag=1</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 0,1 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
<g transform="translate(400,250)">
<text x="50" y="210">large-arc-flag=1</text>
<text x="50" y="250">sweep-flag=0</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 1,0 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
<g transform="translate(800,250)">
<text x="50" y="210">large-arc-flag=1</text>
<text x="50" y="250">sweep-flag=1</text>
<use xlink:href="#baseEllipses"/>
<path d="M 125,75 a100,50 0 1,1 100,50"
fill="none" stroke="red" stroke-width="6" />
</g>
</g>
</g>
</svg>
<canvas id="canvas" width="1000" height="500"></canvas>
</body>
</html>

424
examples/SVG Import/Butterfly.html
View file

@ -1,223 +1,223 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Butterfly</title>
<meta charset="UTF-8">
<title>Butterfly</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var start = Date.now();
project.importSVG(document.getElementById('svg'));
project.importSVG(document.getElementById('svg'));
console.log(Date.now() - start);
// console.log(project.exportJSON());
</script>
</script>
</head>
<body>
<svg version="1.1"
id="svg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="398.363px"
height="248.998px" viewBox="0 0 398.363 248.998">
<path id="path4" fill="#F67F00" d="M196.294,106.489c-8-6.5,2.35-7.01,2.25-7.25c-14.25-35.5-37.23-51.17-39-52
c-5.46-2.56-8.1-2.32-7.13-3.609c0.96-1.29,7.27,2.75,8.13,3.359c25.25,18,39,52,39,52s1.75,1,2,0.25c10-29.5,30-45,36.75-51.25
s10.3-6.859,1,0.25c-28.75,22-36.99,50.65-36.5,50.75c11.5,2.5,0.5,8,1,7.5c3.02-3.02,3,6,3,6s17-35,83.5-79.5
c4.1-2.74,147.5-81,97.5,14.5c-2.59,4.96-20,25-20,25s1.5,8.5-4.5,15.5c-1.03,1.2-3.5,13-9.5,19.5c-1.69,1.84-0.021-1.58,0,0
c0.5,30-24.07,29.34-22.5,29.5c9.5,1,10.859,13.33,11,13.5c5.5,6.5,3.5,8,5.5,11c10.8,16.19-0.59,15.22,1,18c4,7-0.84,9.891,0.5,12
c3.5,5.5-2.58,9.01-2.5,10.5c0.5,8.5-5.16,5.4-5,9c0.5,11-3.5,6.5-6,10.5c-7.5,12-10.37,7.55-11,9c-3,7-7.021,5.32-8.5,7
c-3.5,4-7,4-8.5,5.5c-7,7-10.97,2.061-12,2.5c-16,7-23.5,1.34-26,1.5c-7.5,0.5-6.351-0.66-8.5-2.5c-31.5-27-50-66-53.5-71
c-1.431-2.04-4.48-13.71-3.5-11c2,5.5,1,54.5-4.5,54.5s-6-46-2.5-54.5c1.1-2.67-0.93,7.891-3.54,11c-5.46,6.5-22.29,44-54.2,71
c-2.17,1.84-1.01,3-8.61,2.5c-2.52-0.16-10.13,5.5-26.33-1.5c-1.04-0.439-5.07,4.5-12.16-2.5c-1.52-1.5-5.06-1.5-8.61-5.5
c-1.49-1.68-5.57,0-8.61-7c-0.63-1.45-3.54,3-11.14-9c-2.53-4-6.59,0.5-6.08-10.5c0.17-3.6-5.57-0.5-5.06-9
c0.09-1.49-6.08-5-2.54-10.5c1.36-2.109-3.54-5,0.51-12c1.61-2.78-9.92-1.81,1.01-18c2.03-3,0-4.5,5.57-11
c0.15-0.17,1.52-12.5,11.15-13.5c1.59-0.16-23.3,0.5-22.79-29.5c0.02-1.58,1.71,1.84,0,0c-6.08-6.5-8.58-18.3-9.63-19.5
c-6.08-7-4.56-15.5-4.56-15.5s-17.63-20.04-20.25-25c-50.65-95.5,94.61-17.24,98.76-14.5c67.36,44.5,83.78,79.5,83.78,79.5
s0.36-2.55,1-4C195.604,107.049,196.524,106.679,196.294,106.489z"/>
<path id="path6" d="M195.583,106.279c-8-6.5,2.34-7.02,2.25-7.25c-14.25-35.5-37.23-51.17-39-52c-5.46-2.56-8.1-2.32-7.14-3.61
c0.96-1.289,7.28,2.75,8.14,3.36c25.25,18,39,52,39,52s1.75,1,2,0.25c10-29.5,30-45,36.75-51.25s10.3-6.86,1,0.25
c-28.75,22-36.99,50.64-36.5,50.75c11.5,2.5,0.5,8,1,7.5c3.02-3.02,3,6,3,6s17-35,83.5-79.5c4.09-2.74,147.5-81,97.5,14.5
c-2.59,4.95-20,25-20,25s1.5,8.5-4.5,15.5c-1.03,1.2-3.5,13-9.5,19.5c-1.69,1.84-0.03-1.58,0,0c0.5,30-24.07,29.34-22.5,29.5
c9.5,1,10.85,13.33,11,13.5c5.5,6.5,3.5,8,5.5,11c10.79,16.19-0.59,15.22,1,18c4,7-0.84,9.89,0.5,12c3.5,5.5-2.59,9-2.5,10.5
c0.5,8.5-5.16,5.4-5,9c0.5,11-3.5,6.5-6,10.5c-7.5,12-10.38,7.55-11,9c-3,7-7.03,5.32-8.5,7c-3.5,4-7,4-8.5,5.5
c-7,7-10.971,2.05-12,2.5c-16,7-23.5,1.33-26,1.5c-7.5,0.5-6.35-0.66-8.5-2.5c-31.5-27-50-66-53.5-71c-1.43-2.05-4.49-13.71-3.5-11
c2,5.5,1,54.5-4.5,54.5c-5.5,0-6-46-2.5-54.5c1.1-2.67-0.93,7.88-3.54,11c-5.46,6.5-22.29,44-54.2,71c-2.17,1.84-1.01,3-8.61,2.5
c-2.52-0.17-10.13,5.5-26.33-1.5c-1.04-0.45-5.07,4.5-12.16-2.5c-1.52-1.5-5.06-1.5-8.61-5.5c-1.49-1.68-5.57,0-8.61-7
c-0.63-1.45-3.55,3-11.14-9c-2.54-4-6.59,0.5-6.08-10.5c0.17-3.6-5.57-0.5-5.07-9c0.09-1.5-6.07-5-2.53-10.5
c1.36-2.11-3.54-5,0.51-12c1.61-2.78-9.92-1.81,1.01-18c2.03-3,0-4.5,5.57-11c0.15-0.17,1.52-12.5,11.15-13.5
c1.59-0.16-23.3,0.5-22.8-29.5c0.03-1.58,1.72,1.84,0,0c-6.07-6.5-8.58-18.3-9.62-19.5c-6.08-7-4.56-15.5-4.56-15.5
s-17.63-20.05-20.26-25c-50.64-95.5,94.62-17.24,98.77-14.5c67.36,44.5,83.78,79.5,83.78,79.5s0.36-2.55,1-4
C194.894,106.839,195.813,106.469,195.583,106.279z M234.084,119.779c3.039-0.1,9.229,3.05,13,2c25.43-7.06,73.319-0.56,76.5,0.5
c12,4,20-24.5-5.5-24.5c-31.53,0-25-2-46-5c-1.78-0.25-27.521,9.3-51.5,23C217.084,117.779,219.084,120.279,234.084,119.779z
M215.084,114.779c2.539,0.28,15-8.5,54-24c2.369-0.939,2.5-6,23.5-15.5c1.369-0.62-0.5-4,14-16c7.17-5.93-17.5-5-23-4s-19,12-19,12
s15.18-12.07,10-10.5c-11.5,3.5-41.5,36.5-51.5,50.5s16.5-24,23-30S196.583,112.779,215.084,114.779z M327.584,95.279
c14.52,2.91,13-18.5,5.5-19.5c-11.57-1.54-33.61-0.82-40,1.5c-16.5,6-20.83,12.03-19.5,12.5
C302.084,99.779,322.584,94.279,327.584,95.279z M327.084,73.279c5.92,0.74,16,3,16.5-5c0.25-4.02,14,3,17,3.5
c2.479,0.41-10.5-4.79-15-8c-3.5-2.5-4.11-5.36-4.5-5.5c-32-11.5-45.5,15.5-45.5,15.5S323.084,72.779,327.084,73.279z
M392.584,29.279c-5-8-13.96-5.54-17-9c-14.5-16.5-48.08,4.66-20.5,2.5C387.084,20.279,393.174,30.229,392.584,29.279z
M368.584,33.279c13.51,0,19.5,6,18.5,5c-7-7-13-5.5-14.5-7.5c-8.92-11.89-35.5,0.5-33.5,3.5S365.084,33.279,368.584,33.279z
M322.084,42.779c-21,5-12,12.5-9.5,12C332.014,50.899,326.464,41.739,322.084,42.779z M332.584,18.779c-9.5,1-10.141,18.311-5.5,15
C334.084,28.779,342.084,17.779,332.584,18.779z M307.584,42.279c14-5.5,3.5-8-1-7.5s-7.83,7.33-6.5,10
C303.084,50.779,304.873,43.349,307.584,42.279z M351.584,87.779c4.5-2.5-1-8.5-5-6S347.084,90.279,351.584,87.779z M342.084,45.279
c11.77,11.771,16.5,5.5,19,4.5c8.12-3.25,17,5.5,15.5,4c-7.28-7.28-12-6-13-7.5c-7.61-11.42-18.96-4.18-21.5-4
c-7,0.5-15.69,5.41-12.5,4.5C333.084,45.779,340.584,43.779,342.084,45.279z M375.584,10.779c7-5-2.221-6.27-4-6
C365.084,5.779,368.584,15.779,375.584,10.779z M216.584,147.779c5.5,6.5,67,104,57.5,71.5c-1.29-4.42,3.5,13.5,9,3.5
c1.539-2.8,10.15-3.09-16.5-47.5c-1.5-2.5-22-10.5-42.5-33C220.984,138.868,212.014,142.379,216.584,147.779z M272.084,182.279
c4.5,7,15.689,30.45,16.5,34c2.5,11,9.5-1.5,11-1c13.16,4.39,3.5-7.5,2.5-10.5c-9.17-27.5-30.5-25-30.5-25
S267.584,175.279,272.084,182.279z M245.584,222.779c12.64,17.97,17.5,11,20,9c7.699-6.16-41.28-68.979-44.5-73
C217.084,153.779,217.084,182.279,245.584,222.779z M292.084,185.779c6.5,5,13.74,26.07,17.5,25.5c10-1.5,4-10,6.5-8.5s7.5-1.17,6-4
c-12.5-23.5-32-16-32-16S285.584,180.779,292.084,185.779z M227.584,135.279c-19.5,0,46.5,54,65.5,43.5c3.939-2.18-5-3.5-3.5-15
c0.279-2.1-13.5-6-13.5-19c0-4.24-7.92-6-33-6C238.584,138.779,247.994,135.279,227.584,135.279z M299.584,180.279
c18.27,2.03,22.609,16.18,25,14.5c28.5-20-22.73-28.16-32-27C288.584,168.279,295.084,179.779,299.584,180.279z M230.584,130.779
c3.5,2.5,15.5,12.5,54,4c1.47-0.32-29-0.5-33-1.5S228.214,129.089,230.584,130.779z M297.084,165.279c37.5,9,27.6,2.74,29,2
c8.5-4.5-0.79-5.39,0.5-7c4.21-5.26-7-8.5-30.5-11c-5.561-0.59-16.58-3.35-17-2.5C275.584,153.779,292.294,164.129,297.084,165.279z
M303.084,148.779c32.5,5.5,12.109-4.689,12.5-5c11.5-9-26.5-9-26.5-9s-16.33,3.88-16,4.5
C277.584,147.779,299.113,148.109,303.084,148.779z M241.584,220.279c0,0-29-46.5-23-65.5c1.21-3.81-13-22.5-6.5,9
c0.1,0.49-1.23-6.689-3.5-10c-2.271-3.31-5.44-2.22-3.5,7.5C209.974,185.708,241.584,220.279,241.584,220.279z M281.084,50.279
c7.5-2,4-4.5-0.5-5.5S273.584,52.279,281.084,50.279z M179.364,115.779c-24.28-13.7-50.36-23.25-52.17-23c-21.27,3-14.65,5-46.59,5
c-25.83,0-17.73,28.5-5.57,24.5c3.22-1.06,51.73-7.56,77.49-0.5c3.81,1.05,10.09-2.1,13.17-2
C180.884,120.279,182.914,117.779,179.364,115.779z M153.534,77.279c6.58,6,33.43,44,23.3,30c-10.13-14-40.52-47-52.17-50.5
c-5.24-1.57,10.13,10.5,10.13,10.5s-13.67-11-19.25-12c-5.57-1-30.55-1.93-23.29,4c14.68,12,12.79,15.38,14.18,16
c21.27,9.5,21.4,14.561,23.8,15.5c39.51,15.5,52.13,24.28,54.7,24C203.674,112.779,146.954,71.279,153.534,77.279z M125.674,89.779
c1.36-0.47-3.03-6.5-19.75-12.5c-6.47-2.32-28.8-3.04-40.52-1.5c-7.59,1-9.13,22.41,5.57,19.5
C76.044,94.279,96.804,99.779,125.674,89.779z M103.394,73.779c0,0-13.68-27-46.09-15.5c-0.39,0.14-1.01,3-4.56,5.5
c-4.55,3.21-17.7,8.41-15.19,8c3.04-0.5,16.96-7.52,17.22-3.5c0.5,8,10.72,5.74,16.71,5
C75.534,72.779,103.394,73.779,103.394,73.779z M43.124,22.779c27.93,2.16-6.08-19-20.77-2.5c-3.08,3.46-12.15,1-17.22,9
C4.534,30.229,10.704,20.279,43.124,22.779z M59.333,34.279c2.02-3-24.9-15.39-33.94-3.5c-1.52,2-7.6,0.5-14.69,7.5
c-1.01,1,5.06-5,18.74-5C32.994,33.279,57.304,37.279,59.333,34.279z M76.554,42.779c21.27,5,12.15,12.5,9.62,12
C66.494,50.899,72.114,41.739,76.554,42.779z M71.484,33.779c4.7,3.311,4.05-14-5.57-15C56.294,17.779,64.394,28.779,71.484,33.779z
M98.833,44.779c1.35-2.67-2.03-9.5-6.58-10c-4.56-0.5-15.2,2-1.02,7.5C93.984,43.349,95.794,50.779,98.833,44.779z M51.734,81.779
c-4.05-2.5-9.63,3.5-5.07,6S55.784,84.279,51.734,81.779z M68.954,46.779c3.23,0.91-5.57-4-12.66-4.5c-2.58-0.18-14.07-7.42-21.78,4
c-1.02,1.5-5.8,0.22-13.17,7.5c-1.52,1.5,7.47-7.25,15.7-4c2.53,1,7.33,7.271,19.25-4.5C57.813,43.779,65.404,45.779,68.954,46.779z
M26.404,4.779c-1.8-0.27-11.14,1-4.05,6C29.444,15.779,32.994,5.779,26.404,4.779z M175.824,142.279
c-20.77,22.5-41.54,30.5-43.06,33c-26.99,44.41-18.27,44.7-16.71,47.5c5.57,10,10.43-7.92,9.12-3.5c-9.63,32.5,52.67-65,58.24-71.5
C188.044,142.379,178.964,138.868,175.824,142.279z M127.704,179.779c0,0-21.61-2.5-30.9,25c-1.01,3-10.79,14.89,2.54,10.5
c1.52-0.5,8.61,12,11.14,1c0.82-3.55,12.16-27,16.71-34C131.754,175.279,127.704,179.779,127.704,179.779z M178.854,158.779
c-3.25,4.021-52.87,66.84-45.07,73c2.53,2,7.45,8.97,20.26-9C182.914,182.279,182.914,153.779,178.854,158.779z M108.964,182.779
c0,0-19.75-7.5-32.41,16c-1.53,2.83,3.54,5.5,6.07,4c2.54-1.5-3.54,7,6.59,8.5c3.81,0.57,11.14-20.5,17.72-25.5
C113.524,180.779,108.964,182.779,108.964,182.779z M156.574,138.779c-25.41,0-33.43,1.76-33.43,6c0,13-13.95,16.9-13.67,19
c1.52,11.5-7.54,12.82-3.55,15c19.25,10.5,86.1-43.5,66.35-43.5C151.604,135.279,161.134,138.779,156.574,138.779z M106.434,167.779
c-9.39-1.16-61.29,7-32.42,27c2.42,1.68,6.82-12.47,25.33-14.5C103.904,179.779,110.484,168.279,106.434,167.779z M147.964,133.279
c-4.05,1-34.91,1.18-33.43,1.5c39,8.5,51.16-1.5,54.7-4C171.634,129.089,152.014,132.279,147.964,133.279z M120.104,146.779
c-0.43-0.85-11.59,1.91-17.22,2.5c-23.8,2.5-35.16,5.74-30.89,11c1.3,1.61-8.11,2.5,0.5,7c1.42,0.74-8.61,7,29.38-2
C106.724,164.129,123.654,153.779,120.104,146.779z M126.184,139.279c0.34-0.62-16.21-4.5-16.21-4.5s-38.49,0-26.84,9
c0.4,0.311-20.26,10.5,12.66,5C99.824,148.109,121.624,147.779,126.184,139.279z M195.063,161.279c1.97-9.72-1.25-10.81-3.54-7.5
c-2.3,3.311-3.65,10.49-3.55,10c6.59-31.5-7.8-12.81-6.58-9c6.07,19-23.3,65.5-23.3,65.5S190.114,185.708,195.063,161.279z
M118.583,44.779c-4.56,1-8.1,3.5-0.5,5.5C125.674,52.279,123.144,43.779,118.583,44.779z"/>
<path id="path8" fill="#FFF6E3" d="M355.693,52.389c-4.46,0.56-8.5,1-9.5-4.5s1.5-7.5,9-5.5S367.693,50.889,355.693,52.389z
M319.193,55.889c0,0-18.72,4.42-1.5-8.5c8-6,8.5-1,9,2C327.443,53.859,319.193,55.889,319.193,55.889z M376.193,15.389
c-8.35-1.67-8-6.5,1-8.5C378.664,6.569,381.193,16.389,376.193,15.389z M381.193,15.389c2.5-0.5,6.5,0.5,7,4s-3.5,5.5-6,3.5
S378.693,15.889,381.193,15.389z M375.193,26.389c2.5-1,10,0.5,9.5,3.5s-6.5,3.5-9,2S372.693,27.389,375.193,26.389z
M376.193,43.889c3-2.5,6.5,0,7.5,1.5s-4,3.5-5.5,4S373.193,46.389,376.193,43.889z M387.693,6.889c0,0,4,0,3,1.5s-4,1.5-4,1.5
L387.693,6.889z M393.693,15.889c0,0,4,0,3,1.5s-4,1.5-4,1.5L393.693,15.889z M361.193,63.889c0,0,5,2,4,3.5s-2.5,4-6,0.5
S361.193,63.889,361.193,63.889z M347.693,83.389c3-2.5,6.5,0,7.5,1.5s-4,3.5-5.5,4S344.693,85.889,347.693,83.389z M349.693,73.389
c3-2.5,5.5,1,6.5,2.5s-3,2.5-4.5,3S346.693,75.889,349.693,73.389z M332.693,39.889c-3.569,0.2-9.5-1.5-0.5-7.5c8.32-5.54,8-4,8.5-1
C341.443,35.859,336.264,39.698,332.693,39.889z M302.193,48.889c0,0-3.5-3,3.5-9c7.601-6.5,6.5-4,7-1
C313.443,43.359,302.193,48.889,302.193,48.889z M333.193,22.389c0,0,6-1,5,0.5s-3.5,7-7,3.5S333.193,22.389,333.193,22.389z
M366.693,52.889c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5
C364.193,54.019,365.323,52.889,366.693,52.889z M361.693,77.389c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5
c-1.37,0-2.5-1.12-2.5-2.5C359.193,78.519,360.323,77.389,361.693,77.389z M357.693,87.389c1.38,0,2.5,1.13,2.5,2.5
c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C355.193,88.519,356.323,87.389,357.693,87.389z M341.693,93.889
c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C339.193,95.019,340.323,93.889,341.693,93.889z
M350.193,95.389c1.38,0,4,2.13,4,3.5c0,1.38-2.62,1.5-4,1.5c-1.37,0-2.5-1.12-2.5-2.5
C347.693,96.519,348.823,95.389,350.193,95.389z M374.193,56.389c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5
c-1.37,0-2.5-1.12-2.5-2.5C371.693,57.519,372.823,56.389,374.193,56.389z M387.693,32.889c1.38,0,2.5,1.13,2.5,2.5
c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C385.193,34.019,386.323,32.889,387.693,32.889z M292.693,40.889
c2.32,0.93,13.5-6.5,10-7.5S290.193,39.889,292.693,40.889z M311.693,27.889c2.5,0.5,10-2.5,6.5-3.5S309.054,27.368,311.693,27.889z
M263.693,58.389c5.5-3,21-10.5,13.5-9.5S258.974,60.969,263.693,58.389z M356.193,8.889c2.5,0.5,10-2.5,6.5-3.5
S353.554,8.368,356.193,8.889z M284.193,45.389c2.5,0.5,7.5-2,4-3S281.554,44.868,284.193,45.389z M347.193,107.889
c1.38,0,2.5,1.63,2.5,3c0,1.38-0.62,1.5-2,1.5c-1.37,0-2.5-1.12-2.5-2.5C345.193,108.519,345.823,107.889,347.193,107.889z
M339.693,107.389c1.38,0,3.5,0.63,3.5,2c0,1.38-2.62,1-4,1c-1.37,0-2.5-1.12-2.5-2.5
C336.693,106.519,338.323,107.389,339.693,107.389z M341.693,121.889c1.38,0,4,2.13,4,3.5c0,1.38-2.62,1.5-4,1.5
c-1.37,0-2.5-1.12-2.5-2.5C339.193,123.019,340.323,121.889,341.693,121.889z M329.693,142.389c4-1,4,1,5,4.5s8.07,14.88-3.5,1
C328.693,144.889,325.693,143.389,329.693,142.389z M341.693,154.389c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5
c-1.37,0-2.5-1.12-2.5-2.5C339.193,155.519,340.323,154.389,341.693,154.389z M344.193,163.389c1.38,0,2.5,1.13,2.5,2.5
c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C341.693,164.519,342.823,163.389,344.193,163.389z M344.363,172.389
c1.37,0,3.33,3.13,3.33,4.5c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-4.16-1.62-4.16-3C341.033,175.019,342.983,172.389,344.363,172.389z
M345.693,188.389c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5
C344.193,188.519,344.323,188.389,345.693,188.389z M332.193,155.389c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5
c-1.37,0-1,0.88-1-0.5C330.693,155.519,330.823,155.389,332.193,155.389z M335.193,167.889c1.38,0,1,0.13,1,1.5
c0,1.38,0.21,5-1.16,5c-1.38,0-1.34-3.62-1.34-5C333.693,168.019,333.823,167.889,335.193,167.889z M338.693,181.889
c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5C337.193,182.019,337.323,181.889,338.693,181.889z
M332.533,195.389c1.37,0,1.16,0.13,1.16,1.5c0,1.38-0.29,0.5-1.66,0.5c-1.38,0-0.84,0.88-0.84-0.5
C331.193,195.519,331.153,195.389,332.533,195.389z M341.363,198.729c1.37,0,2.67,1.95,2.67,3.33c0,1.37-2.96,3.83-4.34,3.83
c-1.37,0-1,0.88-1-0.5C338.693,204.019,339.983,198.729,341.363,198.729z M335.693,213.059c1.38,0,3.67-0.38,3.67,1
c0,1.37-3.29,3.83-4.67,3.83c-1.37,0-1,0.88-1-0.5C333.693,216.019,334.323,213.059,335.693,213.059z M327.193,205.889
c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5C325.693,206.019,325.823,205.889,327.193,205.889z
M324.693,225.059c1.38,0,2.67,1.62,2.67,3c0,1.37-2.29,0.83-3.67,0.83c-1.37,0-1,0.88-1-0.5
C322.693,227.019,323.323,225.059,324.693,225.059z M316.363,230.389c1.37,0,0.67,1.63,0.67,3c0,1.38-4.96,4.5-6.34,4.5
c-1.37,0-1,0.88-1-0.5C309.693,236.019,314.983,230.389,316.363,230.389z M317.193,214.389c1.38,0,1,0.13,1,1.5
c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5C315.693,214.519,315.823,214.389,317.193,214.389z M305.193,222.889
c1.38,0,5.84,1.79,5.84,3.17c0,1.37-5.629,3.67-7,3.67c-1.379,0-2.34-2.3-2.34-3.67
C301.693,224.679,303.824,222.889,305.193,222.889z M292.193,227.389c1.381,0,1,0.13,1,1.5c0,1.38-0.119,0.5-1.5,0.5
c-1.369,0-1,0.88-1-0.5C290.693,227.519,290.824,227.389,292.193,227.389z M300.193,239.389c1.381,0,1,0.13,1,1.5
c0,1.38-0.119,0.5-1.5,0.5c-1.369,0-1,0.88-1-0.5C298.693,239.519,298.824,239.389,300.193,239.389z M297.193,240.389
c1.381,0,1,0.13,1,1.5c0,1.38-0.119,0.5-1.5,0.5c-1.369,0-1,0.88-1-0.5C295.693,240.519,295.824,240.389,297.193,240.389z
M285.693,240.729c0.92,0,2,1.41,2,2.33s-0.08,0.33-1,0.33c-0.91,0-3.33,1.25-3.33,0.34
C283.363,242.809,284.783,240.729,285.693,240.729z M288.693,243.389c0.92,0,0.67,0.09,0.67,1c0,0.92-0.08,0.34-1,0.34
s-0.67,0.58-0.67-0.34C287.693,243.479,287.783,243.389,288.693,243.389z M283.363,230.389c0.92,0,2.33,3.42,2.33,4.34
c0,0.91-3.08,0.66-4,0.66c-0.91,0-2.33-2.75-2.33-3.66C279.363,230.809,282.443,230.389,283.363,230.389z M272.033,241.389
c1.371,0,1.16,0.13,1.16,1.5c0,1.38-0.289,0.5-1.66,0.5c-1.379,0-0.84,0.88-0.84-0.5
C270.693,241.519,270.654,241.389,272.033,241.389z M269.033,234.389c1.371,0-0.67,3.29-0.67,4.67c0,1.37-4.459,1.83-5.83,1.83
c-1.379,0,1.16-1.79,1.16-3.16C263.693,236.349,267.654,234.389,269.033,234.389z M44.194,51.559c4.47,0.56,8.5,1,9.5-4.5
s-1.5-7.5-9-5.5S32.194,50.059,44.194,51.559z M80.694,55.059c0,0,18.72,4.41,1.5-8.5c-8-6-8.5-1-9,2
C72.454,53.029,80.694,55.059,80.694,55.059z M23.694,14.559c8.35-1.67,8-6.5-1-8.5C21.234,5.729,18.694,15.559,23.694,14.559z
M18.694,14.559c-2.5-0.5-6.5,0.5-7,4s3.5,5.5,6,3.5S21.194,15.059,18.694,14.559z M24.694,25.559c-2.5-1-10,0.5-9.5,3.5
s6.5,3.5,9,2S27.194,26.559,24.694,25.559z M23.694,43.059c-3-2.5-6.5,0-7.5,1.5s4,3.5,5.5,4S26.694,45.559,23.694,43.059z
M12.194,6.059c0,0-4,0-3,1.5s4,1.5,4,1.5L12.194,6.059z M6.194,15.059c0,0-4,0-3,1.5s4,1.5,4,1.5L6.194,15.059z M38.694,63.059
c0,0-5,2-4,3.5s2.5,4,6,0.5S38.694,63.059,38.694,63.059z M52.194,82.559c-3-2.5-6.5,0-7.5,1.5s4,3.5,5.5,4
S55.194,85.059,52.194,82.559z M50.194,72.559c-3-2.5-5.5,1-6.5,2.5s3,2.5,4.5,3S53.194,75.059,50.194,72.559z M67.194,39.059
c3.57,0.2,9.5-1.5,0.5-7.5c-8.32-5.55-8-4-8.5-1C58.454,35.029,63.624,38.859,67.194,39.059z M97.694,48.059c0,0,3.5-3-3.5-9
c-7.59-6.51-6.5-4-7-1C86.454,42.529,97.694,48.059,97.694,48.059z M66.694,21.559c0,0-6-1-5,0.5s3.5,7,7,3.5
S66.694,21.559,66.694,21.559z M33.194,52.059c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5
C35.694,53.189,34.574,52.059,33.194,52.059z M38.194,76.559c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5
c1.38,0,2.5-1.12,2.5-2.5C40.694,77.689,39.574,76.559,38.194,76.559z M42.194,86.559c-1.37,0-2.5,1.13-2.5,2.5
c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5C44.694,87.689,43.574,86.559,42.194,86.559z M58.194,93.059
c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5C60.694,94.189,59.574,93.059,58.194,93.059z
M49.694,94.559c-1.37,0-4,2.13-4,3.5c0,1.38,2.63,1.5,4,1.5c1.38,0,2.5-1.12,2.5-2.5C52.194,95.689,51.074,94.559,49.694,94.559z
M25.694,55.559c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5
C28.194,56.689,27.074,55.559,25.694,55.559z M12.194,32.059c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5
c1.38,0,2.5-1.12,2.5-2.5C14.694,33.189,13.574,32.059,12.194,32.059z M107.194,40.059c-2.32,0.93-13.5-6.5-10-7.5
S109.694,39.059,107.194,40.059z M88.194,27.059c-2.5,0.5-10-2.5-6.5-3.5S90.833,26.529,88.194,27.059z M136.194,57.559
c-5.5-3-21-10.5-13.5-9.5S140.924,60.139,136.194,57.559z M43.694,8.059c-2.5,0.5-10-2.5-6.5-3.5S46.333,7.529,43.694,8.059z
M115.694,44.559c-2.5,0.5-7.5-2-4-3S118.333,44.029,115.694,44.559z M52.694,107.059c-1.37,0-2.5,1.63-2.5,3c0,1.38,0.63,1.5,2,1.5
c1.38,0,2.5-1.12,2.5-2.5C54.694,107.689,54.074,107.059,52.694,107.059z M60.194,106.559c-1.37,0-3.5,0.63-3.5,2c0,1.38,2.63,1,4,1
c1.38,0,2.5-1.12,2.5-2.5C63.194,105.689,61.574,106.559,60.194,106.559z M58.194,121.059c-1.37,0-4,2.13-4,3.5
c0,1.38,2.63,1.5,4,1.5c1.38,0,2.5-1.12,2.5-2.5C60.694,122.189,59.574,121.059,58.194,121.059z M70.194,141.559c-4-1-4,1-5,4.5
s-8.06,14.88,3.5,1C71.194,144.059,74.194,142.559,70.194,141.559z M58.194,153.559c-1.37,0-2.5,1.12-2.5,2.5
c0,1.37,1.13,2.5,2.5,2.5c1.38,0,2.5-1.13,2.5-2.5C60.694,154.679,59.574,153.559,58.194,153.559z M55.694,162.559
c-1.37,0-2.5,1.12-2.5,2.5c0,1.37,1.13,2.5,2.5,2.5c1.38,0,2.5-1.13,2.5-2.5C58.194,163.679,57.074,162.559,55.694,162.559z
M55.534,171.559c-1.38,0-3.34,3.12-3.34,4.5c0,1.37,1.13,2.5,2.5,2.5c1.38,0,4.17-1.63,4.17-3
C58.864,174.179,56.904,171.559,55.534,171.559z M54.194,187.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C55.694,187.679,55.574,187.559,54.194,187.559z M67.694,154.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C69.194,154.679,69.074,154.559,67.694,154.559z M64.694,167.059c-1.37,0-1,0.12-1,1.5c0,1.37-0.2,5,1.17,5c1.38,0,1.33-3.63,1.33-5
C66.194,167.179,66.074,167.059,64.694,167.059z M61.194,181.059c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C62.694,181.179,62.574,181.059,61.194,181.059z M67.364,194.559c-1.37,0-1.17,0.12-1.17,1.5c0,1.37,0.3,0.5,1.67,0.5
c1.38,0,0.83,0.87,0.83-0.5C68.694,194.679,68.744,194.559,67.364,194.559z M58.534,197.889c-1.38,0-2.67,1.96-2.67,3.34
c0,1.37,2.96,3.83,4.33,3.83c1.38,0,1,0.87,1-0.5C61.194,203.179,59.904,197.889,58.534,197.889z M64.194,212.229
c-1.37,0-3.66-0.38-3.66,1c0,1.37,3.29,3.83,4.66,3.83c1.38,0,1,0.87,1-0.5C66.194,215.179,65.574,212.229,64.194,212.229z
M72.694,205.059c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5C74.194,205.179,74.074,205.059,72.694,205.059z
M75.194,224.229c-1.37,0-2.66,1.62-2.66,3c0,1.37,2.29,0.83,3.66,0.83c1.38,0,1,0.87,1-0.5
C77.194,226.179,76.574,224.229,75.194,224.229z M83.534,229.559c-1.38,0-0.67,1.62-0.67,3c0,1.37,4.96,4.5,6.33,4.5
c1.38,0,1,0.87,1-0.5C90.194,235.179,84.904,229.559,83.534,229.559z M82.694,213.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5
c1.38,0,1,0.87,1-0.5C84.194,213.679,84.074,213.559,82.694,213.559z M94.694,222.059c-1.37,0-5.83,1.79-5.83,3.17
c0,1.37,5.63,3.66,7,3.66c1.38,0,2.33-2.29,2.33-3.66C98.194,223.849,96.074,222.059,94.694,222.059z M107.694,226.559
c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5C109.194,226.679,109.074,226.559,107.694,226.559z
M99.694,238.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C101.194,238.679,101.074,238.559,99.694,238.559z M102.694,239.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5
c1.38,0,1,0.87,1-0.5C104.194,239.679,104.074,239.559,102.694,239.559z M114.194,239.889c-0.91,0-2,1.42-2,2.34
c0,0.91,0.09,0.33,1,0.33c0.92,0,3.34,1.25,3.34,0.33C116.534,241.979,115.114,239.889,114.194,239.889z M111.194,242.559
c-0.91,0-0.66,0.08-0.66,1s0.08,0.33,1,0.33c0.91,0,0.66,0.59,0.66-0.33S112.114,242.559,111.194,242.559z M116.534,229.559
c-0.92,0-2.34,3.42-2.34,4.33c0,0.92,3.09,0.67,4,0.67c0.92,0,2.34-2.75,2.34-3.67C120.534,229.979,117.444,229.559,116.534,229.559
z M127.864,240.559c-1.37,0-1.17,0.12-1.17,1.5c0,1.37,0.3,0.5,1.67,0.5c1.38,0,0.83,0.87,0.83-0.5
C129.194,240.679,129.244,240.559,127.864,240.559z M130.864,233.559c-1.37,0,0.67,3.29,0.67,4.67c0,1.37,4.46,1.83,5.83,1.83
c1.38,0-1.17-1.79-1.17-3.17C136.194,235.519,132.244,233.559,130.864,233.559z M202.964,101.458c-1.37,0-1.17,0.131-1.17,1.5
c0,1.381,0.3,0.5,1.67,0.5c1.38,0,0.83,0.881,0.83-0.5C204.294,101.589,204.344,101.458,202.964,101.458z M197.464,101.458
c-1.37,0-1.17,0.131-1.17,1.5c0,1.381,0.3,0.5,1.67,0.5c1.38,0,0.83,0.881,0.83-0.5
C198.794,101.589,198.844,101.458,197.464,101.458z M202.964,110.458c-1.37,0-1.17,0.131-1.17,1.5c0,1.381,0.3,0.5,1.67,0.5
c1.38,0,0.83,0.881,0.83-0.5C204.294,110.589,204.344,110.458,202.964,110.458z M196.864,110.359c-1.37,0-1.17,0.13-1.17,1.5
c0,1.38,0.3,0.5,1.67,0.5c1.38,0,0.83,0.88,0.83-0.5C198.194,110.489,198.244,110.359,196.864,110.359z M204.964,120.958
c-1.37,0-1,1.131-1,2.5c0,1.381,0.42,4.5,1.8,4.5c1.37,0,0.53-4.119,0.53-5.5C206.294,121.089,206.344,120.958,204.964,120.958z
M195.964,120.958c-1.37,0-1.4,1.23-1.4,2.601c0,1.38-0.97,4.6,0.4,4.6c1.38,0,1.8-3.819,1.8-5.2
C196.764,121.589,197.344,120.958,195.964,120.958z"/>
</svg>
<canvas id="canvas" width="400" height="250"></canvas>
<svg version="1.1"
id="svg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="398.363px"
height="248.998px" viewBox="0 0 398.363 248.998">
<path id="path4" fill="#F67F00" d="M196.294,106.489c-8-6.5,2.35-7.01,2.25-7.25c-14.25-35.5-37.23-51.17-39-52
c-5.46-2.56-8.1-2.32-7.13-3.609c0.96-1.29,7.27,2.75,8.13,3.359c25.25,18,39,52,39,52s1.75,1,2,0.25c10-29.5,30-45,36.75-51.25
s10.3-6.859,1,0.25c-28.75,22-36.99,50.65-36.5,50.75c11.5,2.5,0.5,8,1,7.5c3.02-3.02,3,6,3,6s17-35,83.5-79.5
c4.1-2.74,147.5-81,97.5,14.5c-2.59,4.96-20,25-20,25s1.5,8.5-4.5,15.5c-1.03,1.2-3.5,13-9.5,19.5c-1.69,1.84-0.021-1.58,0,0
c0.5,30-24.07,29.34-22.5,29.5c9.5,1,10.859,13.33,11,13.5c5.5,6.5,3.5,8,5.5,11c10.8,16.19-0.59,15.22,1,18c4,7-0.84,9.891,0.5,12
c3.5,5.5-2.58,9.01-2.5,10.5c0.5,8.5-5.16,5.4-5,9c0.5,11-3.5,6.5-6,10.5c-7.5,12-10.37,7.55-11,9c-3,7-7.021,5.32-8.5,7
c-3.5,4-7,4-8.5,5.5c-7,7-10.97,2.061-12,2.5c-16,7-23.5,1.34-26,1.5c-7.5,0.5-6.351-0.66-8.5-2.5c-31.5-27-50-66-53.5-71
c-1.431-2.04-4.48-13.71-3.5-11c2,5.5,1,54.5-4.5,54.5s-6-46-2.5-54.5c1.1-2.67-0.93,7.891-3.54,11c-5.46,6.5-22.29,44-54.2,71
c-2.17,1.84-1.01,3-8.61,2.5c-2.52-0.16-10.13,5.5-26.33-1.5c-1.04-0.439-5.07,4.5-12.16-2.5c-1.52-1.5-5.06-1.5-8.61-5.5
c-1.49-1.68-5.57,0-8.61-7c-0.63-1.45-3.54,3-11.14-9c-2.53-4-6.59,0.5-6.08-10.5c0.17-3.6-5.57-0.5-5.06-9
c0.09-1.49-6.08-5-2.54-10.5c1.36-2.109-3.54-5,0.51-12c1.61-2.78-9.92-1.81,1.01-18c2.03-3,0-4.5,5.57-11
c0.15-0.17,1.52-12.5,11.15-13.5c1.59-0.16-23.3,0.5-22.79-29.5c0.02-1.58,1.71,1.84,0,0c-6.08-6.5-8.58-18.3-9.63-19.5
c-6.08-7-4.56-15.5-4.56-15.5s-17.63-20.04-20.25-25c-50.65-95.5,94.61-17.24,98.76-14.5c67.36,44.5,83.78,79.5,83.78,79.5
s0.36-2.55,1-4C195.604,107.049,196.524,106.679,196.294,106.489z"/>
<path id="path6" d="M195.583,106.279c-8-6.5,2.34-7.02,2.25-7.25c-14.25-35.5-37.23-51.17-39-52c-5.46-2.56-8.1-2.32-7.14-3.61
c0.96-1.289,7.28,2.75,8.14,3.36c25.25,18,39,52,39,52s1.75,1,2,0.25c10-29.5,30-45,36.75-51.25s10.3-6.86,1,0.25
c-28.75,22-36.99,50.64-36.5,50.75c11.5,2.5,0.5,8,1,7.5c3.02-3.02,3,6,3,6s17-35,83.5-79.5c4.09-2.74,147.5-81,97.5,14.5
c-2.59,4.95-20,25-20,25s1.5,8.5-4.5,15.5c-1.03,1.2-3.5,13-9.5,19.5c-1.69,1.84-0.03-1.58,0,0c0.5,30-24.07,29.34-22.5,29.5
c9.5,1,10.85,13.33,11,13.5c5.5,6.5,3.5,8,5.5,11c10.79,16.19-0.59,15.22,1,18c4,7-0.84,9.89,0.5,12c3.5,5.5-2.59,9-2.5,10.5
c0.5,8.5-5.16,5.4-5,9c0.5,11-3.5,6.5-6,10.5c-7.5,12-10.38,7.55-11,9c-3,7-7.03,5.32-8.5,7c-3.5,4-7,4-8.5,5.5
c-7,7-10.971,2.05-12,2.5c-16,7-23.5,1.33-26,1.5c-7.5,0.5-6.35-0.66-8.5-2.5c-31.5-27-50-66-53.5-71c-1.43-2.05-4.49-13.71-3.5-11
c2,5.5,1,54.5-4.5,54.5c-5.5,0-6-46-2.5-54.5c1.1-2.67-0.93,7.88-3.54,11c-5.46,6.5-22.29,44-54.2,71c-2.17,1.84-1.01,3-8.61,2.5
c-2.52-0.17-10.13,5.5-26.33-1.5c-1.04-0.45-5.07,4.5-12.16-2.5c-1.52-1.5-5.06-1.5-8.61-5.5c-1.49-1.68-5.57,0-8.61-7
c-0.63-1.45-3.55,3-11.14-9c-2.54-4-6.59,0.5-6.08-10.5c0.17-3.6-5.57-0.5-5.07-9c0.09-1.5-6.07-5-2.53-10.5
c1.36-2.11-3.54-5,0.51-12c1.61-2.78-9.92-1.81,1.01-18c2.03-3,0-4.5,5.57-11c0.15-0.17,1.52-12.5,11.15-13.5
c1.59-0.16-23.3,0.5-22.8-29.5c0.03-1.58,1.72,1.84,0,0c-6.07-6.5-8.58-18.3-9.62-19.5c-6.08-7-4.56-15.5-4.56-15.5
s-17.63-20.05-20.26-25c-50.64-95.5,94.62-17.24,98.77-14.5c67.36,44.5,83.78,79.5,83.78,79.5s0.36-2.55,1-4
C194.894,106.839,195.813,106.469,195.583,106.279z M234.084,119.779c3.039-0.1,9.229,3.05,13,2c25.43-7.06,73.319-0.56,76.5,0.5
c12,4,20-24.5-5.5-24.5c-31.53,0-25-2-46-5c-1.78-0.25-27.521,9.3-51.5,23C217.084,117.779,219.084,120.279,234.084,119.779z
M215.084,114.779c2.539,0.28,15-8.5,54-24c2.369-0.939,2.5-6,23.5-15.5c1.369-0.62-0.5-4,14-16c7.17-5.93-17.5-5-23-4s-19,12-19,12
s15.18-12.07,10-10.5c-11.5,3.5-41.5,36.5-51.5,50.5s16.5-24,23-30S196.583,112.779,215.084,114.779z M327.584,95.279
c14.52,2.91,13-18.5,5.5-19.5c-11.57-1.54-33.61-0.82-40,1.5c-16.5,6-20.83,12.03-19.5,12.5
C302.084,99.779,322.584,94.279,327.584,95.279z M327.084,73.279c5.92,0.74,16,3,16.5-5c0.25-4.02,14,3,17,3.5
c2.479,0.41-10.5-4.79-15-8c-3.5-2.5-4.11-5.36-4.5-5.5c-32-11.5-45.5,15.5-45.5,15.5S323.084,72.779,327.084,73.279z
M392.584,29.279c-5-8-13.96-5.54-17-9c-14.5-16.5-48.08,4.66-20.5,2.5C387.084,20.279,393.174,30.229,392.584,29.279z
M368.584,33.279c13.51,0,19.5,6,18.5,5c-7-7-13-5.5-14.5-7.5c-8.92-11.89-35.5,0.5-33.5,3.5S365.084,33.279,368.584,33.279z
M322.084,42.779c-21,5-12,12.5-9.5,12C332.014,50.899,326.464,41.739,322.084,42.779z M332.584,18.779c-9.5,1-10.141,18.311-5.5,15
C334.084,28.779,342.084,17.779,332.584,18.779z M307.584,42.279c14-5.5,3.5-8-1-7.5s-7.83,7.33-6.5,10
C303.084,50.779,304.873,43.349,307.584,42.279z M351.584,87.779c4.5-2.5-1-8.5-5-6S347.084,90.279,351.584,87.779z M342.084,45.279
c11.77,11.771,16.5,5.5,19,4.5c8.12-3.25,17,5.5,15.5,4c-7.28-7.28-12-6-13-7.5c-7.61-11.42-18.96-4.18-21.5-4
c-7,0.5-15.69,5.41-12.5,4.5C333.084,45.779,340.584,43.779,342.084,45.279z M375.584,10.779c7-5-2.221-6.27-4-6
C365.084,5.779,368.584,15.779,375.584,10.779z M216.584,147.779c5.5,6.5,67,104,57.5,71.5c-1.29-4.42,3.5,13.5,9,3.5
c1.539-2.8,10.15-3.09-16.5-47.5c-1.5-2.5-22-10.5-42.5-33C220.984,138.868,212.014,142.379,216.584,147.779z M272.084,182.279
c4.5,7,15.689,30.45,16.5,34c2.5,11,9.5-1.5,11-1c13.16,4.39,3.5-7.5,2.5-10.5c-9.17-27.5-30.5-25-30.5-25
S267.584,175.279,272.084,182.279z M245.584,222.779c12.64,17.97,17.5,11,20,9c7.699-6.16-41.28-68.979-44.5-73
C217.084,153.779,217.084,182.279,245.584,222.779z M292.084,185.779c6.5,5,13.74,26.07,17.5,25.5c10-1.5,4-10,6.5-8.5s7.5-1.17,6-4
c-12.5-23.5-32-16-32-16S285.584,180.779,292.084,185.779z M227.584,135.279c-19.5,0,46.5,54,65.5,43.5c3.939-2.18-5-3.5-3.5-15
c0.279-2.1-13.5-6-13.5-19c0-4.24-7.92-6-33-6C238.584,138.779,247.994,135.279,227.584,135.279z M299.584,180.279
c18.27,2.03,22.609,16.18,25,14.5c28.5-20-22.73-28.16-32-27C288.584,168.279,295.084,179.779,299.584,180.279z M230.584,130.779
c3.5,2.5,15.5,12.5,54,4c1.47-0.32-29-0.5-33-1.5S228.214,129.089,230.584,130.779z M297.084,165.279c37.5,9,27.6,2.74,29,2
c8.5-4.5-0.79-5.39,0.5-7c4.21-5.26-7-8.5-30.5-11c-5.561-0.59-16.58-3.35-17-2.5C275.584,153.779,292.294,164.129,297.084,165.279z
M303.084,148.779c32.5,5.5,12.109-4.689,12.5-5c11.5-9-26.5-9-26.5-9s-16.33,3.88-16,4.5
C277.584,147.779,299.113,148.109,303.084,148.779z M241.584,220.279c0,0-29-46.5-23-65.5c1.21-3.81-13-22.5-6.5,9
c0.1,0.49-1.23-6.689-3.5-10c-2.271-3.31-5.44-2.22-3.5,7.5C209.974,185.708,241.584,220.279,241.584,220.279z M281.084,50.279
c7.5-2,4-4.5-0.5-5.5S273.584,52.279,281.084,50.279z M179.364,115.779c-24.28-13.7-50.36-23.25-52.17-23c-21.27,3-14.65,5-46.59,5
c-25.83,0-17.73,28.5-5.57,24.5c3.22-1.06,51.73-7.56,77.49-0.5c3.81,1.05,10.09-2.1,13.17-2
C180.884,120.279,182.914,117.779,179.364,115.779z M153.534,77.279c6.58,6,33.43,44,23.3,30c-10.13-14-40.52-47-52.17-50.5
c-5.24-1.57,10.13,10.5,10.13,10.5s-13.67-11-19.25-12c-5.57-1-30.55-1.93-23.29,4c14.68,12,12.79,15.38,14.18,16
c21.27,9.5,21.4,14.561,23.8,15.5c39.51,15.5,52.13,24.28,54.7,24C203.674,112.779,146.954,71.279,153.534,77.279z M125.674,89.779
c1.36-0.47-3.03-6.5-19.75-12.5c-6.47-2.32-28.8-3.04-40.52-1.5c-7.59,1-9.13,22.41,5.57,19.5
C76.044,94.279,96.804,99.779,125.674,89.779z M103.394,73.779c0,0-13.68-27-46.09-15.5c-0.39,0.14-1.01,3-4.56,5.5
c-4.55,3.21-17.7,8.41-15.19,8c3.04-0.5,16.96-7.52,17.22-3.5c0.5,8,10.72,5.74,16.71,5
C75.534,72.779,103.394,73.779,103.394,73.779z M43.124,22.779c27.93,2.16-6.08-19-20.77-2.5c-3.08,3.46-12.15,1-17.22,9
C4.534,30.229,10.704,20.279,43.124,22.779z M59.333,34.279c2.02-3-24.9-15.39-33.94-3.5c-1.52,2-7.6,0.5-14.69,7.5
c-1.01,1,5.06-5,18.74-5C32.994,33.279,57.304,37.279,59.333,34.279z M76.554,42.779c21.27,5,12.15,12.5,9.62,12
C66.494,50.899,72.114,41.739,76.554,42.779z M71.484,33.779c4.7,3.311,4.05-14-5.57-15C56.294,17.779,64.394,28.779,71.484,33.779z
M98.833,44.779c1.35-2.67-2.03-9.5-6.58-10c-4.56-0.5-15.2,2-1.02,7.5C93.984,43.349,95.794,50.779,98.833,44.779z M51.734,81.779
c-4.05-2.5-9.63,3.5-5.07,6S55.784,84.279,51.734,81.779z M68.954,46.779c3.23,0.91-5.57-4-12.66-4.5c-2.58-0.18-14.07-7.42-21.78,4
c-1.02,1.5-5.8,0.22-13.17,7.5c-1.52,1.5,7.47-7.25,15.7-4c2.53,1,7.33,7.271,19.25-4.5C57.813,43.779,65.404,45.779,68.954,46.779z
M26.404,4.779c-1.8-0.27-11.14,1-4.05,6C29.444,15.779,32.994,5.779,26.404,4.779z M175.824,142.279
c-20.77,22.5-41.54,30.5-43.06,33c-26.99,44.41-18.27,44.7-16.71,47.5c5.57,10,10.43-7.92,9.12-3.5c-9.63,32.5,52.67-65,58.24-71.5
C188.044,142.379,178.964,138.868,175.824,142.279z M127.704,179.779c0,0-21.61-2.5-30.9,25c-1.01,3-10.79,14.89,2.54,10.5
c1.52-0.5,8.61,12,11.14,1c0.82-3.55,12.16-27,16.71-34C131.754,175.279,127.704,179.779,127.704,179.779z M178.854,158.779
c-3.25,4.021-52.87,66.84-45.07,73c2.53,2,7.45,8.97,20.26-9C182.914,182.279,182.914,153.779,178.854,158.779z M108.964,182.779
c0,0-19.75-7.5-32.41,16c-1.53,2.83,3.54,5.5,6.07,4c2.54-1.5-3.54,7,6.59,8.5c3.81,0.57,11.14-20.5,17.72-25.5
C113.524,180.779,108.964,182.779,108.964,182.779z M156.574,138.779c-25.41,0-33.43,1.76-33.43,6c0,13-13.95,16.9-13.67,19
c1.52,11.5-7.54,12.82-3.55,15c19.25,10.5,86.1-43.5,66.35-43.5C151.604,135.279,161.134,138.779,156.574,138.779z M106.434,167.779
c-9.39-1.16-61.29,7-32.42,27c2.42,1.68,6.82-12.47,25.33-14.5C103.904,179.779,110.484,168.279,106.434,167.779z M147.964,133.279
c-4.05,1-34.91,1.18-33.43,1.5c39,8.5,51.16-1.5,54.7-4C171.634,129.089,152.014,132.279,147.964,133.279z M120.104,146.779
c-0.43-0.85-11.59,1.91-17.22,2.5c-23.8,2.5-35.16,5.74-30.89,11c1.3,1.61-8.11,2.5,0.5,7c1.42,0.74-8.61,7,29.38-2
C106.724,164.129,123.654,153.779,120.104,146.779z M126.184,139.279c0.34-0.62-16.21-4.5-16.21-4.5s-38.49,0-26.84,9
c0.4,0.311-20.26,10.5,12.66,5C99.824,148.109,121.624,147.779,126.184,139.279z M195.063,161.279c1.97-9.72-1.25-10.81-3.54-7.5
c-2.3,3.311-3.65,10.49-3.55,10c6.59-31.5-7.8-12.81-6.58-9c6.07,19-23.3,65.5-23.3,65.5S190.114,185.708,195.063,161.279z
M118.583,44.779c-4.56,1-8.1,3.5-0.5,5.5C125.674,52.279,123.144,43.779,118.583,44.779z"/>
<path id="path8" fill="#FFF6E3" d="M355.693,52.389c-4.46,0.56-8.5,1-9.5-4.5s1.5-7.5,9-5.5S367.693,50.889,355.693,52.389z
M319.193,55.889c0,0-18.72,4.42-1.5-8.5c8-6,8.5-1,9,2C327.443,53.859,319.193,55.889,319.193,55.889z M376.193,15.389
c-8.35-1.67-8-6.5,1-8.5C378.664,6.569,381.193,16.389,376.193,15.389z M381.193,15.389c2.5-0.5,6.5,0.5,7,4s-3.5,5.5-6,3.5
S378.693,15.889,381.193,15.389z M375.193,26.389c2.5-1,10,0.5,9.5,3.5s-6.5,3.5-9,2S372.693,27.389,375.193,26.389z
M376.193,43.889c3-2.5,6.5,0,7.5,1.5s-4,3.5-5.5,4S373.193,46.389,376.193,43.889z M387.693,6.889c0,0,4,0,3,1.5s-4,1.5-4,1.5
L387.693,6.889z M393.693,15.889c0,0,4,0,3,1.5s-4,1.5-4,1.5L393.693,15.889z M361.193,63.889c0,0,5,2,4,3.5s-2.5,4-6,0.5
S361.193,63.889,361.193,63.889z M347.693,83.389c3-2.5,6.5,0,7.5,1.5s-4,3.5-5.5,4S344.693,85.889,347.693,83.389z M349.693,73.389
c3-2.5,5.5,1,6.5,2.5s-3,2.5-4.5,3S346.693,75.889,349.693,73.389z M332.693,39.889c-3.569,0.2-9.5-1.5-0.5-7.5c8.32-5.54,8-4,8.5-1
C341.443,35.859,336.264,39.698,332.693,39.889z M302.193,48.889c0,0-3.5-3,3.5-9c7.601-6.5,6.5-4,7-1
C313.443,43.359,302.193,48.889,302.193,48.889z M333.193,22.389c0,0,6-1,5,0.5s-3.5,7-7,3.5S333.193,22.389,333.193,22.389z
M366.693,52.889c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5
C364.193,54.019,365.323,52.889,366.693,52.889z M361.693,77.389c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5
c-1.37,0-2.5-1.12-2.5-2.5C359.193,78.519,360.323,77.389,361.693,77.389z M357.693,87.389c1.38,0,2.5,1.13,2.5,2.5
c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C355.193,88.519,356.323,87.389,357.693,87.389z M341.693,93.889
c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C339.193,95.019,340.323,93.889,341.693,93.889z
M350.193,95.389c1.38,0,4,2.13,4,3.5c0,1.38-2.62,1.5-4,1.5c-1.37,0-2.5-1.12-2.5-2.5
C347.693,96.519,348.823,95.389,350.193,95.389z M374.193,56.389c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5
c-1.37,0-2.5-1.12-2.5-2.5C371.693,57.519,372.823,56.389,374.193,56.389z M387.693,32.889c1.38,0,2.5,1.13,2.5,2.5
c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C385.193,34.019,386.323,32.889,387.693,32.889z M292.693,40.889
c2.32,0.93,13.5-6.5,10-7.5S290.193,39.889,292.693,40.889z M311.693,27.889c2.5,0.5,10-2.5,6.5-3.5S309.054,27.368,311.693,27.889z
M263.693,58.389c5.5-3,21-10.5,13.5-9.5S258.974,60.969,263.693,58.389z M356.193,8.889c2.5,0.5,10-2.5,6.5-3.5
S353.554,8.368,356.193,8.889z M284.193,45.389c2.5,0.5,7.5-2,4-3S281.554,44.868,284.193,45.389z M347.193,107.889
c1.38,0,2.5,1.63,2.5,3c0,1.38-0.62,1.5-2,1.5c-1.37,0-2.5-1.12-2.5-2.5C345.193,108.519,345.823,107.889,347.193,107.889z
M339.693,107.389c1.38,0,3.5,0.63,3.5,2c0,1.38-2.62,1-4,1c-1.37,0-2.5-1.12-2.5-2.5
C336.693,106.519,338.323,107.389,339.693,107.389z M341.693,121.889c1.38,0,4,2.13,4,3.5c0,1.38-2.62,1.5-4,1.5
c-1.37,0-2.5-1.12-2.5-2.5C339.193,123.019,340.323,121.889,341.693,121.889z M329.693,142.389c4-1,4,1,5,4.5s8.07,14.88-3.5,1
C328.693,144.889,325.693,143.389,329.693,142.389z M341.693,154.389c1.38,0,2.5,1.13,2.5,2.5c0,1.38-1.12,2.5-2.5,2.5
c-1.37,0-2.5-1.12-2.5-2.5C339.193,155.519,340.323,154.389,341.693,154.389z M344.193,163.389c1.38,0,2.5,1.13,2.5,2.5
c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-2.5-1.12-2.5-2.5C341.693,164.519,342.823,163.389,344.193,163.389z M344.363,172.389
c1.37,0,3.33,3.13,3.33,4.5c0,1.38-1.12,2.5-2.5,2.5c-1.37,0-4.16-1.62-4.16-3C341.033,175.019,342.983,172.389,344.363,172.389z
M345.693,188.389c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5
C344.193,188.519,344.323,188.389,345.693,188.389z M332.193,155.389c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5
c-1.37,0-1,0.88-1-0.5C330.693,155.519,330.823,155.389,332.193,155.389z M335.193,167.889c1.38,0,1,0.13,1,1.5
c0,1.38,0.21,5-1.16,5c-1.38,0-1.34-3.62-1.34-5C333.693,168.019,333.823,167.889,335.193,167.889z M338.693,181.889
c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5C337.193,182.019,337.323,181.889,338.693,181.889z
M332.533,195.389c1.37,0,1.16,0.13,1.16,1.5c0,1.38-0.29,0.5-1.66,0.5c-1.38,0-0.84,0.88-0.84-0.5
C331.193,195.519,331.153,195.389,332.533,195.389z M341.363,198.729c1.37,0,2.67,1.95,2.67,3.33c0,1.37-2.96,3.83-4.34,3.83
c-1.37,0-1,0.88-1-0.5C338.693,204.019,339.983,198.729,341.363,198.729z M335.693,213.059c1.38,0,3.67-0.38,3.67,1
c0,1.37-3.29,3.83-4.67,3.83c-1.37,0-1,0.88-1-0.5C333.693,216.019,334.323,213.059,335.693,213.059z M327.193,205.889
c1.38,0,1,0.13,1,1.5c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5C325.693,206.019,325.823,205.889,327.193,205.889z
M324.693,225.059c1.38,0,2.67,1.62,2.67,3c0,1.37-2.29,0.83-3.67,0.83c-1.37,0-1,0.88-1-0.5
C322.693,227.019,323.323,225.059,324.693,225.059z M316.363,230.389c1.37,0,0.67,1.63,0.67,3c0,1.38-4.96,4.5-6.34,4.5
c-1.37,0-1,0.88-1-0.5C309.693,236.019,314.983,230.389,316.363,230.389z M317.193,214.389c1.38,0,1,0.13,1,1.5
c0,1.38-0.12,0.5-1.5,0.5c-1.37,0-1,0.88-1-0.5C315.693,214.519,315.823,214.389,317.193,214.389z M305.193,222.889
c1.38,0,5.84,1.79,5.84,3.17c0,1.37-5.629,3.67-7,3.67c-1.379,0-2.34-2.3-2.34-3.67
C301.693,224.679,303.824,222.889,305.193,222.889z M292.193,227.389c1.381,0,1,0.13,1,1.5c0,1.38-0.119,0.5-1.5,0.5
c-1.369,0-1,0.88-1-0.5C290.693,227.519,290.824,227.389,292.193,227.389z M300.193,239.389c1.381,0,1,0.13,1,1.5
c0,1.38-0.119,0.5-1.5,0.5c-1.369,0-1,0.88-1-0.5C298.693,239.519,298.824,239.389,300.193,239.389z M297.193,240.389
c1.381,0,1,0.13,1,1.5c0,1.38-0.119,0.5-1.5,0.5c-1.369,0-1,0.88-1-0.5C295.693,240.519,295.824,240.389,297.193,240.389z
M285.693,240.729c0.92,0,2,1.41,2,2.33s-0.08,0.33-1,0.33c-0.91,0-3.33,1.25-3.33,0.34
C283.363,242.809,284.783,240.729,285.693,240.729z M288.693,243.389c0.92,0,0.67,0.09,0.67,1c0,0.92-0.08,0.34-1,0.34
s-0.67,0.58-0.67-0.34C287.693,243.479,287.783,243.389,288.693,243.389z M283.363,230.389c0.92,0,2.33,3.42,2.33,4.34
c0,0.91-3.08,0.66-4,0.66c-0.91,0-2.33-2.75-2.33-3.66C279.363,230.809,282.443,230.389,283.363,230.389z M272.033,241.389
c1.371,0,1.16,0.13,1.16,1.5c0,1.38-0.289,0.5-1.66,0.5c-1.379,0-0.84,0.88-0.84-0.5
C270.693,241.519,270.654,241.389,272.033,241.389z M269.033,234.389c1.371,0-0.67,3.29-0.67,4.67c0,1.37-4.459,1.83-5.83,1.83
c-1.379,0,1.16-1.79,1.16-3.16C263.693,236.349,267.654,234.389,269.033,234.389z M44.194,51.559c4.47,0.56,8.5,1,9.5-4.5
s-1.5-7.5-9-5.5S32.194,50.059,44.194,51.559z M80.694,55.059c0,0,18.72,4.41,1.5-8.5c-8-6-8.5-1-9,2
C72.454,53.029,80.694,55.059,80.694,55.059z M23.694,14.559c8.35-1.67,8-6.5-1-8.5C21.234,5.729,18.694,15.559,23.694,14.559z
M18.694,14.559c-2.5-0.5-6.5,0.5-7,4s3.5,5.5,6,3.5S21.194,15.059,18.694,14.559z M24.694,25.559c-2.5-1-10,0.5-9.5,3.5
s6.5,3.5,9,2S27.194,26.559,24.694,25.559z M23.694,43.059c-3-2.5-6.5,0-7.5,1.5s4,3.5,5.5,4S26.694,45.559,23.694,43.059z
M12.194,6.059c0,0-4,0-3,1.5s4,1.5,4,1.5L12.194,6.059z M6.194,15.059c0,0-4,0-3,1.5s4,1.5,4,1.5L6.194,15.059z M38.694,63.059
c0,0-5,2-4,3.5s2.5,4,6,0.5S38.694,63.059,38.694,63.059z M52.194,82.559c-3-2.5-6.5,0-7.5,1.5s4,3.5,5.5,4
S55.194,85.059,52.194,82.559z M50.194,72.559c-3-2.5-5.5,1-6.5,2.5s3,2.5,4.5,3S53.194,75.059,50.194,72.559z M67.194,39.059
c3.57,0.2,9.5-1.5,0.5-7.5c-8.32-5.55-8-4-8.5-1C58.454,35.029,63.624,38.859,67.194,39.059z M97.694,48.059c0,0,3.5-3-3.5-9
c-7.59-6.51-6.5-4-7-1C86.454,42.529,97.694,48.059,97.694,48.059z M66.694,21.559c0,0-6-1-5,0.5s3.5,7,7,3.5
S66.694,21.559,66.694,21.559z M33.194,52.059c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5
C35.694,53.189,34.574,52.059,33.194,52.059z M38.194,76.559c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5
c1.38,0,2.5-1.12,2.5-2.5C40.694,77.689,39.574,76.559,38.194,76.559z M42.194,86.559c-1.37,0-2.5,1.13-2.5,2.5
c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5C44.694,87.689,43.574,86.559,42.194,86.559z M58.194,93.059
c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5C60.694,94.189,59.574,93.059,58.194,93.059z
M49.694,94.559c-1.37,0-4,2.13-4,3.5c0,1.38,2.63,1.5,4,1.5c1.38,0,2.5-1.12,2.5-2.5C52.194,95.689,51.074,94.559,49.694,94.559z
M25.694,55.559c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5c1.38,0,2.5-1.12,2.5-2.5
C28.194,56.689,27.074,55.559,25.694,55.559z M12.194,32.059c-1.37,0-2.5,1.13-2.5,2.5c0,1.38,1.13,2.5,2.5,2.5
c1.38,0,2.5-1.12,2.5-2.5C14.694,33.189,13.574,32.059,12.194,32.059z M107.194,40.059c-2.32,0.93-13.5-6.5-10-7.5
S109.694,39.059,107.194,40.059z M88.194,27.059c-2.5,0.5-10-2.5-6.5-3.5S90.833,26.529,88.194,27.059z M136.194,57.559
c-5.5-3-21-10.5-13.5-9.5S140.924,60.139,136.194,57.559z M43.694,8.059c-2.5,0.5-10-2.5-6.5-3.5S46.333,7.529,43.694,8.059z
M115.694,44.559c-2.5,0.5-7.5-2-4-3S118.333,44.029,115.694,44.559z M52.694,107.059c-1.37,0-2.5,1.63-2.5,3c0,1.38,0.63,1.5,2,1.5
c1.38,0,2.5-1.12,2.5-2.5C54.694,107.689,54.074,107.059,52.694,107.059z M60.194,106.559c-1.37,0-3.5,0.63-3.5,2c0,1.38,2.63,1,4,1
c1.38,0,2.5-1.12,2.5-2.5C63.194,105.689,61.574,106.559,60.194,106.559z M58.194,121.059c-1.37,0-4,2.13-4,3.5
c0,1.38,2.63,1.5,4,1.5c1.38,0,2.5-1.12,2.5-2.5C60.694,122.189,59.574,121.059,58.194,121.059z M70.194,141.559c-4-1-4,1-5,4.5
s-8.06,14.88,3.5,1C71.194,144.059,74.194,142.559,70.194,141.559z M58.194,153.559c-1.37,0-2.5,1.12-2.5,2.5
c0,1.37,1.13,2.5,2.5,2.5c1.38,0,2.5-1.13,2.5-2.5C60.694,154.679,59.574,153.559,58.194,153.559z M55.694,162.559
c-1.37,0-2.5,1.12-2.5,2.5c0,1.37,1.13,2.5,2.5,2.5c1.38,0,2.5-1.13,2.5-2.5C58.194,163.679,57.074,162.559,55.694,162.559z
M55.534,171.559c-1.38,0-3.34,3.12-3.34,4.5c0,1.37,1.13,2.5,2.5,2.5c1.38,0,4.17-1.63,4.17-3
C58.864,174.179,56.904,171.559,55.534,171.559z M54.194,187.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C55.694,187.679,55.574,187.559,54.194,187.559z M67.694,154.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C69.194,154.679,69.074,154.559,67.694,154.559z M64.694,167.059c-1.37,0-1,0.12-1,1.5c0,1.37-0.2,5,1.17,5c1.38,0,1.33-3.63,1.33-5
C66.194,167.179,66.074,167.059,64.694,167.059z M61.194,181.059c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C62.694,181.179,62.574,181.059,61.194,181.059z M67.364,194.559c-1.37,0-1.17,0.12-1.17,1.5c0,1.37,0.3,0.5,1.67,0.5
c1.38,0,0.83,0.87,0.83-0.5C68.694,194.679,68.744,194.559,67.364,194.559z M58.534,197.889c-1.38,0-2.67,1.96-2.67,3.34
c0,1.37,2.96,3.83,4.33,3.83c1.38,0,1,0.87,1-0.5C61.194,203.179,59.904,197.889,58.534,197.889z M64.194,212.229
c-1.37,0-3.66-0.38-3.66,1c0,1.37,3.29,3.83,4.66,3.83c1.38,0,1,0.87,1-0.5C66.194,215.179,65.574,212.229,64.194,212.229z
M72.694,205.059c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5C74.194,205.179,74.074,205.059,72.694,205.059z
M75.194,224.229c-1.37,0-2.66,1.62-2.66,3c0,1.37,2.29,0.83,3.66,0.83c1.38,0,1,0.87,1-0.5
C77.194,226.179,76.574,224.229,75.194,224.229z M83.534,229.559c-1.38,0-0.67,1.62-0.67,3c0,1.37,4.96,4.5,6.33,4.5
c1.38,0,1,0.87,1-0.5C90.194,235.179,84.904,229.559,83.534,229.559z M82.694,213.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5
c1.38,0,1,0.87,1-0.5C84.194,213.679,84.074,213.559,82.694,213.559z M94.694,222.059c-1.37,0-5.83,1.79-5.83,3.17
c0,1.37,5.63,3.66,7,3.66c1.38,0,2.33-2.29,2.33-3.66C98.194,223.849,96.074,222.059,94.694,222.059z M107.694,226.559
c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5C109.194,226.679,109.074,226.559,107.694,226.559z
M99.694,238.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5c1.38,0,1,0.87,1-0.5
C101.194,238.679,101.074,238.559,99.694,238.559z M102.694,239.559c-1.37,0-1,0.12-1,1.5c0,1.37,0.13,0.5,1.5,0.5
c1.38,0,1,0.87,1-0.5C104.194,239.679,104.074,239.559,102.694,239.559z M114.194,239.889c-0.91,0-2,1.42-2,2.34
c0,0.91,0.09,0.33,1,0.33c0.92,0,3.34,1.25,3.34,0.33C116.534,241.979,115.114,239.889,114.194,239.889z M111.194,242.559
c-0.91,0-0.66,0.08-0.66,1s0.08,0.33,1,0.33c0.91,0,0.66,0.59,0.66-0.33S112.114,242.559,111.194,242.559z M116.534,229.559
c-0.92,0-2.34,3.42-2.34,4.33c0,0.92,3.09,0.67,4,0.67c0.92,0,2.34-2.75,2.34-3.67C120.534,229.979,117.444,229.559,116.534,229.559
z M127.864,240.559c-1.37,0-1.17,0.12-1.17,1.5c0,1.37,0.3,0.5,1.67,0.5c1.38,0,0.83,0.87,0.83-0.5
C129.194,240.679,129.244,240.559,127.864,240.559z M130.864,233.559c-1.37,0,0.67,3.29,0.67,4.67c0,1.37,4.46,1.83,5.83,1.83
c1.38,0-1.17-1.79-1.17-3.17C136.194,235.519,132.244,233.559,130.864,233.559z M202.964,101.458c-1.37,0-1.17,0.131-1.17,1.5
c0,1.381,0.3,0.5,1.67,0.5c1.38,0,0.83,0.881,0.83-0.5C204.294,101.589,204.344,101.458,202.964,101.458z M197.464,101.458
c-1.37,0-1.17,0.131-1.17,1.5c0,1.381,0.3,0.5,1.67,0.5c1.38,0,0.83,0.881,0.83-0.5
C198.794,101.589,198.844,101.458,197.464,101.458z M202.964,110.458c-1.37,0-1.17,0.131-1.17,1.5c0,1.381,0.3,0.5,1.67,0.5
c1.38,0,0.83,0.881,0.83-0.5C204.294,110.589,204.344,110.458,202.964,110.458z M196.864,110.359c-1.37,0-1.17,0.13-1.17,1.5
c0,1.38,0.3,0.5,1.67,0.5c1.38,0,0.83,0.88,0.83-0.5C198.194,110.489,198.244,110.359,196.864,110.359z M204.964,120.958
c-1.37,0-1,1.131-1,2.5c0,1.381,0.42,4.5,1.8,4.5c1.37,0,0.53-4.119,0.53-5.5C206.294,121.089,206.344,120.958,204.964,120.958z
M195.964,120.958c-1.37,0-1.4,1.23-1.4,2.601c0,1.38-0.97,4.6,0.4,4.6c1.38,0,1.8-3.819,1.8-5.2
C196.764,121.589,197.344,120.958,195.964,120.958z"/>
</svg>
<canvas id="canvas" width="400" height="250"></canvas>
</body>
</html>

38
examples/SVG Import/Circle and Ellipse Testing.html
View file

@ -1,26 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Circle and Ellipse Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
<meta charset="UTF-8">
<title>Circle and Ellipse Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="1000" id="svg">
<circle cx="40" cy="300" r="20" style="fill:orange;stroke:yellow;stroke-width:2px;stroke-dasharray:3px" id="circle1" />
<circle cx="60" cy="350" r="30" style="fill:red;stroke:black;stroke-width:5" id="circle2" />
<circle cx="160" cy="400" r="60" style="fill:blue;" id="circle3" />
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" id="ellipse1"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" id="ellipse2"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" id="ellipse3"/>
<ellipse cx="240" cy="175" rx="220" ry="30" style="fill:yellow" id="ellipse4"/>
<ellipse cx="220" cy="175" rx="190" ry="20" style="fill:white" id="ellipse5"/>
<ellipse cx="300" cy="255" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" id="ellipse6"/>
</svg>
<canvas id="canvas" width="500" height="1000"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="1000" id="svg">
<circle cx="40" cy="300" r="20" style="fill:orange;stroke:yellow;stroke-width:2px;stroke-dasharray:3px" id="circle1" />
<circle cx="60" cy="350" r="30" style="fill:red;stroke:black;stroke-width:5" id="circle2" />
<circle cx="160" cy="400" r="60" style="fill:blue;" id="circle3" />
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" id="ellipse1"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" id="ellipse2"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" id="ellipse3"/>
<ellipse cx="240" cy="175" rx="220" ry="30" style="fill:yellow" id="ellipse4"/>
<ellipse cx="220" cy="175" rx="190" ry="20" style="fill:white" id="ellipse5"/>
<ellipse cx="300" cy="255" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" id="ellipse6"/>
</svg>
<canvas id="canvas" width="500" height="1000"></canvas>
</body>
</html>

158
examples/SVG Import/Clipping.html
View file

@ -1,103 +1,103 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clipping</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('Layer_1'));
</script>
<meta charset="UTF-8">
<title>Clipping</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('Layer_1'));
</script>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="400px" height="1500px" enable-background="new 0 0 500 1120.5" xml:space="preserve">
width="400px" height="1500px" enable-background="new 0 0 500 1120.5" xml:space="preserve">
<text transform="matrix(1 0 0 1 83.5002 68.5)" font-family="'Helvetica'" font-size="12">Clipping a path with a path:</text>
<g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,198c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103
S193.115,95,250,95C306.886,95,353,141.115,353,198z"/>
<rect x="137" y="85" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<defs>
<rect id="SVGID_1_" x="137" y="85" width="113" height="113"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<circle clip-path="url(#SVGID_2_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="250" cy="198" r="103"/>
</g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,198c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103
S193.115,95,250,95C306.886,95,353,141.115,353,198z"/>
<rect x="137" y="85" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<defs>
<rect id="SVGID_1_" x="137" y="85" width="113" height="113"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<circle clip-path="url(#SVGID_2_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="250" cy="198" r="103"/>
</g>
</g>
<text transform="matrix(1 0 0 1 83.5002 355.5)" font-family="'Helvetica'" font-size="12">Clipping a compound path with a path:</text>
<g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,491.911c0,56.885-46.114,103-103,103
c-56.885,0-103-46.115-103-103s46.115-103,103-103C306.886,388.911,353,435.026,353,491.911z M250,409.512
c-45.508,0-82.4,36.892-82.4,82.399s36.893,82.4,82.4,82.4c45.509,0,82.399-36.894,82.399-82.4
C332.4,446.403,295.509,409.512,250,409.512z"/>
<rect x="137" y="378.911" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<defs>
<rect id="SVGID_3_" x="137" y="378.911" width="113" height="113"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_4_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" d="M353,491.911
c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103s46.115-103,103-103C306.886,388.911,353,435.026,353,491.911z
M250,409.512c-45.508,0-82.4,36.892-82.4,82.399s36.893,82.4,82.4,82.4c45.509,0,82.399-36.894,82.399-82.4
C332.4,446.403,295.509,409.512,250,409.512z"/>
</g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,491.911c0,56.885-46.114,103-103,103
c-56.885,0-103-46.115-103-103s46.115-103,103-103C306.886,388.911,353,435.026,353,491.911z M250,409.512
c-45.508,0-82.4,36.892-82.4,82.399s36.893,82.4,82.4,82.4c45.509,0,82.399-36.894,82.399-82.4
C332.4,446.403,295.509,409.512,250,409.512z"/>
<rect x="137" y="378.911" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<defs>
<rect id="SVGID_3_" x="137" y="378.911" width="113" height="113"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_4_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" d="M353,491.911
c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103s46.115-103,103-103C306.886,388.911,353,435.026,353,491.911z
M250,409.512c-45.508,0-82.4,36.892-82.4,82.399s36.893,82.4,82.4,82.4c45.509,0,82.399-36.894,82.399-82.4
C332.4,446.403,295.509,409.512,250,409.512z"/>
</g>
</g>
<text transform="matrix(1 0 0 1 83.5002 650.5)" font-family="'Helvetica'" font-size="12">Clipping a path with a compound path:</text>
<g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,785.823c0,56.885-46.114,103-103,103
c-56.885,0-103-46.115-103-103c0-56.886,46.115-103,103-103C306.886,682.823,353,728.938,353,785.823z M250,703.423
c-45.508,0-82.4,36.892-82.4,82.4c0,45.508,36.893,82.399,82.4,82.399c45.509,0,82.399-36.893,82.399-82.399
C332.4,740.314,295.509,703.423,250,703.423z"/>
<rect x="137" y="672.822" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<defs>
<path id="SVGID_5_" d="M353,785.823c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103c0-56.886,46.115-103,103-103
C306.886,682.823,353,728.938,353,785.823z M250,703.423c-45.508,0-82.4,36.892-82.4,82.4c0,45.508,36.893,82.399,82.4,82.399
c45.509,0,82.399-36.893,82.399-82.399C332.4,740.314,295.509,703.423,250,703.423z"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" overflow="visible"/>
</clipPath>
<rect x="137" y="672.822" clip-path="url(#SVGID_6_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,785.823c0,56.885-46.114,103-103,103
c-56.885,0-103-46.115-103-103c0-56.886,46.115-103,103-103C306.886,682.823,353,728.938,353,785.823z M250,703.423
c-45.508,0-82.4,36.892-82.4,82.4c0,45.508,36.893,82.399,82.4,82.399c45.509,0,82.399-36.893,82.399-82.399
C332.4,740.314,295.509,703.423,250,703.423z"/>
<rect x="137" y="672.822" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<defs>
<path id="SVGID_5_" d="M353,785.823c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103c0-56.886,46.115-103,103-103
C306.886,682.823,353,728.938,353,785.823z M250,703.423c-45.508,0-82.4,36.892-82.4,82.4c0,45.508,36.893,82.399,82.4,82.399
c45.509,0,82.399-36.893,82.399-82.399C332.4,740.314,295.509,703.423,250,703.423z"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" overflow="visible"/>
</clipPath>
<rect x="137" y="672.822" clip-path="url(#SVGID_6_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" width="113" height="113"/>
</g>
</g>
<text transform="matrix(1 0 0 1 83.5002 941.5)" font-family="'Helvetica'" font-size="12">Clipping a group with a path:</text>
<g>
<!--
<rect x="137" y="970" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
-->
<defs>
<rect id="SVGID_7_" x="153" y="970" width="113" height="113"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_8_)">
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="966" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="966" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="966" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1019" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1019" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1019" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1072" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1072" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1072" r="21.5"/>
</g>
<!--
<rect x="137" y="970" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
-->
<defs>
<rect id="SVGID_7_" x="153" y="970" width="113" height="113"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_8_)">
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="966" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="966" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="966" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1019" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1019" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1019" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1072" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1072" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1072" r="21.5"/>
</g>
</g>
</svg>
<canvas id="canvas" width="400px" height="1500px"></canvas>
<canvas id="canvas" width="400px" height="1500px"></canvas>
</body>
</html>

45
examples/SVG Import/From File.html
View file

@ -1,29 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Import From File</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var file = document.getElementById('file');
file.addEventListener('change', function (event) {
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.type.match('svg')) {
project.importSVG(file, function(item) {
console.log(item);
});
}
}
});
</script>
<meta charset="UTF-8">
<title>Import From File</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var file = document.getElementById('file');
file.addEventListener('change', function (event) {
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.type.match('svg')) {
project.clear();
project.importSVG(file, function(item) {
console.log(item);
});
}
}
});
</script>
</head>
<body>
<form>
<input type="file" id="file">
</form>
<canvas id="canvas" width="1000" height="1000"></canvas>
<form>
<input type="file" id="file">
</form>
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
</html>

262
examples/SVG Import/Gradient.html
View file

@ -1,138 +1,138 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var item = project.importSVG(document.getElementById('svg'));
</script>
<meta charset="UTF-8">
<title>Gradients</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var item = project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="210mm"
height="297mm"
id="svg">
<defs
id="defs1903">
<linearGradient
id="linearGradient3794">
<stop
id="stop3796"
style="stop-color:#ff5555;stop-opacity:1"
offset="0" />
<stop
id="stop3808"
style="stop-color:#522ba8;stop-opacity:1"
offset="0.18868095" />
<stop
id="stop3802"
style="stop-color:#ff00ff;stop-opacity:1"
offset="0.38376093" />
<stop
id="stop3804"
style="stop-color:#ff6600;stop-opacity:1"
offset="0.57983696" />
<stop
id="stop3806"
style="stop-color:#28170b;stop-opacity:1"
offset="0.80833077" />
<stop
id="stop3798"
style="stop-color:#ff5555;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient3770">
<stop
id="stop3772"
style="stop-color:#d1ab00;stop-opacity:1"
offset="0" />
<stop
id="stop3788"
style="stop-color:#502d16;stop-opacity:1"
offset="0.0625" />
<stop
id="stop3786"
style="stop-color:#ff5555;stop-opacity:1"
offset="0.125" />
<stop
id="stop3784"
style="stop-color:#00ff00;stop-opacity:1"
offset="0.54704088" />
<stop
id="stop3782"
style="stop-color:#ffff00;stop-opacity:1"
offset="0.79772007" />
<stop
id="stop3774"
style="stop-color:#2b1100;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient3760">
<stop
id="stop3762"
style="stop-color:#ff6600;stop-opacity:1"
offset="0" />
<stop
id="stop3764"
style="stop-color:#2b1100;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="443.22928"
y1="215.30028"
x2="867.58954"
y2="229.58598"
id="linearGradient3768"
xlink:href="#linearGradient3760"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="443.22928"
y1="215.30028"
x2="867.58954"
y2="229.58598"
id="linearGradient3776"
xlink:href="#linearGradient3770"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="454.28571"
y1="-7.6378121"
x2="591.42859"
y2="480.93362"
id="linearGradient3800"
xlink:href="#linearGradient3794"
gradientUnits="userSpaceOnUse" />
</defs>
<metadata
id="metadata1906">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<path
d="m 325.71425,440.93359 -24.52516,-67.66103 -63.02035,-34.75536 5.11537,-71.78671 -43.43569,-57.38329 33.87141,-63.49982 -16.34058,-70.089121 56.77078,-44.233226 13.57994,-70.675915 69.85396,-17.318309 41.15239,-59.042199 70.85875,12.5911 61.6092,-37.19955 59.61144,40.3234 71.41322,-8.92476 38.05675,61.08341 68.86926,20.893202 9.92171,71.281547 54.41716,47.098539 -19.92888,69.154452 30.55585,65.16011 -46.33359,55.06994 1.41115,71.9549 -64.7268,31.46332 -27.97755,66.30805 -71.92816,2.4164 -52.52867,49.19593 -66.69248,-27.04832 -67.99711,23.57737 -49.92508,-51.83614 z"
transform="translate(-125.71429,194.28571) scale(0.5, 0.5)"
id="path3792"
style="fill:url(#linearGradient3800);fill-opacity:1;stroke;stroke:black;stroke-width:2px;" />
</g>
</svg>
<canvas id="canvas" width="900" height="900"></canvas>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="500px"
height="500px"
id="svg">
<defs
id="defs1903">
<linearGradient
id="linearGradient3794">
<stop
id="stop3796"
style="stop-color:#ff5555;stop-opacity:1"
offset="0" />
<stop
id="stop3808"
style="stop-color:#522ba8;stop-opacity:1"
offset="0.18868095" />
<stop
id="stop3802"
style="stop-color:#ff00ff;stop-opacity:1"
offset="0.38376093" />
<stop
id="stop3804"
style="stop-color:#ff6600;stop-opacity:1"
offset="0.57983696" />
<stop
id="stop3806"
style="stop-color:#28170b;stop-opacity:1"
offset="0.80833077" />
<stop
id="stop3798"
style="stop-color:#ff5555;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient3770">
<stop
id="stop3772"
style="stop-color:#d1ab00;stop-opacity:1"
offset="0" />
<stop
id="stop3788"
style="stop-color:#502d16;stop-opacity:1"
offset="0.0625" />
<stop
id="stop3786"
style="stop-color:#ff5555;stop-opacity:1"
offset="0.125" />
<stop
id="stop3784"
style="stop-color:#00ff00;stop-opacity:1"
offset="0.54704088" />
<stop
id="stop3782"
style="stop-color:#ffff00;stop-opacity:1"
offset="0.79772007" />
<stop
id="stop3774"
style="stop-color:#2b1100;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient3760">
<stop
id="stop3762"
style="stop-color:#ff6600;stop-opacity:1"
offset="0" />
<stop
id="stop3764"
style="stop-color:#2b1100;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
x1="443.22928"
y1="215.30028"
x2="867.58954"
y2="229.58598"
id="linearGradient3768"
xlink:href="#linearGradient3760"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="443.22928"
y1="215.30028"
x2="867.58954"
y2="229.58598"
id="linearGradient3776"
xlink:href="#linearGradient3770"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="454.28571"
y1="-7.6378121"
x2="591.42859"
y2="480.93362"
id="linearGradient3800"
xlink:href="#linearGradient3794"
gradientUnits="userSpaceOnUse" />
</defs>
<metadata
id="metadata1906">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<path
d="m 325.71425,440.93359 -24.52516,-67.66103 -63.02035,-34.75536 5.11537,-71.78671 -43.43569,-57.38329 33.87141,-63.49982 -16.34058,-70.089121 56.77078,-44.233226 13.57994,-70.675915 69.85396,-17.318309 41.15239,-59.042199 70.85875,12.5911 61.6092,-37.19955 59.61144,40.3234 71.41322,-8.92476 38.05675,61.08341 68.86926,20.893202 9.92171,71.281547 54.41716,47.098539 -19.92888,69.154452 30.55585,65.16011 -46.33359,55.06994 1.41115,71.9549 -64.7268,31.46332 -27.97755,66.30805 -71.92816,2.4164 -52.52867,49.19593 -66.69248,-27.04832 -67.99711,23.57737 -49.92508,-51.83614 z"
transform="translate(-125.71429,194.28571) scale(0.5, 0.5)"
id="path3792"
style="fill:url(#linearGradient3800);fill-opacity:1;stroke;stroke:black;stroke-width:2px;" />
</g>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

46
examples/SVG Import/Gradients.html
View file

@ -1,30 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
<meta charset="UTF-8">
<title>Gradients</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg id="svg" x="0" y="0" width="300" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<linearGradient x1="45" y1="345" x2="255" y2="555" gradientUnits="userSpaceOnUse" id="gradient-2">
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
</linearGradient>
<radialGradient cx="150" cy="150" r="120" gradientUnits="userSpaceOnUse" id="gradient-1">
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
</radialGradient>
<g fill="none" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0">
<circle cx="150" cy="150" r="120" fill="url(#gradient-1)"></circle>
<rect x="45" y="345" width="210" height="210" transform="rotate(45,150,450)" fill="url(#gradient-2)"></rect>
</g>
</svg>
<canvas id="canvas" width="300" height="600"></canvas>
<svg id="svg" x="0" y="0" width="300" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<linearGradient x1="45" y1="345" x2="255" y2="555" gradientUnits="userSpaceOnUse" id="gradient-2">
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
</linearGradient>
<radialGradient cx="150" cy="150" r="120" gradientUnits="userSpaceOnUse" id="gradient-1">
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
</radialGradient>
<g fill="none" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0">
<circle cx="150" cy="150" r="120" fill="url(#gradient-1)"></circle>
<rect x="45" y="345" width="210" height="210" transform="rotate(45,150,450)" fill="url(#gradient-2)"></rect>
</g>
</svg>
<canvas id="canvas" width="300" height="600"></canvas>
</body>
</html>

52
examples/SVG Import/Inkscape Pivot.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transform Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Import Inkscape-style SVG, preserving pivots
var svg = project.importSVG(document.getElementById('svg'), {
onImport: function(node, item) {
var prefix = 'inkscape:transform-center-';
var x = node.getAttribute(prefix + 'x');
var y = node.getAttribute(prefix + 'y');
if (x != null && y != null) {
item.pivot = new Point(+x, +y);
}
}
});
// Illustrate pivot using a simple animation
var rect = svg.children.rectangle;
// Show the pivot
new Path.Circle({
center: rect.localToGlobal(rect.pivot),
radius: 4,
strokeColor: 'black'
});
rect.onFrame = function() {
rect.rotate(1);
}
// And export again, preserving Inkscape pivots
console.log(rect.exportSVG({
onExport: function(item, node) {
var prefix = 'inkscape:transform-center-';
if (item.pivot) {
node.setAttribute(prefix + 'x', item.pivot.x);
node.setAttribute(prefix + 'y', item.pivot.y);
}
}
}))
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<rect id="rectangle" x="50" y="200" width="200" height="100" fill="red" inkscape:transform-center-x="100" inkscape:transform-center-y="0" />
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

14
examples/SVG Import/Inkscape.html
View file

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inkscape</title>
<meta charset="UTF-8">
<title>Inkscape</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var start = Date.now();
project.importSVG(document.getElementById('svg2'));
project.importSVG(document.getElementById('svg2'));
console.log(Date.now() - start);
// console.log(project.exportJSON());
</script>
</script>
</head>
<body>
<svg
@ -83,6 +83,6 @@
</g>
</svg>
<canvas id="canvas" width="400" height="400"></canvas>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>

34
examples/SVG Import/Line Testing.html
View file

@ -1,24 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
<meta charset="UTF-8">
<title>Line Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10px;stroke-dasharray: 10px, 4px;stroke-linecap: "butt" id="line1" />
<line x1="100" y1="40" x2="250" y2="250" style="stroke:green;stroke-width:5px;stroke-dasharray: 5px,3px,2px;stroke-linecap: "round" id="line2" />
<line x1="50" y1="100" x2="200" y2="200" style="stroke:blue;stroke-width:9px;stroke-dasharray: 1px;stroke-linecap: "square" id="line3" />
<line x1="4" y1="200" x2="200" y2="200" style="stroke:black;stroke-width:20px;stroke-dasharray: 1px,2px,3px,4px,5px;stroke-linecap: "butt" id="line4" />
<line x1="8" y1="275" x2="100" y2="444" style="stroke:orange;stroke-width:11px;stroke-dasharray: 1px;stroke-linecap: "round" id="line5" />
<line x1="20" y1="344" x2="50" y2="400" style="stroke:yellow;stroke-width:30px;stroke-dasharray: 5px;stroke-linecap: "square" id="line6" />
<line x1="4" y1="400" x2="450" y2="450" style="stroke:purple;stroke-width:1px;stroke-dasharray: 11px, 4px;stroke-linecap: "butt" id="line7" />
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10px;stroke-dasharray: 10px, 4px;stroke-linecap: "butt" id="line1" />
<line x1="100" y1="40" x2="250" y2="250" style="stroke:green;stroke-width:5px;stroke-dasharray: 5px,3px,2px;stroke-linecap: "round" id="line2" />
<line x1="50" y1="100" x2="200" y2="200" style="stroke:blue;stroke-width:9px;stroke-dasharray: 1px;stroke-linecap: "square" id="line3" />
<line x1="4" y1="200" x2="200" y2="200" style="stroke:black;stroke-width:20px;stroke-dasharray: 1px,2px,3px,4px,5px;stroke-linecap: "butt" id="line4" />
<line x1="8" y1="275" x2="100" y2="444" style="stroke:orange;stroke-width:11px;stroke-dasharray: 1px;stroke-linecap: "round" id="line5" />
<line x1="20" y1="344" x2="50" y2="400" style="stroke:yellow;stroke-width:30px;stroke-dasharray: 5px;stroke-linecap: "square" id="line6" />
<line x1="4" y1="400" x2="450" y2="450" style="stroke:purple;stroke-width:1px;stroke-dasharray: 11px, 4px;stroke-linecap: "butt" id="line7" />
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

154
examples/SVG Import/MoreGradients.html
View file

@ -1,107 +1,107 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('Layer_1'));
</script>
<meta charset="UTF-8">
<title>Gradients</title>
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('Layer_1'));
</script>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500" height="1000" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
width="500" height="1000" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="69" y1="239.5" x2="530" y2="239.5">
<stop offset="0" style="stop-color:#231F20"/>
<stop offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
<stop offset="1" style="stop-color:#231F20;stop-opacity:0"/>
<stop offset="0" style="stop-color:#231F20"/>
<stop offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
<stop offset="1" style="stop-color:#231F20;stop-opacity:0"/>
</linearGradient>
<rect x="69" y="210" fill="url(#SVGID_1_)" width="461" height="59"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="69" y1="162.5" x2="530" y2="162.5">
<stop offset="0" style="stop-color:#00A14B"/>
<stop offset="0.0031" style="stop-color:#0BA449"/>
<stop offset="0.0203" style="stop-color:#43B13D"/>
<stop offset="0.038" style="stop-color:#75BD33"/>
<stop offset="0.0559" style="stop-color:#A0C72A"/>
<stop offset="0.074" style="stop-color:#C2CF23"/>
<stop offset="0.0922" style="stop-color:#DDD61E"/>
<stop offset="0.1107" style="stop-color:#F0DA1A"/>
<stop offset="0.1298" style="stop-color:#FBDD18"/>
<stop offset="0.15" style="stop-color:#FFDE17"/>
<stop offset="0.3" style="stop-color:#F26522"/>
<stop offset="0.47" style="stop-color:#00A14B"/>
<stop offset="0.64" style="stop-color:#FFDE17"/>
<stop offset="0.8012" style="stop-color:#F26522"/>
<stop offset="1" style="stop-color:#00A14B"/>
<stop offset="0" style="stop-color:#00A14B"/>
<stop offset="0.0031" style="stop-color:#0BA449"/>
<stop offset="0.0203" style="stop-color:#43B13D"/>
<stop offset="0.038" style="stop-color:#75BD33"/>
<stop offset="0.0559" style="stop-color:#A0C72A"/>
<stop offset="0.074" style="stop-color:#C2CF23"/>
<stop offset="0.0922" style="stop-color:#DDD61E"/>
<stop offset="0.1107" style="stop-color:#F0DA1A"/>
<stop offset="0.1298" style="stop-color:#FBDD18"/>
<stop offset="0.15" style="stop-color:#FFDE17"/>
<stop offset="0.3" style="stop-color:#F26522"/>
<stop offset="0.47" style="stop-color:#00A14B"/>
<stop offset="0.64" style="stop-color:#FFDE17"/>
<stop offset="0.8012" style="stop-color:#F26522"/>
<stop offset="1" style="stop-color:#00A14B"/>
</linearGradient>
<rect x="69" y="133" fill="url(#SVGID_2_)" width="461" height="59"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="69" y1="91.5" x2="530" y2="91.5">
<stop offset="0%" style="stop-color:#00A14B"/>
<stop offset="0.31%" style="stop-color:#0BA449"/>
<stop offset="2%" style="stop-color:#43B13D"/>
<stop offset="3.8%" style="stop-color:#75BD33"/>
<stop offset="5.59%" style="stop-color:#A0C72A"/>
<stop offset="7.4%" style="stop-color:#C2CF23"/>
<stop offset="9.22%" style="stop-color:#DDD61E"/>
<stop offset="11.07%" style="stop-color:#F0DA1A"/>
<stop offset="12.98%" style="stop-color:#FBDD18"/>
<stop offset="15%" style="stop-color:#FFDE17"/>
<stop offset="30%" style="stop-color:#F26522"/>
<stop offset="47%" style="stop-color:#00A14B"/>
<stop offset="64%" style="stop-color:#FFDE17"/>
<stop offset="80.12%" style="stop-color:#F26522"/>
<stop offset="100%" style="stop-color:#00A14B"/>
<stop offset="0%" style="stop-color:#00A14B"/>
<stop offset="0.31%" style="stop-color:#0BA449"/>
<stop offset="2%" style="stop-color:#43B13D"/>
<stop offset="3.8%" style="stop-color:#75BD33"/>
<stop offset="5.59%" style="stop-color:#A0C72A"/>
<stop offset="7.4%" style="stop-color:#C2CF23"/>
<stop offset="9.22%" style="stop-color:#DDD61E"/>
<stop offset="11.07%" style="stop-color:#F0DA1A"/>
<stop offset="12.98%" style="stop-color:#FBDD18"/>
<stop offset="15%" style="stop-color:#FFDE17"/>
<stop offset="30%" style="stop-color:#F26522"/>
<stop offset="47%" style="stop-color:#00A14B"/>
<stop offset="64%" style="stop-color:#FFDE17"/>
<stop offset="80.12%" style="stop-color:#F26522"/>
<stop offset="100%" style="stop-color:#00A14B"/>
</linearGradient>
<rect x="69" y="62" fill="url(#SVGID_3_)" width="461" height="59"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="760.1406" x2="485.6914" y2="760.1406" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
<stop offset="0" style="stop-color:#231F20"/>
<stop offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
<stop offset="1" style="stop-color:#231F20;stop-opacity:0"/>
<stop offset="0" style="stop-color:#231F20"/>
<stop offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
<stop offset="1" style="stop-color:#231F20;stop-opacity:0"/>
</linearGradient>
<rect x="70" y="289.051" fill="url(#SVGID_4_)" width="59" height="461"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="683.1396" x2="485.6914" y2="683.1396" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
<stop offset="0" style="stop-color:#00A14B"/>
<stop offset="0.0031" style="stop-color:#0BA449"/>
<stop offset="0.0203" style="stop-color:#43B13D"/>
<stop offset="0.038" style="stop-color:#75BD33"/>
<stop offset="0.0559" style="stop-color:#A0C72A"/>
<stop offset="0.074" style="stop-color:#C2CF23"/>
<stop offset="0.0922" style="stop-color:#DDD61E"/>
<stop offset="0.1107" style="stop-color:#F0DA1A"/>
<stop offset="0.1298" style="stop-color:#FBDD18"/>
<stop offset="0.15" style="stop-color:#FFDE17"/>
<stop offset="0.3" style="stop-color:#F26522"/>
<stop offset="0.47" style="stop-color:#00A14B"/>
<stop offset="0.64" style="stop-color:#FFDE17"/>
<stop offset="0.8012" style="stop-color:#F26522"/>
<stop offset="1" style="stop-color:#00A14B"/>
<stop offset="0" style="stop-color:#00A14B"/>
<stop offset="0.0031" style="stop-color:#0BA449"/>
<stop offset="0.0203" style="stop-color:#43B13D"/>
<stop offset="0.038" style="stop-color:#75BD33"/>
<stop offset="0.0559" style="stop-color:#A0C72A"/>
<stop offset="0.074" style="stop-color:#C2CF23"/>
<stop offset="0.0922" style="stop-color:#DDD61E"/>
<stop offset="0.1107" style="stop-color:#F0DA1A"/>
<stop offset="0.1298" style="stop-color:#FBDD18"/>
<stop offset="0.15" style="stop-color:#FFDE17"/>
<stop offset="0.3" style="stop-color:#F26522"/>
<stop offset="0.47" style="stop-color:#00A14B"/>
<stop offset="0.64" style="stop-color:#FFDE17"/>
<stop offset="0.8012" style="stop-color:#F26522"/>
<stop offset="1" style="stop-color:#00A14B"/>
</linearGradient>
<rect x="147.001" y="289.051" fill="url(#SVGID_5_)" width="59" height="461"/>
<radialGradient id="SVGID_6_" cx="368.75" cy="409.5503" r="92.1995" gradientUnits="userSpaceOnUse">
<stop offset="0.1656" style="stop-color:#FFFFFF"/>
<stop offset="0.2576" style="stop-color:#CBCBCB"/>
<stop offset="0.3651" style="stop-color:#969696"/>
<stop offset="0.474" style="stop-color:#686868"/>
<stop offset="0.5821" style="stop-color:#434343"/>
<stop offset="0.6893" style="stop-color:#252525"/>
<stop offset="0.7953" style="stop-color:#111111"/>
<stop offset="0.8995" style="stop-color:#040404"/>
<stop offset="1" style="stop-color:#000000"/>
<stop offset="0.1656" style="stop-color:#FFFFFF"/>
<stop offset="0.2576" style="stop-color:#CBCBCB"/>
<stop offset="0.3651" style="stop-color:#969696"/>
<stop offset="0.474" style="stop-color:#686868"/>
<stop offset="0.5821" style="stop-color:#434343"/>
<stop offset="0.6893" style="stop-color:#252525"/>
<stop offset="0.7953" style="stop-color:#111111"/>
<stop offset="0.8995" style="stop-color:#040404"/>
<stop offset="1" style="stop-color:#000000"/>
</radialGradient>
<circle fill="url(#SVGID_6_)" cx="368.75" cy="409.55" r="92.2"/>
<radialGradient id="SVGID_7_" cx="368.75" cy="619.5508" r="92.1997" fx="323.3488" fy="618.7006" gradientUnits="userSpaceOnUse">
<stop offset="0.1656" style="stop-color:#FFFFFF"/>
<stop offset="0.2576" style="stop-color:#CBCBCB"/>
<stop offset="0.3651" style="stop-color:#969696"/>
<stop offset="0.474" style="stop-color:#686868"/>
<stop offset="0.5821" style="stop-color:#434343"/>
<stop offset="0.6893" style="stop-color:#252525"/>
<stop offset="0.7953" style="stop-color:#111111"/>
<stop offset="0.8995" style="stop-color:#040404"/>
<stop offset="1" style="stop-color:#000000"/>
<stop offset="0.1656" style="stop-color:#FFFFFF"/>
<stop offset="0.2576" style="stop-color:#CBCBCB"/>
<stop offset="0.3651" style="stop-color:#969696"/>
<stop offset="0.474" style="stop-color:#686868"/>
<stop offset="0.5821" style="stop-color:#434343"/>
<stop offset="0.6893" style="stop-color:#252525"/>
<stop offset="0.7953" style="stop-color:#111111"/>
<stop offset="0.8995" style="stop-color:#040404"/>
<stop offset="1" style="stop-color:#000000"/>
</radialGradient>
<circle fill="url(#SVGID_7_)" cx="368.75" cy="619.551" r="92.2"/>
</svg>
<canvas id="canvas" width="500" height="1000"></canvas>
<canvas id="canvas" width="500" height="1000"></canvas>
</body>
</html>

52
examples/SVG Import/Multiple Paths Test 2.html
View file

@ -1,33 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Paths Test 2</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
<meta charset="UTF-8">
<title>Multiple Paths Test 2</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3px" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3px" fill="none" />
<path id="lineBC" d="M 175 200 l 150 0" stroke="red" stroke-width="3px" fill="none" />
<path id="quadcurveABC" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5px" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g fill="black" stroke="none" text-anchor="middle">
<text font-size="30" font-family="times" x="100" y="350" dx="-30">A</text>
<text font-size="30" font-family="times" x="250" y="50" dy="-10">B</text>
<text font-size="30" font-family="times" x="400" y="350" dx="30">C</text>
</g>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3px" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3px" fill="none" />
<path id="lineBC" d="M 175 200 l 150 0" stroke="red" stroke-width="3px" fill="none" />
<path id="quadcurveABC" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5px" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g fill="black" stroke="none" text-anchor="middle">
<text font-size="30" font-family="times" x="100" y="350" dx="-30">A</text>
<text font-size="30" font-family="times" x="250" y="50" dy="-10">B</text>
<text font-size="30" font-family="times" x="400" y="350" dx="30">C</text>
</g>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more