0

I created circle/rectangle with code from this answer.

Now, I'm trying to resize the width and height of body, when the browser resized.

    if ( window.matchMedia("(max-width: 700px)") ) { 
        Matter.Body.scale( circle.body, 1, 1); 
    } else { 
        Matter.Body.scale( circle.body, 1.5, 1.5); 
    }

This method is not working perfectly how i want. I tried to test with click function, so i can check how it works.

    btn1.addEventListener('click', (e) => {
        Matter.Body.scale( circle.body, 1, 1); 
    });
    btn2.addEventListener('click', (e) => {
        Matter.Body.scale( circle.body, .5, .5); 
    });

Example's result:

_ 1 is origin value
_ btn2 click -> 1 * .5 = .5
_ btn2 click -> .5 * .5 = .25
_ btn1 click -> .25 * 1 = .25
...

I found that the body(circle) is not resizing with origin value like css transform scale. It calculate(increase and decrease) with previous value.

I always control and set the BODY position (ex. Matter.Body.set(circle.body, "position", {x: xPos, y: yPos}); ) How can i use the Body scale like css-transform-scale? Or is there any way to set new width or height, so that body get new vertices?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Jun
  • 41
  • 1
  • 2
  • 9
  • Can you share your CSS properties? Is your element responsive? When you're using headless rendering, MJS is totally unaware of how its bodies are being rendered. Similarly, the DOM elements are totally unaware that they represent bodies in a physics engine, so it's up to you to keep the link consistent by modifying both at the same time, scaling the CSS when you scale the bodies. [This answer](https://stackoverflow.com/a/64960758/6243352) might help. – ggorlen Sep 21 '22 at 19:10
  • Please see [ask], then revise your post title to ask a clear, specific question in sentence format. Don't add tags. – isherwood Sep 21 '22 at 19:17

0 Answers0