4 Balls Collision I - JavaScript Snipplr Social Repository

Revision: 64723

at September 12, 2013 06:03 by whoppingchill

Updated Code

var PTM_RATIO = 32;
var b2World = Box2D.Dynamics.b2World,
	b2Body = Box2D.Dynamics.b2Body,
	b2BodyDef = Box2D.Dynamics.b2BodyDef,
	b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
	b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
	b2Vec2 = Box2D.Common.Math.b2Vec2;
var world;

var collisionC1B = cc.Scene.extend( {
	onEnter:function() {
		this._super();
		
		var yellowBackground = cc.LayerColor.create(cc.c4b(255,255,0,1));
		this.addChild(yellowBackground);
		
		var layer = new collisionTest();
		layer.init();
		this.addChild(layer);
	}
})

var collisionTest = cc.LayerColor.extend({
	init:function () {
		this._super();
		var s = cc.Director.getInstance().getWinSize();
		
		/*
		var red = cc.c4f(155, 0, 0, 1);
		var green = cc.c4f(0, 155, 0, 1);
		var blue = cc.c4f(0, 0, 155, 1);
		var yellow = cc.c4f(155, 155, 0, 1);
		
		// this.setColor(new cc.Color3B(255, 255, 255));
		*/
		
		var spriteP1 = this.createSprite(50, 300, this),
		    spriteP2 = this.createSprite(300, 550, this),
		    spriteP3 = this.createSprite(550, 300, this),
		    spriteP4 = this.createSprite(300, 50, this);
		
		
		// create box2dW world
		var gravity = new b2Vec2(0, 0);
		this.world = new b2World(gravity);
		
		var bodyP1 = this.createBody(spriteP1, this.world),
		    bodyP2 = this.createBody(spriteP2, this.world),
		    bodyP3 = this.createBody(spriteP3, this.world),
		    bodyP4 = this.createBody(spriteP4, this.world);
		
		var vel_x = 10, vel_y = 10;
		bodyP1.SetLinearVelocity(new b2Vec2(vel_x, 0));
		bodyP2.SetLinearVelocity(new b2Vec2(0, -vel_y));
		bodyP3.SetLinearVelocity(new b2Vec2(-vel_x, 0));
		bodyP4.SetLinearVelocity(new b2Vec2(0, vel_y));
		
		this.scheduleUpdate();
		return true;
	},
	
	createBody:function (sprite, world) {
		var bodyDef = new b2BodyDef();
		bodyDef.type = b2Body.b2_dynamicBody;
		var x = sprite.getPositionX(),
		    y = sprite.getPositionY();
		bodyDef.position.Set(x / PTM_RATIO, y / PTM_RATIO);
		bodyDef.angularDamping = 0;
		bodyDef.userData = sprite;
		var body = world.CreateBody(bodyDef);
		
		var circle = new b2CircleShape();
		circle.m_radius = 32 / PTM_RATIO;
		
		var circleDef = new b2FixtureDef();
		circleDef.shape = circle;
		circleDef.density = 5;
		circleDef.friction = 0.5;
		circleDef.restitution = 0.5;
		body.CreateFixture(circleDef);
		
		return body;
	},
	
	createSprite:function (x, y, layer) {
		var sprite = cc.Sprite.create("assets/ball.png");
		sprite.setPosition(cc.p(x, y));
		layer.addChild(sprite);
	
		return sprite;
	},
	
	update:function (dt) {
        var velocityIterations = 6;
        var positionIterations = 2;

        this.world.Step(dt, velocityIterations, positionIterations);
		
        //Iterate over the bodies in the physics world
        for (var b = this.world.GetBodyList(); b; b = b.GetNext()) {
            if (b.GetUserData() != null) {
                //Synchronize the AtlasSprites position and rotation with the corresponding body
                var myActor = b.GetUserData();
                myActor.setPosition(cc.p(b.GetPosition().x * PTM_RATIO, b.GetPosition().y * PTM_RATIO));
                myActor.setRotation(-1 * cc.RADIANS_TO_DEGREES(b.GetAngle()));
                //console.log(b.GetAngle());
            }
        }

    }
})

Revision: 64722

at September 12, 2013 05:49 by whoppingchill

Initial Code

var PTM_RATIO = 32;
var b2World = Box2D.Dynamics.b2World,
	b2Body = Box2D.Dynamics.b2Body,
	b2BodyDef = Box2D.Dynamics.b2BodyDef,
	b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
	b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
	b2Vec2 = Box2D.Common.Math.b2Vec2;
var world;

var collisionC1B = cc.Scene.extend( {
	onEnter:function() {
		this._super();
		
		var yellowBackground = cc.LayerColor.create(cc.c4b(255,255,0,1));
		this.addChild(yellowBackground);
		
		var layer = new collisionTest();
		layer.init();
		this.addChild(layer);
	}
})

var collisionTest = cc.LayerColor.extend({
	init:function () {
		this._super();
		var s = cc.Director.getInstance().getWinSize();
		
		/*
		var red = cc.c4f(155, 0, 0, 1);
		var green = cc.c4f(0, 155, 0, 1);
		var blue = cc.c4f(0, 0, 155, 1);
		var yellow = cc.c4f(155, 155, 0, 1);
		
		// this.setColor(new cc.Color3B(255, 255, 255));
		*/
		
		var spriteP1 = this.createSprite(50, 300, this),
			spriteP2 = this.createSprite(300, 550, this),
			spriteP3 = this.createSprite(550, 300, this),
			spriteP4 = this.createSprite(300, 50, this);
		
		
		// create box2dW world
		var gravity = new b2Vec2(0, 0);
		this.world = new b2World(gravity);
		
		var bodyP1 = this.createBody(spriteP1, this.world),
			bodyP2 = this.createBody(spriteP2, this.world),
			bodyP3 = this.createBody(spriteP3, this.world),
			bodyP4 = this.createBody(spriteP4, this.world);
		
		var vel_x = 10, vel_y = 10;
		bodyP1.SetLinearVelocity(new b2Vec2(vel_x, 0));
		bodyP2.SetLinearVelocity(new b2Vec2(0, -vel_y));
		bodyP3.SetLinearVelocity(new b2Vec2(-vel_x, 0));
		bodyP4.SetLinearVelocity(new b2Vec2(0, vel_y));
		
		this.scheduleUpdate();
		return true;
	},
	
	createBody:function (sprite, world) {
		var bodyDef = new b2BodyDef();
		bodyDef.type = b2Body.b2_dynamicBody;
		var x = sprite.getPositionX(),
			y = sprite.getPositionY();
		bodyDef.position.Set(x / PTM_RATIO, y / PTM_RATIO);
		bodyDef.angularDamping = 0;
		bodyDef.userData = sprite;
		var body = world.CreateBody(bodyDef);
		
		var circle = new b2CircleShape();
		circle.m_radius = 32 / PTM_RATIO;
		
		var circleDef = new b2FixtureDef();
		circleDef.shape = circle;
		circleDef.density = 5;
		circleDef.friction = 0.5;
		circleDef.restitution = 0.5;
		body.CreateFixture(circleDef);
		
		return body;
	},
	
	createSprite:function (x, y, layer) {
		var sprite = cc.Sprite.create("assets/ball.png");
		sprite.setPosition(cc.p(x, y));
		layer.addChild(sprite);
	
		return sprite;
	},
	
	update:function (dt) {
        var velocityIterations = 6;
        var positionIterations = 2;

        this.world.Step(dt, velocityIterations, positionIterations);
		
        //Iterate over the bodies in the physics world
        for (var b = this.world.GetBodyList(); b; b = b.GetNext()) {
            if (b.GetUserData() != null) {
                //Synchronize the AtlasSprites position and rotation with the corresponding body
                var myActor = b.GetUserData();
                myActor.setPosition(cc.p(b.GetPosition().x * PTM_RATIO, b.GetPosition().y * PTM_RATIO));
                myActor.setRotation(-1 * cc.RADIANS_TO_DEGREES(b.GetAngle()));
                //console.log(b.GetAngle());
            }
        }

    }
})

Initial URL

Initial Description

Simulation of the collision of 4 balls using cocos2d-html5 and box2d.

Initial Title

4 Balls Collision I

Initial Tags

Initial Language

JavaScript

Choose a language for easy browsing: