Skip to content

Instantly share code, notes, and snippets.

@lamberta

lamberta/demo-bouncy_balls.html

Created April 17, 2010 23:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save lamberta/369889 to your computer and use it in GitHub Desktop.
Save lamberta/369889 to your computer and use it in GitHub Desktop.
Download ZIP
Doodle.js v0.1 web demos
Raw
demo-bouncy_balls.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Doodle.js Demo - Bouncy Balls</title>
<!--[if IE]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="http://cloud.github.com/downloads/biilly/doodle.js/doodle-0.1.1.min.js"></script>
<script type="text/javascript">
//on load
function init() {
(function(oo) {
oo.canvas('#my_canvas').bgcolor('#CCFFFF');
//generate a random color
var random_color = function () {
var color = (0xffffff * Math.random()).toString(16);
return "#" + color.replace(/\./i,"").slice(0,6);
};
Bouncy.boundries = {
left: 0,
right: oo.canvas().width,
top: 0,
bottom: oo.canvas().height,
};
var balls = [];
var numballs = 12;
for(var i = 0; i < numballs; i++) {
var radius = Math.random() * 20 + 20;
var ball = oo.circle({x: i * 100,
y: i * 50,
radius:radius,
vx: Math.random() * 10 - 5,
vy: Math.random() * 10 - 5,
mass:radius,
fill:random_color()});
balls.push(ball);
}
oo.animate(function() {
//check wall collision
for(var i = 0; i < numballs; i++) {
var ball = balls[i];
ball.modify({x: ball.x + ball.vx, y: ball.y + ball.vy});
Bouncy.check_walls(ball);
}
//check other ball collision
for(i = 0; i < numballs - 1; i++) {
var ball_a = balls[i];
for(var j = i + 1; j < numballs; j++) {
var ball_b = balls[j];
Bouncy.check_collision(ball_a, ball_b);
}
balls[i].draw(); //and render
}
}, '24fps', true/*optional*/); //clears every frame by default
})($doodle);
};
/* Collision detection from Keith Peters, 'AS3: Making Things Move' */
var Bouncy = {};
Bouncy.bounce = -1.0; //friction
//boundries, set in script
Bouncy.boundries = {
left: undefined,
right: undefined,
top: undefined,
bottom: undefined
};
//check collision against boundries
Bouncy.check_walls = function (ball) {
if(ball.x + ball.radius > Bouncy.boundries.right) {
ball.modify({x: Bouncy.boundries.right - ball.radius,
vx: ball.vx * Bouncy.bounce});
}else if(ball.x - ball.radius < Bouncy.boundries.left) {
ball.modify({x: Bouncy.boundries.left + ball.radius,
vx: ball.vx * Bouncy.bounce});
}
if(ball.y + ball.radius > Bouncy.boundries.bottom) {
ball.modify({y: Bouncy.boundries.bottom - ball.radius,
vy: ball.vy * Bouncy.bounce});
}else if(ball.y - ball.radius < Bouncy.boundries.top) {
ball.modify({y: Bouncy.boundries.top + ball.radius,
vy: ball.vy * Bouncy.bounce});
}
};
Bouncy.rotate = function (x, y, sin, cos, reverse) {
var point = {};
if(reverse) {
point.x = x * cos + y * sin;
point.y = y * cos - x * sin;
}else {
point.x = x * cos - y * sin;
point.y = y * cos + x * sin;
}
return point;
};
Bouncy.check_collision = function (ball_a, ball_b) {
//calculate distance
var dx = ball_b.x - ball_a.x;
var dy = ball_b.y - ball_a.y;
var dist = Math.sqrt(dx*dx + dy*dy);
//it's a hit!
if(dist < ball_a.radius + ball_b.radius) {
var angle = Math.atan2(dy, dx);
var sin = Math.sin(angle);
var cos = Math.cos(angle);
//rotate position
var pos_a = {x:0, y:0};
var pos_b = Bouncy.rotate(dx, dy, sin, cos, true);
//rotate velocity
var vel_a = Bouncy.rotate(ball_a.vx, ball_a.vy, sin, cos, true);
var vel_b = Bouncy.rotate(ball_b.vx, ball_b.vy, sin, cos, true);
//collision reaction
var vx_total = vel_a.x - vel_b.x;
vel_a.x = ((ball_a.mass - ball_b.mass) * vel_a.x + 2 * ball_b.mass * vel_b.x) /
(ball_a.mass + ball_b.mass);
vel_b.x = vx_total + vel_a.x;
//update position
var abs_v = Math.abs(vel_a.x) + Math.abs(vel_b.x);
var overlap = (ball_a.radius + ball_b.radius) - Math.abs(pos_a.x - pos_b.x);
pos_a.x += vel_a.x / abs_v * overlap;
pos_b.y += vel_b.x / abs_v * overlap;
//rotate back
var pos_aF = Bouncy.rotate(pos_a.x, pos_a.y, sin, cos, false);
var pos_bF = Bouncy.rotate(pos_b.x, pos_b.y, sin, cos, false);
//adjust positions to screen
ball_b.modify({x:ball_a.x + pos_bF.x, y:ball_a.y + pos_bF.y});
ball_a.modify({x:ball_a.x + pos_aF.x, y:ball_a.y + pos_aF.y});
//rotate velocities back
var vel_aF = Bouncy.rotate(vel_a.x, vel_a.y, sin, cos, false);
var vel_bF = Bouncy.rotate(vel_b.x, vel_b.y, sin, cos, false);
ball_a.vx = vel_aF.x;
ball_a.vy = vel_aF.y;
ball_b.vx = vel_bF.x;
ball_b.vy = vel_bF.y;
}
};
</script>
</head>
<body onload="javascript:init();">
<canvas id="my_canvas" width="600" height="400">
<p>Sorry, this browser doesn't support the canvas element.</p>
</canvas>
</body>
</html>
Raw
demo-hearts.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Doodle.js demo - Hearts</title>
<!--[if IE]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="http://cloud.github.com/downloads/biilly/doodle.js/doodle-0.1.1.min.js"></script>
<script type="text/javascript">
//on load
function init() {
(function(oo) {
oo.canvas('#my_canvas').bgcolor('#000000');
var random_color = function () {
var color = (0xffffff * Math.random()).toString(16);
return "#" + color.replace(/\./i,"").slice(0,6);
};
var hearts = [];
var heart_shape = function() {
oo.gfx.fillStyle = random_color();
oo.gfx.beginPath();
oo.gfx.moveTo(75,40);
oo.gfx.bezierCurveTo(75, 37, 70, 25, 50, 25);
oo.gfx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
oo.gfx.bezierCurveTo(20, 80, 40, 102, 75, 120);
oo.gfx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
oo.gfx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
oo.gfx.bezierCurveTo(85, 25, 75, 37, 75, 40);
oo.gfx.fill();
};
for(var i = 0; i < 8; i++) {
for(var j = 0; j < 6; j++) {
var heart = oo.sprite({x: i * 75,
y: j * 65,
shape:heart_shape,
scale:0.5});
hearts.push(heart);
}
};
var length = hearts.length;
oo.animate(function() {
var i = length;
while(--i > -1) { hearts[i].draw(); }
}, '10fps');
})($doodle);
};
</script>
</head>
<body onload="javascript:init();">
<canvas id="my_canvas" width="600" height="400">
<p>Sorry, this browser doesn't support the canvas element.</p>
</canvas>
</body>
</html>
Raw
demo-image_spin.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Doodle.js Demo - Image Spin</title>
<!--[if IE]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="http://cloud.github.com/downloads/biilly/doodle.js/doodle-0.1.1.min.js"></script>
<script type="text/javascript">
//on load
function init() {
(function(oo) {
oo.canvas('#my_canvas').bgcolor('#FFCC33');
//canvas center
var cx = oo.canvas().width/2;
var cy = oo.canvas().height/2;
var f = 0;
var face = oo.image({src: 'http://i44.tinypic.com/5zirll.jpg',
axis:{x: 271/2,
y: 365/2,
coord: 'local',
visible: true},
on_load:function(img){
//we can determine dimensions now
img.modify({x:cx - img.width/2, y:cy - img.height/2});
//start animation
img.loop({rotate:2,
on_update: function() {
f += 1; //increment frame count
//double scale every 800 frames
if(f % 800 === 0){ face.scale(2); }
}}, 0, '24fps');
}
});
})($doodle);
};
</script>
</head>
<body onload="javascript:init();">
<canvas id="my_canvas" width="600" height="400">
<p>Sorry, this browser doesn't support the canvas element.</p>
</canvas>
</body>
</html>
Raw
demo-marble_rotation.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Doodle.js demo - 3d Marbles</title>
<!--[if IE]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="http://cloud.github.com/downloads/biilly/doodle.js/doodle-0.1.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//setup jquery
$(document).ready(function() {
//defaults so it doesn't get jammed up on start
var mouse_x = 280;
var mouse_y = 190;
$('#my_canvas').mousemove(function(e) {
mouse_x = e.pageX - this.offsetLeft;
mouse_y = e.pageY - this.offsetTop;
});
//setup doodle
(function(oo) {
oo.canvas('#my_canvas').bgcolor('#000000');
var random_color = function () {
var color = (0xffffff * Math.random()).toString(16);
return "#" + color.replace(/\./i,"").slice(0,6);
};
var balls = [];
var numballs = 40;
var fl = 200;
var vpX = oo.canvas().width/2;
var vpY = oo.canvas().height/2;
function init_balls() {
for(var i = 0; i < numballs; i++) {
var ball = oo.circle({x:0, y:0,
xpos:Math.random()*250-150,
ypos:Math.random()*200-100,
zpos:Math.random()*200-100,
radius:15,
fill:random_color() });
balls.push(ball);
}
}
init_balls();
var cos_x, cos_y, sin_x, sin_y, x1, y1, z1;
function rotateX (ball, angle_x) {
cos_x = Math.cos(angle_x);
sin_x = Math.sin(angle_x);
y1 = ball.ypos * cos_x - ball.zpos * sin_x;
z1 = ball.zpos * cos_x + ball.ypos * sin_x;
ball.ypos = y1;
ball.zpos = z1;
}
function rotateY (ball, angle_y) {
cos_y = Math.cos(angle_y);
sin_y = Math.sin(angle_y);
x1 = ball.xpos * cos_y - ball.zpos * sin_y;
z1 = ball.zpos * cos_y + ball.xpos * sin_y;
ball.xpos = x1;
ball.zpos = z1;
}
var length = balls.length;
var i, ball, angleX, angleY, scale;
oo.animate(function() {
angleX = (mouse_y - vpY) * .001;
angleY = (mouse_x - vpX) * .001;
i = length;
while(--i > -1) {
ball = balls[i];
rotateX(ball, angleX);
rotateY(ball, angleY);
//perspective
scale = fl / (fl + ball.zpos);
ball.modify({x:vpX + ball.xpos * scale, y:vpY + ball.ypos * scale});
}
balls.sort(function(a, b){ return a.z - b.z; });
for(i = 0; i < length; ++i) {
balls[i].draw();
}
}, '24fps');
})($doodle);
});
</script>
</head>
<body onload="javascript:init();">
<canvas id="my_canvas" width="600" height="400">
<p>Sorry, this browser doesn't support the canvas element.</p>
</canvas>
</body>
</html>
Raw
demo-spiral.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Doodle.js Demo - Spiral Pattern</title>
<!--[if IE]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="http://cloud.github.com/downloads/biilly/doodle.js/doodle-0.1.1.min.js"></script>
<script type="text/javascript">
function init() {
(function(oo) {
oo.canvas('#my_canvas');
//canvas center
var cx = oo.canvas().width/2;
var cy = oo.canvas().height/2;
var random_color = function () {
var color = (0xffffff * Math.random()).toString(16);
return "#" + color.replace(/\./i,"").slice(0,6);
};
//degrees to radians
var radians = function (deg) { return deg * Math.PI / 180; };
//circle position
var circle_x = function (a) { return cx + Math.cos(radians(a)) * r };
var circle_y = function (a) { return cy + Math.sin(radians(a)) * r };
var r = 5; //radius of our outside circle
var a = 0; //angle of rotation in degrees
var frame = 0; //frame count
//create our circle
var dot = oo.circle({x:function(){ return circle_x(a); },
y:function(){ return circle_y(a); },
radius:4});
dot.loop({x: function(){ return circle_x(a); },
y: function(){ return circle_y(a); },
on_update: function(o){
//increments
frame += 1; //framecount
r += 0.3; //spiral radius
a += 10; //angle
//change color to black every 15 degrees
if(a % 15 == 0){ dot.fill = '#000000'; }
else{ dot.fill = random_color(); }
//every 800th frame, clear canvas and reset spiral
if(frame % 800 === 0){
oo.canvas().clear();
r = 5;
}
}
}, 0, '48fps'); //loop indefinitely at 48 frames/sec
})($doodle);
};
</script>
</head>
<body onload="javascript:init();">
<canvas id="my_canvas" width="600" height="400">
<p>Sorry, this browser doesn't support the canvas element.</p>
</canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment