public
Last active

Doodle.js v0.1 web demos

  • Download Gist
demo-bouncy_balls.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154
<!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>
demo-hearts.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
<!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>
demo-image_spin.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<!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>
demo-marble_rotation.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
<!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>
demo-spiral.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.