Israel
WBWeb Bae
•Created by Israel on 11/22/2023 in #❓︱questions
Matter.js Constraints
I've been trying to work out constraints in matter.js. For whatever reason I can't get them to work on my own and I can't find any examples on the internet that don't come with a heap of other code attached.
Right now I have a body that follows to the mouse so that wherever the cursor goes, it will collide with other bodies. My idea is to have the images on my website bounce out of the way a bit when I move the mouse past them. And I think this should be possible by adding a simple constraint between a body with the image on it and a static body to anchor it to the page.
all that shouldn't be too difficult if I can just get constraints to happen though 😤
https://brm.io/matter-js/demo/#constraints
4 replies
WBWeb Bae
•Created by Israel on 10/28/2023 in #❓︱questions
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
2 replies
WBWeb Bae
•Created by Israel on 10/20/2023 in #❓︱questions
Hollow Matter.js SVG
Hey @Web Bae I followed through your "Matter.js with Responsive SVG Bodies" tutorial, thanks by the way. In it you noted that you didn't get SVGs with holes in them to work like the letter O.
I'm just wondering, is there any way to get this to work? I haven't really found anyone on the internet addressing it. Spent the past couple of hours trying to think of ways around it to no avail.
Thanks :)))
6 replies
WBWeb Bae
•Created by Israel on 10/12/2023 in #❓︱questions
Matter.js matter-wrap plugin
I'm currently working on a portfolio for web design/development work and I want to modify the template from the "Better Boilerplate for Matter.js" video with the matter-wrap plugin to create a looping canvas (example provided in the documentation link).
Basically I want walls on the top and bottom of the screen that objects can't pass through, but to make it so that objects that float off the right side appear on the left and vice versa.
Thanks in advance :)))
https://github.com/liabru/matter-wrap/tree/master
@Web Bae
P.S. I've noticed that if thrown hard enough Matter.js objects can clip through walls and disappear from the screen.... is this something that is fixable or just the way things are with physics engines.
4 replies