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
paper.js/examples/Scripts/BouncingBalls.html

139 lines
5.2 KiB
HTML
Raw Normal View History

Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script type="text/javascript" src="../../lib/Bootstrap.js"></script>
<script type="text/javascript" src="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
<script type="text/javascript" src="../../src/tool/Tool.js"></script>
<script type="text/javascript" src="../../src/basic/Point.js"></script>
<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
<script type="text/javascript" src="../../src/basic/Size.js"></script>
<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
<script type="text/javascript" src="../../src/document/Doc.js"></script>
Update examples.
2011-02-20 17:28:38 -05:00
<script type="text/javascript" src="../../src/document/Symbol.js"></script>
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
<script type="text/javascript" src="../../src/item/Item.js"></script>
Update examples.
2011-02-20 17:28:38 -05:00
<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
<script type="text/javascript" src="../../src/item/Group.js"></script>
<script type="text/javascript" src="../../src/item/Layer.js"></script>
<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
<script type="text/javascript" src="../../src/path/Segment.js"></script>
<script type="text/javascript" src="../../src/path/PathItem.js"></script>
<script type="text/javascript" src="../../src/path/Path.js"></script>
Add Path.Constructors.js to examples and tests.
2011-02-17 09:56:07 -05:00
<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
Fix script paths in examples.
2011-02-19 11:56:15 -05:00
<script type="text/javascript" src="../../src/color/Color.js"></script>
<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
Update examples.
2011-02-20 17:28:38 -05:00
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
<script type="text/javascript" src="../../src/document/Symbol.js"></script>
<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
<script>
window.onload = function() {
Revert previous commit of BouncingBalls example.
2011-02-20 21:37:35 -05:00
Update examples.
2011-02-20 17:28:38 -05:00
var canvas = document.getElementById('canvas');
var doc = new Doc(canvas);
Revert previous commit of BouncingBalls example.
2011-02-20 21:37:35 -05:00
Update examples.
2011-02-20 17:28:38 -05:00
var balls = [];
Revert previous commit of BouncingBalls example.
2011-02-20 21:37:35 -05:00
Update examples.
2011-02-20 17:28:38 -05:00
var circlePath = new Path.Circle([0, 0], 10);
Revert previous commit of BouncingBalls example.
2011-02-20 21:37:35 -05:00
circlePath.fillColor = new GradientColor(null, [0, 0], [0, 12], [0, 2]);
circlePath.fillColor.gradient.type = 'radial';
var symbol = new Symbol(circlePath);
Update examples.
2011-02-20 17:28:38 -05:00
var group = new Group();
Revert previous commit of BouncingBalls example.
2011-02-20 21:37:35 -05:00
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
var Ball = Base.extend({
initialize: function(point, vector) {
Update examples.
2011-02-20 17:28:38 -05:00
if (vector.isZero()) {
this.vector = Point.random().multiply(5);
} else {
this.vector = vector;
}
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
this.point = point;
this.dampen = 0.4;
this.gravity = 3;
Update examples.
2011-02-20 17:28:38 -05:00
this.bounce = -0.6;
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
this.radius = 50 * Math.random() + 10;
Update examples.
2011-02-20 17:28:38 -05:00
this.item = new PlacedSymbol(symbol);
this.item.position = point;
this.item.scale(this.radius / 10);
group.appendTop(this.item);
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
},
Revert previous commit of BouncingBalls example.
2011-02-20 21:37:35 -05:00
Update examples.
2011-02-20 17:28:38 -05:00
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), doc.size.width - radius);
this.point.y = Math.min(Math.max(radius, y), doc.size.height - radius);
},
Revert previous commit of BouncingBalls example.
2011-02-20 21:37:35 -05:00
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
iterate: function() {
this.vector.y += this.gravity;
Update examples.
2011-02-20 17:28:38 -05:00
this.vector.x *= 0.99;
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
var pre = this.point.add(this.vector);
Update examples.
2011-02-20 17:28:38 -05:00
if (pre.x < this.radius || pre.x > doc.size.width - this.radius)
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
this.vector.x *= -this.dampen;
Update examples.
2011-02-20 17:28:38 -05:00
if (pre.y < this.radius || pre.y > doc.size.height - this.radius) {
Clean up white spaces.
2011-02-20 21:32:39 -05:00
if (Math.abs(this.vector.x) < 3) {
Update examples.
2011-02-20 17:28:38 -05:00
this.vector.x = Math.random() * 150 - 75;
this.vector.y = Math.random() * 100 + 20;
}
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
this.vector.y *= this.bounce;
}
Update examples.
2011-02-20 17:28:38 -05:00
this.point = this.point.add(this.vector);
this.contrainPoint();
this.item.position = this.point;
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
}
});
Revert previous commit of BouncingBalls example.
2011-02-20 21:37:35 -05:00
Clean up white spaces.
2011-02-20 21:32:39 -05:00
for (var i = 0; i < 10; i++) {
Update examples.
2011-02-20 17:28:38 -05:00
var position = Point.random().multiply(doc.size);
var vector = Point.random().subtract(0.5, 0).multiply(50, 100);
var ball = new Ball(position, vector);
balls.push(ball);
}
Revert previous commit of BouncingBalls example.
2011-02-20 21:37:35 -05:00
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
var lastPoint;
tool = new Tool({
onMouseDown: function(event) {
lastPoint = event.point;
},
onMouseDrag: function(event) {
lastPoint = event.point;
},
onMouseUp: function(event) {
Update examples.
2011-02-20 17:28:38 -05:00
var delta = lastPoint.subtract(event.point);
var ball = new Ball(event.point, delta);
balls.push(ball);
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
}
});
setInterval(draw, 30);
Revert previous commit of BouncingBalls example.
2011-02-20 21:37:35 -05:00
Update examples.
2011-02-20 17:28:38 -05:00
var boundPath = new Path.Rectangle([-10, -10], [-11, -11]);
boundPath.strokeColor = 'red';
boundPath.strokeWidth = 1;
Revert previous commit of BouncingBalls example.
2011-02-20 21:37:35 -05:00
Update examples.
2011-02-20 17:28:38 -05:00
function draw() {
for (var i = 0, l = balls.length; i < l; i++) {
balls[i].iterate();
}
boundPath.bounds = group.bounds;
Add BouncingCircles.html example of Group#getBounds().
2011-02-16 18:35:10 -05:00
doc.redraw();
}
}
</script>
</head>
<body>
<p>Click to add circles:</p>
<canvas id='canvas' width=1024 height=768></canvas>
</body>
Reference in a new issue Copy permalink