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

Merge branch 'master' of github.com:scriptographer/paper.js

Browse source
This commit is contained in:
Jürg Lehni 2011-05-07 09:56:46 +01:00
commit 53a4685248
6 changed files with 68 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
examples/Scripts/BouncingBalls.html
View file

@ -7,15 +7,13 @@
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
var balls = [];
var circlePath = new Path.Circle([0, 0], 10);
var balls = [],
group = new Group(),
circlePath = new Path.Circle([0, 0], 10),
symbol = new Symbol(circlePath);
circlePath.fillColor = new GradientColor(null, [0, 0], [0, 12], [0, 2]);
circlePath.fillColor.gradient.type = 'radial';
var symbol = new Symbol(circlePath);
var group = new Group();
var Ball = Base.extend({
initialize: function(point, vector) {
if (!vector || vector.isZero()) {
@ -31,41 +29,31 @@
this.item = new PlacedSymbol(symbol);
this.item.position = point;
this.item.scale(this.radius / 10);
group.appendTop(this.item);
},
contrainPoint: function() {
var x = this.point.x;
var y = this.point.y;
var radius = this.radius;
this.point.x = Math.min(Math.max(radius, x), document.size.width - radius);
this.point.y = Math.min(Math.max(radius, y), document.size.height - radius);
},
iterate: function() {
var size = document.size;
this.vector.y += this.gravity;
this.vector.x *= 0.99;
var pre = this.point + this.vector;
if (pre.x < this.radius || pre.x > document.size.width - this.radius)
this.vector.x *= -this.dampen;
if (pre.y < this.radius || pre.y > document.size.height - this.radius) {
if (Math.abs(this.vector.x) < 3) {
this.vector.x = Math.random() * 150 - 75;
this.vector.y = Math.random() * 100 + 20;
}
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;
}
this.point = this.point + this.vector;
this.contrainPoint();
this.item.position = this.point;
var max = Point.max(this.radius, this.point + this.vector);
this.item.position = this.point = Point.min(max, size - this.radius);
}
});
for (var i = 0; i < 10; i++) {
var position = Point.random() * document.size;
var vector = (Point.random() - [0.5, 0]) * [50, 100];
var ball = new Ball(position, vector);
var position = Point.random() * document.size,
vector = (Point.random() - [0.5, 0]) * [50, 100],
ball = new Ball(position, vector);
balls.push(ball);
}
@ -79,22 +67,21 @@
balls.push(ball);
lastDelta = null;
}
setInterval(draw, 30);
var boundPath = new Path.Rectangle([-10, -10], [-11, -11]);
boundPath.strokeColor = 'red';
boundPath.strokeWidth = 1;
boundPath.style = {
strokeColor: 'red',
strokeWidth: 1
};
function draw() {
for (var i = 0, l = balls.length; i < l; i++) {
function onFrame() {
for (var i = 0, l = balls.length; i < l; i++)
balls[i].iterate();
}
boundPath.bounds = group.bounds;
document.redraw();
}
</script>
</head>
<body>
<p>Click to add circles:</p>
<canvas id='canvas' resize></canvas>
<canvas id='canvas' resize stats></canvas>
</body>

20
examples/Scripts/roundRectangle.html
View file

@ -7,16 +7,18 @@
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
var count = 0;
setInterval(draw, 30);
function draw() {
count++;
document.activeLayer.children = [];
var rect = new Rectangle([150, 150], [300, 300]);
var path,
count = 0,
rect = new Rectangle([150, 150], [300, 300]);
document.currentStyle.fillColor = 'black';
function onFrame() {
if (path)
path.remove();
var size = Math.abs(Math.sin(count / 40)) * 150 + 10;
var path = new Path.RoundRectangle(rect, size);
path.fillColor = 'black';
document.redraw();
path = new Path.RoundRectangle(rect, size);
path.position = document.bounds.center;
count++;
}
</script>
</head>

6
examples/Tools/Circles.html
View file

@ -16,17 +16,13 @@
var path;
function onMouseDrag(event) {
if (path) path.remove();
// The radius is the distance between the position
// where the user clicked and the current position
// of the mouse.
var radius = (event.downPoint - event.point).length;
path = new Path.Circle(event.downPoint, radius);
path.removeOnDrag();
};
function onMouseUp(event) {
path = null;
}
</script>
</head>
<body>

18
examples/Tools/Clouds.html
View file

@ -7,19 +7,27 @@
<script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas">
// Any newly created item will inherit the following styles:
document.currentStyle = {
strokeColor: 'black',
strokeWidth: 5,
strokeJoin: 'round',
strokeCap: 'round'
};
// The user has to drag the mouse at least 30pt before the mouse drag
// event is fired:
tool.minDistance = 30;
var path;
function onMouseDown(event) {
path = new Path();
path.strokeColor = 'black';
path.strokeWidth = 5;
path.strokeJoin = 'round';
path.strokeCap = 'round';
path.add(event.point);
}
function onMouseDrag(event) {
path.arcTo(event.point, true);
}
tool.minDistance = 30;
</script>
</head>
<body>

29
examples/Tools/Worm Farm.html
View file

@ -12,13 +12,21 @@
var values = {
minDistance: 10,
maxDistance: 30,
varyThickness: true
};
// All newly created items will inherit the following styles:
document.currentStyle = {
fillColor: 'white',
strokeColor: 'black'
};
/////////////////////////////////////////////////////////////////////
// Mouse handling
tool.minDistance = values.minDistance;
tool.maxDistance = values.maxDistance;
var worm;
@ -26,9 +34,8 @@
// and when a user drags the mouse we add points to it
function onMouseDown(event) {
worm = new Path();
worm.fillColor = '#ffffff';
worm.strokeColor = '#000000';
worm.add(event.point);
worm.add(event.point, event.point);
worm.closed = true;
}
function onMouseDrag(event) {
@ -62,22 +69,18 @@
// add the top point to the end of the path
worm.add(top);
// insert the bottom point in the beginning of the path
worm.insert(0, bottom);
// insert the bottom point after the first segment of the path
worm.insert(1, bottom);
// make a new line path from top to bottom
var line = new Path.Line(top, bottom);
line.strokeColor = '#000000';
new Path(top, bottom);
// This is the point at the front of the worm:
worm.firstSegment.point = event.point;
// smooth the segments of the path
worm.smooth();
}
function onMouseUp(event) {
worm.closed = true;
worm.add(event.point);
worm.smooth();
}
</script>
</head>
<body>

4
src/basic/Point.js
View file

@ -492,6 +492,8 @@ var Point = this.Point = Base.extend({
* @return The newly created point object
*/
min: function(point1, point2) {
point1 = Point.read(arguments, 0, 1);
point2 = Point.read(arguments, 1, 1);
return Point.create(
Math.min(point1.x, point2.x),
Math.min(point1.y, point2.y)
@ -515,6 +517,8 @@ var Point = this.Point = Base.extend({
* @return The newly created point object
*/
max: function(point1, point2) {
point1 = Point.read(arguments, 0, 1);
point2 = Point.read(arguments, 1, 1);
return Point.create(
Math.max(point1.x, point2.x),
Math.max(point1.y, point2.y)