Tag Archives: animation

Box2DWebb, CreateJS Interactive Canvas animation

Interactive animation – bouncing balls – created with the Box2dWebb and CreateJS frameworks.  This is a canvas application that will play on mobile.

The bouncing ball logic is all handled by Box2dWebb – which is a port of a physics engine used in ActionScript.

Code break down:

Animation properties (bouncieness, etc) are set up in the init. A bit map (the soccer ball) is loaded into a createJS sprite and loaded on to the stage (canvas).  A box2d object is created and added as a property of the createJS objects.   On the ticker, the bitmap tracks the x,  y position, and rotation of the  physics object as it bounces around.

Basic game logic such as creating the balls, keeping and displaying the ball count on the canvas are all handled with standard javascript.

Dive into the Box2DWebb code and figure out collision detection.

Note – As a Flash developer, I have found the CreateJS frame work to be both helpful and a little frustrating.  There are a couple key version discrepancies that I had suss out on my own.  Although, I did not use Flash for this little example, the CreateJS Toolkit that is built into Flash CC exports versions of the frame work that are not the latest.  Apparently there is an update to Flash Professional that is due out soon and this will be addressed.

More canvas game set up experiments forth coming. Stand bye.

Javascript/CSS animation test – Oscillating dot animation

A test using greensock GASP and jquery – with:

Note that the animation plays  choppy on older mobile devices when the alpha is tweened.

var MYAPP={};
$(document).ready(function() {
	MYAPP._body = $('body');
	for (var i=0; i<100; i++) {
	$(window).on('resize', onResize);
	//get query string value
	if ($.url().param("tweenAlpha") == 'true') {
	} else {
function onResize(){
	var origX = $(document).width()/2;
	var origY = $(document).height()/2;
	if (MYAPP.tweenAlpha) {
		TweenMax.set($("div.bip") , {x:origX, y:origY, opacity:0});
	} else {
		TweenMax.set($("div.bip") , {x:origX, y:origY});
	$("div.bip").each(function(index, element) {
	   if (origX < origY) {
		   rad = origX/2;
	   } else {
		   rad = origY/2;
		var ang = Math.random()*2*Math.PI;
		var x2 = (rad)*Math.sin(ang) +  origX;
		var y2 = (rad)*Math.cos(ang)  +  origY;
		TweenMax.to(element , 2, {x:x2, y:y2, opacity:1, delay: index*.01, repeat:-1, yoyo:true});
function initSQ(i){
"); }