Comments (6)
I think the issue is that you need to pass your new rect.vertices
through the Matter.Vertices.create
method afterwards see the docs.
This is because each vertex object, as well as x
and y
, needs some additional references which are added by Matter.Vertices.create
.
So try something like
rect.vertices = [
{x: startPos.x, y: startPos.y},
{x: endPos.x, y: startPos.y},
{x: endPos.x, y: endPos.y},
{x: startPos.x, y: endPos.y},
];
Matter.Vertices.create(rect.vertices, rect);
EDIT: seems I forgot to add a return
to Matter.Vertices.create
, so for now it actually just works in-place on the array, I'll add a return value soon
Also, I just realised there are a lot more things you need to do since you're doing this after creation.
The best way is to copy the code for the method Matter.Body.scale.
This isn't very clean so I'll look at creating a new method for setting body vertices
from matter-js.
Thank you very much! I was wondering what all the vertices methods were for. I will continue testing and see if I can get something half-decent.
EDIT:
Fiddle
By adding the Matter.Vertices.create
method and using the code from scale, the exception is fixed, but the body has many oddities. I assume this has something to do with the fact that the body's position is not at the center? (I'm not even sure where it is)
...
...
rect.vertices = [
{x: startPos.x, y: startPos.y},
{x: (endPos.x), y: startPos.y},
{x: (endPos.x), y: (endPos.y)},
{x: startPos.x, y: (endPos.y)},
];
...
...
BodyUpdate(rect);
Engine.render(engine);
function BodyUpdate(body){
Vertices.create(body.vertices, body);
// update properties
body.axes = Axes.fromVertices(body.vertices);
body.area = Vertices.area(body.vertices);
body.mass = body.density * body.area;
body.inverseMass = 1 / body.mass;
// update inertia (requires vertices to be at origin)
Vertices.translate(body.vertices, { x: -body.position.x, y: -body.position.y });
body.inertia = Vertices.inertia(body.vertices, body.mass);
body.inverseInertia = 1 / body.inertia;
Vertices.translate(body.vertices, { x: body.position.x, y: body.position.y });
// update bounds
Bounds.update(body.bounds, body.vertices, body.velocity);
}
...
...
from matter-js.
If you enable the render option showPositions
you can see the body position is wrong (its still at (0,0)).
I think if you use Matter.Vertices.centre
to find the centroid of the new vertices, then set the body.position.x
and body.position.y
values equal to the centroid (and the same for body.positionPrev
vector too) it may be part of the solution. Make sure you copy the values for x
and y
so you don't break any references to body.position
!
from matter-js.
That seems to've done the trick! Except adding objects during the simulation can be a bit strange with the inertia, but I don't plan on adding objects during the simulation anyhow.
I'm testing Box2Dweb with my project, but it's not going that well, so I'll probably still stick with this.
Thank you very much!
from matter-js.
Great!
Except adding objects during the simulation can be a bit strange with the inertia, but I don't plan on adding objects during the simulation anyhow.
I think that's actually because of the MouseConstraint - you may want to temporarily remove it from the world on the mousedown
event and adding it back on the mouseup
.
This thread has brought up some good ideas I'll implement make this sort of thing easier. I also think I'll add some enabled
flags so you can easier disable things but for now you'll need to do the above.
Cheers
from matter-js.
Thank you very much! This is still easier than Box2D's method >_>
from matter-js.
Related Issues (20)
- Trying to change seed, to take control of deterministic behavior
- How to suppress body tremors? HOT 2
- Why does the attractor only work on one of the two BODYs? HOT 1
- Using compound bodies with Bodies.fromVertices does not work it just shows a filled in shape. HOT 1
- Why don't bodies sometimes collide? HOT 1
- Constraints with distance limits (e.g. for ropes)
- Why might there be such an error? HOT 1
- Simple Polygon Physics Issues HOT 1
- How to add project to the Wiki gallery ?
- How to scale the world? HOT 2
- [Phaser 3] Position of matter sprite's image not correct in container HOT 1
- loss of sprite quality on mobile HOT 1
- `Composite.translate` didn't move the bodies included
- Create Matter.Bodies.fromVertices with rounded vertices
- MouseConstraint preventing clicks on buttons on mobile. HOT 2
- Vulnerability related to the formula of universal gravitation
- Body with high mass and low inertia behaves erratically
- The startdrag event of dragging a body does not trigger after losing focus.
- How to move camera in matter.js world?
- How to use matter.js on a web worker?
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.