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 remote-tracking branch 'origin/master'

Browse source
This commit is contained in:
Jürg Lehni 2011-06-30 11:23:42 +02:00
commit ee9c7e17b6
38 changed files with 96 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/Animated/AnimatedStar.html
View file

@ -46,6 +46,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Animated/Extruded.html
View file

@ -67,6 +67,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Animated/Lines.html
View file

@ -46,6 +46,6 @@
</script>
</head>
<body style='background-color:black'>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

9
examples/Animated/RadialRainbows.html
View file

@ -9,10 +9,11 @@
var point = view.center;
var colors = [];
var cycles = 4;
for (var i = 0, l = 60; i < l; i++) {
var color = new RGBColor(1, 0, 0);
var cycles = 4;
color.hue = i / l * cycles * 360;
var brightness = 1 - (i / l) * 1.5;
var hue = i / l * cycles * 360;
var color = new HSBColor(hue, 1, brightness);
colors.push(color);
}
@ -70,6 +71,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Animated/Raster.html
View file

File diff suppressed because one or more lines are too long

2
examples/Animated/RoundedRectangles.html
View file

@ -36,6 +36,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Animated/Smoothing.html
View file

@ -64,6 +64,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Animated/Space.html
View file

@ -80,6 +80,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true" style='background:black'></canvas>
<canvas id="canvas" resize style='background:black'></canvas>
</body>
</html>

2
examples/Animated/Tadpoles.html
View file

@ -302,6 +302,6 @@
</style>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Scripts/Arcs.html
View file

@ -26,6 +26,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Scripts/BouncingBalls.html
View file

@ -92,6 +92,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Scripts/Chain.html
View file

@ -45,6 +45,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Scripts/Circle.html
View file

@ -14,6 +14,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Scripts/CompoundPath.html
View file

@ -14,6 +14,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Scripts/CurveTimeParametrization.html
View file

@ -56,6 +56,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Scripts/DivisionRaster.html
View file

File diff suppressed because one or more lines are too long

2
examples/Scripts/Fitting.html
View file

@ -25,6 +25,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Scripts/Letter.html
View file

@ -28,6 +28,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

99
examples/Scripts/PathStructure.html
View file

@ -6,50 +6,21 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
var y = view.size.height / 2;
var width = view.size.width;
var vector = new Point({
angle: 45,
length: width / 5
});
var offset = width / 30;
var yMiddle;
var segmentTexts = [];
var handleTexts = [];
var path = new Path();
path.segments = [
[[offset, y], null, vector.rotate(-90)],
[[width / 2, y], vector.rotate(-180), vector],
[[width - offset, y], vector.rotate(90), null]
];
path.fullySelected = true;
function onMouseMove(event) {
var point = event.point.clone();
// Constrain the event point, to not cut off the text:
if (point.y < 22)
point.y = 22;
if (point.y > view.size.height - 24)
point.y = view.size.height - 24;
var delta = point - view.center;
for (var i = 0; i < 2; i++) {
var curve = path.curves[i];
curve.handle1.y = curve.handle2.y = delta.y * (i % 2 ? 1 : -1);
var firstPoint = curve.point1 + curve.handle1;
var secondPoint = curve.point2 + curve.handle2;
handleTexts[i * 2].point = secondPoint -
(firstPoint.y < y ? [0, 10] : [0, -18]);
handleTexts[i * 2 + 1].point = firstPoint -
(firstPoint.y < y ? [0, 10] : [0, -18]);
}
}
project.currentStyle.fillColor = 'black';
for (var i = 0; i < 3; i++) {
var segment = path.segments[i];
var text = new PointText(segment.point - [0, 10]);
text.content = i;
var text = new PointText();
text.content = '' + i;
text.justification = 'center';
text.fontSize = 9;
segmentTexts.push(text);
}
for (var i = 0; i < 2; i++) {
var handleInText = new PointText();
handleInText.content = 'handleIn';
@ -57,18 +28,58 @@
handleInText.fontSize = 9;
handleTexts.push(handleInText);
var handleOutText = new PointText();
var handleOutText = handleInText.clone();
handleOutText.content = 'handleOut';
handleOutText.justification = 'center';
handleOutText.fontSize = 9;
handleTexts.push(handleOutText);
}
// Call onMouseMove once to correctly position the text items:
onMouseMove({ point: view.center - vector.rotate(-90) });
// Call onResize directly on execution to correctly position everything
onResize();
function onResize() {
var width = view.size.width;
var offset = width / 30;
var vector = new Point({
angle: 45,
length: width / 5
});
yMiddle = view.size.height / 2;
path.segments = [
[[offset, yMiddle], null, vector.rotate(-90)],
[[width / 2, yMiddle], vector.rotate(-180), vector],
[[width - offset, yMiddle], vector.rotate(90), null]
];
onMouseMove({
point: view.bounds.bottomRight
});
}
function onMouseMove(event) {
var point = event.point.clone();
// Constrain the event point, to not cut off the text:
if (point.y < 22) {
point.y = 22;
}
if (point.y > view.size.height - 24) {
point.y = view.size.height - 24;
}
var delta = point - view.center;
for (var i = 0; i < path.segments.length; i++) {
segmentTexts[i].point = path.segments[i].point - [0, 10];
}
for (var i = 0; i < path.curves.length; i++) {
var curve = path.curves[i];
curve.handle1.y = curve.handle2.y = delta.y * (i % 2 ? 1 : -1);
var firstPoint = curve.point1 + curve.handle1;
var secondPoint = curve.point2 + curve.handle2;
var offset = (firstPoint.y < yMiddle ? [0, 10] : [0, -18]);
handleTexts[i * 2].point = secondPoint - offset;
handleTexts[i * 2 + 1].point = firstPoint - offset;
}
}
</script>
</head>
<body>
<canvas id='canvas' width=303 height=167 resize></canvas>
<canvas id='canvas' resize></canvas>
</body>
</html>

2
examples/Scripts/PhyllotaxisRaster.html
View file

File diff suppressed because one or more lines are too long

2
examples/Scripts/RotationRaster.html
View file

File diff suppressed because one or more lines are too long

2
examples/Scripts/RoundRectangle.html
View file

@ -20,6 +20,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Scripts/StrokeBounds.html
View file

@ -85,6 +85,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/BezierTool.html
View file

@ -80,6 +80,6 @@
Drag segment handles and points to manipulate them.
Close the path to start a new one.
</p>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/Circles.html
View file

@ -25,6 +25,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/Clouds.html
View file

@ -30,6 +30,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/Dripping Brush.html
View file

@ -67,6 +67,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/Fancy Brush.html
View file

@ -77,6 +77,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/Grid.html
View file

@ -39,6 +39,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/MetaBalls.html
View file

@ -112,6 +112,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/MultiLines.html
View file

@ -39,6 +39,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/Simplify.html
View file

@ -56,6 +56,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/SquareRounded.html
View file

@ -77,6 +77,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/Stars.html
View file

@ -25,6 +25,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/Vektor.html
View file

@ -195,6 +195,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/Wave.html
View file

@ -43,6 +43,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

2
examples/Tools/Worm Farm.html
View file

@ -83,6 +83,6 @@
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
<canvas id="canvas" resize></canvas>
</body>
</html>

1
src/core/PaperScript.js
View file

@ -228,6 +228,7 @@ var PaperScript = this.PaperScript = new function() {
for (var i = 0, l = scripts.length; i < l; i++) {
var script = scripts[i];
// Only load this script if it not loaded already.
// TODO: support 'text/x-paperscript':
if (script.type === 'text/paperscript'
&& !script.getAttribute('loaded')) {
// Produce a new PaperScope for this script now. Scopes are