Responsive SVG bodies of different widths (Matter.js)
I'm following along with the "Matter.js with Responsive SVG Bodies" tutorial but I want to have a number of different bodies all with different sizes (rather than just a constant width of 100px) to respond to the viewport.
It presumably shouldn't be too hard to achieve but I'm finding the Matter.js documentation impossible to parse (I am still a beginner to JS in general).
Currently, to get multiple different bodies and have them spawn in different locations, I have a for loop that creates each body one by one, inserting the correct x and y position each time — one of the solutions I've been playing around with similarly involves adding two extra variables for SVG width and height, manually filling those out, and then working the scaling out from there. Preferably though, it would be best to get the width with body.bounds for each SVG just as in the tutorial.
Anyway, haven't been able to get either to work for me.
I'll attach a file with the function I'm working on, I can also send the whole project if that helps but will have to clean it up a bit first haha.
Thanks so much in advance
1 Reply
Nevermind, I figured it out! The solution was as simple as adding
let scaleFactor = matterContainer.clientHeight * 0.3 / 260;
Body.scale(thispath, scaleFactor, scaleFactor);
right before adding the bodies into the world.
You can also do this right inside of the body after Vertices.scale, but in my experience this caused some artifacts that the exterior scale didn't