Comments (2)
If you add a mouse constraint, it should be apparent that the collision shape is defined by the two circles, while the outline you're drawing is the vertices of the "box" composite. So, yes, you should be rendering the individual bodies to get the true collision shape.
Here's a complete, runnable example with the circles spaced further apart. You should be able to drag your mouse all the way through without triggering a collision between the mouse and the body. But if you grab the circles towards the ends, it'll collide.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
border: 1px solid black;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
</head>
<body>
<canvas></canvas>
<script>
const engine = Matter.Engine.create();
engine.gravity.y = 0;
const partA = Matter.Bodies.circle(50, 50, 10);
const partB = Matter.Bodies.circle(100, 50, 10);
const boxA = Matter.Body.create({parts: [partA, partB]});
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const mouseConstraint = Matter.MouseConstraint.create(engine, {
element: canvas,
});
Matter.Composite.add(engine.world, [boxA, mouseConstraint]);
const bodies = Matter.Composite.allBodies(engine.world);
let last = 0;
(function rerender(ts) {
const dt = Math.min(ts - last, 50);
last = ts;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const body of bodies) {
const {x, y} = body.vertices[0];
ctx.beginPath();
ctx.moveTo(x, y);
body.vertices.forEach(({x, y}) => ctx.lineTo(x, y));
ctx.lineTo(x, y);
ctx.stroke();
}
Matter.Engine.update(engine, dt);
requestAnimationFrame(rerender);
})();
</script>
</body>
</html>
from matter-js.
That makes sense. Thanks for the clarification!
from matter-js.
Related Issues (20)
- Body behaving erratically when pivot point is away from centre of mass (?) HOT 4
- How can set predefine path ? HOT 1
- Had a Fatal Error, reason unknown: vertexA is undefined HOT 4
- Objects are not repelled when restitution: 1, friction, frictionAir and frictionStatic is 0
- Mass/density has no effect on fall speed HOT 2
- Explode!
- Calculate velocity to jump to the target HOT 2
- Slingshot example with Keys and Constraint, instead of MouseConstraint and Mouse
- Render canvas object HOT 5
- Energy loss, despite air friction 0 HOT 1
- Rigid connection between two bodies
- the bodies do not collide and do not stop, but tremble
- Nothing showing in the matter.js canvas HOT 1
- `Body.create` ignores given velocity
- `Body.create` ignores `anglePrev`, `area`, `mass` and `inertia` when they are 0.
- Platformer character sticking to walls instead of sliding down HOT 5
- convert text to matter component like a bridge but Uncaught TypeError: Cannot read properties of undefined (reading 'max')
- support and documentation for vitejs please :( HOT 1
- Complete the rendering problem yourself
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from matter-js.