Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Adding bouncing balls demo, using the same Point and Vector classes a…

…s before. Simple collision detection against the world, with a bit of friction.
  • Loading branch information...
commit c39c45a922d5ed1f99e53595690168a54f16c1bb 1 parent 59bf2a4
@jzaefferer authored
View
3  application.css
@@ -5,3 +5,6 @@
width: 10px;
height: 10px;
}
+body {
+ overflow: hidden;
+}
View
15 bouncing.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src="jquery-1.4.4.js"></script>
+ <script src="jquery.tmpl.js"></script>
+ <script src="math.js"></script>
+ <script src="bouncing.js"></script>
+ <link rel="stylesheet" href="application.css"/>
+ <meta charset="utf-8" />
+ <title>Bouncing Ball</title>
+ </head>
+ <body>
+ Click to create a new ball; down, drag and up to create a new one with initial velocity. Resize the window.
+ </body>
+</html> ​
View
71 bouncing.js
@@ -0,0 +1,71 @@
+$(function() {
+ var GRAVITY = new Vector(0, 9.81);
+ var FRICTION = 0.85;
+ var world = {
+ x1: 0,
+ y1: 0
+ };
+ $(window).resize(function() {
+ world.x2 = $(window).width();
+ world.y2 = $(window).height();
+ }).trigger("resize");
+
+ function Ball() {
+ this.position = new Point(200, 200);
+ this.output = $("<div>").addClass("bird").appendTo("body");
+ this.velocity = new Vector(-5, 0);
+ }
+ Ball.prototype = {
+ move: function() {
+
+ this.velocity = this.velocity.add(GRAVITY.scale(0.1));
+ if (this.position.y > world.y2) {
+ this.velocity.x2 = -this.velocity.x2 * FRICTION;
+ this.position.y = world.y2;
+ } else if (this.position.y < world.y1) {
+ this.velocity.x2 = -this.velocity.x2 * FRICTION;
+ this.position.y = world.y1;
+ }
+ if (this.position.x < world.x1) {
+ this.velocity.x1 = -this.velocity.x1 * FRICTION;
+ this.position.x = world.x1;
+ } else {
+ if (this.position.x > world.x2) {
+ this.velocity.x1 = -this.velocity.x1 * FRICTION;
+ this.position.x = world.x2;
+ }
+ }
+ this.position.x += this.velocity.x1;
+ this.position.y += this.velocity.x2;
+ this.output.css({
+ left: this.position.x,
+ top: this.position.y
+ });
+ }
+ };
+
+ var balls = [];
+ balls.push(new Ball());
+ setInterval(function() {
+ balls.forEach(function(ball) {
+ ball.move();
+ });
+ }, 50);
+
+ var start;
+ $(document).mousedown(function(event) {
+ start = new Point(event.pageX, event.pageY);
+ }).mouseup(function(event) {
+ var end = new Point(event.pageX, event.pageY);
+ var ball = new Ball();
+ ball.position = end;
+ ball.velocity = start.relative(end).scale(0.5);
+ balls.push(ball);
+ });
+ $(document).keyup(function(event) {
+ // clear on escape
+ if (event.keyCode === 27) {
+ balls.splice(0, birds.length);
+ }
+ })
+});
View
30 math.js
@@ -0,0 +1,30 @@
+function Point(x, y) {
+ this.x = x;
+ this.y = y;
+}
+Point.prototype = {
+ relative: function(to) {
+ return new Vector(to.x - this.x, to.y - this.y);
+ },
+ distance: function(to) {
+ return Math.sqrt(Math.pow(this.x - to.x, 2) + Math.pow(this.y - to.y, 2));
+ }
+};
+function Vector(x1, x2) {
+ this.x1 = x1;
+ this.x2 = x2;
+}
+Vector.prototype = {
+ add: function(other) {
+ return new Vector(this.x1 + other.x1, this.x2 + other.x2);
+ },
+ scale: function(by) {
+ return new Vector(this.x1 * by, this.x2 * by);
+ },
+ normalize: function() {
+ function norm(value) {
+ return value > 0 ? 1 : value < 0 ? -1 : 0;
+ }
+ return new Vector(norm(this.x1), norm(this.x2));
+ }
+};
View
1  vector-based.html
@@ -3,6 +3,7 @@
<head>
<script src="jquery-1.4.4.js"></script>
<script src="jquery.tmpl.js"></script>
+ <script src="math.js"></script>
<script src="vector-based.js"></script>
<link rel="stylesheet" href="application.css"/>
<meta charset="utf-8" />
View
30 vector-based.js
@@ -1,34 +1,4 @@
$(function() {
- function Point(x, y) {
- this.x = x;
- this.y = y;
- }
- Point.prototype = {
- relative: function(to) {
- return new Vector(to.x - this.x, to.y - this.y);
- },
- distance: function(to) {
- return Math.sqrt(Math.pow(this.x - to.x, 2) + Math.pow(this.y - to.y, 2));
- }
- };
- function Vector(x1, x2) {
- this.x1 = x1;
- this.x2 = x2;
- }
- Vector.prototype = {
- add: function(other) {
- return new Vector(this.x1 + other.x1, this.x2 + other.x2);
- },
- scale: function(by) {
- return new Vector(this.x1 * by, this.x2 * by);
- },
- normalize: function() {
- function norm(value) {
- return value > 0 ? 1 : value < 0 ? -1 : 0;
- }
- return new Vector(norm(this.x1), norm(this.x2));
- }
- };
function Mover(position, velocity) {
this.output = $("#bird").tmpl(this).appendTo("body");
this.position = position;
Please sign in to comment.
Something went wrong with that request. Please try again.