box2d & canvas and that's all -
my goal draw physics bodies without createjs, in other terms want draw canvas api. here link exellent work box2dweb , createjs.
i want without createjs file . can draw blue line, transform in physics red line, delete blue line.
my code doesn't work if draw blue line. make work have destroy physics body.
i can draw 1 line (shape) want able draw unlimited number of shapes.
i'm sure possible simple way.
the createjs code: http://jsdo.it/masasgames/ozhb
var b2vec2 = box2d.common.math.b2vec2; var b2bodydef = box2d.dynamics.b2bodydef; var b2body = box2d.dynamics.b2body; var b2fixturedef = box2d.dynamics.b2fixturedef; var b2fixture = box2d.dynamics.b2fixture; var b2world = box2d.dynamics.b2world; var b2polygonshape = box2d.collision.shapes.b2polygonshape; var b2circleshape = box2d.collision.shapes.b2circleshape; var b2debugdraw = box2d.dynamics.b2debugdraw; var stage = new createjs.stage("canvas"); var world = new b2world(new b2vec2(0, 5), true); var shape; var drawing = false; var previousmousex = 0; var previousmousey = 0; var u = new b2vec2(0, 0); var anchor = []; var bodies = []; var d = 1.0; function init() { if (createjs.touch.issupported()) { createjs.touch.enable(stage); } var = new createjs.shape(); back.graphics.beginfill("#ffffff"); back.graphics.drawrect(0, 0, 450, 450); stage.addchild(back); stage.addeventlistener("mousedown", onmousedown); stage.addeventlistener("pressup", onmouseup); createjs.ticker.timingmode = createjs.ticker.raf; createjs.ticker.addeventlistener("tick", tick); //box2d var groundfixdef = new b2fixturedef(); groundfixdef.density = 1.0; groundfixdef.friction = 0.5; groundfixdef.restitution = 0.2; groundfixdef.shape = new b2polygonshape(); groundfixdef.shape.setasbox(2.325, 0.1); var grounddef = new b2bodydef(); grounddef.type = b2body.b2_staticbody; grounddef.position.set(2.25, 4.6); world.createbody(grounddef).createfixture(groundfixdef); grounddef.position.set(2.25, -0.1); world.createbody(grounddef).createfixture(groundfixdef); groundfixdef.shape.setasbox(0.1, 2.25); grounddef.position.set(-0.1, 2.25); world.createbody(grounddef).createfixture(groundfixdef); grounddef.position.set(4.6, 2.25); world.createbody(grounddef).createfixture(groundfixdef); var debugdraw = new b2debugdraw(); debugdraw.setsprite(document.getelementbyid("canvas").getcontext("2d")); debugdraw.setdrawscale(100); debugdraw.setfillalpha(0.3); debugdraw.setlinethickness(1.0); debugdraw.setflags(b2debugdraw.e_shapebit | b2debugdraw.e_jointbit); world.setdebugdraw(debugdraw); } function tick() { if (drawing) { shape.graphics.setstrokestyle(5, 1, 1); shape.graphics.beginstroke("#000000"); shape.graphics.moveto(previousmousex, previousmousey); shape.graphics.lineto(stage.mousex, stage.mousey); var p = new b2vec2(0, 0); p.x = stage.mousex - previousmousex; p.y = stage.mousey - previousmousey; if (vecmagnitude(p) !== 0) { if (math.cos(10 / 180 * math.pi) > vecangle(p, u)) { setanchor(previousmousex, previousmousey); } u.x = p.x; u.y = p.y; } previousmousex = stage.mousex; previousmousey = stage.mousey; } (var = 0; < bodies.length; i++) { var body = bodies[i]; var line = body.getuserdata(); var position = body.getposition(); line.x = position.x * 100; line.y = position.y * 100; line.rotation = body.getangle() * 180 / math.pi; } world.step(1 / 60, 10, 10); //world.drawdebugdata(); world.clearforces(); stage.update(); } function vecmagnitude(v) { return math.sqrt(math.pow(v.x, 2) + math.pow(v.y, 2)); } function vecangle(v1, v2) { return (v1.x * v2.x + v1.y * v2.y) / (vecmagnitude(v1) * vecmagnitude(v2)); } function onmousedown(e) { if (!drawing) { shape = new createjs.shape(); shape.regx = 0; shape.regy = 0; stage.addchild(shape); previousmousex = stage.mousex; previousmousey = stage.mousey; anchor = []; setanchor(stage.mousex, stage.mousey); drawing = true; } } function onmouseup() { drawing = false; setanchor(stage.mousex, stage.mousey); createbody(); } function setanchor(x, y) { anchor.push(new b2vec2(x, y)); } function createbody() { var boxdef = new b2bodydef(); boxdef.type = b2body.b2_dynamicbody; boxdef.position.set(0, 0); var body = world.createbody(boxdef); (var = 0; < anchor.length - 1; i++) { var position = new b2vec2((anchor[i].x + anchor[i + 1].x) / 200, (anchor[i] .y + anchor[i + 1].y) / 200); var angle = math.atan2(anchor[i].y - anchor[i + 1].y, anchor[i].x - anchor[ + 1].x); var l = vecmagnitude(new b2vec2(anchor[i].x - anchor[i + 1].x, anchor[i].y - anchor[i + 1].y)) / 100; if (anchor.length == 2 && l < 0.05) { l = 0.05; } var boxfixdef = new b2fixturedef(); boxfixdef.density = d * l * 0.05; boxfixdef.friction = 0.5; boxfixdef.restitution = 0.1; boxfixdef.shape = new b2polygonshape(); boxfixdef.shape.setasorientedbox(l / 2, 0.025, position, angle); body.createfixture(boxfixdef); } body.setuserdata(shape); bodies.push(body); } init(); here working code 1 shape: http://jsdo.it/licart/qoms
var b2vec2 = box2d.common.math.b2vec2; var b2bodydef = box2d.dynamics.b2bodydef; var b2body = box2d.dynamics.b2body; var b2fixturedef = box2d.dynamics.b2fixturedef; var b2fixture = box2d.dynamics.b2fixture; var b2world = box2d.dynamics.b2world; var b2polygonshape = box2d.collision.shapes.b2polygonshape; var b2circleshape = box2d.collision.shapes.b2circleshape; var b2debugdraw = box2d.dynamics.b2debugdraw; var shape; var dessin = false; var drawing = false; var scale = 100; var ptm = 100; var previousmousex = 0; var previousmousey = 0; var u = new b2vec2(0, 0); var anchor = []; var bodies = []; var d = 1.0; var world = new b2world(new b2vec2(0, 9.8), true); var canvas = document.getelementbyid("canvas"); var context = canvas.getcontext("2d"); canvaswidth = 800, canvasheight = 400; var mousex = 0; var mousey = 0; var mousedown; var debugdraw = new b2debugdraw(); debugdraw.setsprite(document.getelementbyid("canvas").getcontext("2d")); debugdraw.setdrawscale(100); debugdraw.setfillalpha(0); debugdraw.setlinethickness(0); debugdraw.setflags(b2debugdraw.e_shapebit); world.setdebugdraw(debugdraw); //box2d var groundfixdef = new b2fixturedef(); groundfixdef.shape = new b2polygonshape(); groundfixdef.shape.setasbox(2.325, 0.1); var grounddef = new b2bodydef(); grounddef.type = b2body.b2_staticbody; grounddef.position.set(2.25, 3.6); var sol = world.createbody(grounddef); sol.createfixture(groundfixdef); sol.setuserdata("rectangle"); canvas.addeventlistener('mousemove', function(e) { mousex = e.pagex - this.offsetleft; mousey = e.pagey - this.offsettop; if (mousedown) { context.beginpath(); context.moveto(previousmousex, previousmousey); context.linewidth = 5; context.linejoin = 'round'; context.strokestyle = 'blue'; context.lineto(mousex, mousey); context.stroke(); } }, false); function tick() { world.step(1 / 30, 8, 2); if (drawing) { var p = new b2vec2(0, 0); p.x = mousex - previousmousex; p.y = mousey - previousmousey; if (vecmagnitude(p) !== 0) { if (math.cos(10 / 180 * math.pi) > vecangle(p, u)) { setanchor(previousmousex, previousmousey); } u.x = p.x; u.y = p.y; } previousmousex = mousex, previousmousey = mousey; } (body = world.getbodylist(); body; body = body.getnext()) { var x = body.getposition().x; var y = body.getposition().y; var angle = body.getangle(); switch (body.getuserdata()) { case "rectangle": var x = body.getfixturelist().getshape().getvertices()[1].x - body.getfixturelist() .getshape().getvertices()[0].x; var y = body.getfixturelist().getshape().getvertices()[2].y - body.getfixturelist() .getshape().getvertices()[1].y; context.save(); context.translate(x * ptm, y * ptm); context.rotate(angle); context.translate(-x * ptm, -y * ptm); context.linewidth = 5; context.strokestyle = "pink"; context.strokerect(((x * ptm) - (x * ptm / 2)), ((y * ptm) - (y * ptm / 2)), x * ptm, y * ptm); context.restore(); break; case shape: context.save(); context.clearrect(0, 0, canvas.width, canvas.height); context.beginpath(); context.translate(x * 100, y * 100); context.rotate(angle); context.strokestyle = "red"; context.linewidth = 5; (var = 0; < anchor.length - 1; i++) { var p1 = anchor[i]; var p2 = anchor[i + 1]; context.moveto(p1.x, p1.y); context.lineto(p2.x, p2.y); } context.stroke(); context.restore(); break; } } world.clearforces(); } window.setinterval(tick, 1000 / 30); canvas.addeventlistener('mousedown', function(e) { dog_eraseline(); mousedown = true if (!drawing) { previousmousex = mousex; previousmousey = mousey; anchor = []; setanchor(mousex, mousey); drawing = true; } }, false); canvas.addeventlistener('mouseup', function() { mousedown = false; drawing = false; setanchor(mousex, mousey); createbody(); }, false); function dog_eraseline() { (body = world.getbodylist(); body; body = body.getnext()) { if (body.getuserdata() == shape) world.destroybody(body); }; } function setanchor(x, y) { anchor.push(new b2vec2(x, y)); } function vecmagnitude(v) { return math.sqrt(math.pow(v.x, 2) + math.pow(v.y, 2)); } function vecangle(v1, v2) { return (v1.x * v2.x + v1.y * v2.y) / (vecmagnitude(v1) * vecmagnitude(v2)); } function createbody() { var boxdef = new b2bodydef(); boxdef.type = b2body.b2_dynamicbody; boxdef.position.set(0, 0); var body = world.createbody(boxdef); (var = 0; < anchor.length - 1; i++) { var position = new b2vec2((anchor[i].x + anchor[i + 1].x) / 200, (anchor[ i].y + anchor[i + 1].y) / 200); var angle = math.atan2(anchor[i].y - anchor[i + 1].y, anchor[i].x - anchor[i + 1].x); var l = vecmagnitude(new b2vec2(anchor[i].x - anchor[i + 1].x, anchor[i] .y - anchor[i + 1].y)) / 100; if (anchor.length == 2 && l < 0.05) { l = 0.05; } var boxfixdef = new b2fixturedef(); boxfixdef.density = d * l * 0.05; boxfixdef.friction = 0.5; boxfixdef.restitution = 0.1; boxfixdef.shape = new b2polygonshape(); boxfixdef.shape.setasorientedbox(l / 2, 0.025, position, angle); body.createfixture(boxfixdef); } body.setuserdata(shape); bodies.push(body); }
nobody give me answer. i've found solution myself. , share it!
include draw_world() in tick , done:
here function @author j barker & p kirven
look @ http://jsdo.it/licart/2y7s
Comments
Post a Comment