Creating a Car with Matter.js
Hi there 👋🏾. I'm a software engineer that enjoys building stuff and talking about them. I also tinker a bit with hardware and robotics using Arduino and ROS.
var {Engine, Render, World, Runner, Bodies, Body, Constraint, MouseConstraint, Mouse} = Matter;
var engine = Engine.create(),
world = engine.world;
var render = Render.create({
element: document.body,
engine:engine,
options:{width:350,
height:400,
wireframes:false,
showAngleIndicator:true
},
})
Render.run(render);
Engine.run(engine);
World.add(world, [Bodies.rectangle(175, 390, 350, 20, {
isStatic:true, render:{fillStyle:'#ee872a'
}
})
]);
let mouse = Mouse.create(render.canvas);
let mouseConstraint = MouseConstraint.create(engine, {
mouse:mouse,
constraint:{
stiffness:0.4,
render:{visible:false}
}
})
let car_body = Bodies.rectangle(200, 350, 160, 70, {chamfer:20});
let tire1 = Bodies.circle(220, 350, 30);
let tire2 = Bodies.circle(240, 350, 30);
car_body.collisionFilter.group = -1;
tire1.collisionFilter.group = -1;
tire2.collisionFilter.group = -1;
let constraint1 = Constraint.create({
bodyA:tire1,
bodyB:car_body,
length:0,
pointB:{x:-40, y:20}
});
let constraint2 = Constraint.create({
bodyA:tire2,
bodyB:car_body,
length:0,
pointB:{x:40, y:20}
});
World.add(world, [car_body, tire1, tire2, constraint1, constraint2, mouseConstraint])
