[Question][Help] Problem in Placing Stuff in Box2D

[danielx-art]

Hello people, Just to introduce the situation, I am a physics teacher and educator and I am also an aspiring artist, so you can imagine the power I felt in my hands when I first discovered Processing from Shiffman's YT channel and then I the videos on Box2D.

So in my skecth I have a gas container with a piston (to show the kinetic theory of gases) and this container position is determined by the Vec2 pos_pote. The problem is that when I try to place it elsewhere from the middle of the scene (width/2, height/2), the rectangles are draw properly but the fixtures of Box2D become a little bit shifted. The farther from the center of the screen pos_pote is, the more shifted the box2D fixtures become. I've been trying to debugg this for over three days, and I still don't know what is going on. Well, see for yourself:

kinetic_gas.zip _[click on the screen to place particles and notice the collision hitboxes are all shifted to the right from the containers perspective, in this case, pospote = (width/2+100, height/2), so things are misplaced only on the x axis.]

I did not found anyone on the web with the same problem, so I'm desperate. If anyone could help me it would be totally awesome. Thanks very much, Daniel.

[RedHenDev]

I wonder if you can calculate the scalar involved and code in a custom adjustment. E.g. Access the Box2D hitbox position-x values (relative to centre of screen) and multiply them by the scalar you calculate.

Not the prettiest fix.

Sorry I can't be more specific -- I'm only familiar with matter.js physics engine with p5.js. (BTW -- I'll have a wrapper class ready soon for this, so if you can't find fix with Box2D, I could share this wrapper with you -- which will allow you to very easily create the kinds of Physics examples you're doing.)

P.s. Co-incidentally I've had this problem with Matter.js, but only for irregular shapes -- the vertices that I pass in do not match up with collision-detected vertices -- and where the error increases depending on how far from centre of screen. (If I find solution, will pass on -- might be useful for you too!)

Good luck!

[danielx-art]

Thanks for the response! I tried calculating the scalarPixelsToWorld relative to the center of the screen and the same problem continued, nothing changed; then I tried scaling the same way but variable by variable amd then adding and/or subtracting properly and then passing that to the Shape and... nothing changed and the problem is still on. I think there is probably a problem with my logic in positioning these things but I just dont know why and where. Anyway, thank you very much for the response and even though It didnt work, I did the test and learned it. It would be great as well if you kept working on your wrapper. I usually work with regular Processing Java instead of p5 because p5 animations are so laggy and slow in my browser that it discourages me.

[danielx-art]

Finally found the problem!!! I discovered that the coordinates of the shapes must be relative to the position of the body definition (bodyDef.position) and not global! I'm feeling stupid now because everywhere I looked no one bothered to tell me this, people just said "local" coordinates but I didnt understand they meant "relative to the definition", I thought they were trying to say box2d World coordinates and not pixels. Anyway, pass the word ahead. Finally! Its been a week! @RedHenDev check if it is not the same thing happening to you.

[RedHenDev]

Congrats! Genius!

You're right: I think it must be a similar problem -- in matter.js irregular sets of vertices are drawn relative to central pos of shape...so maybe I need to think about global vs local then....will try out!

Thanks for feedback @metacarpo10

[RedHenDev]

@metacarpo10 Hello! Thought I'd share my wrapper with you -- it's now at 'demo/useable' stage :)

CodePen deployment: http://codepen.io/RedHenDev/full/gWBmLa/

Got the fundamentals working for the wrapper -- with a demo that uses another class (the 'antBot' object), which in turn can make use of the wrapper for adding physics to its characters.

Next steps are to i) create a simple editor that can be used to create physics etc. demos; ii) make tutorials and documentation for how to use the wrapper.

Enjoy!

P.s. let me know if you'd be interested in using this -- and would like any additional features :)

[danielx-art]

Thanks a lot! I am enrolled in another project right now but ensure you I will take a look as soon as I can, I will probably contact you If I cant manage to use the wrapper or If I have any suggestions. Thanks a lot again!