javascript - Using KineticJS along with box2dweb -

javascript - Using KineticJS along with box2dweb -

how utilize kineticjs along box2dweb can have collision detecting possible? like, how can set circular boundary around image rendered through kineticjs , apply physics through box2dweb?

are there tutorials on or codes can help me? or there efficient way can collision detection kineticjs itself?

what is:

set box2d “world” – think of world room on earth (or other planet)

add “bodies” world – bodies moving or stationary objects behave according physics have assigned them.

for each box2d body, assign kineticjs “skin” – skins “pretty” kineticjs shape objects drawn on canvas kineticjs. example, in game skin might soccer ball.

put box2d world in motion , hear box2d “tick” event – tick event fired when box2d has figured out physics occurred during specified length of time. @ point box2d knows position , rotation of each box2d body in box2d world.

in box2d tick event, check position/rotation of each box2d body , draw kineticjs skin @ same position/rotation @ box2dbody.

there illustration at: http://www.luxanimals.com/blog/article/combining_easel_box2d

this illustration uses easeljs draw on canvas, convertion kineticjs library straightforward – exact same concepts apply.

[edited give additional information]

also, if don't need physics in box2d, here simple 2-circle collision test using kineticjs.

function circlesarecolliding(circle1,circle2){ var dx = circle2.getx() - circle1.getx(); var dy = circle2.gety() - circle1.gety(); if( math.sqrt( dx*dx + dy*dy ) <= ( circle1.getradius() + circle2.getradius() ) { homecoming true; } homecoming false; }

javascript html5 kineticjs box2dweb