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

BouncingBalls example: use onFrame for animation and simplify some things.

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