Search code examples
javascriptphysics-enginematter.js

JavaScript, Matter.js: Increase radius of circle

I have a small example script, where I have a circle (radius:40), which falls down to the ground. But when I increase its radius to 80 then, only the graphics of the circle seem to change, but not the physics:

<html>
<body></body>
</html>
<script src="matter.js"></script>
<script>
var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies
engine = Engine.create(document.body,{render:{options:{wireframes: false}}})
engine.render.options.background = "#7f7f7f"
ground = Bodies.rectangle(400,590,800,20,{isStatic:true})
World.add(engine.world, ground)
circle = Bodies.circle(400,20,40,{render:{fillStyle:"#0000ff"}})
World.add(engine.world, circle)
Engine.run(engine)
setTimeout(increaseRadius, 1500)

function increaseRadius(){
  circle.circleRadius = 80
}
</script>

enter image description here

Solution

  • My guess is that with your approach you also have to call World.add(engine.world, circle) again and possibly remove the previous circle with the smaller radius since the engine works with a copy of the circle. Alternatively, you might be able to call the scale method on the body: http://brm.io/matter-js-docs/classes/Body.html#method_scale