I've been trying to get into Box2DWeb which is a JS port of the AS port of Box2D. Just trying to get a simple setup going where there is a static ramp and a dynamic box that falls on it. Here is my code:
var b2World = Box2D.Dynamics.b2World;
var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
var b2Vec2 = Box2D.Common.Math.b2Vec2;
var b2BodyDef = Box2D.Dynamics.b2BodyDef;
var b2Body = Box2D.Dynamics.b2Body;
var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
var b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;
var width = 8;
var height = 4;
var world = new b2World(new b2Vec2(0, 10), true);
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
debugDraw.SetDrawScale(100); //Arena is 8 meters by 4 meters
debugDraw.SetFillAlpha(0.5);
debugDraw.SetLineThickness(1);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit);
world.SetDebugDraw(debugDraw);
var bodyDef = new b2BodyDef();
bodyDef.type = b2Body.b2_staticBody;
bodyDef.position.Set(3.5, 3)
var body = world.CreateBody(bodyDef);
body.SetAngle(Math.PI / 4);
var shape = new b2PolygonShape();
shape.SetAsBox(1, 0.25);
var fixtureDef = new b2FixtureDef();
fixtureDef.shape = shape;
fixtureDef.density = 1;
fixtureDef.friction = 0.3;
body.CreateFixture(fixtureDef);
var bodyDef = new b2BodyDef();
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.Set(3.5, 1)
var body = world.CreateBody(bodyDef);
var shape = new b2PolygonShape();
shape.SetAsBox(0.10, 0.10);
var fixtureDef = new b2FixtureDef();
fixtureDef.shape = shape;
body.CreateFixture(fixtureDef);
setInterval(function() {
world.Step(1 / 60, 10, 10);
world.DrawDebugData();
world.ClearForces();
console.log(body.GetAngle());
}, 1000 / 60);
You can see the live result on jsFiddle. As you can see, the box doesn't rotate when it hits the ramp. What am I doing wrong?
Thanks.
Some ressources:
AS3 Manual: http://www.box2dflash.org/docs/2.0.2/manual
AS3 Reference: http://www.box2dflash.org/docs/2.0.2/reference/
Add friction and density to the box.
...and don't leave the irc channel immediately, sometimes it takes more than 3 minutes.
Ah, you have to set the friction & density on the falling object's fixture, not the body.
var fixtureDef = new b2FixtureDef();
fixtureDef.shape = shape;
fixtureDef.friction = 0.3
fixtureDef.density = 1
body.CreateFixture(fixtureDef);
btw thanks for pointing me in the direction of Box2D - I hadn't seen that physics engine before, looks interesting :)
Related
Hey I am trying to build the following picture in canvas using the library:EaselJS.
My Picture components are:
two circles - yellow and red and a light green background
a coordinate system from 0 to 1 with all the necessary labels which appear in the picture.
I have succeeded in my two goals.
I have build a Coordinate System based on stackoverflow discussion:
How to draw a full coordinate system with Easeljs?.
I have left with 2 main problems which concern me a lot:
I need to draw a rectangle(or square) which fits the coordinate system, the current rectangle is just a background.
Also I need to add 3 labels: 'Critical Index' on the x axis, 'Long-term Severity Index' on the y axis and a headline of Long-term.
I would happy if someone could help me with this issues
I am adding the source code:
$(function(){
var stage = new createjs.Stage('canvas2d');
var circle1 = new createjs.Shape();
var circle2 = new createjs.Shape();
var rect = new createjs.Rectangle(0, 0, 100, 100);
circle2.graphics.beginFill("yellow").drawCircle(0, 0, 300);
circle2.x = 500;
circle2.y = 0;
stage.addChild(circle2);
circle1.graphics.beginFill("red").drawCircle(0, 0, 150);
circle1.x = 500;
circle1.y = 0;
stage.addChild(circle1);
//stage.addChild(rect);
stage.update();
var coord_xaxis = new createjs.Shape();
stage.addChild(coord_xaxis);
var coord_yaxis = new createjs.Shape();
stage.addChild(coord_yaxis);
var coord_arrow_x = new createjs.Shape();
//stage.addChild(coord_arrow_x);
var coord_arrow_y = new createjs.Shape();
//stage.addChild(coord_arrow_y);
var coord_xaxis_lines = new createjs.Shape();
stage.addChild(coord_xaxis_lines);
var coord_yaxis_lines = new createjs.Shape();
stage.addChild(coord_yaxis_lines);
/**$('#canvas2d').width()/15**/
var axis_center_x = $('#canvas2d').width()/15;
var axis_center_y = $('#canvas2d').height()/1.10;
var xaxis_width = $('#canvas2d').width()-0.05*$('#canvas2d').width();
var yaxis_width = $('#canvas2d').height()-0.05*$('#canvas2d').height();
var axis_start_x = ($('#canvas2d').width()-xaxis_width)/2;
var axis_start_y = ($('#canvas2d').height()-yaxis_width)/6;
var axis_strokewidth = 2;
coord_xaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_xaxis.graphics.moveTo(axis_start_x, axis_center_y).lineTo(axis_start_x+xaxis_width, axis_center_y);
coord_yaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_yaxis.graphics.moveTo(axis_center_x, axis_start_y).lineTo(axis_center_x, axis_start_y+yaxis_width);
// draw coordsys arrow for x-axis
var arrwidth = 5;
var arrxtnd = 5;
coord_arrow_x.graphics.beginFill('#000');
coord_arrow_x.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_arrow_x.graphics.moveTo(axis_center_x, axis_start_y-arrwidth/2).lineTo(axis_center_x+arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x-arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x, axis_start_y-arrwidth/2);
coord_arrow_x.graphics.endFill();
// draw coordsys arrow for y-axis
coord_arrow_y.graphics.beginFill('#000');
coord_arrow_y.graphics.beginStroke('#000');
coord_arrow_y.graphics.moveTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y+arrwidth).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y-arrwidth).lineTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y);
coord_arrow_y.graphics.endFill();
var stepdist = xaxis_width/5.25;
var steplinew = 6;
// 10 horizontal lines
var xlines = 10;
var labels_x = [];
for(var i=xlines;i>=0;i--) {
// little black marker
coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_yaxis_lines.graphics.moveTo(axis_center_x-steplinew, axis_center_y+(-i/2)*stepdist).lineTo(axis_center_x+steplinew, axis_center_y+(-i/2)*stepdist);
// labels
labels_x[i] = new createjs.Text('x', '14px Arial', '#333');
labels_x[i].x = axis_center_x-12;
labels_x[i].y = axis_center_y+(-i/2)*stepdist-6; // move up a bit
stage.addChild(labels_x[i]);
labels_x[i].text = (i/10);
labels_x[i].textAlign = 'right';
}
// 12 orthogonal lines
var stepdist2 = xaxis_width/6.5;
var steplinew2 = 6;
var ylines = 10;
var labels_y = [];
for(var i=ylines;i>=1;i--) {
// dont overdraw y-axis-line
// little black marker
coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_xaxis_lines.graphics.moveTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y-steplinew2).lineTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y+steplinew2);
// labels
labels_y[i] = new createjs.Text('x', '14px Arial', '#333');
labels_y[i].x = axis_center_x+(i/1.6)*stepdist2; // move up a bit
labels_y[i].y = axis_center_y+12;
stage.addChild(labels_y[i]);
labels_y[i].text = (i/10);
labels_y[i].textAlign = 'center';
}
stage.update();
})
#canvas2d{
background-color: #32CD32;
}
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas2d" width="500" height="500"></canvas>
The syntax for creating a rectangle in EaselJS is just the same as making a circle. The difference lies when calling drawRect instead of drawCircle in the graphics chain.
I've added a rectangle with arbitrary position and size values to match your overall code style, and because I couldn't find any criteria quickly. I also removed the background color on the CSS.
As for the addition of labels on each axis, I highly recommend you to use DOM instead. EaselJS support for text is almost unusable. Even EaselJS itself recommends you to use a DOMElement instead of the Text DisplayObj. More on DOMElement here.
Personally, I think it would be a lot easier to get to your desired result by using pure DOM instead of canvas work, unless you're doing some heavy user-interaction-based animation stuff.
$(function(){
var stage = new createjs.Stage('canvas2d');
var circle1 = new createjs.Shape();
var circle2 = new createjs.Shape();
var rect = new createjs.Shape();
rect.graphics.f("green").drawRect(33, 0, 500, 455);
stage.addChild(rect);
circle2.graphics.beginFill("yellow").drawCircle(0, 0, 300);
circle2.x = 500;
circle2.y = 0;
stage.addChild(circle2);
circle1.graphics.beginFill("red").drawCircle(0, 0, 150);
circle1.x = 500;
circle1.y = 0;
stage.addChild(circle1);
stage.update();
var coord_xaxis = new createjs.Shape();
stage.addChild(coord_xaxis);
var coord_yaxis = new createjs.Shape();
stage.addChild(coord_yaxis);
var coord_arrow_x = new createjs.Shape();
//stage.addChild(coord_arrow_x);
var coord_arrow_y = new createjs.Shape();
//stage.addChild(coord_arrow_y);
var coord_xaxis_lines = new createjs.Shape();
stage.addChild(coord_xaxis_lines);
var coord_yaxis_lines = new createjs.Shape();
stage.addChild(coord_yaxis_lines);
/**$('#canvas2d').width()/15**/
var axis_center_x = $('#canvas2d').width()/15;
var axis_center_y = $('#canvas2d').height()/1.10;
var xaxis_width = $('#canvas2d').width()-0.05*$('#canvas2d').width();
var yaxis_width = $('#canvas2d').height()-0.05*$('#canvas2d').height();
var axis_start_x = ($('#canvas2d').width()-xaxis_width)/2;
var axis_start_y = ($('#canvas2d').height()-yaxis_width)/6;
var axis_strokewidth = 2;
coord_xaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_xaxis.graphics.moveTo(axis_start_x, axis_center_y).lineTo(axis_start_x+xaxis_width, axis_center_y);
coord_yaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_yaxis.graphics.moveTo(axis_center_x, axis_start_y).lineTo(axis_center_x, axis_start_y+yaxis_width);
// draw coordsys arrow for x-axis
var arrwidth = 5;
var arrxtnd = 5;
coord_arrow_x.graphics.beginFill('#000');
coord_arrow_x.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_arrow_x.graphics.moveTo(axis_center_x, axis_start_y-arrwidth/2).lineTo(axis_center_x+arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x-arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x, axis_start_y-arrwidth/2);
coord_arrow_x.graphics.endFill();
// draw coordsys arrow for y-axis
coord_arrow_y.graphics.beginFill('#000');
coord_arrow_y.graphics.beginStroke('#000');
coord_arrow_y.graphics.moveTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y+arrwidth).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y-arrwidth).lineTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y);
coord_arrow_y.graphics.endFill();
var stepdist = xaxis_width/5.25;
var steplinew = 6;
// 10 horizontal lines
var xlines = 10;
var labels_x = [];
for(var i=xlines;i>=0;i--) {
// little black marker
coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_yaxis_lines.graphics.moveTo(axis_center_x-steplinew, axis_center_y+(-i/2)*stepdist).lineTo(axis_center_x+steplinew, axis_center_y+(-i/2)*stepdist);
// labels
labels_x[i] = new createjs.Text('x', '14px Arial', '#333');
labels_x[i].x = axis_center_x-12;
labels_x[i].y = axis_center_y+(-i/2)*stepdist-6; // move up a bit
stage.addChild(labels_x[i]);
labels_x[i].text = (i/10);
labels_x[i].textAlign = 'right';
}
// 12 orthogonal lines
var stepdist2 = xaxis_width/6.5;
var steplinew2 = 6;
var ylines = 10;
var labels_y = [];
for(var i=ylines;i>=1;i--) {
// dont overdraw y-axis-line
// little black marker
coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_xaxis_lines.graphics.moveTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y-steplinew2).lineTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y+steplinew2);
// labels
labels_y[i] = new createjs.Text('x', '14px Arial', '#333');
labels_y[i].x = axis_center_x+(i/1.6)*stepdist2; // move up a bit
labels_y[i].y = axis_center_y+12;
stage.addChild(labels_y[i]);
labels_y[i].text = (i/10);
labels_y[i].textAlign = 'center';
}
stage.update();
})
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas2d" width="500" height="500"></canvas>
Newbie here, I have a simple clock with Raphael 2.1.4 based on a tutorial everything renders on the page fine but the handles are not rotating. However it does seem to work on Raphael 1.5.X.
Can you tell me what I am doing wrong?
Code pen page attached
http://codepen.io/scorpion_rain/pen/dGrmQj
Code JS:
window.onload = function() {
var cWidth = 800, cHeight = 600;
var paper = new Raphael(document.getElementById('canvas_container'), cWidth, cHeight);
var clockBgX = 200, clockBgY = 300, clockBgRadius = 100;
var cBgCol = '#f5f5f5', cBgStrokeCol = '#444444', cBgStrokeWidth = '5';
var centerDialX = clockBgX, centerDialY = clockBgY;
var hourHandStrokeCol = "#444444", hourHandStrokeWidth = "5";
var minuteHandStrokeCol = "#444444", minuteHandStrokeWidth = "3";
var secondsHandStrokeCol = "#444444", secondsHandStrokeWidth = "2";
var pinDotX = clockBgX, pinDotY = clockBgY, pinDotRadius = 5, pinDotFill = "#000000";
// main clock background and number display
function mainClockBg(){
var clockBg = paper.circle(clockBgX, clockBgY, clockBgRadius); // outer circle
clockBg.attr({ "fill": cBgCol, // inner background
"stroke": cBgStrokeCol,
"stroke-width": cBgStrokeWidth })
var radius = Math.PI / 180; // converting from degrees to radian
var cx = centerDialX; // center of dial - horizontal
var cy = centerDialY; // center of dial - vertical
var r = 90; // radius distance
var startA = -90; // start of numbers
var angle = 30; // distance between numbers | 12/360 = 12 stops
var x; // circle distance inner marker
var y; // circle distance outer marker
var endA; // end of text
// adding numbers to the dial
for(i = 1; i < 13; i++){
endA = startA + angle;
x = cx + r * Math.cos( endA * radius );
y = cy + r * Math.sin( endA * radius );
paper.text( x, y, i + "" );
startA = endA;
}
}
function dialsDisplay(){
var hourHand = paper.path("M200, 300L200, 230");
hourHand.attr({
"stroke": hourHandStrokeCol,
"stroke-width": hourHandStrokeWidth
});
var minuteHand = paper.path("M200, 300L200, 220");
minuteHand.attr({
"stroke": minuteHandStrokeCol,
"stroke-width": minuteHandStrokeWidth
})
var secondsHand = paper.path("M200, 300L200, 216");
secondsHand.attr({
"stroke": secondsHandStrokeCol,
"stroke-width": secondsHandStrokeWidth
})
var pinDot = paper.circle(pinDotX, pinDotY, pinDotRadius);
pinDot.attr({
"fill": pinDotFill
});
updateClock();
setInterval("updateClock()", 1000);
}
function updateClock(){
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
hourHand.rotate( 30 * hours + (minutes / 2.5), 200, 300 );
minuteHand.rotate( 6 * minutes, 200, 300 );
secondsHand.rotete(6 * seconds, 200, 300);
}
mainClockBg();
dialsDisplay();
}
in the console of the browser i get the error 'cant find variable hourHand'
Any help appreciated
Cheers.
You are defining a variable with 'var' in one function, and then referencing it in another, this sets where the scope is.
Javascript has functional scope, so one function won't know about a variable unless its defined in a scope it can access. So move the hourHand, minuteHand, secondsHand outside of the function. Then the updateClock method will be able to access those variables.
// THIS WONT WORK
function func1() {
var hand = 1;
}
function func2() {
var test = hand; //hand was declared in other function, so not available here
}
So try this form instead
var hand;
function func1() {
hand = 1;
}
function func2() {
var test = hand;
}
Also you will want
setInterval(updateClock, 1000);
rather than
setInterval("updateClock()", 1000);
as setInterval wants a function to call, rather than a string to execute.
Then I'm guessing there is some issue with the movement of the hands you will need to adjust :).
codepen
I have a small Box2D thing (using box2dweb.js), but despite setting gravity to (0,0), and no forces/impulse being imparted on any objects, the only dynamic shape I have in the scene moves when I start the draw loop. I have no idea why O_O
Would anyone know why http://pomax.nihongoresources.com/downloads/temp/box2d/physics.html has the "ball" moving after hitting start?
The relevant bits of code are:
// shortcut aliasses
var d = Box2D.Dynamics,
v = Box2D.Common.Math,
s = Box2D.Collision.Shapes;
var ball,
gravity = new v.b2Vec2(0,0);
world = new d.b2World(gravity, true);
// setup the world box
var setupWorldBox = function(worldbox) {
var fixDef = new d.b2FixtureDef;
fixDef.density = 0;
fixDef.friction = 0;
fixDef.restitution = 0;
var bodyDef = new d.b2BodyDef;
bodyDef.type = d.b2Body.b2_staticBody;
bodyDef.position.x = worldbox.width/2;
bodyDef.position.y = worldbox.height/2;
fixDef.shape = new s.b2PolygonShape;
fixDef.shape.SetAsBox(worldbox.width/2, worldbox.height/2);
world.CreateBody(bodyDef).CreateFixture(fixDef);
}
// draw loop
var drawFrame = function() {
world.Step(1/60,10,10);
world.ClearForces();
ball.update(); // only updates the ball's DOM element position
requestAnimFrame(drawFrame);
};
// start the game
function start() {
var worldParent = document.querySelector("#world");
setupWorldBox(worldParent.getBoundingClientRect());
ball = new Ball(worldParent, document.querySelector(".ball"), d,v,s, world);
drawFrame();
}
For the main body, and the following code for defining the "ball":
var Ball = function(gamediv, element, d,v,s, world) {
var pbbox = gamediv.getBoundingClientRect();
var bbox = element.getBoundingClientRect();
this.el = element;
this.width = bbox.width;
this.height = bbox.height;
var bodyDef = new d.b2BodyDef;
bodyDef.type = d.b2Body.b2_dynamicBody;
var fixDef = new d.b2FixtureDef;
fixDef.shape = new s.b2PolygonShape;
fixDef.shape.SetAsBox(bbox.width/2, bbox.height/2);
bodyDef.position.x = bbox.left - pbbox.left;
bodyDef.position.y = bbox.top - pbbox.top;
this.b2 = world.CreateBody(bodyDef);
this.b2.CreateFixture(fixDef);
};
Ball.prototype = {
el: null,
b2: null,
width: 0, height: 0,
// Box2D position for the ball
center: function() { return this.b2.GetWorldCenter(); },
// update the DOM element based on Box2D position
update: function() {
var c = this.center();
this.el.style.left = c.x + "px";
this.el.style.top = c.y + "px";
}
};
Ball.prototype.constructor = Ball;
Neither of these bits of code introduces forces, as far as I can tell, so if anyone knows why the coordinates for the ball change anyway, please let me know, so I can turn this into something useful instead of something confusing =)
It turns out my code was creating a solid object as game world, which meant Box2D was trying to perform collision resolution because the "ball" was located inside another solid object.
The solution (based on http://box2d-js.sourceforge.net but with box2dweb API calls) was this:
// setup the world box
var setupWorldBox = function(worldbox) {
var worldAABB = new Box2D.Collision.b2AABB;
worldAABB.lowerBound.Set(0,0);
worldAABB.upperBound.Set(worldbox.width, worldbox.height);
var gravity = new b2Vec2(0, 0);
var doSleep = true;
var world = new b2World(worldAABB, gravity, doSleep);
[....]
}
I have the following code for Rope Joint (Box2dweb). The problem is that when I run the code in my browser nothing happens. Just a blank canvas. When I delete the lines defining the joints (the eight lines following //joints), it runs and I can see one static box and two dynamic boxes falling on the ground. Please help.
<html>
<head>
<title>Box2dWeb</title>
</head>
<body>
<canvas id="canvas" width="600" height="400" style="background-color:#333333;" ></canvas>
</body>
<script type="text/javascript" src="Box2dWeb-2.1.a.3.js"></script>
<script type="text/javascript">
var b2Vec2 = Box2D.Common.Math.b2Vec2
, b2BodyDef = Box2D.Dynamics.b2BodyDef
, b2Body = Box2D.Dynamics.b2Body
, b2FixtureDef = Box2D.Dynamics.b2FixtureDef
, b2World = Box2D.Dynamics.b2World
, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
, b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef
, b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef
, b2RopeJointDef = Box2D.Dynamics.Joints.b2RopeJointDef
, b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef
, b2DebugDraw = Box2D.Dynamics.b2DebugDraw
, b2Fixture = Box2D.Dynamics.b2Fixture
, b2AABB = Box2D.Collision.b2AABB
, b2Color = Box2D.Common.b2Color;
var world = new b2World(new b2Vec2(0,10), true);
//box1
var bodyDef = new b2BodyDef;
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.Set(8,4);
var fixDef = new b2FixtureDef;
fixDef.density = 10.0;
fixDef.friction = 0.5;
fixDef.restitution = .5;
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(.3,.3);
var box1 = world.CreateBody(bodyDef);
box1.CreateFixture(fixDef);
//box2
var bodyDef2 = new b2BodyDef;
bodyDef2.type = b2Body.b2_dynamicBody;
bodyDef2.position.Set(14,8);
var fixDef2 = new b2FixtureDef;
fixDef2.density = 10.0;
fixDef2.friction = 0.5;
fixDef2.restitution = .2;
fixDef2.shape = new b2PolygonShape;
fixDef2.shape.SetAsBox(.3,.3);
var box2 = world.CreateBody(bodyDef2);
box2.CreateFixture(fixDef2);
//box3 - static
var bodyDef3 = new b2BodyDef;
bodyDef3.type = b2Body.b2_staticBody;
bodyDef3.position.Set(11,8);
var fixDef3 = new b2FixtureDef;
fixDef3.friction = 0.5;
fixDef3.restitution = .2;
fixDef3.shape = new b2PolygonShape;
fixDef3.shape.SetAsBox(.3,.3);
var box3 = world.CreateBody(bodyDef3);
box3.CreateFixture(fixDef3);
//create a ground
var holderDef = new b2BodyDef;
holderDef.type = b2Body.b2_staticBody;
holderDef.position.Set(10, 14);
var fd = new b2FixtureDef;
fd.shape = new b2PolygonShape;
fd.shape.SetAsBox(10,1);
var ground = world.CreateBody(holderDef);
ground.CreateFixture(fd);
// joints
var ropeJointDef = new b2RopeJointDef();
ropeJointDef.bodyA = box1;
ropeJointDef.bodyB = box2;
ropeJointDef.localAnchorA = new b2Vec2(0,0);
ropeJointDef.localAnchorB = new b2Vec2(0,0);
ropeJointDef.maxLength = 6;
ropeJointDef.collideConnected = true;
world.CreateJoint(ropeJointDef);
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite ( document.getElementById ("canvas").getContext ("2d"));
debugDraw.SetDrawScale(30); //define scale
debugDraw.SetFillAlpha(0.3); //define transparency
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
window.setInterval(update,1000/60);
function update() {
world.Step(1 / 60, 10, 10);
world.DrawDebugData();
world.ClearForces();
};
</script>
</html>
I've added support for Rope Joints in Box2DWeb.
https://github.com/aaronfarr/box2Dweb
Hopefully you find it useful
The rope joint is a relatively new addition to Box2D. I'm guessing the javascript port you are using doesn't have it. At least, I can't find it anywhere here: http://code.google.com/p/box2dweb/source/browse/trunk/Box2D.js
How to draw circular segment using paper.js
I want to draw the circular segments as shown in the image. Each segment is independent and will later be used for interactive purposes.
I tried something like
//Temporary background circle
var keys = new Path.Circle(view.center, 130);
keys.fillColor = '#F1F1F1';
var home = new Path.Circle(view.center, 50);
home.fillColor = '#ee2a33';
var start = new Point(view.center.x, view.center.y-130);
var through = new Point(view.center.x-125, view.center.y-40);
var to = new Point(view.center.x-130, view.center.y);
var path = new Path.Arc(start, through, to);
path.strokeColor = 'black';
path.fillColor = 'green';
And it renders something like below
After several attempts, I came up with this. If anyone needs the same thing for whatever reason, maybe this will help.
//Creating keys
var arcOne = createSegment('#f1f1f1');
var arcTwo = createSegment('#666666');
var arcThree = createSegment('#333333');
var arcFour = createSegment('#666666');
var arcFive = createSegment('#999999');
var arcSix = createSegment('#000000');
arcTwo.rotate(-60, view.center);
arcThree.rotate(-120, view.center);
arcFour.rotate(60, view.center);
arcFive.rotate(120, view.center);
arcSix.rotate(180, view.center);
//center white
var center = new Path.Circle(view.center, 50);
center.fillColor = '#F1F1F1';
//Create Each segment
function createSegment(fillcolor){
//Segment One
var start = new Point(view.center.x, view.center.y-130);
var through = new Point(view.center.x-90, view.center.y-94);
var to = new Point(view.center.x-113, view.center.y-64);
var name = Path.Arc(start, through, to);
name.add(new Point(view.center.x, view.center.y));
name.add(new Point(view.center.x, view.center.y-130));
name.fillColor = fillcolor;
return name;
}